03 octubre 2011

El nuevo jsClient


Sin duda la principal novedad incluida en Omnis Studio 5.2 es el cliente basado en JavaScript, que permite ejecutar aplicaciones Omnis en cualquier dispositivo y/o navegador web, sin tener que instalar el plug-in, además de ser totalmente compatible con HTML5 y CSS3.

Una nueva propiedad del "remote form" denominada $client, nos permitirá determinar si ésta será usada con el habitual "kClientPlugin", para el nuevo "kClientJavaScript" o para "kClientiOS".


He tenido el placer de probarlo en un iMac con Mac OS Lion, WebServer, MySQL y OS 5.2 Beta, tras la creación de la nueva "remote form" y de modo totalmente automático, se crea la carpeta "/Applications/Omnis Studio 5.2 Beta 1.app/Contents/MacOS/html", con todo el contenido necesario para poner a prueba el nuevo "remote form".


- Una carpeta denominada "_icons", recogerá cada uno de los iconos que hemos utilizado.
- La carpeta "css", la carpeta "images", la carperta "scripts" y la carpeta "sounds".


Todas ellas deberán ser trasladadas al directorio "Documents" del WebServer cuando deseemos poner nuestra aplicación en explotación. Cabe mencionar que, aunque en la carpeta "_icons" encontraremos ya incluidos todos los iconos usados en nuestras "remote form". OS 5.2, incluye una nueva herramienta web llamada "JS Icon Export", que nos permitirá colocar en la carpeta "_icons" cualesquiera otros iconos, aunque aún no hayamos hecho uso de los mismos.


Además de ésto deberemos configurar la pagina html que deberá cargarse inicialmente en el navegador, lo cual incluye otra interesante novedad, pues al contrario de lo que sucedía con el anterior "plugin", en el nuevo formulario será posible invocar a más de un "remote form" en la misma página html.


Observemos el siguiente ejemplo:


-----------------------------
≤!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"≥
≤html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"≥

≤head≥

≤meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/≥
≤title≥Preinscripciones UPSA≤/title≥
≤link rel="shortcut icon" href="http://www.upsa.es/images/favicon.ico" /≥

≤!-- This makes mobile device support work --≥
≤meta name="viewport" content="width=device-width"≥

≤!-- The scripts and style sheets must be present at relative URLs from this page --≥
≤link type="text/css" href="css/omn_dlg.css" rel="stylesheet" media="print,screen" /≥
≤link type="text/css" href="css/omn_menu.css" rel="stylesheet" media="print, screen" /≥
≤link type="text/css" href="css/smoothness/jquery-ui-1.8.15.custom.css" rel="stylesheet" /≥   
≤link type="text/css" href="css/slick.grid.css" rel="stylesheet" /≥
≤link type="text/css" href="css/slick.columnpicker.css" rel="stylesheet" /≥
≤link type="text/css" href="css/slick.pager.css" rel="stylesheet" /≥

≤!-- Must occur after other stylesheets e.g. jquery-ui-1.8.15.custom.css, as it overrides values --≥
≤link type="text/css" href="css/omnis.css" rel="stylesheet"/≥

≤!-- Omnis Studio JavaScript client scripts --≥
≤script type="text/javascript" src="scripts/omjsclnt.js"≥≤/script≥
≤script type="text/javascript" src="scripts/omjqclnt.js"≥≤/script≥

≤/head>

≤body bgcolor="#608090" onload="jOmnis.onLoad()" onunload="jOmnis.onUnload()"≥

≤div id="omnisobject1" align="center" WebServerURL="http://172.25.45.24/cgi-bin/nph-omniscgi" OmnisServerAndPort="5912" OmnisLibrary="NaviPrein52" OmnisClass="Inicio_Form" param1="" param2=""≥
≤/div≥

≤/body≥

≤/html≥
-------------------------
Observe la sección:

≤div id="omnisobject1" align="center" WebServerURL="http://172.25.45.24/cgi-bin/nph-omniscgi" OmnisServerAndPort="5912" OmnisLibrary="NaviPrein52" OmnisClass="Inicio_Form" param1="" param2=""≥
≤/div≥

- El parámetro "id" contiene en nuestro ejemplo el valor "omnisobjct1", pero es posible crear nuevos "omnisobjt...", permitiendo integrar diferentes clientes JavaScript, en diferentes lugares de nuestra página web, ¡no es genial!

El resto de los parámetros ya son viejos conocidos y creo que no necesitan explicación, solo añadir que los parámetros "param1" y "param2", podrían muy bien ser usados para especificar el tamaño de la pantalla o "frame" que ocupará el "remote form". Por defecto, el cliente JavaScript utilizará el tamaño especificado para el propio "remote form", pero podemos cambiar su altura y anchura en el método $construct, tras el paso de dichos parámetros.

Espero sus comentarios, reciban un cordial saludo.