Mostrando entradas con la etiqueta JavaScrip. Mostrar todas las entradas
Mostrando entradas con la etiqueta JavaScrip. Mostrar todas las entradas

17 noviembre 2016

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.

20 mayo 2015

Texto HTML en botones

Una nueva característica soportada por los controles JavaScript "Button" y "TransButton" nos permiten aportar textos con etiquetas HTML a los botones.

Para ello deberemos fijar su nueva propiedad "$textishtml" a "true"
, ésto afectará al modo en que será tratado el texto indicado para el botón (propiedad $text), el cual podrá ahora contener etiquetas HTML, ésto significa que podremos hacer uso de cualquier etiqueta HTML para aportar estilo al texto. Por ejemplo, podríamos insertar un salto de línea mediante la etiqueta "≤br≥".

La activación de la propiedad "$textishtml", no impide el uso del resto de atributos ya presentes para los controles de botón mencionados, por lo que no habrá problema alguno en seguir usando los elementos habituales para la asignación de estilo, tipo de letra y color.

Tenga en cuenta que modo-diseño no podremos observar el resultado de aplicar la etiqueta HTML (sólo veremos el código HTML) y si usamos atributos dentro del código HTML deberán ir situados entre comillas simples.

13 mayo 2015

Probando nuestros "remote forms"

Si estamos usando Firefox durante el desarrollo de aplicaciones con Omnis, podemos usarlo para probar los diferentes diseños y tamaños de pantalla pensados para su uso en dispositivos móviles y tabletas mediante su utilidad "Vista de diseño adaptable", indicar que se trata de una característica del navegador Firefox y que Omnis puede aprovechar, pero que no parece estar disponible (por el momento) en otros navegadores.

Pero quiero hablar de ello en éste "blog", ya que nos puede ahorrar mucho tiempo a los desarrolladores Omnis, durante la fase de diseño de nuestras aplicaciones, ya que nos evitará tener que probar o testar la aplicación en múltiples dispositivos. Sin embargo, le recomiendo que finalmente también pruebe su aplicación sobre el o los dispositivos que usted desee estén soportados por su aplicación.


Para que Omnis pueda hacer uso de dicha funcionalidad del navegador, deberá establecer su propiedad "gResponsiveDesign" a "true", podrá encontrarla dentro del archivo "ssz.js" ubicado bajo el directorio "html/scripts" dentro del raíz Omnis. Tenga en cuenta que deberá reiniciar Omnis para que el cambio tenga efecto.


Finalmente y para activa el modo en Firefox, diríjase al menú "Herramientas" opción "Desarrollador web" y seleccione "Vista de diseño adaptable".


Una vez hecho ésto, podremos probar nuestros "remote form" seleccionando los diferentes tamaños de pantalla y orientaciones bajo el menú desplegable de la ventana del navegador Firefox, nuestro "remote form" cambiará según lo especificado en su propiedad $screensize. Cuando hayamos concluido con las pruebas, deberemos volver a cambiar la configuración de "gResponsiveDesign" del fichero "ssz.js" para dejarlo en modo "false".

06 mayo 2015

Paso de parámetros a un "remote form" mediante URL

Ahora es posible el paso de parámetros hacia un "remote form" o "remote task", desde el propio cliente de JavaScript y desde la URL de llamada a la página web que contiene su "remote form". Dichos parámetros aparecerán añadidos a los que ya pueda llevar emparejados la invocación al "remote form", recuerde que habitualmente el paso de parámetros estaba limitado a los incluidos en la propia página HTML mediante el uso de las etiquetas "data-param1", "data-param2", etc.

Los parámetros adicionales pueden ser añadidos en la URL que apunta al "remote form" mediante el siguiente formato:
 
http://127.0.0.1:5988/jschtml/rfSetCurField.htm?x=y&a=b 

El cliente JavaScript añadirá éstos parámetros mediante una columna opcional denominada "URLparams" añadida a la variable "row" que transfiere al método $construct() del "remote form" o "remote task". Los datos contenidos en "URLparams" son guardados en formato JSON, por ejemplo, si los parámetros del URL son "x=y&a=b", el fichero JSON contendrá la entrada {"x":"y","a":"b"}. Si lo desea, podrá hacer uso de la nueva función estática OJSON para convertir su formato original, a formato "row" de Omnis, mediante...

Do OJSON.$jsontolistorrow(pRow.URLparams) Returns lRow

...donde "lRow" es una variable Omnis de tipo "row". Suponiendo el ejemplo anterior, el valor de la expresión "lRow.x" sería "y" y el de "lRow.a" sería "b".

29 abril 2015

Ventanas adaptables (Sync Screens Tool)

¿Cómo funciona la nueva herramienta "Sync Screens"?


La idea es que, tras crear un "remote form", podamos formatear todos sus campos y controles para que aparezcan con el tamaño y posición correctos, según cada una de las posibles orientaciones y tamaños de pantalla, ya sean de tipo escritorio, tabletas o móviles. (según las diferentes configuraciones soportadas para la propiedad $screensize).

Sin duda se trata de una tarea que nos consume mucho tiempo a los desarrolladores, debido al gran número de diferentes dispositivos y diseños soportados por los "remote form".


Afortunadamente ésta herramienta nos permitirá realizar ésta labor de forma automática, lo que sin duda nos ahorrará mucho tiempo, además de hacer que nuestras aplicaciones sean más consistentes y fáciles de usar para los usuarios finales, puesto que se adaptarán al dispositivo en uso.


Podrá localizar la nueva herramienta "Sync screens" situada bajo el menú "Tools≥≥Add Ons".


Para utilizarla deberá seleccionar una biblioteca desde el desplegable "Library" y seleccionar el "remote form" JavaScript que desee sincronizar. Mediante el desplegable 'Source Screensize' podrá indicar cual es el punto de partida sobre el cual se construirán el resto de los tamaños seleccionados. (por defecto aparecerá seleccionado "desktop") Después, deberá elegir qué tamaños deberán sincronizarse mediante las casillas de verificación. Los elementos situados bajo "Options" le permitirán escalar o no los objetos, según su posición horizontal y/o vertical y/o según su anchura y altura. Si no desea que un objeto en particular sea alterado por la herramienta, puede optar por bloquearlo. Para ello y desde el modo-diseño, pulse botón derecho sobre el objeto y escoja la opción "Lock", la opción "Ignore Locked Components" (por defecto activada) le permitirá decidir si tal comportamiento deberá ser tenido en cuenta o no. Una vez realizados los ajustes pertinentes, haga clic sobre el botón "Sync".

Ahora podrá cambiar la propiedad $screensize de su "remote form", para comprobar el funcionamiento de los diferentes diseños seleccionados. Recomendamos que también realice pruebas en un navegador y en diferentes dispositivos para comprobar que los diferentes objetos del "remote form" se dimensionen y posicionen correctamente.

09 octubre 2013

Programación de listas

La variable de tipo "list" es sin duda, la que adquiere mayor relevancia y versatilidad en la programación con Omnis Studio, de hecho, resulta imprescindible a la hora de construir aplicaciones para la web y dispositivos móviles. Una variable “list” puede suministrar los datos (contenido) y el formato para muchos de los componentes visuales JavaScript que contendrán sus aplicaciones, tales como: “droplists”, “menus”, “data grids”, “complex grids”, y “tree lists”.

Una variable “list” puede ser definida en base a una “clase de datos SQL” (schema, query, o table). En ese caso, la lista obtiene la definición de cada columna según fueron creadas en la propia clase SQL. Cada “list” puede contener un número ilimitado de líneas y un máximo de 32.000 columnas, claro está, si la capacidad de memoria del dispositivo lo permite.

Omnis Studio proporciona los métodos necesarios para crear, definir y modificar variables “list” y que vamos a repasar brevemente a continuación. Le sugiero que consulten el manual en español, para obtener más información sobre el uso de variables “lis" (http://framosmu.blogspot.com.es/2010/03/manual-de-programacion-omnis-studio-en.html).

 

Crear una lista

 

En primer lugar será necesario crear la variable “list” y definir sus columnas. Con éste propósito podemos optar por el método $define, pero también podemos hacer uso del método $add del grupo de métodos $cols, veamos ambos casos:

Do myList.$define(var1,var2,var3) ;; myList y var’s deben ser declarados

o


Do myList.$cols.$add('myFieldName',kCharacter,kSimpleChar,255)
Do myList.$cols.$add('anotherColumn',kInteger,kLongInt)
Do myList.$cols.$add('yetAnotherColumn',kBoolean)


En este ejemplo, se crea una “list” con tres columnas. Los parámetros del método $add describen el nombre, tipo, subtipo y longitud de cada columna. Sin embargo y dependiendo del tipo de columna, no todos estos parámetros serán necesarios.

Añadir datos a una lista

 

En segundo lugar, añadiremos algunos datos. Usaremos el método $add con algunos valores pasados directamente como parámetros y también lo usaremos para crear una línea vacía:

Do myList.$add('Pepe', 27, kTrue) ;; Añade una línea con los valores suministrados
Do myList.$add() ;; Agrega una línea vacía


También podemos añadir el contenido de una variable de tipo “row” a la lista. Para ello, podemos hacer uso del método $add, en éste caso el método $add le pasa una referencia a la variable “row”:

Do myList.$add().$assignrow(myRow,kTrue)

Note que los métodos de los que podemos hacer uso detrás de $add, deben ser usados con la sintaxis descrita al añadir una línea vacía “$add()”. Esto causa que la función $add devuelva una referencia a la función $assignrow, para que ésta pueda agregar los valores de myRow. El segundo parámetro determina si se usaran los nombres de las columnas o su orden, para emparejar los datos. También se podría hacer uso de los métodos $addafter y $addbefore para agregar los datos antes o después de una determinada columna.

Eliminar líneas de una lista

 

Es posible que en ocasiones también debamos eliminar algunas líneas de la lista. La manera más fácil de hacer esto es utilizando el método $remove. Por ejemplo, si quisiéramos eliminar la línea actual de la lista usaríamos lo siguiente:

Do myList.$remove(myList.$line())

Si quisiéramos eliminar todas las líneas la lista, que cumplan una determinada condición, tendremos que hacer uso en primer lugar de la función $search:

Do myList.$search($ref.miNombreCampo='Pepe', kTrue)

Mediante éste método se seleccionaran todas las filas que contengan el valor 'Pepe' en la columna 'miNombreCampo'. Después las eliminaremos del siguiente modo:

Do myList.$remove(kListDeleteSelected)

También podríamos hacer uso de la constante kListKeepSelected para causar la eliminación de todas las líneas no seleccionados.

Copiar y fusionar una lista

 

A veces es posible que queramos fusionar listas, o copiar los contenidos de una lista sobre otra, para esto último podemos hacer lo siguiente…

Calculate NuevaLista as ViejaLista

…pero, si lo que queremos es copiar la definición de una lista sobre otra usaremos el método $copydefinition:

Do NuevaLista.$copydefinition(ViejaLista)

Este método creará una lista vacía con la definición de la lista inicial. Finalmente, si lo que queremos es agregar  o fusionar, los datos de una lista sobre otra, debemos usar el método $merge:

Do NuevaLista.$merge(ViejaLista,kTrue)

En este caso se añadirán los datos de ViejaLista a NuevaLista. El segundo parámetro determina si queremos hacer la correspondencia de datos usando los nombres de las columnas o bien su orden.

Eliminar listas

 

Si lo que pretendemos es eliminar el contenido de una variable de tipo “list”, podemos hacer uso del método $clear:

Do myList.$clear()

Si también quisiéramos eliminar la definición de sus columnas, podríamos usar $define pero sin pasarle parámetro alguno:

Do myList.$define()

Nota:
Esto es sólo un pequeño ejemplo de cómo hacer uso de las variables de tipo “list”, éste artículo ha sido primero publicado en ingles por Andreas Pfeiffer. Puede obtener más información en español sobre la programación con Omnis Studio en Aula Omnis.

04 octubre 2013

Nueva versión Omnis Studio 6.0.1


La recientemente liberada versión de Omnis Studio 6.0.1 mejora y amplia su apuesta por la programación con Omnis Studio JavaScript Client.

No hace mucho tiempo que los desarrolladores en Omnis Studio hemos podido experimentar la programación con jsClient. El desarrollo de aplicaciones para la web y dispositivos móviles con sus particularidades como los diferentes tamaños de pantalla, nunca ha resultado tan rápida, cómoda y sencilla. Omnis Studio jsClient permite controlar de forma sencilla prácticamente cualquier pantalla y cualquier dispositivo.

Algunas de las cosas que incorpora la versión 6.0.1 son:

  • Nuevos tamaños de pantalla y dispositivos como el BlackBerry® Q10 y el Samsung® Galaxy S4, y otros a añadir por los desarrolladores.
  • Permite la creación de bases de datos locales, con opción de sincronización para dispositivos Android, posibilitando así la creación de aplicaciones móviles independientes en ésta plataforma.
  • Nuevo control "Trans Button" que proporciona mayor interactividad en aplicaciones para la web y dispositivos móviles.
  • Mejora en el rendimiento de las "String Tables" que dan soporte a las aplicaciones multi-lenguaje.
  • Soporte para el modo 'Responsive Web Design' de Firefox, que permite probar los diferentes diseños realizados para dispositivos móviles sobre un navegador de escritorio, evitando tener que alternar entre dispositivos.

Con el lanzamiento de la versión 6.0.1, Omnis Studio sigue ofreciendo una opción rápida y flexible en la creación de aplicaciones para la web y dispositivos móviles. El jsClient de Omnis Studio nos permite crear rápidamente aplicaciones que se ejecutarán sobre un navegador en prácticamente cualquier dispositivo y en cualquier plataforma, incluyendo ordenadores portátiles, tabletas y smartphones y todo desde una misma base de código.