Estuardo Garca

Diciembre

ZK Framework
Estuardo Garca
Este documento pretende embarcar al desarrollador a las aplicaciones RIA a travs
de ZK Framework, basado en ZK The Developers Guide de los mismos autores
del marco de trabajo, desde su instalacin y su uso ms bsico hasta aplicaciones
donde se utilicen patrones de diseo y desarrollo y uso de middleware como JDBC.
Para el uso de esta gua es necesario que el lector tenga los conceptos bsicos e
intermedios de programacin, conocimiento bsico de desarrollo de aplicaciones
WEB y de preferencia haber usado alguna distribucin de Eclipse y el lenguaje de
JAVA.

Guatemala, Guatemala

09

ZKFramework

Tabla de Contenidos
ZK Framework Tutorial .................................................................................3
Qu es ZK?................................................................................................3
Qu no es ZK?............................................................................................4
Manos a la obra! (Instalando lo que necesitamos) ................................................5
Obteniendo las herramientas...................................................................................... 6
ZK Studio ............................................................................................................. 7
Binarios ............................................................................................................... 9

Iniciando en ZK Framework .......................................................................... 11

Nuevo Proyecto con ZK ............................................................................................11
Hola Mundo!........................................................................................................14
Interaccin ..........................................................................................................17
El Elemento zscript .............................................................................................19
Lenguajes Script ....................................................................................................20
Elemento attribute.................................................................................................20
Expresiones EL ......................................................................................................21
Atributo id ...........................................................................................................21
Atributos if y unless................................................................................................22
Atributo forEach ....................................................................................................22
Atributos use y apply ..............................................................................................23
Implementando Clases Java en zscript .........................................................................25
El Atributo forward ................................................................................................26
Crear componentes manualmente ...............................................................................26
Definiendo nuevos componentes para una pgina en particular............................................28

ZKFramework 3

ZK Framework Tutorial
El siguiente documento va dirigido al lector interesado en construir aplicaciones Web
enriquecidas de manera fcil y rpida donde el uso de metodologas y cdigo AJAX sea
transparente y correctamente administrado por la plataforma ZK.
Para un mejor avance y captacin de la informacin que este documento provee, es
necesario que el lector tenga las siguientes habilidades y conocimientos:

HTML
Cascading Style Sheets (CSS)
Basic Programing
SQL (Structured Query Language)
Java
JDBC

En trminos de Hardware y Software el lector necesita de:

Windows based Computer, es decir algo que soporte el sistemas operativo de MS o

bien una computadora con un sistemas basado en alguna distribucin de Linux.
Servidor WEB y contenedor, tales como Apache Tomcat, Geronimo, GlassFish o bien
WebSphere Community Edition
Un gestor de base de datos para los ejemplos que realizaremos, para esto, de
preferencia un Oracle XE, es gratuito y es el que utilizare en esta gua. Para salir un
poco del MySQL de siempre.
IDE Eclipse

Qu es ZK?
ZK es un Framework o marco de trabajo orientado a eventos y basado en componentes, que
hace posible interfaces Web enriquecidas para el usuario. Incluye un conjunto de
componentes XUL y XHTML y un lenguaje de etiquetas llamado ZUML (Zk User interface
Markup Language).
Con ZK, se puede representar una aplicacin con caractersticas enriquecidas por medio de
componentes XUL y XHTML los cuales se puede manipular a travs de los eventos disparados
por la actividad de los usuarios, similar a lo que se realiza en las aplicaciones de escritorio.

ZKFramework

A diferencia de otros frameworks AJAX, AJAX se encuentra detrs de la escena

(Transparente para el desarrollador). La sincronizacin del contenido de los componentes y
la asociacin de los eventos se realizan automticamente por el motor de ZK.
De esta forma los usuarios obtienen la misma interaccin y respuesta que la de una
aplicacin de escritorio en la Web, mientras que los desarrolladores retienen la simplicidad
que obtenan en el desarrollo de las aplicaciones de escritorio.
Adicionalmente al modelo simple y componentes enriquecidos, ZK tambin soporta un
lenguaje de etiquetas llamado ZUML. ZUML, parecido a XHTML, hace posible a los
desarrolladores el diseo de las interfaces sin la necesidad de programacin. Con el
conjunto de nombres XML (namespaces), ZUML de manera similar, integra diferentes
conjuntos de etiquetas en la misma pgina. Actualmente ZUML soporta dos conjuntos de
etiquetas, XUL y HTML.
Para el desarrollo de prototipos y personalizacin ZUML permite a los desarrolladores el uso
de expresiones EL, y el uso de cdigo incrustrado (Scripts) en diferentes lenguajes,
incluyendo pero no limitando a: Java, JavaScript, Ruby y Groovy. Los desarrolladores puede
escoger a no incrustar ningn tipo de cdigo segn como se prefiera y se tenga una
disciplina ms rgida. A diferencia de JavaScript incrustado en HTML, ZK ejecuta todo el
cdigo del script en el servidor y no en el cliente.
Es interesante notar que todo se ejecuta del lado del servidor desde el punto de vista del
desarrollador. Los desarrolladores de componentes tiene que balancear la interactividad y
simplicidad para decidir que se realizar en el navegador (browser) y que en el servidor, de
manera que el desarrollador de aplicaciones no se preocupe por saber que debe de
ejecutarse de que lado.

Qu no es ZK?
ZK no contiene nada acerca de la persistencia o comunicacin entre servidores. ZK esta
diseada para ser un Framework lo ms liviano posible. Solamente esta enfocado en la capa
de presentacin. No requiere ni sugiere el uso de cualquier tecnologa back-end. Las
tecnologas middleware como lo es JDBC, Hibernate, Java Mail, EJB o JMS funcionan de la
manera tradicional.

ZKFramework 5
ZK no provee tnel, RMI ni ninguna otra API para la comunicacin entre clientes y
servidores. Es por esto que todo el cdigo se ejecuta en el servidor en la misma JVM.
ZK no obliga a los desarrolladores a usar MVC o algn otro patrn de diseo, el patrn que
se use es una decisin propia del desarrollador, por lo mismo es importante ser ordenados y
tener una disciplina para un fcil mantenimiento de la aplicacin.
ZK no apunta a traer XUL a las aplicaciones WEB. Se enfoca en traer el modelo de
aplicaciones de escritorio a las aplicaciones WEB. Actualmente, soporta XUL y XHTML pero
en el futuro podra soportar XAML y XQuery.
ZK empotra AJAX en la actual implementacin, pero no termina donde AJAX termina. Con
ZK API for Mobile Devices, las aplicaciones puede alcanzar cualquier dispositivo que soporte
J2ME tales como PDAs, telfonos mviles y juegos de consolas (incluyendo portables, en
dispositivos con pequeas pantallas la presentacin de las pginas son ajustadas). Para esto
no sera necesario modificar toda la aplicacin ya realizada.
ZK tampoco va orientado a la realizacin de aplicaciones que pretenden el uso complejo de
computo de lado de los clientes, tales como los juegos 3D.
Como notacin importante, el interprete de scripts dentro de ZUML estn basadas en los
siguientes motores:

Java BeanShell (http://www.beanshell.org)

JavaScript Rhino (http://www.mozilla.org/rhino)
Ruby JRuby (http://jruby.codehaus.org)
Groovy Groovy (http://groovy.codehaus.org)

Si deseas ms informacin acerca de XUL y documentacin dirgete al sitio de mozilla

https://developer.mozilla.org/en/XUL_Reference

Manos a la obra! (Instalando lo que necesitamos)

Como ya es tpico de todos los tutoriales que circulan, nuestro primer ejemplo a realizar
sera nuestro Hola Mundo, en este ejemplo mostraramos XUL en una pgina ZUML. Las
herramientas a utilizar sera Eclipse y ZK Studio, para lo cual lo primero que tenemos que

ZKFramework

hacer es conseguir el software si es que an no lo tenemos. A continuacin detallo los

lugares de descarga para nuestro IDE y el plugin que nos servir en todo este tutorial de ZK.

Obteniendo las herramientas

Lo primero ser descargar nuestro IDE Eclipse para el uso de ZK Studio, aunque en la
actualidad, ZK Studio puede ser instalado en NetBeans e IBM RAD 7.5 (Para estos dos IDEs
ver el sitio de www.zkoss.org para la descarga de Studio y REM para netbeans )
Eclipse lo podemos obtener en www.eclipse.org/downloads/ existen varias distribuciones,
podramos utilizar cualquiera de las siguientes:

Eclipse IDE for Java EE Developers (188 MB) [Recomendado]

Eclipse Classic 3.5.1 (161 MB)
Eclipse IDE for Java Developers (91 MB)

Si piensan trabajar en otros proyectos JEE ser mejor que descarguen la distribucin de 188
MB, actualmente la versin con la que trabajar este tutorial ser la que se mira en la
siguiente imagen:

Una vez se hayan descargado la distribucin de Eclipse preferida, deben de instalar ZK

Studio, la gente de POTIX (Autores de ZK Framework) han desarrollado el plugin para la
instalacin e integracin con el IDE en lnea, de esta forma ser ms transparente su uso.
En caso de que estn usando otro IDE ya mencionado den un vistazo en www.zkoss.org para
la instalacin manual. Caso contrario sigan leyendo acerca de cmo instalar nuestro plugin
ZK Studio, por supuesto que de la siguiente manera necesitaremos de una conexin a
Internet.

ZKFramework 7
Adicionalmente al IDE es necesario que nos descarguemos Apache Tomcat en donde
estaremos publicando nuestras pginas. Para esto visiten el sitio de apache y descarguense
los binarios del contenedor de preferencia la versin 6. (http://tomcat.apache.org/)

ZK Studio
ZK Studio es la herramienta que junto con Eclipse nos permitir desarrollar nuestras pginas
web de manera sencilla. Podremos trabajar los archivos ZUML con herramientas WYSIWYG
proporcionada por los creadores de ZK Framework.
1. Lo primero que debemos hacer es, en Eclipse nos dirigimos al men Help Software
Updates

2. La opcin anterior abrir una ventana que nos permite agregar sitios de descarga de
plugins para su integracin con nuestro IDE. Luego de que nos aparezca la siguiente
ventana, demos clic en el botn Add Site bajo la pestaa o apartado Available
Software

ZKFramework

3. Una vez aparezca la ventana de la siguiente imagen agregamos el texto

http://studioupdate.zkoss.org/studio/update para luego presionar el botn de
OK

4. El IDE se conectar en segundo plano y luego actualizar la ventana de Software

Updates and Add-ons, chequeamos el nuevo item seleccionado y presionamos el botn
de Install tal y como se mira en la siguiente imagen.

Dependiendo de su ISP y el servicio contratado el tiempo de instalacin puede variar,

en mi caso, con 512 kbps de descarga me tomo alrededor de 5 minutos. Una vez que

ZKFramework 9
Eclipse identifica lo que desea instalar aparecer otra ventana, en esta solamente
presionen el botn de finalizar para que instale y actualice el paquete.
Como sabremos si la instalacin fue satisfactoria? Bueno, en realidad es sencillo, basta
con reiniciar el IDE y veremos una nueva pestaa de bienvenida de ZK tal y como se
mira en la siguiente imagen.

Binarios
1. Por ltimo solo tenemos que descargarnos los binarios de ZK Framework y relacionarlo
con nuestros proyectos para empezar a trabajar. As que, lo siguiente es descargarnos
del sitio de ZK lo binarios, dirjanse a http://www.zkoss.org/download/zk.dsp y
descarguen el paquete de ZK 3.6.3, en otra oportunidad veremos ZK 5. Una vez nos
hayamos descargado el paquete, lo descomprimimos y el contenido lo ubicamos en
alguna ruta sencilla pues esta ruta la tenemos que buscar e ingresar en nuestro IDE.
2. Ahora en Eclipse nos dirigimos al men del IDE, la disposicin
de las opciones del men depender del SO que utilicen, por
ejemplo en Windows, dirjanse en el men Window
Preferences en mi caso, me dirijo al men Eclipse
Preferences

3. Bien en la ventana de
preferencias
del
IDE
buscamos en el rbol de
opciones la etiqueta ZK y
lo desplegamos para ver y
seleccionar ZK Packages.

10

ZKFramework
En la imagen anterior nos muestra la seccin ZK Packages, bsicamente lo que hay
que hacer es presionar el botn Add File/Directory y seleccionar el directorio donde
tengamos nuestros binarios de ZK Framework. Como ven ZK Studio nos permite tener
varias distribuciones del Framework para poder trabajar sin conflictos que pudieran
existir entre versiones (Aunque la verdad, yo no encontr ninguno) para el desarrollo y
distribucin a nuestro Web Server de preferencia.
Luego de agregado solo verificamos que este chequeada la versin que deseamos
utilizar y presionamos el botn Apply y luego OK. Ahora estamos listos para
empezar nuestros proyectos con ZK Framework.

ZKFramework 11

Iniciando en ZK Framework
Como ya es de costumbre para todos, siempre que emprendemos un viaje en alguna nueva
plataforma de desarrollo lenguaje lo primero que hacemos es el famoso Hola mundo!,
bien pues esta no ser la excepcin.
Para empezar, iniciemos Eclipse, el IDE nos
preguntar por nuestro Workspace y por orden
vamos a crear uno nuevo. A mi workspace de
nombre le pondr tutorial_zk_09, para los
que no han trabajado an con Eclipse o
similares esto no es ms que una carpeta de
donde quedar guardado nuestro cdigo fuente, binarios del mismo, libreras utilizadas y
configuraciones propias del IDE as como de la plataforma sobre la cual estamos trabajando.
Esto le permite a Eclipse generar y administrar de manera adecuada la distribucin de la
aplicacin que vamos a realizar.

Una vez iniciado el workspace y el IDE cargado vamos al

men File New Dinamic Web Project, para crear un
proyecto en donde iremos nuevas pginas segn vamos
avanzando.

Nuevo Proyecto con ZK

Bien, ahora nos aparece una nueva pantalla en donde
bsicamente nombramos nuestro proyecto, le
asignamos la plataforma que trabajaremos (ZK
Framework) y el servidor donde estaremos publicando.

Tomen nota de la imagen anterior, de los cuales vamos

a explicar los campos que modificaremos para crear
nuestro proyecto los cuales detallo.

1. Project name, Aca le ponemos un nombre a

nuestro proyecto, debe ser un nombre vlido de lo contrario en la parte superior vern

12

ZKFramework
un mensaje indicando que error contiene el nombre. Al proyecto lo llamaremos
EjerciciosZK.

2. Target Runtime, Ac escogemos el contenedor Apache Tomcat que vamos a utilizar

y definimos la localidad de los binarios tal y como se mira en la siguiente figura. Para
esta ventana nueva presionen el botono New
Asegurense de haber seleccionado en
el arbol Apache Apache Tomcat
v6.0. Una vez seleccionado den clic
en el botn Next >.

Luego veran la siguiente ventana, ac

ponen la ruta de Apache Tomcat que
se descargaron (los binarios) y en el
JVM seleccionen la 1.6 o la 1.5 segn
la versin que ustedes dispongan. Para
la JVM entre la 1.5 y 1.6 no he tenido
problemas al cambiar entre JVMs.
Luego den clic en el botn de finalizar.

3. De regreso en la ventana de
Dinamic Web Project vemos bajo la
etiqueta de configuracin un botn
que dice Modify

ZKFramework 13
En esta nueva ventana que se abre (Project Facets) vamos a seleccionar los siguientes
tems que se ven en la siguiente imagen para que de esta manera poder trabajar
adecuadamente con el Framework.

Adicionalmente la seleccin de los tems se puede guardar, como vern en el combo box
con la etiqueta Configurations ya tiene uno que guarde con el nombre de ZK Project
Configuration esto con la idea de ahorrarme este paso cada vez que desee crear un
nuevo proyecto.
4. Por ltimo aceptamos la seleccin para la
configuracin del proyecto, regresamos a la
ventana inicial de Dinamic Web Project y
presionamos el botn de finalizar. Como resultado
veremos en la pestaa de Project Explorer las
secciones creadas en donde estar todo lo
relacionado a este proyecto. El ZK Studio crea el
archivo ZK.xml y modifica el archivo web.xml para
que el despliegue y funcionamiento de las pginas
sea el correcto.

14

ZKFramework

Hola Mundo!
Despus de haber instalado ZK, ZK Studio y configurado nuestro nuevo proyecto, es tiempo
de empezar a escribir nuestras aplicaciones. Para empezar solamente tenemos que crear un
archivo, que diga Hola Mundo!, este archivo debe ser creado bajo el directorio correcto y
seleccionado. Nosotros vamos a crear una nueva carpeta dentro de WebContent bajo el
nombre de GettingStarted.
Para aquellos que an se estn familiarizando con Eclipse, es sencillo, solamente en Project
Explorer seleccionen la carpeta llamada WebContent, clic derecho y seleccionen New
Folder del men emergente y asgnenle el nombre anteriormente dicho.
Ahora damos clic derecho sobre la carpeta
GettingStarted y el men emergente
seleccionamos New ZUL y en la caja
de texto con la etiqueta File Name
escribimos hola.zul y en Page Title
escribimos Hola.
Una vez lo hayamos escrito presionamos
finalizar y veremos que nos aparece ahora
el cdigo de nuestra nueva pgina la cul
vamos a cambiar inmediatamente. Hay que notar que en el cdigo de abajo hay un texto
que dice New Content Here! Pues bien vamos a cambiarlo por el texto que se mira en la
imagen que le sigue a la flecha.

ZKFramework 15
Bien, ahora iniciamos Tomcat, el archivo web.xml tiene las etiquetas necesarias para que el
proyecto pueda ser publicado en Tomcat, es decir, posiblemente el deployment no funcione
correctamente con un Gernimo por ejemplo.
En Eclipse vern la pestaa Servers damos clic izquierdo y una vez seleccionada en la
parte blanca del panel damos clic derecho y en el men emergente seleccionamos New
Server.
Aparecer una ventana como la siguiente:

Solamente verifiquen que el servidor sea Tomcat v6, dejen todo como esta y presionen el
botn Finish. Una vez hecho esto solo debemos iniciarlo, en algunos casos deberemos de
agregar algunos argumentos de inicio al servidor, como la memoria inicial asignada, pero
eso lo veremos cuando lo necesitemos.
Para iniciar solo basta con
seleccionar del listbox el servidor
nuevo que agregamos y dar clic en
la flechita verde
circulo verde.

dentro

del

Nota: Para poder ver el resultado de

16

ZKFramework

nuestra pgina es necesario que iniciemos nuestro webserver/contenedor, as que, en los siguientes ejercicios que se
realicen no explicaremos de nuevo como iniciar nuevamente Tomcat y asumiremos que el lector de manera
predeterminada lo har cada vez que vuelva a retomar el tutorial.

Una vez iniciado el contenedor vamos a desplegar o publicar nuestro proyecto, para esto
seleccionamos de nuevo nuestro servidor del listbox anterior y damos clic derecho, en el
men emergente seleccionamos Add and Remove Projects, veremos que en el list de
Available Projects esta EjerciciosZK, pues bien lo seleccionamos y presionamos el botn
Add > y luego finalizar.
Entonces, en su navegador de preferencia escribimos
http://localhost:8080/EjerciciosZK/GettingStarted/hola.zul (donde localhost puede ser tu
IP, el nombre de tu mquina o bien la direccin 127.0.0.1), y lo que veremos ser esto

En una pgina ZUML (*.zul), un elemento XML es el que describe que componente debe
crear. En este ejemplo, es una ventana, o sea la etiqueta window
(org.zkoss.zul.Window). Los atributos XML son usados para asignar los valores a las
propiedades de los componentes. En este ejemplo, Crea una ventana con un ttulo y con un
borde, el cual es realizado asigando a title y border las propiedades Hola y normal
respectivamente.

ZKFramework 17

El texto que se encierra en los elementos XML es tambin interpretado como un

componente especial llamado label (org.zkoss.zul.Label). Por lo tanto, el ejemplo anterior
sera el equivalente a

Y tambin equivalente a esto

Interaccin
Ahora debemos de poner un poco de interaccin con el usuario de nuestro ejercicio, vamos
a cambiar el texto que tenemos en nuestro archivo hola.zul por lo siguiente:
<?page title="Hola" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Hola" border="normal">
<button label="Di hola" onClick="alert(&quot;Hola Mundo&quot;)"/>
</window>
</zk>

18

ZKFramework

Por supuesto grabamos los cambios y nos dirigimos a nuestro explorador refrescamos la
pgina y damos clic en el botn y veremos lo siguiente:

El atributo onClick es un atributo especial usado para agregar un event listener al

componente, El atributo podra tener cual cdigo java. Note que se uso &quot; para
denotar las dobles comillas () para que el documento sea un XML vlido. Si el lector no
esta familiarizado con XML, ser conveniente la lectura acerca de XML para una mejor
comprensin de la lectura.
La funcin alert es una funcin global, para desplegar un mensaje de dilogo. Este es una
abreviatura de el mtodo show de la clase org.zkoss.zul.Messagebox class.
<button label="Di hola" onClick="Messagebox.show(&quot;Hola Mundo&quot;)" />

Hay que notar que la ventana modal, bloqueo del contenido y funcionalidad del popup fue
realizado sin que hayamos tenido que realizar ningn tipo de programacin ni codificacin
JavaScript, el framework realiza estas tareas por nosotros manteniendo actualizado el DOM.

Notas:

Los scripts empotrados in una pgina ZUML pueden ser escritos en diferentes lenguajes,
incluyendo pero no limitndose a JAVA, JavaScript, Ruby y Groovy. Sobre todo los scripts se
ejecutan en el servidor y no del lado del cliente, an cuando sea JavaScript el lenguaje
seleccionado.

ZKFramework 19

ZK usa BeanShell para interpretar Java en tiempo de ejecucin, por lo tanto, se pueden declarar
funciones globales, tales como alert. Similarmente, todos los scripts (refirindose a los
lenguajes) proveen una manera simple de definir funciones globales y en algunos casos clases.

Las

clases

en

los

paquetes

java.lang,

java.util,

org.zkoss.zk.ui,

org.zkoss.zk.ui.event

org.zkoss.zul son importados antes de la evaluacin del cdigo del script empotrado en la pgina.

El Elemento zscript
El elemento zscript es un elemento especial que define los cdigos script que sern
evaluados cuando la pgina sea renderizada (asignar y calcular todas las propiedades de un
objeto antes de mostrarlo en pantalla). Las expresiones EL no pueden usarse en el cdigo
zscript.
Por ejemplo, el siguiente cdigo despliega diferentes mensaje cada vez que el botn es
presionado.
<window title="Hola" border="normal">
<button label="Di hola" onClick="diHola()"/>
<zscript>
int count = 0;
void diHola() {
alert("Hola Mundo! "+ ++count);
}
</zscript>
</window>

ZScript es evaluado solamente cuando una pgina es creada, usualmente es utilizado para
definir mtodos y variables iniciales. Como desarrollador estamos acostumbrados al syntax
highlighting, no es algo que no tengamos para los cdigos zscript, vasta con agregar
<![CDATA[ y ]]> al inicio y final de zscript respectivamente como se mira a continuacin.
<window title="Hola" border="normal">
<button label="Di hola" onClick="diHola()"/>
<zscript>
<![CDATA[
int count = 0;
void diHola() {
alert("Hola Mundo! "+ ++count);
}
]]>
</zscript>
</window>

20

ZKFramework

Lenguajes Script
Por defecto, el lenguaje que se asume para zscript es Java. Sin embargo, se pueden
seleccionar diferentes lenguajes especificandolo en el atributo language. El valor del
atributo language es case insensitive, o sea, no importa como lo escribamos en cuanto a
maysculas o minsculas.
<zscript language="javascript">
alert('Hola, con javascript');
new Label("Hola, JavaScript!").setParent(win);
</zscript>

Tambin se puede especificar el lenguaje para el manejador del evento agregando el

prefijo javascript: tal y como se mira en el siguiente cdigo (Es importante que no hayan
espacios en blanco ni antes ni despus del nombre del lenguaje).
<window id="win" title="Hola" border="normal">
<button label="Di hola" onClick="javascript: alert(&quot;Hola!!&quot;);"/>
</window>

Puedes tener en una misma pgina varios scripts con diferentes lenguajes.
Cdigo Scripts en archivos separados

Para separar los cdigos y vistas, los desarrolladores pueden dejar sus scripts en un archivo
separado digamos un diHola.zs y usar el atributo src para referirse al archivo zs.
<window id="win" title="Hola" border="normal">
<button label="Di hola" onClick="diHola()"/>
<zscript src="diHola.zs"/>
</window>

Asumiendo que el contenido de diHola.zs es como el siguiente

int count = 0;
void diHola() {
alert("Hola mundo! "+ ++count);
}

Elemento attribute
El elemento attribute es un elemento especial que define un atributo XML para los
elementos que lo encierran. Con un uso propio, puede hacer que la pgina sea ms
entendible (refirindonos al cdigo). Lo siguiente es equivalente a hola.zul que ya habamos
realizado.
<button label="Di hola">
<attribute name="onClick">alert("Hola Mundo!");</attribute>

ZKFramework 21
</button>

Como ven, attribute nos es til para poder ordenar nuestro cdigo, pues el atributo onClick
de button lo sacamos de la etiqueta y la alojamos como una etiqueta hija de button.

Expresiones EL
Igual que en JSP, podemos usar expresiones EL en cualquier parte de una pgina ZUML,
excepto en los nombres de los atributos y procesamiento de instrucciones. Recordemos que
una expresin EL usa la siguiente sintaxis ${expresin}.
Cuando una expresin EL es usada para el valor de un atributo, puede retornar cualquier
clase de objeto tanto como el objeto lo permita. Por ejemplo, en la siguiente expresin se
evala una expresin tipo Boolean.
<window if="${algo >10}" />

Los objetos implcitos usualmente usados en EL, talse como param y requestScope, y
objetos ZK implcitos, tales como, self y page son soportados para simplificar el uso.
<label value="${param.quien} hace ${param.que}" />

Para importar un mtodo, se puede usar una instruccin de procesamiento llamada xelmethod como la siguiente:
<?xel-method prefix="c" name="forName"
class="java.lang.Class"
signature="java.lang.Class forName(java.lang.String)"?>
<textbox value="${c:forName('java.util.List')}"/>

Atributo id
Para el acceso a componentes en cdigo Java y expresiones EL, se puede asignar un
identificador al mismo, para esto se usa el atributo id. En el siguiente ejemplo, se agrega
un identificador a la etiqueta, de tal manera que se pueda manipular su valor cuando un
botn es presionado.
<window id="win" title="Ejemplo" border="normal" width="200px">
Te gusta ZK? <label id="label"/>
<separator />
<button label="Yes" onClick="label.value = self.label"/>
<button label="No" onClick="label.value = self.label"/>
</window>

22

ZKFramework

Despus de presionar el botn Si se vera la siguiente imagen.

El siguiente ejemplo, se hace referencia a un componente desde una expresin EL

utilizando el valor del atributo id.
<textbox id="fuente" value="ABC" />
<label value="${fuente.value}" />

Atributos if y unless
Los atributos if y unless son usados para controlar cuando un componente es creado o no.
En los siguientes ejemplos, las dos etiquetas son creadas solamente s el parmetro llamado
vote al evaluarse retorna ser verdadero.
<window border="normal" title="Ejemplo 2" width="200px">
<label value="Vote 1" if="${param.vote}" />
<label value="Vote 2" unless="${!param.vote}" />
</window>

Para probar el ejemplo anterior, prueba mandando en tu pgina de prueba el parametro

vote con un valor true o false, tal y como se mira en la siguiente cadena,
http://localhost:8080/EjerciciosZK/GettingStarted/hola.zul?vote=true, cambien el valor y
tambin cambien por ejemplo las negaciones ! de los atributos unless e if para que puedan
ver la diferencia.

Atributo forEach
La propiedad atributo forEach es usada para controlar cuantos componentes deseamos
crear. Si se especifica una coleccin de objetos con este atributo, ZK Loader crear un
componente para cada elemento o tem de la coleccin especfica. Por ejemplo, en la
siguiente pgina ZUML, el elemento listitem ser evaluado tres veces (Para lunes, martes y
mircoles) y se generar tres listados de tems.
<zscript>
<![CDATA[
String[] contacts = {"Lunes", "Martes", "Mircoles"};
]]>
</zscript>
<listbox width="100px">
<listitem label="${each}" forEach="${contacts}"/>
</listbox>

ZKFramework 23
Cuando se evala el elemento con el atributo forEach, la variable each es asignada uno a
uno a los objetos de la coleccin, para nuestro ejemplo contacts. Los siguientes bloques de
cdigo son equivalentes al cdigo de arriba.
<listbox width="100px">
<listitem label="${each}" forEach="Lunes, Martes, Miercoles"/>
</listbox>
<listbox width="100px">
<listitem label="Lunes" />
<listitem label="Martes" />
<listitem label="Mircoles" />
</listbox>

Adicionalmente a forEach, se puede controlar la iteracin con forEachBegin y forEachEnd

ms adelante veremos como utilizarlos, pero bsicamente, estos dos atributos deben de
relacionarse a una expresin condicional, una vez esta expresin se cumpla permitir que la
iteracin inicie o bien que la iteracin finalice antes de recorrer todos su elementos.

Atributos use y apply

Cuando se tiene cdigo empotrado en la vista inadecuadamente, el mantenimiento puede
se muy difcil. Existen muchas maneras de separar cdigos de vistas.
Primero, se podra escuchar los eventos que nos importan, y luego invocar los mtodos
apropiados y correspondientes. Por ejemplo, podramos invocar nuestros mtodos para
inicializar, procesar y cancelar desde los eventos onCreate (Cuando se crea una ventana en
la pgina ZUML), onOk (Cuando se presiona la tecla enter), onCancel (Cuando se presiona la
tecla ESC).
Por ejemplo en el siguiente ejemplo, se tiene la pgina ZUL y adicionalmente nuestra clase
en Java llamada MyManager tal y como se muestra a continuacin.
ZUL
<?page title="Apply Attribute [Ejemplo]" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Apply Attribute [Ejemplo]" border="normal" use="MyManager"
onOK="MyManager.save(main)" onCancel="MyManager.cancel(main)"/>
</window>
</zk>

JAVA
import org.zkoss.zul.Window;
public class MyManager extends Window{
public void onCreate() {
//Mtodo de inicializacin
}

24

ZKFramework

public void onOk() {

// Salvamos el resultado
}
public void onCancel() {
// Se cancela cualquier cambio
}
}

Sin embargo, el ejemplo anterior requiere que se empotre algo de cdigo en la pgina
ZUML. La ventaja de empotrar cdigo en el GUI es el cambio dinmico del comportamiento
(particularmente en la fase de prototipo), pero cierto cdigo de mantenimiento y de
desempeo puede se lento a la hora de querer cambiarse. Ms adelante veremos un
ejemplo completo de cmo dividir nuestro cdigo y lgica de la aplicacin de la vista.
El Atributo use

Si se prefiere no usar ningn cdigo java en las pginas ZUML, se puede extender la
implementacin de manejador (handler) de eventos de un componente como se muestra en
la siguiente clase:
import org.zkoss.zul.Window;
public class MyWindow extends Window{
public void onCreate() {
//Mtodo de inicializacin
}
public void onOk() {
// Salvamos el resultado
}
public void onCancel() {
// Se cancela cualquier cambio
}
}

Y se especifica en la pgina ZUML como sigue:

<window title="Apply Attribute [Ejemplo]" use="MyWindow">

El Atributo Apply

Tambin si se prefiere el acercamiento MVC (Model View - Controller), por ejemplo, para
no empotrar cdigo en la ventana (refirindose a la vista de la aplicacin), se puede

ZKFramework 25
implementar una clase que inicialice la ventana. Esta clase debe de implementar la
interface org.zkoss.zk.ui.util.Composer.
package ejercicioszk.gettingStarted;
import org.zkoss.zul.Window;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Composer;
public class MyManager implements Composer{
@Override
public void doAfterCompose(Component comp) throws Exception {
((Window) comp).setTitle("My Title");
//SE hace cualquier otra inicializacin que se desee
//Comp es una ventana, desde luego que nosotros lo especificamos ms adelante
}
}

Donde asumimos que tenemos tres event listeners, MyCreate, MyOk y MyCancel. Esto lo
veremos en la seccin de eventos y la explicacin de los event listeners (no creo que sea
adecuado la traduccin de event listeners).
Luego especificamos la clase en nuestra pgina ZUML con el atributo apply como se muestra
abajo.
<window title="Apply Attribute [Ejemplo]" apply="ejercicioszk.gettingStarted.MyManager">

Implementando Clases Java en zscript

Gracias al poder de BeanShell, la implementacin de clases Java, puede ser realizado en
zscript como se muestra a continuacin.
<zscript>
<![CDATA[
public class MyWindow extends Window {
}
]]>
</zscript

Otra forma de separar el cdigo de la vista, podemos poner todos los cdigos zscript en un
archivo separado, digamos myZscriptCode.zs y de esta manera dentro del elemento zscript
lo llamamos con el atributo scr del elemento tal y como sigue.
<zscript scr="/zs/myZscriptCodes.zs"/>

26

ZKFramework

<window user="MyWindow" />

El Atributo forward
Una ventana usualmente consiste en muchos botones, mens y otros controles. Por
ejemplo:
<window border="normal" title="MiVentana">
<button label="OK" />
<button label="Cancel" />
</window>

Cuando un usuario presiona un botn, el evento onClick es disparado por el botn. Sin
embargo, estos eventos es mejor procesarlos en la ventana en lugar de hacerlo en cada
uno de los botnes. Para esto, se puede usar el atributo forward como sigue:
<window border="normal" title="MiVentana">
<button label="OK" forward="onOk"/>
<button label="Cancel" forward="onCancel"/>
</window>

Donde el atributo forward del botn OK que el evento onClick, si se recibe, debe de ser
enviado de regreso al dueo del espacio (owner space, en este caso el dueo es window,
que es el contenedor donde reside el botn) como el evento onOk. Similarmente, en el
evento onClick del botn Cancel, es regresado al owner space como evento onCancel.
Adicionalmente en nuestra clase Java MyWindow tendramos declarados los eventos
onOk() y onCancel() para que realice lo que deseamos hacer.
No solamente podemos enviar en el evento onClic de regreso al space owner, se puede
retornar cualquier evento a cualquier componente con el atributo forward.

Crear componentes manualmente

Se puede describir en la pgina ZUML que componentes deseamos crear y los podemos crear
manualmente. Todas las clases de componentes son concretas y las podemos crear
utilizando sus constructores.
<window border="normal" title="MiVentana" id="MiVentana">
<button label="Agregar item">
<attribute name="onClick">
new Label("Agregado el "+new Date()).setParent(MiVentana);
new Separator().setParent(MiVentana);
</attribute>
</button>
<separator></separator>

ZKFramework 27
</window>

Cundo un componente es creado manualmente, no se agrega a cualquier pgina

automticamente. En otras palabras, no aparecer en el navegador del usuario. Para
agregarlo a la pgina, debemos invocar el mtodo setParent, appendChild insertBefore
para asignarlo al componente padre, de esta manera se vuelve parte de una pgina si el
componente padre por supuesto tambin pertenece a una.
No hay mtodo destroy close para los componentes como en otros marcos de trabajo.
Un componente se elimina del navegados tan pronto como el mismo sea removido de la
pgina. Para comprender lo anterior de mejor manera a continuacin un ejemplo.
<window border="normal" title="MiVentana 2" id="MiVentana2">
<zscript>Component detached = null;</zscript>
<button id="btnLiberar" label="Remover">
<attribute name="onClick">
if (detached != null) {
detached.setParent(MiVentana2);
detached = null;
btnLiberar.setLabel("Remover");
} else {
(detached = target).setParent(null);
btnLiberar.setLabel("Agregar");
}
</attribute>
</button>
<separator bar="true" />
<label id="target" value="Si ves esta etiqueta es porque el componente esta ligado a la pgina"/>
</window>

Con el ejemplo anterior, se pudo usar el mtodo setVisible y tener un efecto similar. Sin
embargo setVisible(false) no remueve el componente del navegador. Solo hace que el
componente y los componentes hijos no sean visibles.
Desde de que el componente es removido de la pgina, la memoria que ocupaba es
removida por el garbage collector del JVM si la aplicacin ya no hace referencia al mismo.

28

ZKFramework

Definiendo nuevos componentes para una pgina en particular

Como hemos visto, es fcil de asignar valores a las propiedades de los componentes por
medio de los atributos XML que utilizaremos a lo largo del desarrollo de pginas ZUML. Por
ejemplo la siguiente lnea muestra un botn con sus propiedades label y style con los
valores deseados:
<button label="Hola mundo!" style="border:1px solid blue" />

Con ZK tenemos una manera muy sencilla de definir nuevos componentes para una pgina
en particular. Es muy util si los componentes del mismo tipo comparten un conjunto de
propiedades.
Primero, necesitamos usar la directiva component para definir el nuevo componente.
<?page title="Hola" contentType="text/html;charset=UTF-8"?>
<?component name="bluebutton" extends="button" style="border:1px solid blue" label="OK"?>
<zk>
<window id="win" title="Ejemplo" border="normal" width="200px">
<bluebutton />
<bluebutton label="Cancel"/>
</window>
</zk>

Lo equivalente a:
<button style="border:1px solid blue" label="OK"/>
<button style="border:1px solid blue" label="Cancel"/>

Adems, tambin podemos sobrescribir la definicin del componente button por ejemplo.
Por su puesto, esto no afectara a otras pginas que no tengan descrita la directiva.
<?page title="Hola" contentType="text/html;charset=UTF-8"?>
<?component name="button" extends="button" style="border:1px solid blue" label="OK"?>
<zk>
<window id="win" title="Ejemplo" border="normal" width="200px">
<button />
<button label="Cancel"/>
</window>
</zk>

ZKFramework 29

Desarrollando en ZK
Despus de haber visto los elementos y propiedades bsicas para empezar a desarrollar en
ZK podemos proseguir. De aqu en adelante veremos desde el layout de nuestra aplicacin
hasta la conexin con nuestra base de datos para crear registros, modificarlos, eliminarlos y
buscar entre las entidades (CRUD), ZK Studio tambin incluye un asistente o wizard para
realizar pginas ZUML CRUD con un modelo MVC, Zeta Form, pero nosotros aprenderemos a
realizarlos a realizarlos por nosotros mismos con nuestro propio layout y por ltimo
utilizaremos Zeta Form para ejemplificar. De esta forma cada desarrollador decidir si
desean o no utilizar el asistente.

Perspectiva ZK y ZK Studio
Cuando instalamos el Add On de ZK Studio, este agrega una perspectiva ms a nuestro IDE.
Una perspectiva en Eclipse y derivados, consiste en, un conjunto de ventanas, pestaas y
herramientas orientadas a cierto trabajo, es decir, es un conjunto de herramientas
distribuidas y visualizadas en el IDE para ayudarnos a trabajar (Para los que han trabajado
con IDEs de Embarcadero RAD Studio, Delphi, etc, es el equivalente al Layout de las barras
de herramientas donde queda guardada la configuracin y disposicin de las herramientas
que utilizamos) .
En la siguiente imagen tenemos la ventana donde nosotros seleccionamos la perspectiva con
la que deseamos trabajar, para llegar a la seleccin de perspectivas nos dirigimos al men
en Window Open perspective Others
La perspectiva de ZK pone a nuestra disposicin varias
herramientas para el diseo y realizacin de nuestras
pginas.
Entre las herramientas tenemos, ZUL Palette
(Contiene los distintos componentes que podemos
utilizar en nuestras pginas y permite Drag n Drop
entre ZUL Palette y nuestra pgina).
Otra herramienta es el ZUL Visual Editor, este es un
WYSIWYG, que nos permite visualizar en tiempo de
desarrollo como se vera la pgina en tiempo de
ejecucin.

30

ZKFramework

Entre otras herramientas no precisamente de perspectiva pero si de ZK Studio tenemos, ZK

Style Designer, con el cul podemos generar los CSS para los componentes pero al mismo
tiempo que lo realizamos podemos ver como se visualizar el componente con los cambios
deseados. DB Form Builder, el Zeta Form que ya habamos mencionado, es un asistente
para aplicaciones CRUD. Asistentes de contenidos en nuestro editor de pginas ZUML y
marcadores de sintaxis dentro de nuestro editor de pginas para una fcil lectura,
comprensin y mantenimiento (Incluyendo el cdigo que se encuentre dentro del elemento
ZK Script).
Para ms informacin acerca de ZK Studio por favor visiten la direccin web
http://docs.zkoss.org/wiki/ZK_Studio_Features.