Configurar entorno de desarrollo para el Framework ZK.

Con la presente entrada aprenderás a preparar el entorno de desarrollo para la creación de aplicaciones web con el Framework ZK.

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 imagen.
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.

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 bibliotecas 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 bibliotecas 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, puedes seleccionarla 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 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.

Nota: La ruta del directorio de destino no debe contener caracteres que no sean ASCII (como por ejemplo acentos).

1. Acepta la licencia y espera.
   Nota: Eclipse te mostrará un mensaje de error antes de que la instalación termine, simplemente ignóralo.
   
   
   
   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.
   
   
   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:
   
   1. Página web oficial de ZK
      
      
   2. Configurando entorno ZK