25 abril 2017

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 no 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 poder disponer de un único formulario, desde el cual y mediante unos pocos métodos de código, adaptar automáticamente los objetos a presentar sobre el dispositivo en uso o bien tras un cambio de 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 (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 nuestra aplicación.

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 de penderá 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, teléfonos, tablets, 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, teniendo en cuenta sus dimensiones físicas no son las mismas, que las correspondientes a su resolución de pantalla.


Por ejemplo, las dimensiones lógicas 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 incluir 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.

20 abril 2017

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.