Framework ZK

Configurar el entorno (1-5)

Contenido

1. Introducción
2. Configurar Eclipse
3. Instalar ZK en un Proyecto Web de Eclipse
1. Descargamos ZK
2. Creamos un Proyecto en Eclipse
3. Instalar el JAR de ZK en el Proyecto Web
4. Crear una página simple
4. Configuramos el servidor
5. Ejecutamos la aplicación
6. Referencias

Introducción

Este tutorial pertenece a la siguiente serie:

1. Configurar el entorno
2. Empezar a programar
3. MVC y MVVM ¿Qué son y en qué se diferencian?
4. MVC en ZK
5. MVVM en ZK

Está dirigido a desarrolladores con experiencia en la creación de aplicaciones web en Java. A continuación aprenderás a preparar el entorno de desarrollo para la creación de aplicaciones web con ZK.

A lo largo de este documento hacemos referencias a fuentes externas, las encontrarás todas en la sección de Referencias

Configurar Eclipse

Para la realización de este tutorial usaremos Eclipse 3.7 Indigo, la distribución para Java EE.

Podemos descargarlo de: Eclipse 3.7 Indigo. Una vez descargado, extraemos el contenido del zip/tar.gz en una carpeta y lo ejecutamos (eclipse.exe o ./eclipse).

Las páginas de interfaz de usuario en ZK son ficheros xml que utilizan la extensión "zul".

Para editar páginas de interfaz de usuario de ZK en Eclipse, añadimos “zul” a la lista de páginas de tipo XML dentro de las preferencias de Eclipse, para lo cual procedemos del siguiente modo:

1. Seleccionamos el menú superior del Eclipse Window / Preferences para abrir la ventana de preferencias.
2. En el panel de la izquierda, seleccionamos General y dentro de ella Content Types como muestra la imágen.
3. En el panel de la derecha expandimos el nodo Text en la lista de Content types y finalmente seleccionamos XML.
4. Hacemos clic en el botón Add y escribimos *.zul, y finalmente pulsamos el botón de OK.

Una vez hayamos hecho esto, Eclipse usará el editor XML para abrir los ficheros ZUL, y los reconocerá como tal.

Instalar ZK en un Proyecto Web de Eclipse

Descargamos ZK

Primero debemos descargar ZK, puedes hacerlo directamente del sitio oficial: ZK Community Edition.

Una vez descargado, reconocerás el fichero porque llevará por nombre algo parecido a zk-bin-[version].zip. Extraer su contenido en una carpeta.

Creamos un Proyecto en Eclipse

Para crear una aplicación web en Eclipse, primero, creamos un Dynamic Web Project:

1. Seleccionamos File / New / Dynamic Web Project
2. Escribimos como nombre del proyecto, por ejemplo warmup, o prueba, y dejamos el resto de configuraciones como están por defecto.

• Puedes dejar configurada la opción Target runtime como None
• Fíjate en la imagen que usamos Dynamic web module version, la versión 3.0. El motivo es que usando Servlet 3.0 aplicación web requiere menos configuración para funcionar.

Si prefieres usar un servidor de aplicaciones web que soporte versiones anteriores a la especificación Servlet 3.0 o la JDK 1.5, tienes que añadir más configuración en el fichero web.xml. Dispones de más información en la Guía de Instalación Manual de ZK y ejemplos de web.xml

Instalar el JAR de ZK en el Proyecto Web

Para usar ZK en un proyecto, tienes que copiar el JAR de ZK en tu carpeta de librerías de la aplicación (library).

Los ficheros JAR de ZK están en la carpeta donde hemos extraído el zip de ZK, concretamente dentro de las subcarpetas WebContent/WEB-INF/lib.

• {YOUR_ZK_UNZIP_FOLDER}\dist\lib
• {YOUR_ZK_UNZIP_FOLDER}\dist\lib\ext

Es decir, uno a uno, todos los ficheros .jar que estén en esas carpetas, los copiamos a nuestra carpeta de librerías del proyecto web.

Crear una página simple

Después de la instalación, puedes crear una simple página zul para verificar si ZK está funcionando o no.

Desde el eclipse:

1. Para añadir un nuevo fichero seleccionamos File / New / File, o también File / New / Other / File. Lo llamaremos hello.zul y lo colocaremos en la carpeta WebContent de nuestro proyecto Web.
2. Hacemos doble clic para editarlo y nos vamos a la pestaña de Source, para poder editar su contenido como texto.

3. Copiamos y pegamos el siguiente código fuente de ejemplo dentro del fichero (hello.zul) y lo guardamos.

<window title="My First ZK Application" border="normal">
   Hello World!
</window>

Ahora, en la vista Project Explorer de Eclipse, nuestro proyecto será similar a:

Si no puedes encontrar en Eclipse la vista Project Explorer seleccionala en el menú Window / Show View / Project Explorer para abrirla.

Configuramos el servidor

Antes de ejecutar una aplicación web, tenemos que configurar un servidor en Eclipse. Para ello seleccionamos Window / Preferences, y en la parte izquierda de la ventana de preferencias que nos ha aparecido seleccionamos Server / Runtime Environments. Pulsamos Add para añadir una configuración de ejecución de servidor.

Seleccionamos Apache / Tomcat v7.0 Server, puesto que soporta Servlet 3.0, y marcamos Create a new local server, a continuación hacemos clic en siguiente.

Si utilizas JDK 1.5, puedes elegir Tomcat v6.0, pero necesitarás configurar manualmente algunos aspectos en el fichero web.xml. Dispones de más información en la Guía de Instalación de ZK [Link]

Si has instalado Tomcat 7 anteriormente, simplemente indica el directorio de instalación en “Tomcat installation directory”.

Si no tienes instalado Tomcat 7 puedes descargarlo siguiendo estos pasos:

1. Haz clic en Download and Install y elige la carpeta de destino.

La ruta del directorio de destino no debe contener carácteres que no sean ASCII (como por ejemplo acentos).


2. Acepta la licencia y espera.

Eclipse te mostrará un mensaje de error antes de que la instalación termine, simplemente ignoralo.



Para garantizar que la instalación se realiza correctamente, no pares la descarga ni interrumpas la actividad del Eclipse hasta que termine.



Eclipse terminara de descargar e instalar el Tomcat en la carpeta especificada.

3. Cuando todo el proceso termine, pulsa Finish.

A partir de este momento podrás ver la nueva entrada en Server runtime environments en la pantalla de Preferences. Pulsamos OK.

Ejecutamos la aplicación

Ahora hacemos clic con el botón secundario del ratón sobre el fichero “hello.zul” y seleccionamos Run As / Run on Server para ejecutar el fichero en nuestro servidor de aplicaciones.

Elegimos el servidor Tomcat v7.0 que nos aparece. Y podemos marcar la opción Always use this server when running this project para evitar que nos pregunte lo mismo cada vez que ejecutemos el fichero en el servidor de aplicaciones.

Hacemos clic en Finish y esperamos a que el servidor arranque.

Después de que el servidor arranque, Eclipse abrirá su navegador y conectará con el servidor de aplicaciones automáticamente: http://localhost:8080/hello.zul. Si lo que ves es muy similar a la siguiente imagen significa que tienes tu proyecto listo para usar ZK:

Puedes volver y seguir estos mismos pasos para ejecutar cualquier fichero .zul de tu proyecto.

Referencias

• Página web oficial de ZK
• Guía de instalación manual de ZK y ejemplos de web.xml (Servlet 3.0, 2.4 y 2.3)

Este documento es un extracto de la documentación oficial del Framework ZK, traducido y ampliado por Francisco Ferri. Colaborador de Potix (creadores del Framework ZK). Si quieres contactar con él puedes hacerlo en franferri@gmail.com, en twitter @franciscoferri o en LinkedIn