ZK Direct RIA.

ZK Direct RIA es un framework Open Source para el desarrollo interfaces de usuario ricas en aplicaciones WEB. ZK esta basado en componentes y esta dirigido por eventos AJAX, las interfaces ZK se definen en su propio lenguaje de marcado (xml) llamado ZUML. ZK soporta todas las características de los frameworks para aplicaciones web modernos como: componentes visualmente atractivos, modificaciones en activo, data-binding, acceso a bases de datos/servicios web sin codificación manual etc.

Se que en este momento estarán pensado “No! , otro framework mas aplicaciones web Java” y no los culpo ya existen demasiados frameworks para J2EE , pero siempre es bueno conocer opción mas para nuestro arsenal de herramientas y quien sabe tal vez en alguna característica de este framework sea justo lo que necesitamos en un nuevo proyecto.
Esta es una pequeña introducción al framework y sus características principales. Actualmente he estado desarrollando un par de proyectos personales y prototipos de uso interno para el trabajo utilizando este framework y me ha resultado muy sencillo y hasta cierto punto divertido utilizarlo.

Zk esta diseñado con la premisa de traer la interactividad y la velocidad de respuesta de una aplicación de escritorio a las aplicaciones web. Todas las acciones hechas en la interfaz de usuario generan eventos que pueden ser interpretados por nuestra aplicación. El engine javascript de ZK se ejecuta en el cliente, captura los eventos generados en la interfaz y los entrega a la aplicación que se ejecuta en el servidor utilizando AJAX.

Las interfaces se pueden construir de manera programática, muy similar a una aplicación swing/awt o pueden ser definidas en un archivo XML usando el lenguaje de marcado ZUML. Toda la interfaz de usuario (árbol de componentes) y su estado para cada sesión se mantiene del lado del servidor. Existe una gran variedad de componentes para crear nuestra interfaz grafica (http://www.zkoss.org/zkdemo/userguide/ ), además podemos extender la funcionalidad de estos y definir nuestros propios componentes. Un componente o inclusive un archivo ZUML puede ser incluido y reutilizado como una macro en otros componentes.

ZK permite incrustar código Java ( Javascript, Ruby,Groovy también están soportados) dentro de elementos zscript que será interpretado por BeanShell, por lo tanto se pueden definir variables, métodos o clases que sirvan como manejadores de eventos. Algo que no se debe perder de vista al usar ZK es que todos los manejadores de eventos se ejecutan del lado del servidor sin importar si fueron escritos dentro de un elemento zscript en un ZUML o son métodos en una clase.
No hay necesidad de programar manualmente código para ejecutarse del lado del cliente usando javascript por lo tanto no se expone al cliente la lógica del negocio de nuestra aplicación (opcionalmente se pueden definir acciones del lado del cliente para manipular gráficos o animaciones)

ZK es solo pensado para dar soporte a la capa de presentación de una aplicación es decir la vista, no se asume ningún tipo de tecnología en la capa intermedia (Spring, EJB, JPA, Seam etc). Existen módulos y utilerías para integrar Spring WebFlow, Spring security, hibernate etc.

Para configurar el ambiente de desarrollo recomendado se sugieren los siguientes componentes

  • Eclipse con WTP (Se puede usar cualquier otro IDE)
  • Un contenedor de servlets (Apache Tomcat, Glassfish etc).
  • Bibliotecas de ZK (http://www.zkoss.org/download/zk.dsp). Basta con incluirlas en el directorio lib de nuestra aplicación web.
  • ZK Studio (Opcional). Es un plug-in para eclipse que proporciona un editor visual

Para agregar ZK a nuestra aplicación Web es necesario incluir en nuestro archivo web.xml algunos filtros, servlets y listeners.

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee <a href="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
" title="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
">http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
</a>    <display-name>basiczk</display-name>
        <listener>
                <display-name>ZK Session cleaner</display-name>
                <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
        </listener>
        <servlet>
                <description>
                The ZK loader for ZUML pages</description>
                <servlet-name>zkLoader</servlet-name>
                <servlet-class>
                org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
                <init-param>
                        <param-name>update-uri</param-name>
                        <param-value>/zkau</param-value>
                </init-param>
                <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet>
                <description>
                The asynchronous update engine for ZK</description>
                <servlet-name>auEngine</servlet-name>
                <servlet-class>
                org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
        </servlet>
        <servlet-mapping>
                <servlet-name>zkLoader</servlet-name>
                <url-pattern>*.zul</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
                <servlet-name>auEngine</servlet-name>
                <url-pattern>/zkau/*</url-pattern>
        </servlet-mapping>
        </welcome-file-list>
</web-app>

Opcionalmente se puede crear un archivo descriptor de la configuración en un archivo zk.xml dentro de WEB-INF. No se requiere ningún archivo de configuración más para tener una aplicación ZK.

Este es el típico ejemplo “Hola Mundo” utilizando una ventana de ZK.
zkbasic.zul

<?page title="ZK Hola mundo"?>
<window title="ZK APP">
        ZK Hola mundo!
</window>

Este ejemplo es trivial pero el “Hola mundo” siempre nos da una idea de la complejidad y el esfuerzo mínimo necesario para desplegar una salida, además que nos permite saber si nuestros ambiente de desarrollo funciona correctamente. Una vez desplegada nuestra aplicacion web en el contendor de servlets podemos accesarla de la siguiente manera : http://127.0.0.1://zkbasic.zul

Podemos insertar elementos zscript e introducir código en algún lenguaje soportado como javascript, Ruby o Java y serán ejecutados en el servidor por BeanShell. El lenguaje por default es Java.

<?page title="new page title" contentType="text/html;charset=UTF-8"?>

<window title="ZK APP" border="normal">
        <zscript>
                void displayMsg(){
                        Date now = new Date();
                        respmsg_lbl.setValue(msg_txt.getValue() + " " + now);
                }
        </zscript>
        <label id="msg_lbl" value="Mensaje : "/>
        <textbox id="msg_txt"/>
        <button id="msg_btn" label="Ver Mensaje" onClick="displayMsg()"/>
        <label id="respmsg_lbl" value=""/>
</window>

Si se prefiere un enfoque mas apegado al patrón MVC eliminando el código introducido en los ZUML, se deben crear clases con manejadores de eventos que hereden de la clase Composer o de un componente especifico (Window,Button etc) o inclusive utilizando simples POJO.

Zkbasic3.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>

<window title="ZK APP" border="normal" apply="SimpleComposer">
        <label id="msg_lbl" value="Mensaje : "/>
        <textbox id="msg_txt" value="@{controller.msg}"/>
        <label id="servmsg_lbl" value="@{controller.msg,load-after=msg_btn.onClick}"/>
        <button id="msg_btn" label="Ver Mensaje" forward="onHelloMessage"/>
</window>

SimpleComposer.java

import java.util.Date;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericComposer;

public class SimpleComposer extends GenericComposer{

        private String msg;
       
        public void doAfterCompose(Component com) throws Exception {
                super.doAfterCompose(com);
                com.setVariable("controller", this,true);
        }
       
        public void onHelloMessage(Event evt){
                Date now = new Date();
                msg = msg + " " +now;
        }

        public String getMsg() {
                return msg;
        }

        public void setMsg(String msg) {
                this.msg = msg;
        }
}

Ventajas y desventajas de ZK

El modelo basado en componentes, hace muy sencilla el diseño e implementación de interfaces graficas, los componentes de ZK son atractivos y variados. Existen mas de 200 componentes además de componentes con soporte a aplicaciones de terceros (GoogleMaps, JFreeChart, FCK Editor etc).

Al desarrollar aplicaciones, no es obligatorio usar un patrón especifico como MVC, si se desea se puede usar un enfoque mas libre para el desarrollo. La curva de aprendizaje en general no es muy pronunciada, es posible obtener resultados sin mucho esfuerzo.

ZK es extensible y personalizable , es posible extender la funcionalidad de los componentes existentes y reutilizarlos. Aunque es posible modificar la apariencia visual de los componentes no siempre es sencillo, a veces solo se necesita definir un par de reglas CSS para obtener resultados y otras veces se requiere modificar archivos .css completos. Definitivamente no es muy amigable con los diseñadores gráficos.

ZK es un framework open-source, la comunidad de desarrolladores es muy activa y constantemente se agregan nuevas características al framework. Tal vez un punto en contra es que también existen ediciones comerciales que incluyen algunas características que no están en la versión de la comunidad (componentes extras, Ajax Push), mejor rendimiento y soporte técnico.

Referencias
ZK Direct RIA
ZK Componentes
ZK Documentacion

En conclusión ZK es una muy buena opción para el desarrollo de aplicaciones es por mucho uno de los frameworks mas fáciles de usar que he probado. El modelo de ZK acelera el diseño e implementación de interfaces graficas, haciéndolo una muy buena opción para el desarrollo de prototipos. ZK definitivamente tiene más sentido en el desarrollo de aplicaciones web para una intranet que requieren de interfaces complejas y robustas con mucha interactividad, probablemente su uso en aplicaciones web para la Internet con cientos o miles de usuarios concurrentes sea más limitado pero también posible.

Como ven soy un usuario nuevo en esta comunidad, espero poder aportar algo y también aprender de la experiencia de todos los usuarios que participan en JavaMexico. Decidí estrenar mi blog con esta pequeña introducción a ZK y estoy planeando una segunda parte con algunos ejemplos mas útiles utilizando este framework.

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de luxspes

Zk: soporta client side cache?

Zk esta diseñado con la premisa de traer la interactividad y la velocidad de respuesta de una aplicación de escritorio a las aplicaciones web. Todas las acciones hechas en la interfaz de usuario generan eventos que pueden ser interpretados por nuestra aplicación. El engine javascript de ZK se ejecuta en el cliente, captura los eventos generados en la interfaz y los entrega a la aplicación que se ejecuta en el servidor utilizando AJAX.

Que tal le va a ZK con respecto a soporte para caché del lado del cliente? En caso de que si lo soporte... es posible controlarlo declarativamente usando ZUML? (O es necesario hacer codificación en JavaScript?)

Imagen de checotaku

ZK no tiene soporte para client Side Cache

ZK es un framework de los llamados "Server-centric", no hay un mecanismo de cache para el lado del cliente que pueda ser controlado de manera declarativa o programatica. Zk no fomenta el uso de javascript para el cliente, solo existen las llamadas Client-Side-Actions pero su uso se limita a animaciones o a la evaluación de expresiones. Si se quisiera implementar un cache para el cliente se necesitaría modificar el EngineAjax de ZK y algunos componentes para dar soporte a esa característica, pero sin duda requeriría de invertirle mucho tiempo.

En un framework del tipo "client-centric" como GWT deberia ser mucho mas sencillo usar un cache en el cliente o en su defecto implementar el mecanismo de cache en el servidor con la desventaja de que el cliente seguirá enviando request al servidor.

Definitivamente el cache en el cliente es una caracteristica deseable, pero el soporte en los frameworks (al menos los que yo conozco) esta muy escaso.

Imagen de benek

ZUML y zScript

Veo muy bien este framework, creo que ZUML es buena propuesta.

Pero...

No me agrada del todo esa característica del zScript, es llevar de nuevo la lógica hacia la vista, si los famosos "scriptlets" están ya muy mal vistos por crear desorden creo que esto es potenciar ese desorden aún más. Sería buena idea si el framework soportara esos scripts en archivos externos, serviría mucho para plugins, así como integrar un script Beanshell en otra app.

Por lo demás lo veo muy bien y fácil de manejar, ya me había dado una vuelta antes por su showcase de componentes y recuerdo que me agradaron bastante.

¡Muy buen aporte!

Saludos.

Javier Ramírez Jr.
http://twitter.com/xbenek

ZK

Saludos , no todo lo tienes que hacer con el zScript en el archivo .zul, puedes usar un controlador , de tal forma separas la logica de la vista algo haci:

En el archivo Zkbasic3.zul tendrias:

<window id="win" title="ZK APP" border="normal" use="Zkbasic3">      
        <label id="msg_lbl" value="Mensaje : "/>
        <textbox id="msg_txt"/>
        <button id="msg_btn" label="Ver Mensaje" onClick="win.displayMsg()"/>
        <label id="respmsg_lbl" value=""/>
</window>

En el archivo Zkbasic3.java tendrias

public class Zkbasic3 extends Window {    
    private Textbox msg_txt;
    private Label respmsg_lbl;
   
    public void onCreate(){
        initcomponentes();
    }
   
    private void initcomponentes(){
        msg_txt=(Textbox)getFellow("msg_txt");
        respmsg_lbl=(Label)getFellow("respmsg_lbl");        
    }
   
    public void displayMsg(){
        Date now = new Date();
        respmsg_lbl.setValue(msg_txt.getValue() + " " + now);
    }

}

Hola Javier. con ZK puedes

Hola Javier.

con ZK puedes tener esos 'scriptlets' en archivos externos, también te comento que por default el lenguaje de los scripts en tu página zk es java (precisamente haciendo uso de Beanshell tras bambalinas) y efectivamente pudieras hacerlos una especie de 'plugins' al modificar a la misma página solo cambiando el attributo del tag zscript language="milenguaje" por ejemplo.

Otra cosa padre por lo que me gustó mucho este framework es que no solo puedes hacer páginas .zul o .dsp, sino alternar con aplicaciones heredadas (servlets, jsp, etc), por ejemplo me fue posible tomar una aplicación jsp y usar la lógica que ya se tenía, pero ahora con una nueva GUI en ZK, mejorar la parte de controller (usando StripesFramework ) y la persistencia (usando Hibernate). El resultado es que pude 'modernizar' una aplicación que se hubiera tenido que tirar y volver a hacer completa y todo se hizo la verdad muy rápido y sencillo.

Saludos.

como insertar una linea en un formulario

ala porfavor alguien me puede decir como puedo hacer un insert si alguien sabe y me pudiera hechar la mano se lo agradeceria buen dia

Conexion JDBC ZK Ayuda por favor.......

Buenas, soy un programador junior en zk y aun no manejo muy bien lo de las conexiones con este framework, la verdad estoy adelantando un proyecto y proximamente entrare a la etapa de desarrollo, asi que les pido ayuda para que me expliquen como realizar una conexion a BD en mysql desde zk, ya sea con hibernate o con JDBC normal, mas para entender la parte de la clase web model y model aca en zk.

Cualquier ejemplo basico me sea muy util...

Gracias de antemano

ZK session

Hola buenas tardes necesito pasar la session del zk a un servlet.

Alguien sabe como hacer ese paso de la muerte.