400440404. La Plataforma ZK

Otra característica de ZK es el uso de XML User Interface Language (XUL) como lenguaje de descripción de formas gráficas. (ZK se refiere al lenguaje de descripción como “ZUL.”) XUL nos permite definir formas como documentos XML en donde las etiquetas individuales corresponden a controles sobre un formulario, simplificando el proceso de diseñar interfaces web. Podemos también crear formularios en Java utilizando una API dedicada, algo así como la biblioteca Swing. ZK se refiere a este método como el uso de “richlets.”

Uso de la Plataforma

Para usar la plataforma, hay que copiar las bibliotecas de la distribución ZK (directories dist/lib and dist/zkforge) en un directorio WEB-INF/lib de nuestro proyecto. Después hay que configurar el fichero web.xml definiendo:
– Un servlet para solicitudes de gestión para mostrar nuevas páginas.
– Un servlet para interceptar eventos que se produjeron en las páginas.
– Un oyente para realizar el trabajo de limpieza tras la sesión de tiempo de inactividad.

Los servlets zkLoader y auEngine (Listado número 1) son responsables de “duplicar” el servicio de las solicitudes HTTP que llegan de un navegador. Hay un programa configurado de esta forma, disponible online; también reúne muestras del artículo (véase código en: http://www.ddj.com/code/).

La Figura 1 es el típico control de flujo en las aplicaciones basadas en ZK. Para empezar, los usuarios inician la conexión con un servidor introduciendo la dirección de la página solicitada en un navegador. En el lado del servidor, la máquina ZK carga el ZUL o página ZHTML (o pasa el control a un richlet, si es responsable de reproducir la página). Se invoca un método al controlador de la página para gestionar el evento pageinit.

Este método reúne los datos desde una base de datos para visualizar, a los usuarios. A continuación, sobre la base de la definición de página, la plataforma crea un árbol de componentes que describen la página, que muestra los datos reunidos en la fase anterior. El árbol de los componentes es responsable de reproducir de forma recursiva el código HTML que envía ZK al navegador.

Pongamos que los usuarios pincharan un botón de la página mostrada en el navegador, o modificaran un campo en un formulario. Si se registrara un gestor para ese evento, la máquina ZK AJAX notifica al servidor de dicho evento. ZK recibe el evento en el lado del servidor, y actualiza un estado de componentes que representan los elementos de la página. Los cambios realizados por los usuarios en el formulario se introducen al árbol de componentes que reflejan los elementos del formulario. Se invoca entonces un gestor adecuado de eventos.

El método puede leer datos actualizados del formulario, realizar algunas operaciones en la base de datos, decidir a continuación sobre la modificación de los datos mostrados o la estructura de la página, mostrando mensajes de validación o alguna pregunta dirigida al usuario. ZK pasa estos pedidos de vuelta a la máquina JavaScript que está funcionando en el lado del navegador, y que ejecuta las adecuadas modificaciones de HTML DOM.

Definición de formularios

La forma más conveniente para describir páginas web en el entorno ZK es mediante el lenguaje ZUL—un subconjunto de XML para describir IU de web. Las etiquetas de documentos ZUL corresponden a controles gráficos en los formularios y están anidados de la misma forma que los controles están insertados en la página. Esta es una idea tomada de XUL y desarrollada por Mozilla.

Un concepto similar es XAML implementado en la versión más reciente de Windows. Comparado con los métodos tradicionales de crear IU mediante API especializadas (como en GWT), una solución declarativa de este tipo tiene como resultado un código más corto y más lúcido, reduciendo el tiempo de desarrollo y facilitando el mantenimiento.

El Listado número 2 es un documento ZUL, y la Figura 2 es una página reproducida en su esencia (con algunas mejoras). La página consiste en una ventana que representa el contenido de la página, una etiqueta para mostrar mensajes, y un botón que desencadena la acción del lado del servidor.

Ante una solicitud de presentación, ZK crea un objeto iniciador de página del tipo HelloWorldInit y un controlador de ventanas HelloWorldCtrler. El identificador helloWindow es una referencia al objeto del controlador y permite la invocación a sus métodos dentro de los scriptles colocados en páginas ZUL.

((Las etiquetas de documentos ZUL corresponden a controles gráficos en los formularios))

El Listado número 3 (disponible online) es el iniciador de esta página. Su tarea es establecer la variable helloMsg en el contexto de página antes de reproducirla. La variable está accesible para EL (“Expression Language”), el mismo lenguaje que en JSP estándar.

La clase HelloWorldCtrler (Listado número 4, disponible online) potencia la definición de componentes org.zkoss.zul.Window. Su método showTime invoca getFellow de la clase de base para encontrar un componente Label. Un cambio de estado de este componente se ve reflejado automáticamente en el lado del cliente, sin necesidad de recargar toda la página y sin que los desarrolladores web escriban una sola línea de código JavaScript.

Embellecimiento de página

Podemos modificar la apariencia de los componentes ZUL mediante las hojas de estilo en cascada Cascading Style Sheets (CSS), de una forma similar a los documentos HTML. Por ejemplo, podemos hacer que la fuente del mensaje sea más gruesa mediante:

helloMsg”

style=”font-weight: bold”/>

No obstante, no es la mejor de las prácticas el definir directamente el estilo para cada control: Como con HTML, podemos definir conjuntos de estilos para documentos ZUL que pueden ser usados por identificadores de paso (véase el Listado número 5, disponible online).

Interfaz de documentos múltiples

La presentación visual de ventanas hijo es una técnica importante para construir complicadas IU en aplicaciones de cliente enriquecidas. Por ejemplo, el proceso permite la separación de algunos controles en wizards, que ayudan a rellenar un formulario. Por desgracia, ese tipo de técnicas no está disponible en las aplicaciones clásicas de web. ZK soporta el concepto permitiendo que una página consista de muchas ventanas anidadas, lo que también puede ser modal.

Cada una de esas ventanas está colocada en una capa separada de CSS y, con ayuda de un ratón, los usuarios pueden mover, cambiar el tamaño o cerrarlas. Para cada ventana, un servidor crea su propio hilo gestor de eventos. Para usar esa técnica en ZUL, aplicamos la etiqueta declarada con el parámetro mode fijado en overlapped o modal; véase el Listado número 6 (online).

Cómo visualizar los datos tabulares

La creación de tablas en ZK se simplifica con el atributo forEach, que se puede aplicar a cualquier componente ZUL. Acepta valores del tipo java.util.Collection o matrices. El uso de este atributo hace que se muestre muchas veces una etiqueta que es propietaria del atributo. El Listado número 7 (disponible online) es un ejemplo de dicha técnica.

El Listado número 7 incluye un script que prepara datos para tablas (el lenguaje scripting por defecto en ZK es BeanShell, que imita a Java; también podemos usar Groovy o Ruby). Se ejecuta cada vez que ZK carga la página. A continuación, el Listado numero 7 define una tabla y sus encabezados (etiquetas y ) seguido de una definición de filas de tablas. Cada control que tiene una etiqueta como su origen se interpreta como definición de una celda de la tabla.

El atributo forEach provoca la multiplicación de la definición de fila para cada elemento de la matriz tabularData. La variable each toma valores subsiguientes de la matriz que soporta el bucle. Esta variable está definida en zscript, pero es también accesible desde las expresiones EL.

Tablas con contenido dinámico

Supongamos ahora que queremos presentar visualmente un listado de objetos con contenido mutable; por ejemplo, un listado controlado por un filtro definido por el usuario. En las aplicaciones Swing, definimos un modelo y una vista. A continuación modificamos sólo el modelo, que notifica de los cambios a la vista, de forma automática, permitiendo que la misma actualice los datos mostrados.

Esto es una ventaja del patrón MVC, implementado por JTable. En ZK, procedemos de forma similar, y se actualiza una tabla sin recargar toda la página —sólo se cambia el fragmento necesario de código HTML (véase el Listado número 8, disponible online).

Tablas con controles anidados

A menudo, necesitamos añadir mayor interactividad a las celdas de la tabla de la IU que la que proporcionan las etiquetas simples. Por ejemplo, puede que queramos editar datos directamente en una tabla, o añadir columnas especiales con los botones edit o delete. Si asumimos que una tabla va a tener datos invariables, podemos insertar controles como en el Listado número 9 (disponible online).

La Figura 3 muestra el resultado de ejecutar esta página. En ese ejemplo, podemos ver algunas otras técnicas que son características del entorno ZK. Lo mismo que con JSP, algunos objetos por defectos están disponibles en las páginas ZUL. En el ejemplo, yo he usado:
– session, modelada en javax.servlet.http.HttpSession.
– page, representando el objeto de la página actual.
– self, que señala el componente en el que se produjo un evento.

Otra variable definida dentro del bucle forEach es forEachStatus.index, que cuenta las iteraciones del bucle. ZUL también ofrece la capacidad de definir valores de cualquier atributo de componentes en una etiqueta especial denominada . En el ejemplo, la he utilizado para simplificar un script que reacciona a un evento onClick.

Para cada componente ZUL, es posible definir sus propios atributos nuevos con ayuda de una etiqueta . Estos atributos pueden soportar como valores cualquier objeto Java. En el ejemplo, me permitió almacenar el número de una fila, y después identificarla al pinchar la tecla Delete.

Una interesante funcionalidad de la plataforma ZK es una clase que imita JOptionPane de la biblioteca Swing, que muestra diálogos estándar. En ZK, podemos usar org.zkoss.zul.MessageBox para este fin. Es particularmente útil en la programación web porque nos permite mezclar lógica de programas con interacción básica de usuario. Cualquiera que quiera pedir confirmación de una operación en curso después de comprobar algunas condiciones de la lógica comercial apreciará esta funcionalidad.

Al final del código ejemplo que gestiona el evento onClick, hay una redirección a otra página (en este caso, para forzar la regeneración, es la misma página). Aquí, utilizo un método estático sendRedirect de la clase org.zkoss.zk.ui.Executions, que es análogo a sendRedirect de javax.servlet.http.HttpServletResponse.

Tablas, Controles anidados y contenido dinámico

Al definir un modelo, hacemos que la tabla ZK sea la responsable de la visualización. En este caso, no obstante, no podemos especificar en ZUL qué controles queremos usar. ZK puede todavía ayudar con una técnica que define un reproductor a medida de la vista de las filas de la tabla (Listado número 10, disponible online).

El método render de la clase zkdemo.ui.view.GridRowRenderer es responsable de establecer el tipo de una fila individual de la tabla. Con ese fin, tiene que crear componentes hijos para el objeto org.zkoss.zul.Row, que visualiza las celdas en esa fila. En el programa ejemplo, eso tiene lugar al principio de este método, donde se crean etiquetas dentro de un bucle for.

((El método render de la clase zkdemo.ui.view.GridRowRenderer es responsable de establecer el tipo de una fila individual de la tabla))

El resto del método crea un botón adicional junto con su gestor de eventos ON_CLICK. Para completar el ejemplo, sólo necesitamos la tabla ZUL que establecerá el tipo de sus filas (Listado número 11, disponible online).

En este ejemplo, he usado también un método alternativo para compilar una IU en ZK, basada en una API especializada. Para cada etiqueta ZUL, hay una clase correspondiente con propiedades que reflejan los atributos de las etiquetas, posibilitando la creación de páginas enteras en sólo Java. A veces, esta técnica ofrece más flexibilidad que el uso de XML.

Nuestros propios componentes ZUL

La tecnología JSP nos permite definir etiquetas personalizadas escribiendo fragmentos JSP en un fichero aparte. De forma similar, podemos crear nuevos componentes ZUL encapsulando trozos de código ZUL o ZHTML dentro de un fichero. Podemos después importar esas definiciones a nuestra propia página, nombrarlas con algún alias, y usarlas de la misma forma que los componentes ZUL estándar. Al igual que con las etiquetas JSP a medida, podemos pasar parámetros a un componente definido de esa forma, estableciendo los atributos de la etiqueta.

Dichos parámetros están disponibles en el código del componente —como variables con los mismos nombres que los de los atributos, pero precedidos del prefijo arg. El Listado número 12 es un componente ejemplo de ZHTML, en tanto que el Listado número 13 (disponible online) muestra su uso en una página ZUL.

Integración con HTML, JSP, y JSF

El código ZUL puede ser fusionado fácilmente con HTML; por ejemplo, para organizar controles ZUL con la ayuda de tablas HTML, o para usar una funcionalidad específica como enviar correos desde páginas web. Hay dos métodos de mezclar juntos el código ZUL y el HTML. En primer lugar, las etiquetas XHTML pueden ser insertadas en los documentos ZUL después de declarar su espacio de nombre correcto (véase el Listado número 14; disponible online).

La segunda técnica consiste en usar una etiqueta especial ZUL y con un fragmento de HTML pegado dentro como su contenido (Listado número 15, disponible online).

Las aplicaciones actuales normalmente se compilar usando muchas y diferentes tecnologías. Las páginas ZUL permiten una integración fácil con el código existente de la capa de visión, creada mediante JSP o JSF. Ello es posible aplicando etiquetas en las páginas JSP, que incorporan fragmentos ZUL; por ejemplo:

Las páginas ZUL pueden también incluir otros recursos servidos por un contenedor de webs, como los servlets, las páginas JSP o las JSF, u otros ZUL o richlets. Esto se consigue también al aplicar la etiqueta :

Integración con componentes AJAX externos

Varios paquetes de código abierto que soportan la creación de interfaces avanzadas de web se distribuyen con la plataforma ZK. Entre ellos se encuentra una interfaz para Google Maps, JFreeChart (para generar diagramas avanzados), el FCKEditor gráfico de HTML, y un gestor de distribución de fronteras de la biblioteca Ext JS. Están integradas con la plataforma al estar envueltas en etiquetas ZUL. El Listado número 16 (disponible online) es un ejemplo de creación de presentaciones de datos con la ayuda de la etiqueta , que da acceso a la funcionalidad JFreeChart.

Conclusión

ZK parece ser una de las plataformas más interesantes para llegar y hacer más fácil la programación web. Su fuerte suite incluye interoperatividad con navegadores, un paradigma para gestionar eventos, funcionalidad MDI, y un conjunto de pulcros controles estándar. Y, según los resultados de las pruebas, su funcionamiento parece estar bien.

Entre las características emergentes se incluye un cliente ZK para dispositivos móviles y un esperado plug-in de Eclipse para el diseño gráfico de los ZUL. Por último, ZK es intuitivo y fácil de usar.

Entre las desventajas, hay un soporte incompleto para la navegación del teclado por una GUI (por ejemplo, para un componente de menú) y problemas ocasionales con la localización de mensajes estándar ocultos en ficheros JavaScript. DDJ

Andrzej es desarrollador de sistemas en Oslo. Se puede contactar con él en: andrzej.sekula@gmail.com.