Creación dinámica de formularios Web

Éste artículo es una traducción del proporcionado por Kris Geerts (desarrollador Omnis www.it8-projects.com) de los Países Bajos, la librería ejemplo mencionada (LOGIN.zip), puede ser descargada desde Aula Omnis.

Como ya sabemos el formulario web JavaScript que genera automáticamente Omnis para llamar a nuestros “remote form”, pueden integrarse fácilmente en cualquier sitio web ya existente. Pero me parecen  interesantes los apuntes que hace Kris en su artículo sobre la integración de Omnis Web con un sitio Web ya construido, por esa razón me he permitido la licencia de tomar sus notas y publicar éste artículo.

Lo que Kris propone, es un modelo para la integración en un sitio web ya existente, con nuestros “remote forms” jsClient de forma dinámica. El escenario propuesto también podría resultar útil cuando se desea tener diferentes librerías (diferentes versiones) que a su vez conectan con diferentes bases de datos atendidas desde un solo proceso Omnis/MySQL (escenario habitual para los desarrollos en la “nube”). Como resultado de esto, podríamos llegar a tener librerías casi idénticas, con incluso nombres iguales para sus “remote forms”, bajo tales circunstancias podría resultar muy difícil su mantenimiento. De hay la propuesta de creación dinámica de “remote forms”, aunque seguramente podrían encontrarse otras razones para justificar el enfoque propuesto por Kris.

En primer lugar deberemos asegurarnos de que nuestra solución Web funcione correctamente. Podemos realizar pruebas con la página HTML que Omnis genera automáticamente desde nuestro “remote form”, con la versión Omnis de desarrollo (127.0.0.1/jshtml/≤nombredelremoteform≥.htm). Sin embargo, cuando tengamos que portar la solución a un servidor web real, deberemos asegurarnos de contar con todos los archivos necesarios, páginas HTML en el directorio correcto y de que todo este funcionando correctamente. Para IIS (Windows), deberemos disponer de los siguientes directorios y archivos:

Inetpub (normalmente en c:\inetpub) 

  Cgi-bin
    omnisapi.dll
    nph-omniscgi.exe
    …… 

  Scripts
    nph-omniscgi.exe
    nph-owscgi.exe
  wwwroot 

    scripts
      omjqclnt.js
      pie.htc
      …
  Css
    Omn_menu.css
    …
    Smoothness
      Jquery -ui-…
    Images

Header-columns-bg.gif

Para portar la solución al servidor Web, tendremos que copiar el contenido de la carpeta de “HTML” desde el directorio raíz de instalación de la versión Omnis para desarrollo, al raíz del servidor web. También debemos comprobar que estemos utilizando las últimas versiones del omnisapi.dll (o nphomniscgi.exe) y de los scripts. Una vez que el servidor esté funcionando correctamente, estaremos dispuestos para el paso siguiente.

Ahora vamos a realizar pruebas con la librería de demostración (LOGIN.lbs) que seguramente ya ha descargado desde Aula Omnis, ábrala con el Omnis Runtime Server. Pegue la siguiente URL en un navegador, sustituyendo los valores indicados entre ≤≥ por la dirección IP y número de puerto correctos:

http://≤IPServidorWeb≥/cgi-bin/omnisapi.dll?OmnisClass=rtDir&OmnisLibrary=LOGIN&OmnisServer=≤IPServidorOmnis≥:≤PuertoOmnis≥&param1=CompanyName

Nota: En la demo proporcionada por Kris, se hace uso de un solo parámetro, pero, por supuesto, nada impide añadir otros parámetros (param2 = loquequiera, etc.). El modelo generado automáticamente puede hacer uso de hasta cuatro parámetros, pero pueden añadires más. Si se desea utilizar un formulario HTML aún más simple para acceder a la pantalla de inicio de sesión, consulte la entrada “statical-Submitexample” que encontrará en la “Remote Task” de nombre “rtDir” de la librería. Esto proporciona un inicio de sesión más cómodo para el usuario.

Cuando introduzca la URL anterior, la clase “Remote Task” “rtDir” generará automáticamente una página HTML con el Omnis JavaScript (observe el método “$CreateDynam” de la “Remote Task” “rtDir”). De éste modo tendremos la ventaja de poder abrir otra librería, incluso estando ubicada en otro servidor, o cualquier otro formulario Web donde incluir lo que necesitamos para que funcione. La librería demo proporcionada se llama de nuevo a la misma librería mediante el formulario “rlogin”, por lo que (si queremos hacer un uso práctico de la solución propuesta) tendríamos que cambiar éste comportamiento.

Como podrá observar en la librería ejemplo, se han codificado las rutas hacia las carpetas css y otros directorios, la ruta hacia la página HTML generada por la “Remote Task” es relativa al directorio “cgi-bin” y no al “wwwroot”. Esto significa que en lugar de “http://servidor/≤fichero≥.htm” la ruta URL siguiente será: “http://servidor/cgi-bin/≤fichero≥.htm”

Tenga en cuenta que se usan rutas pre-codificadas para las carpetas css y otras, usadas en la creación de la página HTML dinámica, con sus propios parámetros ya rellenados, listo para que el usuario haga simplemente clic en “login'”.

Uso del cliente JavaScript (jsClient) con PHP

Toda la documentación, ficheros referenciados y la librería de ejemplo indicados en éste artículo, podrá descargarse desde la web de Aula Omnis, archivo denominado “DynamicWebPages.zip”. Una página HTML de jsClient típica, contiene algo como lo siguiente:

≤html≥
≤head≥
≤title≥Studio 5.2 Test≤/title≥
≤meta http-equiv="Content-Type" content="text/html; charset=utf-8"≥

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

 ≤!-- The style sheets must be present in the directory /css/ --≥
≤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, must be present in the directory /scripts/ --≥
≤script type="text/javascript" src="/scripts/omjsclnt.js"≥≤/script≥
≤script type="text/javascript" src="/scripts/omjqclnt.js"≥≤/script≥
≤/head≥

≤body onload="jOmnis.onLoad()" onunload="jOmnis.onUnload()" style="margin:0;"≥
≤h1≥Test JavaScript Client Studio 5.2≤/h1≥
≤div id="omnisobject1" WebServerUrl="http://192.168.0.4/omnis_apache" OmnisServerAndPort="192.168.0.8:5914" OmnisLibrary="ScriptClient52_Test" OmnisClass="rfTest" param1="A1" param2="B1" param3="C1" param4="D1"≥≤/div≥
≤/body≥
≤/html≥

Si queremos hacer lo mismo desde PHP, modificaríamos la página para obtener algo como lo indicado a continuación. Para el ejemplo localizado en Aula Omnis, se hace uso de un fichero de configuración denominado “webclient.ini”, para componer la pagina “webclient.php”

≤html≥
≤head≥
≤title≥Studio 5.2 Test≤/title≥
≤meta http-equiv="Content-Type" content="text/html; charset=utf-8"≥

≤?php
$phplib = dirname(__FILE     ) . '/../phpsub'
set_include_path(get_include_path() . PATH_SEPARATOR . $phplib); require_once('OmnisWebClass.php');
$x = new OmnisWebClass('ScriptClient52_Test.ini', 'rfTest');
$params = array ("A1", "B1", "C1", "D1");
$x->set_additional_params($params);
$x->display_header_body_omnis_js('/css','/scripts','margin:0;');
?≥

≤h1≥Test JavaScript Client Studio 5.2≤/h1≥

≤?php
$x->display_client_omnis_js();
?≥

≤/body≥
≤/html≥

Por supuesto existen muchas otras opciones y parámetros que pueden usarse a la hora de crear el modelo PHP, el ejemplo que hallará en Aula Omnis “OmnisWebClass.php” constituye una buena muestra de ello.

Una reconfiguración mas cómoda

Cómo ya hemos mencionado, para nuestro ejemplo hacemos uso del fichero de configuración denominado “webclient.ini”, así, si (por ejemplo) queremos modificar el ancho “width” del “remote form”, sólo tendremos que cambiar el parámetro adecuado en éste archivo. Permitiendo además su correcta construcción dependiendo del navegador en uso: Internet Explorer, Netscape, Firefox, etc.

Del mismo modo, cuando sea el caso que estemos realizando pruebas con la versión Omnis para desarrollo, en las que se suele usar nuestro mismo PC. Podemos comentar la línea “OmnisServer = XXX”, ya que si no se encuentra en el archivo “.ini”, una dirección IP, PHP usará la dirección del cliente

Los parámetros “OmnisXXX “del archivo “.ini”, tales como el nombre de la librería o el de la clase remota, son ajustados después de los parámetros “cgi”. Por lo tanto, si se introduce la URL:

http://192.168.0.2/test/webclient.php?lib=TEST&class=rfTest_2&width=200

El servidor PHP compondrá una página web con éstos parámetros Omnis, de modo que el “remote form” “rfTest2” sea mostrado con una anchura de 200 píxeles. Todos los parámetros no presentes en la URL serán tomados del archivo “.ini”. Todo esto podrá encontrarlo perfectamente documentado dentro del propio archivo “OmnisWebClass.php”.

Parámetros HTTP

Al analizarse la petición HTTP, PHP puede recuperar otros parámetros de la cabecera HTTP, como (por ejemplo) el navegador que está usando el cliente. Esto también podría pasarse como parámetro adicional al “remote form” Omnis. Para ello sería necesario añadir a la página HTML el siguiente código:

; para Internet-Explorer
≤paramname = "Param1" value="myParameter = myValue"≥

; para Netscape y otros
Param1 = "myParameter=myValue"

Para incluir el uso de parámetros en el caso de la clase “OmnisWebClass.php”. Después de crearse la instancias del objeto PHP, e inmediatamente antes de la línea “$x-≥display_plugin()”; será necesario crear una matriz y llenarla con la información que se pasará a la instancia:

$params = array ();
$params['myParam'] = 'myValue';
$params['Browser']=
$_SERVER['HTTP_USER_AGENT'];
// insert here further parameters, see below
$X-≥set_additional_params($params);

Si el acceso a la página web está protegido con “htaccess”, podremos incluso obtener el nombre de usuario y su contraseña, para pasársela como parámetros a Omnis. El código PHP necesario es el siguiente:

if (isset($_SERVER['REMOTE_USER']))
$params['User1'] = $_SERVER['REMOTE_USER'];
if (isset($_SERVER['PHP_AUTH_USER']))
$params['User2'] = $_SERVER['PHP_AUTH_USER'];
if (isset($_SERVER['PHP_AUTH_PW']))
$params['Password'] = $_SERVER['PHP_AUTH_PW'];

Pero debemos tener en cuenta que, (para que esto funcione) el servidor PHP, deberá permitir ciertas restricciones de seguridad, consulte las “safe mode restrictions”.

Reconocimiento del servicio “Off-Line”

Un “Omnis App Server” suele ser muy estable, pero aún así es necesario hacer algo de mantenimiento de vez en cuando. De modo que puede ser inevitable que debido a que el servidor esté en modo “off-line” y le llegue una solicitud de “remote form” desde un navegador, el navegador se congela durante varios minutos, terminando por ofrecer como respuesta "'Error reading the response from the WEB server”.

Pero ésto se puede ser evitado fácilmente, mediante el uso de la clase “OmnisWebClass.php” y añadiendo algunas enmiendas a la librería Omnis. En este caso, el “Omnis App Server” deberá poseer permisos de escritura sobre el sistema de archivos del servidor web. Además, deberán rebajarse algunas de las normas de seguridad impuestas en PHP. De éste modo, el “Omnis App Server” podría, (inmediatamente después de abrir la librería) crear un archivo, (por ejemplo, con el nombre “Semaphore_WEBCLIENT.txt”) bajo el mismo directorio donde se encuentra “webclient.php”, el cual sería eliminado tras cerrarse la librería.

La idea es, que la instancia de “OmnisWebClass.php” pueda comprobar la existencia o no, de este archivo. Si no existe, en lugar de mostrarse el código de error, mostrar algo como “≤h3≥Omnis App. Server, cumple tareas de mantenimiento≤/h3≥”. El texto exacto es configurable. Para implementar este comportamiento, tan sólo sería necesario ñadir una línea más al archivo “webclient.php” informando a la instancia sobre el nombre del archivo a crear, del modo siguiente:

$x-≥set_semaphore('Semaphore_WEBCLIENT.txt');

Programación asíncrona con Omnis

Existen dos enfoques básicos a la hora de programar determinadas funciones o métodos, nos referimos a la programación “sincrónica” y “asincrónica”. Con programación “sincrónica”, la ejecución de cada función o método deberá completarse antes de iniciarse el siguiente. Este es el comportamiento predeterminado en Omnis. La desventaja de este modelo es que el proceso puede quedar congelado por largo tiempo debido a la esperar por una acción del usuario o de la ocurrencia de un evento a fin de poder ejecutar otras tareas. Una solución a esto la encontramos bajo el modelo de programación “asíncrona”. En este caso, una función o método es ejecutado en un hilo separado, siendo posible el procesado en paralelo de otras funciones, cada una en su propio hilo. Sin duda (dependiendo del tipo de tareas a realizar) éste método es más rápido y eficiente, ya que la ejecución de un método nunca se queda parado a la espera de un suceso.

Imagine una situación en la que una aplicación necesita realizar una importación de datos, pero sin que eso le impida al mismo tiempo llevar a cabo alguna otra función. Bajo el modelo “sincrónico”, tendría que completarse primero la importación de datos, lo cual dejaría al programa bloqueado, mientras que en modo “asíncrono” la importación de datos podría ejecutarse en segundo plano, si impedir la ejecución de cualquier otro código.

El siguiente ejemplo hace uso del componente “Web Services”. Tomemos un ejemplo sencillo: en un bucle vamos incrementado el valor de una variable, mientras que, al mismo tiempo, se le presenta un “OK message” al usuario indicándole que existe un proceso ejecutándose en segundo plano.

En primer lugar, añadiremos a nuestra librería una “remote task” de nombre “RTest”, sobre la que crearemos el método denominado “$backgroundMethod()”. Pulsamos botón-derecho sobre el método y lo marcamos como “Web Service Method static”, tal y como mostramos en la siguiente imagen.

A continuación, añadiremos al método el siguiente código:

For contador from 1 to 1000000 step 1
  Calculate contador2 as contador+1
End For
OK message {¡Proceso en segundo plano finalizado!}

Ahora crearemos una ventana con un botón, al cual añadir en su método “$event()” el siguiente código:

Start server
Do async method rTest/$backgroundMethod
OK message {¡Método contador ejecutándose en segundo plano!}

Para probarlo, abra la ventana y haga clic sobre el botón. Primero aparecerá el “OK message” indicando que se está ejecutando el método. Aunque pulse “Aceptar”, el proceso seguirá su curso, pero a su conclusión se le mostrará otro “OK message” indicando su finalización.

Cuando esté ejecutando métodos en modo “asíncrono”, deberá asegurarse de que se está programando en un entorno "seguro para subprocesos", es decir, asegurarse de no utilizar variables globales o comandos que puedan modificar indicadores globales. Los resultados podrían resultar los no esperados, si utilizamos comandos que (por ejemplo) cambien el valor de #F. Para volver al modo de ejecución “sincrónica” (el modo por defecto), deberemos usar el comando “Stop server”.