Framework ZK - Tu primer proyecto web con ZK (1-5)
franferri
Framework ZK
Configurar el entorno (1-5)
Contenido
- Introducción
- Configurar Eclipse
- Instalar ZK en un Proyecto Web de Eclipse
- Descargamos ZK
- Creamos un Proyecto en Eclipse
- Instalar el JAR de ZK en el Proyecto Web
- Crear una página simple
- Configuramos el servidor
- Ejecutamos la aplicación
- Referencias
Introducción
Este tutorial pertenece a la siguiente serie:
- Configurar el entorno
- Empezar a programar
- MVC y MVVM ¿Qué son y en qué se diferencian?
- MVC en ZK
- 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:
- Seleccionamos el menú superior del Eclipse Window / Preferences para abrir la ventana de preferencias.
- En el panel de la izquierda, seleccionamos General y dentro de ella Content Types como muestra la imágen.
- En el panel de la derecha expandimos el nodo Text en la lista de Content types y finalmente seleccionamos XML.
- 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:
- Seleccionamos File / New / Dynamic Web Project
- 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:
- 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.
- Hacemos doble clic para editarlo y nos vamos a la pestaña de Source, para poder editar su contenido como texto.
- 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:
- Haz clic en Download and Install y elige la carpeta de destino.
- Acepta la licencia y espera.
- Cuando todo el proceso termine, pulsa Finish.
La ruta del directorio de destino no debe contener carácteres que no sean ASCII (como por ejemplo acentos).
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.
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
Reader Comments (7)
Pintaza de tutorial, enhorabuena y gracias. Una pregunta desde el desconocimiento total, ¿qué puede aportar esta framework en comparación con otros de desarrollo web? ¿Cuáles serían sus sellas de identidad, por decirlo de alguna manera?
Estoy muy molesto después de investigar mucho no fue posible encontrar algun punto en el que no este deacuerdo y no me das la oportunidad de criticar al estilo troll que tristeza.
Una pregunta sobre la integración de jsf con zk. Si desarrollo la vista con con zk al estilo jsf la vista seria ajax por defecto o tendría que realizar alguna configuración extra.Si me dices que no se requiere configuración extra me convierto en un creyente fundamenta-lista de de zk.
Muy bueno, me viene que ni de perlas ¿Cuando publican la continuación?
en mi opinión es un pésimo framework lleno de bugs por todas partes, yo lo use laboralmente en una empresa y a nadie le gustaba.
realmente prefiero el estándar de oracle.
jcarmonaloeches ZK te abstrae totalmente de utilizar Ajax para recibir los eventos de la vista en el controlador. Y por ejemplo te permite pasar de un fichero html a una aplicación real en cuestión de minutos.
luis (luis.ernesto.morales.cordova@gmail.com), no tienes que implementar absolutamente nada de javascript para controlar mediante ajax directamente en tu controlador de java los eventos de los tags html de la vista.
juan, ya la tienes publicada: http://www.javahispano.org/portada/2012/10/3/tu-primer-proyecto-web-con-zk-2-5.html
Gracias por vuestros comentarios.
hola, tengo un inconveniente, resulta que tenía una aplicación de java utilizando el framework zk, anteriormente se me ejecutaba con normalidad en mi pagina web, pero de un momento a otro se "desconfiguró" si se lo puede decir, ahora me muestra solo el codigo .zul en las paginas... ¿A que se debe esto?