Novedades Omnis Studio 8.1

Son muchas e interesantes las novedades que nos acercará la inminente aparición de la versión 8.1 de Omnis Studio

• Soporte para repositorios de software distintos al VCS-OMNIS (Exportación e importación de librerías en formato JSON)
• jsForms con soporte de diseño "responsive"
• Nuevos controles jsClient
• Correcciones y añadidos menores, en Web Services, el  Editor de métodos y el asistente de codificación

Pero de todas ellas quizás la más destacable sea el jsForm "responsive". El diseño "responsive" es una técnica utilizada para componer formularios que se ajustan de modo automático a los  diferentes tamaños de pantalla del dispositivo en uso, ya sea que se trate de teléfonos móviles, tablets u otras pantallas. La razón para su uso es la de poder disponer de un único formulario desde el cual y mediante unos pocos métodos de código, adaptar automáticamente los objetos al dispositivo en uso o bien tras un cambio en el tamaño de la ventana del navegador por acción del usuario. Cuando hablamos de páginas web estándar, el diseño "responsive" se implementa mediante el uso de técnicas CSS y puntos de interrupción, Omnis Studio 8.1 adopta un enfoque similar, permitiendo especificar los puntos de interrupción que se desee durante el diseño del jsForm. (formulario remoto JavaScript) Cada punto de interrupción se corresponderá con su correspondiente re-diseño o ajuste de objetos en el formulario. 

Los jsForm's confeccionados antes de la versión 8.1, podrán seguir haciendo uso de la ya conocida propiedad "$screensize" que (como ustedes saben) nos permite ajustar el diseño a los diferentes dispositivos, mientras que los jsForm's creados a partir de ésta versión podrán hacer uso del modo "responsive". Una nueva herramienta de migración, (disponible desde el menú "Tools>>Add-Ons") nos permitirá migrar los jsForm's creados con versiones anteriores de Omnis Studio, a los nuevos tipos "responsive".

Una nueva propiedad denominada "$layouttype", (sólo disponible para los nuevos jsForm's) permite especificar el modo de diseño soportado, podrá ser: kLayoutTypeResponsive, kLayoutTypeScreen (para versiones anteriores de Omnis Studio) o kLayoutTypeSingle (diseño no-resposive)

Los nuevos jsForm's son creados con una serie de puntos de interrupción preestablecidos: 320, 768 y 1024 que corresponderían de modo generalizado a teléfonos, tabletas y computadoras de escritorio. Pero podremos cambiar estos puntos de interrupción para adaptarlos a nuestras propias necesidades o tamaños que deseemos soportar en nuestras aplicaciones.

Aquí es donde yo quería llegar con éste artículo, pues llegados a éste punto, seguramente surja la pregunta: ¿Qué puntos de interrupción debo soportar en mi aplicación?

Naturalmente todo dependerá del uso o ámbito de actuación que queramos dar a nuestra aplicación, pero contestando de modo generalista, deberíamos crear al menos un punto de interrupción para el dispositivo más pequeño, de entre el conjunto de dispositivos que deseemos soportar, ya sea que se trate de teléfonos, tablets o escritorios. Por lo tanto, el valor del primer punto de interrupción sería el ancho físico del teléfono más pequeño, no deberemos confundir sus dimensiones físicas con la resolución de pantalla soportada.

Por ejemplo, las dimensiones físicas de la pantalla del iPhone 6 y 7 son 375x667, y el Samsung Galaxy S5 y S6 son 360x640, por lo que podría establecer el primer punto de ruptura de diseño a 360, o tal vez 350 para añadir un margen de seguridad y así dar soporte a ambos teléfonos.

Del mismo modo, para fijar el punto de interrupción para tabletas, deberíamos tener en cuenta el ancho mínimo de entre la gama de tabletas que deseemos  soportar. Como ya hemos mencionado, los puntos de interrupción predeterminados son (320, 768 y 1024) están pensados para dar soporte a la mayoría de dispositivos, tanto en su orientación vertical como horizontal, pero podemos cambiar éstos ajustes según nuestras propias necesidades.

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