Francisco Ferri Pérez

Consultor tecnológico de desarrollo de proyectos informáticos.

Desarrollador de proyectos informáticos, Microsoft Certified IT Professional - Enterprise Administrator

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2012-10-01

Tutorial visitado 8.080 veces Descargar en PDF

ZK Framework




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 manejar los componentes de la vista manualmente e implementar la lógica necesaria para que funcione nuestra aplicación.

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.
Añadir ZUL como tipo de contenido al Eclipse Indigo

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.
Crear nuevo proyecto web dinámico con Eclipse
  • 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. Editor XML de Eclipse, pestaña Source
  4. Copiamos y pegamos el siguiente código fuente de ejemplo dentro del fichero (hello.zul) y lo guardamos.
  5. <window title="My First ZK Application" border="normal">
       Hello World!
    </window>
    

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

Estructura de un proyecto ZK en Eclipse

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.

Pantalla de preferencias del Servidor en Eclipse

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]
Instancia del Servidor Tomcat añadida a Eclipse

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.
  2. La ruta del directorio de destino no debe contener carácteres que no sean ASCII (como por ejemplo acentos).

    Descargar e instalar el servidor Tomcat en Eclipse
  3. Acepta la licencia y espera.
  4. Eclipse te mostrará un mensaje de error antes de que la instalación termine, simplemente ignoralo.

    Eciplse muestra un error hasta que descarga completamente el ZIP del Servidor Tomcat

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

    Progreso de la descarga del servidor eclipse

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

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

Servidor Tomcat Instalado en Ecplise

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.

Ejecutamos la aplicación en Eclipse

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.

Ejecutamos la Aplicación en el Servidor desde Ecplise

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:

Tu primera Aplicación Web Hola Mundo en ZK

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

Referencias

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

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: