DESCRIPCIN BREVE

En esta primera prctica, se explicar todo el proceso necesario para tener el entorno de trabajo de ZK Studio completamente funcionando.

M.Sc. Alvaro Altamirano M.Sc. Denis Espinoza Hernndez

Desarrollo de Aplicaciones Web

ZKSTUDIO
Prctica 0: Preparacin del entorno de trabajo

Contenido
1 2 3 Qu es ZKOSS? ......................................................................................................... 1 Qu es ZK Studio? .................................................................................................... 1 Pre-requisitos para la instalacin de ZK Studio .......................................................... 1 3.1 3.2 3.3 4 Java SE Development Kit .................................................................................... 1 Eclipse IDE for Java EE Developers .................................................................... 2 Servidor de aplicaciones ........................................................................................3

Instalando ZK Studio ...................................................................................................3 4.1 4.2 Instalacin desde el Market ...................................................................................3 Activar ZK Studio ............................................................................................... 5

Obtener ZK Framework Community Edition .............................................................. 5 5.1 5.2 Descarga del paquete ZK CE ............................................................................... 5 Agregando el ZK CE al Eclipse ............................................................................ 6

6 7

Agregando Apache Tomcat a Eclipse .......................................................................... 7 Creando nuestro primer Hola Mundo en ZK ............................................................. 9 7.1 7.2 Creando nuestro proyecto .................................................................................... 9 Ejecucin de la aplicacin ................................................................................... 11

Conclusin ................................................................................................................. 11

Qu es ZK OSS?

ZK es un marco de interfaz de usuario que permite crear increbles aplicaciones mviles y web sin tener que aprender JavaScript o AJAX. ZKoss nos ofrece las siguientes caractersticas: El diseo y los componentes Responsive. Resolucin optimiza automticamente para la web, mviles y tabletas. Slo necesita escribir una vez con uno de los componentes y un conjunto de cdigo base. Excelente experiencia de usuario a travs de escritorios y dispositivos.

Qu es ZK Studio?

ZK Studio es la manera ms fcil de crear un proyecto nuevo. El nuevo proyecto del asistente gua a los desarrolladores a travs de la creacin de proyectos ZK paso a paso. Por lo que es excepcionalmente fcil para elegir el nombre del proyecto, la versin ZK y ejecucin de destino. Adems el asistente por defecto, ZK Studio le permite crear un nuevo proyecto con Maven. ZK Studio crear el proyecto para usted lo que le permite concentrarse en la construccin de su proyecto.

P re-requisitos para la instalacin de ZK Studio

Existen algunos programas que es necesario instalar antes de poder instalar ZK Studio.

3.1 Java SE D evelop m ent K it

Java 5 o superior es requerido para ejecutar Eclipse. En nuestro caso utilizaremos la versin 7 de Java la cual puede descargarse desde el sitio oficial de Oracle: http://www.oracle.com/technetwork/java/javase/downloads/index.html Una vez all dar clic en el cono:

Esto nos mostrar una tabla que nos permitir descargar el paquete correspondiente para la plataforma que estemos empleando. En el caso de Windows utilizaremos el paquete Windows x86 si nuestra mquina es de 32 bits o el paquete Windows x64 si es de 64 bits. Se debe aceptar la licencia para poder descargar el paquete que necesitamos.

Si estamos en un sistema Linux, generalmente podemos instalar el JDK de java desde el gestor de paquetes incluido en la distribucin. En el caso de Ubuntu 12.04 bastara con escribir en la consola: sudo apt-get install openjdk-7-jdk

3.2 Eclipse ID E for Java EE D evelopers

ZK Studio es un Plug-in para Eclipse, por lo tanto es necesario instalar Eclipse y se recomienda descargar el paquete Eclipse IDE para desarrolladores Java EE. En nuestro caso emplearemos Eclipse Juno. Se puede descargar el Eclipse Juno que emplearemos desde el siguiente enlace:

http://www.eclipse.org/downloads/packages/release/juno/sr1 Estando all seleccionar el paquete correspondiente para el sistema operativo que ha de emplear (Windows o Linux) y al procesador (32-bit o 64-bit).

Si descargamos el paquete para Windows esto nos dejar un archivo .zip si por el contrario realizamos la descarga para Linux, tendremos un archivo .tar.gz. El eclipse no necesita de ninguna instalacin, basta con descomprimirlo y ejecutar el archivo eclipse.exe en el caso de haber descargado la versin para Windows o el archivo eclipse en la versin para Linux.

3.3 Servidor de aplicaciones

Antes de desarrollar aplicaciones web en Java utilizando ZK Framework, es necesario instalar un servidor de aplicaciones. Apache Tomcat es uno de los contenedores web ms populares. Las versiones de Tomcat 6 y 7 son compatibles con ZK. En nuestro caso trabajaremos con la versin 7 de Tomcat la cual puede ser descargada desde la siguiente URL: http://www.eng.lsu.edu/mirrors/apache/tomcat/tomcat-7/v7.0.47/bin/ En esta pgina aparecen diferentes archivos para la instalacin. En nuestro caso deberemos descargar el apache-tom cat-7.0.47.zip para Windows o el apache-tom cat-7.0.47.tar.gz para Linux. Una vez descargado el paquete respectivo lo descomprimimos en el lugar que deseemos.

Instalando ZK Studio

4.1 Instalacin desde el M arket

ZK Studio se puede instalar de varias maneras. Se recomienda la instalacin a travs del Market. Para ello, abrir el eclipse, ir al men [Help] > [Eclipse Markpetplace] y busque "zk studio" encontrars ZK Studio para instalar.

Una vez que nos aparece en la lista, pulsamos el botn instalar y este nos guiar por una serie de pasos hasta iniciar el proceso de descarga del plugins. En un punto de la descarga es posible que nos genere una advertencia a la cual debemos de responder OK.

Finalmente nos pedir que reiniciemos el eclipse.

4.2 A ctivar ZK Studio

Este paso no es obligatorio sin embargo ayuda a estar en contacto con las actualizaciones de ZK Studio para ello, en el men de Eclipse, elija la opcin [Help] y seleccione [Activate ZK Studio]. Un cuadro de dilogo aparecer:

Llene la informacin que se solicita y presione [Activate]. Si an no posee una cuenta puede obtenerla haciendo clic en el enlace Register ZK account que aparece en el mismo formulario.

Obtener ZK Fram ew ork C om m unity Edition

5.1 D escarga del paquete Z K C E

Para no tener el problema de tener que comprar la versin Profesional o Enterprise de ZK, tenemos una distribucin disponible de uso libre mantenida por la comunidad de desarrolladores. Esta podemos descargarla desde http://www.zkoss.org/download/zk haciendo clic en el botn de la imagen que se ve a continuacin:

Esto nos descarga un archivo comprimido llamado zk-bin-6.5.4.zip que contiene la versin CE del Framework de ZK.

5.2 A gregando el ZK C E al Eclipse

Una vez que tenemos descargado el ZK CE nos vamos al men [Windows] > [Preferences], al final de la lista encontraremos una entrada llamada ZK, de all seleccionamos la opcin ZK Packages.

Damos clic en el botn Add File / Directory e importamos el archivo zk-bin-6.5.4.zip antes descargado. Una vez instalado nos aparecer en la lista anterior. Seleccinelo y pulse el botn OK.

A gregando A pache Tom cat a Eclipse

Al igual que para agregar el ZK CE, deberemos irnos al men [Windows] > [Preferences] encontraremos una entrada llamada Server de la cual seleccionamos la opcin Runtime Environments. Nos aparecer una tabla vaca de los servidores habilitados y a su derecha un botn Add el cual deberemos pulsar para agregar el Apache Tomcat.

Esto nos mostrar un segundo formulario el cual lo rellenaremos colocando el nombre del servidor (Apache Tomcat v7.0), seleccionamos el directorio descomprimido del Tomcat (Ejemplo: D:\TRABAJO\MODULO DE LA MAESTRIA\SOFTWARE\apache-tomcat7.0.47) y el JRE a emplear. La imagen siguiente nos muestra un ejemplo de cmo debe quedarnos el formulario:

Pulsamos Finish y luego el botn OK.

C reando nuestro prim er H ola M undo en ZK

7.1 C reando nuestro proyecto

Para crear un nuevo proyecto nos vamos a [File] > [New] > [Other...]

Seleccionamos la opcin ZK Project y pulsamos siguiente. En el siguiente formulario, deberemos de colocar un nombre a nuestra aplicacin, seleccionar la versin de ZK a utilizar (en nuestro caso ser la zk-bin-6.5.4) y el servidor a emplear (Apache Tomcat v7.0) y en la versin web ser la 3.0 y pulsamos Finish.

Esto nos dejar un proyecto que poseer la siguiente estructura de archivos:

Dentro de este abriremos el archivo index.zul de la carpeta WebContent donde se alojarn todos los archivos .zul de nuestro proyecto. Una vez abierto el archivo index.zul, cambiamos su contenido para que nos quede de la siguiente manera:

10

<?page title="Auto Generated index.zul"?> <window title="Hello World!!" border="normal" width="200px"> <label value="Hola mundo !!!!"/> </window>

7.2 Ejecucin de la aplicacin

Para ejecutar la aplicacin deberemos hacer clic derecho sobre la carpeta de la aplicacin, ubicamos Run As y selecciona Run on Server, esto nos mostrar el siguiente dialo go el que bastar que pulsemos Finish. Esto nos abrir el navegador mostrndonos el siguiente resultado.

C onclusin

Al terminar con esta prctica introductorio, debemos de tener configurado el entorno de trabajo de ZK Studio en Eclipse Juno con la versin del Framework ZK CE y con Apache Tomcat como servidor Web.

11