sábado, 18 de enero de 2014

Introducción ZK (¡Hola mundo!)

Zk es un framewor java para desarrollo de interfaz de usuario dinámico y simple, una de sus ventajas a mi parecer es que todo lo que necesitas para desarrollar la interfaz de usuario si Zk no lo ofrece es fácil de implementar,  tiene una muy buena comunidad, aparte de esto en la propia página encuentras muy buenos ejemplos de cómo trabajar con este framework.
Zk es un framework tipo RIA.  Y aunque Existen versiones de pago como la PE o EE. Con la versión libre se puede realizar todo, solo hay que ingeniar un momento o buscar en internet.

Generalmente no soy bueno con las introducciones así que dejare unos links de interés a continuación y  comenzare con el tema en forma:Zk Framework intro
Zk Framework demo
Zk Framework sandbox

Nota: Para facilitar el trabajo en el Eclipse, recomiendo instalar el plugin y registrarse en la página principal de Zk para poder utilizar el autocompletar en los archivos .zul (el plugin se puede descargar desde eclipse Marketplace)

  1. Creación del proyecto:
Una vez descargado el plugin de zk, para comenzar a crear el proyecto es tan simple  como dar clic en nuevo>Otro>Zk>Zk Project:

Nuevo:




Se abre la ventana "New", buscamos la carpeta Zk , seleccionamos Zk Project y Siguiente "Next >"



Ingresamos un nombre del proyecto y finalizar



Al final de este punto ya se deberia de haber creado el proyecto web Zk que contendrá en la carpeta WebContent dos archivos (index.zul y timeout.zul) y en la carpeta WEB-INF, un archivo llamado zk.xml, en este se configurara opciones principales de configuracion inicial de ZK.
El archivo zk.xml, inicialmente solo contiene la configuracion de la ruta de la pagina de timeout.


  1. Hola mundo! MVVM
"Zk ofrecen el patron de programacion  Model View ViewModel  o en español (modelo-vista-modelo de vista). Este modelo permite separan un poco mas la lógica, la interfaz de usuario y el comportamiento de la presentación. Haciendo más fácil el mantenimiento de un proyecto que lo adopte.
Para más información sobre la implementación del patrón MVVM en zk sigue el siguiente enlace"

Para comenzar utilizaremos el archivo index.zul. y lo conectaremos con una clase java usando dos atributos (apply y viewModel)

-apply: para la utilización del patrón  MVVM , este atributo generalmente siempre toma el valor de la clase de ZK “org.zkoss.bind.BindComposer”



-viewModel: este atributo se ingresan valores referentes a la clase a utilizar.

Teniendo en cuenta lo anterior, se crea una clase llamada VMIndex, la cual manejara la lógica para la visualización de index.zul




@id('<identificador_de_acceso_para_la_clase_en_el_.zul>')
@init('<clase_a_inicializar>')

Nota: las clases se puede reutilizar llamándolas desde cualquier archivo .zul, claro que todo depende de la implementación que quieran realizar para su código.

Ahora agregamos una variable a la clase VMIndex, con sus métodos accesores "get-set".

Nos quedaria mas o menos así:


Ahora modificamos el index.zul, para agregarle el mensaje "Hola mundo" de la clase VMIndex:




Utilizamos   @load para cargar el valor holaMundo.

 por ultimo publicamos el proyecto en un Servidor de aplicaciones y cargamos la pagina inicial obteniendo:



Espero que haya sido de utilidad esta primera introducción en Zk, mas adelante subiré mas post sobre este framework,

No hay comentarios:

Publicar un comentario