Valor y Fuerza de ZK

ZK es un marco de interfaz de usuario basada en componentes que le permite

construir aplicaciones ricas de Internet (RIA) y las aplicaciones mviles sin
tener que aprender JavaScript o AJAX. Usted puede construir aplicaciones AJAX
web altamente interactivas y sensibles en Java puro. ZK ofrece cientos de
componentes1 que estn diseados para diversos fines, algunos para la
visualizacin de gran cantidad de datos y algunos para la entrada del usuario.
Podemos crear fcilmente componentes en un lenguaje con formato XML, ZUL.
Todas las acciones del usuario en una pgina como hacer clic y escribir se
pueden manejar fcilmente en un controlador. Puede manipular los
componentes para responder a la accin usuarios en un controlador y los
cambios que realice se reflejar en los navegadores automticamente. No es
necesario preocuparse por los detalles de comunicacin entre los navegadores
y servidores, ZK lo manejarn por usted. Adems de la manipulacin de
componentes directamente, es decir MVC (Modelo - Vista-Controlador), ZK
tambin es compatible con otro patrn de diseo, MVVM (Modelo- ViewViewModel), que da el controlador y ver ms separacin. Estos dos enfoques
son mutuamente intercambiables, y se puede elegir uno de ellos a su
consideracin arquitectnica.

Arquitectura de ZK.

La imagen de arriba es una arquitectura simplificada ZK. Cuando un navegador

visita una pgina de una aplicacin ZK, ZK crea componentes escritos en ZUL y
las crea en el navegador. Puede manipular los componentes de controlador de
la aplicacin para aplicar la lgica de presentacin de interfaz de usuario.

Todos los cambios realizados en los componentes reflejarn

automticamente en el navegador del usuario y ZK manejan la conexin
subyacente para usted.

Cdigo Fuente.
Todos los cdigos fuente utilizado en este libro estn disponibles en github. A
medida que nuestra aplicacin de ejemplo tiene 3 configuraciones diferentes,
nuestro cdigo fuente se divide en 3 ramas: zk8, zk8 - spring, y zk8 - APP.
https://github.com/zkoss/zkessentials

La rama zk8 contiene ejemplos del captulo 1 al captulo 7. La rama zk8 resorte tiene ejemplos integrados con Spring y la rama zk8 - APP contiene
ejemplos que se integran Spring y la persistencia de datos dentro de una base
de datos con JPA.

Puede hacer clic en el icono " ZIP" para descargar la rama seleccionada actual
como un archivo zip.

Diseo de maquetacin.
Al principio, construimos la interfaz de usuario que generalmente se inicia
desde el diseo de la maquetacin. ZK proporciona varios componentes de
diseo para los requisitos de maquetado diferentes, y puede incluso configurar
atributos de un componente para ajustar detalles la maquetacin.

Requerimientos de maquetado.

La imagen de arriba es el trazado de destino que vamos a crear en este

captulo, y este tipo de diseo es muy comn en aplicaciones web. El banner
en la parte superior contiene el icono de la aplicacin, el ttulo y el nombre del
usuario en la esquina derecha de la mayora. El pie de pgina en la parte
inferior contiene informacin general. La barra lateral de la izquierda contiene
3 enlaces que te dirigen a 3 URL diferentes. El rea central muestra la funcin
actual.

ZK proporciona varios componentes de trazado y cada uno de ellos tiene

diferentes estilos. Puede utilizar un componente de diseo solo o combinarlos
para crear un diseo ms complejo. Segn nuestro requisito de, Border Layout,
ajusta los requisitos que se necesitan con 5 zonas: Norte, oeste, centro, Oriente
y sur. Podemos utilizar el norte como una bandera, oeste como sidebar, sur
como un pie de pgina y el centro como la pantalla de funcin principal.

Construir la vista
Construir la vista en ZK es bsicamente crear componentes, y hay dos maneras
de hacerlo: por medio de Java (programacin) y enfoque (declarativa) basado
en XML. Incluso puede mezclar estos dos enfoques.
ZK te permite componer una interfaz de usuario en Java mediante
programacin que es una caracterstica llamada richlet, pero no utiliza este
enfoque en este libro.
ZK tambin proporciona un lenguaje de formato XML llamado ZK User Interface
Markup Language (ZUML). Cada elemento XML manda Loader ZK para crear un
componente. Cada atributo XML describe qu valor a asignar al componente
creado. Utilizamos este enfoque principalmente en nuestro ejemplo.

Escribiendo un ZUL
Para crear un componente en ZK, debemos utilizar un lenguaje basado en XML
llamado ZUL, y todos los archivos escritos en ZUL deben tener la extensin de
archivo ".zul". En archivos de tipo .zul, un componente puede ser representado
como un elemento XML (etiqueta), y se puede configurar el estilo de cada
componente, comportamiento, funcin estableciendo atributos a cada etiqueta.

Primero, cree un nuevo archivo de texto con nombre index.zul y escriba el

siguiente contenido:

Lnea 2: Cada etiqueta XML representa un componente, y el nombre de

etiqueta es igual que el nombre del componente. El atributo "hflex" y

"vflex" controla la flexibilidad de tamao horizontal y vertical de un

componente. Al poner "1" que significa Fit-the-Rest (ajusta el resto). Por
lo tanto, el Border Layout se estirar para llenar todo el espacio
disponible de pgina entera en anchura y altura porque es un
componente de la raz. Se permite slo un componente dentro de North
adems de una leyenda.
Lnea 3: North es un componente hijo que slo se puede poner dentro
del Border Layout. Tambin puede fijar la altura de un componente,
especificando un valor en pxeles para evitar su altura cambia debido al
tamao del navegador.
Lnea 6, 7: Ajuste collapsible en true permite colapsar la zona oeste
haciendo clic en un botn de flecha. Ajuste de splittable en true le
permite ajustar la anchura de West y minsize limita el tamao mnimo
de ancho que se puede ajustar.
Lnea 10: Configuracin de autoscroll en true va a decorar el Center
con un desplazamiento de la barra cuando Center contiene una gran
cantidad de informacin que superan la altura de su.
Lnea 4,8,11,14: estas Labels son para identificar las reas de Border
Layout y les eliminaremos en el resultado final.
A continuacin, puede ver el resultado desde tu navegador como abajo:

Construir la interfaz de usuario

con componentes
Ahora tenemos un esqueleto de la aplicacin, la siguiente que debemos hacer
es llenar cada rea con los componentes. Crearemos un archivo de zul
separada para cada rea y luego combinarlos juntos.
chapter1/Main.Zul

Lnea 1: El atributo spacing controla el espacio entre el contenido de

sus componentes hijos.
En el banner, hay una imagen con un hipervnculo, el ttulo y el nombre
de usuario. Vamos a ver cmo construir estos elementos con los
componentes de ZK:

chapter1/banner.zul
<div hflex="1" vflex="1" sclass="banner">
<hbox hflex="1" vflex="1" align="center">
<a href="http://www.zkoss.org/">
<image src="/imgs/zklogo.png" width="90px" />
</a>
<div width="400px">
<label value="Application Name" sclass="banner-head" />
</div>
<hbox hflex="1" vflex="1" pack="end" align="end">
Anonymous
</hbox>
</hbox>
</div>

Lnea 1: Sclass; podemos especificar un selector de clase CSS, y

hablaremos sobre ello ms adelante.
Lnea 2: El Hbox que es un layout de diseo puede organizar sus
componentes hijo en una fila horizontal. Su atributo align controla la
alineacin vertical.
Lnea 3: La a crea un hipervnculo lo mismo que un HTML <a>
elemento.
Lnea 4: image es similar a HTML <img> que puede mostrar una
imagen.
Lnea 9: pack controla la alineacin horizontal. Especifique end en
ambos pack y align para hacer la pantalla de "Annimo" de texto en la
esquina inferior derecha.
Lnea 10: Aqu todava no implementamos autenticacin an, as usar
nombre de usuario esttico "Annimo" aqu.

Para la barra lateral, queremos organizar elementos de navegacin por uno

vertical. Hay ms de una forma de lograr esto. Aqu, utilizamos una rejilla
(Grid) que es conveniente para el arreglo de componentes de hijo en un
diseo de matriz.
chapter1/sidebar.zul
<grid hflex="1" vflex="1" sclass="sidebar">
<columns>
<column width="36px"/>
<column/>
</columns>
<rows>
<row>
<image src="/imgs/site.png"/>
<a href="http://www.zkoss.org/">ZK</a>
</row>
<row>

<image src="/imgs/demo.png"/>
<a href="http://www.zkoss.org/zkdemo">ZK Demo</a>
</row>
<row>
<image src="/imgs/doc.png"/>
<a href="http://books.zkoss.org/wiki/ZK_Developer's_Reference">
ZK Developer Reference
</a>
</row>
</rows>
</grid>

Lnea 1: Algunos componentes como Grid soporta limitados

componentes hijos y tambin notar las relaciones jerrquicas entre
los componentes hijo, por ejemplo, las filas slo pueden contener fila.
Consulte a ZK componente/datos de referencia para ms detalles.
Lnea 3: Slo puede poner Column interior de Columns.
Lnea 8,9: puesto que definimos dos Columns, cada Row (fila)
puede tener dos componentes, y cada uno pertenece a una column.

Generalmente ponemos algunos datos de contacto en el footer y lo

hacemos alineados con el centro.

chapter1/footer.zul
<div hflex="1" vflex="1" sclass="footer">
<vbox hflex="1" vflex="1" align="center">
ZK Essentials, you are using ZK ${desktop.webApp.version}
<a href="http://www.zkoss.org">http://www.zkoss.org</a>
</vbox>
</div>

Lnea

2:

Vbox,

como

Hbox,

organiza

los

componentes

hijo

verticalmente. Especificamos "center" en align para alinear los textos

horizontalmente en el centro.

Lnea 3: Puede usar expresiones de EL cuerpo del elemento de

etiqueta o un atributo. Hay tambin muchos objetos implcita), y el
escritorio es uno de ellos. Consulte el Javadoc de org.zkoss.zk.ui.
Desktop para saber las propiedades disponibles.
A continuacin, vamos a combinar estas pginas zul separados en
chapter1 / index.zul

Incluir paginas separadas.

Para completar la pgina, tenemos que poner esas pginas individuales en el

rea correspondiente del Border Layout.
Para todas las reas, que utilizamos incluyen (include) componentes para
combinar pginas separadas. Este componente puede combinar un zul
separados por usted cuando visita el zul padres. Este uso se presenta a
continuacin:

chapter1/index.zul
<?link rel="stylesheet" type="text/css" href="/style.css"?>
<zk>
<borderlayout hflex="1" vflex="1">
<north height="100px" border="none" >
<include src="/chapter1/banner.zul"/>
</north>
<west width="260px" border="none" collapsible="true"
splittable="true" minsize="300">
<include src="/chapter1/sidebar.zul"/>
</west>
<center id="mainContent" autoscroll="true">
<include src="/chapter1/main.zul"/>
</center>
<south height="50px" border="none">
<include src="/chapter1/footer.zul"/>
</south>
</borderlayout>
</zk>

Lnea 1: la directiva link vincula una hoja de estilos externa bajo la

carpeta raz.

Lnea 5, 9, 12, 15: Especifique una ruta de zul separados en el

atributo src para incluir una pgina en la pgina actual.

Despus de incluir 4 pginas separadas zul, terminamos el ejemplo de este

captulo. Usted puede visitar http://localhost: 8080/elementos
esenciales/chapter1 para ver el resultado. Desde que en el web.xml archivo
Bienvenido a "index.zul", http://localhost:8080/essentials/chapter1/index.zul
sern visitadas por defecto. (puede variar la direccin en base a tu proyecto).

Aplicando CSS
Adems de establecer el atributo de un componente, tambin podemos
cambiar el estilo de un componente por CSS (hoja de estilo en cascada). Hay
dos atributos para aplicar CSS:

El atributo style. Como atributo de estilo de elemento de HTML, puede

escribir directamente la sintaxis CSS como el valor del atributo.

<label value="Chapter 3" style="font-weight: bold;"/>

El atributo sclass. Debe especificar un nombre de selector de clase CSS

como el valor del atributo.

<div sclass="banner">

Para utilizar un selector de clase CSS, debe definirla primero en un ZUL.

Hay 2 formas de definir un selector de clase CSS.
1. <style>.
<zk>
<style>
. banner {
background-color: #102d35;
color: white;
padding: 5px 10px;
}
</style>
...
</zk>

2. Por la directiva <?link?>. Puede vincular a una hoja de estilos

externa que puede aplicar a muchas pginas. Usamos de esta
manera en el ejemplo definir CSS.
<?link rel="stylesheet" type="text/css" href="/style.css"?>
<zk>
...
</zk>

Control de componentes
Podemos construir la interfaz de usuario con componentes de ZK, pero tambin
controlarlos. En este captulo, continuamos utilizando el ejemplo del captulo
anterior, pero quitar los 3 elementos con hipervnculos en la barra lateral y
sustituirlas por una accin redirigiendo. Para lograrlo, vamos a escribir cdigo
en Java para cada artculo para responder a un usuario hacer clic en y redirigir
al usuario a un sitio externo.

Zscript
forma ms sencilla de responder a clic de un usuario es escribir un mtodo
detector de eventos e invocarlo en el atributo onClick. Podemos definir un
detector de eventos en Java dentro de un elemento <zscript> y esos cdigos
se interpretarn cuando se visita el ZUL. Este elemento tambin permite que

otros lenguajes de script como JavaScript, Ruby, o Groove. < Zscript > es muy
adecuado para el prototipado rpido y se interpreta cuando se evala una
pgina zul. Puede ver el cambio sin necesidad de volver a la implementacin.
Pero tiene problemas en el rendimiento y entorno de clster, no recomendamos
usarlo en entornos de produccin.
Event listener redirect()
<grid hflex="1" vflex="1" sclass="sidebar">
<zscript><![CDATA[
//zscript code, it runs on server site, use it for fast prototyping
java.util.Map sites = new java.util.HashMap();
sites.put("zk","http://www.zkoss.org/");
sites.put("demo","http://www.zkoss.org/zkdemo");
sites.put("devref","http://books.zkoss.org/wiki/ZK_Developer's_Reference");

...

void redirect(String name){

String loc = sites.get(name);
if(loc!=null){
execution.sendRedirect(loc);
}
}
]]></zscript>

Lnea 2: Es mejor encerrar el cdigo con < ! [ CDATA [ ] ] > .

Lnea 11: Definicin de un mtodo de evento oyente como un mtodo
Java normal y se vuelve a dirigir un navegador de acuerdo con la
variable pasada.
Lnea 14: La ejecucin es una variable implcita que se puede utilizar
directamente sin declaracin. Representa una ejecucin de una solicitud
de cliente que contiene informacin relacionada.

Despus de definir el detector de eventos, debemos indicar que en el

evento de una fila atribuimos onClick porque queremos invocar el detector
de eventos al hacer clic en una fila.

Invoke event listeners at "onClick"

<grid>
...
<rows>
<row sclass="sidebar-fn" onClick='redirect("zk")'>
<image src="/imgs/site.png"/> ZK
</row>
<row sclass="sidebar-fn" onClick='redirect("demo")'>
<image src="/imgs/demo.png"/> ZK Demo
</row>
<row sclass="sidebar-fn" onClick='redirect("devref")'>
<image src="/imgs/doc.png"/> ZK Developer Reference
</row>
</rows>
</grid>

Ahora bien, si hace clic en Row de Grid en la barra lateral, el navegador

ser redirigido a un sitio correspondiente.
Este enfoque es muy simple y rpido, por lo que es especialmente
adecuado para la construccin de un prototipo. Sin embargo, si necesita
una mejor arquitectura para su aplicacin, que tena mejor no utilizar
Zscript
http://books.zkoss.org/zkessentialsbook/master/controlling_components/in_controller.html