Creación y uso de iconos con Omnis Studio (Icon Editor)

Creación de nuevos iconos

1. Abra “Omnis Studio Developer”.
2. Abra una librería.
3. Haga doble clic sobre la librería desde el “Studio Browser” (F2).
4. Haga doble clic sobre la carpeta “System CLasses”.
5. Haga doble clic (o “checkout” si trabaja con VCS) sobre la clase #ICONS. Esto causará la apertura de la ventana “Icon Editor”. Si se trata de una nueva librería, la clase #ICONS estará vacía.
6. Haga clic sobre “New Icon Page..” para crear una nueva página de iconos.
7. Asigne un nombre para la nueva página y seleccione el tamaño de los iconos que desea crear en ella.
8. Si desea crear iconos transparentes, seleccione “Solid & Alpha radio button”. Nota: Si selecciona “Solid and Alpha” se creará un icono para cada versión. El primer icono será la versión “Solid”, el segundo icono será la versión “Alpha”. Se puede pasar de una versión a otra haciendo clic sobre el icono “A” (mayúscula/minúscula) situado la derecha del “Icons Editor”. No obstante, siempre podrá añadir la versión “Alpha” de sus iconos mediante hacer clic sobre el botón “Page Options” y después sobre “Alpha copy of 24 bit”.
9. Haga clic en el botón “Create”.
10. Copie una imagen al portapapeles (Ctrl + c). La imagen podrá proceder de herramientas como Photoshop, Illustrator, etc.
11. Haga clic sobre cualquiera de los 20 espacios vacíos de la parte superior derecha.
12. Haga clic sobre la imagen 48x48 situada en la parte inferior izquierda.
13. Pegue la imagen desde el portapapeles (Ctrl + v). Esto asignará un tamaño de 48x48 píxeles.
14. Repita este paso para los tamaños 32x32 y 16x16 (si es necesario).
15. Si ha creado una versión “Alpha” de los iconos, haga clic sobre la opción situada a la izquierda para cambiar a versión “Alpha” y repita la acción de copiar y pegar para los diferentes tamaños de iconos.
16. Haga clic sobre el botón “Set Icon ID” y a continuación introduzca un identificador único.
17. Para editar un icono ya existente, selecciónelo, seleccione después el tamaño y haga clic sobre el botón “Edit Icon”.

Consejo: Si necesita crear iconos grandes y pequeños, comience por el más grande. Una vez satisfecho con su aspecto, cree las versiones más pequeñas mediante la acción de copiar y pegar dese éste mismo icono.

 

Creación de iconos transparentes

Para crear un icono transparente a partir de su versión “Solid”:

1. Seleccione el icono desde el “Icon Editor”.
2. Compruebe que el botón A (Solid/Alpha) esté en modo “Solid”.
3. Haga clic sobre el botón “Page Options”.
4. Compruebe que esté seleccionada la opción “Substitute Transparent Color”.
5. Haga clic sobre el botón “Update Page Settings”, para que los cambios surtan efecto.
6. Haga clic sobre el botón “Edit Icon”.
7. Ahora podremos ver sobre la paleta de colores, un cuadro de color verde que contiene la letra "T". Esto corresponde al color transparente. Haga clic sobre el para seleccionarlo.
8. Seleccione la función “paint” (por ejemplo).
9. Haga clic sobre las áreas que desee hacer transparentes.
10. Haga clic sobre el botón “Update” cuando haya terminado.

Para crear un icono opaco o totalmente transparente, desde su versión “Alpha”:

1. Seleccione el icono desde el “Icon Editor”.
2. Compruebe que el botón A (Solid/Alpha) esté en modo “Alpha”.
3. Use la herramienta “eyedropper” para seleccionar el color que desea hacer transparente u opaco.
4. Use la barra “Alpha slider” situada al lado derecho, para modificar el grado de transparencia. Cuanto más hacia la izquierda más transparente.
5. Seleccione la función “paint” (por ejemplo).
6. Haga clic sobre las áreas que desee hacer transparentes u opacas.
7. Haga clic sobre el botón “Update” cuando haya terminado. Nota: Los cambios serán visibles sólo después de cerrar la ventana del “Icon Editor”.

Uso de iconos con Omnis Studio

Existen diversos componentes capaces de mostrar iconos. En el ejemplo siguiente usaremos el denominado “OmnisIcn Control” (en nuestro ejemplo denominado “icon1”). Para asignar un icono simplemente indicamos su identificados único $::iconid (en nuestro ejemplo 1021) y el tamaño deseado (en nuestro ejemplo 32x32 píxeles).

Do $cinst.$objs.icon1.$::iconid.$assign(k32x32+1021)

 

Preguntas frecuentes

¿Donde se almacenan los iconos?

Omnis Studio, guarda los iconos en dos archivos “.df1”. El “usperic.df1” y el “omnispic.df1” situados en la carpeta “icons” situada a su vez en el directorio raíz de la instalación Omnis.

Precaución: Nunca edite los iconos de archivo “omnispic.df1”, ya que los cambios se sobrescribirán con cada actualización de Omnis Studio.

¿Dónde está la clase Omnis creada para contener iconos?

La clase #ICONS se guarda sobre carpeta “System Classes” de cada librería.  Cada una de ellas tiene una propiedad denominada “$iconlib”, que le permite hacer uso de clase #ICONS que usted prefiera. De este modo podrá disponer de un repositorio único para todas sus librerías, evitando la necesidad de copiar (o actualizar) la clase #ICONS una y otra vez. También podrá hacer uso de VCS para crear clases comunes.

¿Cuáles son las propiedades de un icono?

Los iconos poseen un identificador único “icon number”. Además, pueden tener hasta tres diferentes tamaños: 16x16, 32x32 y 48x48.

Ejemplo: Do myIconRef.$iconid.$assign(k32x32+102)

Una práctica habitual es usar una única librería a modo de repositorio que contenga todos los iconos a usar en los diferentes proyectos.

Gráficas combinadas con Graph2

Una particularidad del componente Graph2, es la de poder trabajar con capas, lo cual nos permite (por ejemplo) combinar dos o más tipos de gráficas en una misma muestra de datos, tal y como se puede ver a continuación:

 

Sin embargo, la incorporación de sucesivas capas en una misma gráfica, (según se puede desprender tras una rápida lectura del manual para el componente Graph2) parece supeditado al uso del evento evPreLayout, por lo que (al menos en mi caso) se me escapaba el modo de componer éste tipo de gráficas cuando queremos usarlas en informes impresos y no para su representación en pantalla.

Hasta que una lectura más detenida del manual antes citado y en su página 39, me hizo tropezar con el párrafo que cito textualmente a continuación: "When using an object variable based on the Graph2 component you can use the $prelayout() method in the object to add layers"

De esto se desprende que cuando hacemos uso del componente Graph2 en su modo "no-visual", es decir asignado a una variable de tipo objeto, se lleva a cabo la invocación de un posible método $prelayout, desde donde poder añadir capas y cualesquiera otras alteraciones que deseemos sobre la gráfica en composición, como por ejemplo, cambiar el grosor predefinido para la líneas que componen la segunda y tercera capa.

Adjunto una librería que ilustra con detalle lo explicado en éste artículo. No he encontrado mucha información sobre esto en los foros de programación con Omnis Studio, por lo que creo que compartir ésta experiencia con vosotros puede resultar útil. Espero vuestros comentarios al respecto, saludos cordiales.

Librería ejemplo Graph2

Omnis Studio 8 y la localización con jsClient

En ésta entrada nos ocuparemos de mencionar un cambio que se ha producido desde la versión 6.1 de Omnis y la localización a otros idiomas de los mensajes que de forma nativa puede recibir el usuario en su navegador, cuando desarrollamos aplicaciones con jsClient.

En versiones anteriores de Omnis Studio, hemos estado haciendo uso del fichero "Studio.stb", con éste propósito, pero desde la versión 6.1 en adelante ha dejado de ser operativo, en nuestros desarrollos para la Web, decir que para otros entornos todo sigue siendo igual.

Es decir, "Localization" y "StringTables" siguen funcionando como antes, pero para los mensajes que se envían desde de núcleo del cliente JavaScript, se necesita hacer otra cosa, decir que aparece parcialmente documentado en el manual "Omnis_WebDev.pdf", bajo el apartado "Localization for the JavaScript Client" en la página 187, pero desafortunadamente, resulta difícil de entender y la información es incompleta (Omnis Software a prometido corregir esto pronto).

En mi caso tropecé con ésta "falta de información" al tratar de localizar al castellano el mensaje que Omnis muestra sobre el navegador del usuario, cuando el tiempo de conexión a expirado, el mensaje en ingles dice: "You have been disconnected. Refresh or restart application to reconnect"

Centrándonos en la localización para éste texto, mostraremos las dos opciones de que disponemos para resolverlo:

1) Agregar las siguientes líneas al archivo HTM inicial (marcamos en rojo las líneas que ya existen en el fichero:

<!-- The following placeholder is replaced with either a script tag for the remote task string table or nothing when there is no remote task string table -->

jOmnisStrings.en = {"disconnected":"You have been disconnected. Refresh or restart application to reconnect" };
jOmnisStrings.es = {"disconnected":"Ha sido desconectado. Refresque el navegador o vuelva a cargar la aplicación para conectarse de nuevo" };

<title></title>
</head>

Sin embargo, esto puede resultar algo incómodo si son muchas los textos y el número de idiomas a traducir (Existen más de 30 textos de error), por lo que se recomienda hacer lo siguiente:

2) En la carpeta o directorio HTML del raiz de instalación Omnis, crear una nueva carpeta a la que denominaremos "strings" y agregar a ella un archivo denominado "Error_Strings.js" con el siguiente contenido:

jOmnisStrings.en = {"disconnected":"You have been disconnected. Refresh or restart application to reconnect"};
jOmnisStrings.es = {"disconnected":"Ha sido desconectado. Refresque el navegador o vuelva a cargar la aplicación para conectarse de nuevo.(es_es)"};

Ahora necesitaremos modificar el archivo HTML indicado en el punto 1 (o el jsctemp.htm) para que lea como sigue:

<!-- The following placeholder is replaced with either a script tag for the remote task string table or nothing when there is no remote task string table -->

<script type="text/javascript" src="strings/Error_Strings.js"></script>

<title></title>
</head>

Obviamente, tanto la nueva carpeta como el archivo htm modificado deberán ser llevados al Servidor Web.