! "!

Creación de aplicaciones Web dinámicas con el uso de ZK Framework Ing. Alexa Ramírez Vega Instituto Tecnológico de Costa Rica Cartago Costa Rica alexarv11@hotmail.com / alramirez@itcr.ac.cr Resumen: Los Frameworks de desarrollo pretenden ayudar a desarrollar y unir los diferentes componentes de un proyecto de software, además de facilitar el desarrollo de aplicaciones Web, permitiendo a los diseñadores y programadores pasar más tiempo identificando requerimientos de software que tratando con los tediosos detalles de bajo nivel de proveer una aplicación funcional. Lo cual revela la importancia de conocer un potente Framework de desarrollo como ZK. Por lo tanto, este trabajo pretende, en primer lugar, dar una visión general sobre las características y componentes más relevantes del Framework de desarrollo ZK, pasando luego a describir paso a paso el desarrollo de una aplicación Web con dicho Framework, haciendo énfasis en su capa de presentación y de negocios. Para finalmente mostrar algunos de los componentes avanzados de este Framework y sitios Web desarrolladas completamente con ZK. Summary: Development Frameworks is intended to help develop and unite the various components of a software project and facilitates the development of Web applications, allowing designers and developers to spend more time identifying software requirements dealing with the tedious low-level details provide a functional application. Which reveals the importance of knowing a powerful development framework like ZK. Therefore, this paper aims, first, give an overview of the most important features and components of the Development Framework ZK, then going to describe step by step development of a web application using the Framework, emphasizing their presentation layer and business. To finally show some of the advanced components of the Framework and fully developed Web sites with ZK. Palabras Claves: ZK Framework; aplicación Web; Web dinámica Key Words: ZK Framework; Web application; dinamic Web application

! #!

1. ANTECEDENTES

Desde hace muchos años el término

HTML resulta muy familiar, tanto para

programadores expertos, así como los

novatos, y sin duda la mayoría hemos

desarrollado algún sitio basado en esta

herramienta. En realidad el HTML no

es un lenguaje de programación sino,

más bien, se trata de un lenguaje

descriptivo que tiene como objeto dar

formato al texto y las imágenes que se

pretenden visualizar en el navegador.

A partir de este lenguaje se puede

introducir enlaces, seleccionar el

tamaño de los fonts o intercalar

imágenes, todo esto de una manera

prefijada y en ningún caso inteligente.

En efecto, el HTML no permite realizar

un simple cálculo matemático o crear

una página “en caliente” a partir de una

base de datos. A decir verdad, el

HTML, aunque muy útil a pequeña

escala, resulta bastante limitado a la

hora de concebir grandes sitios o

portales que involucren dinamismo en

su funcionalidad.

Es esta deficiencia del HTML la que ha

hecho necesario el empleo de otros

lenguajes accesorios mucho más

versátiles y de un aprendizaje

relativamente más complicado,

capaces de responder de manera

inteligente a las demandas del

navegador y que permiten la

automatización de determinadas tareas

tediosas e irremediables como pueden

ser las actualizaciones, interacciones

con el usuario y la página, así como

tener las funcionalidades de una

aplicación de escritorio, pero en la

Web.

Debido a esta necesidad, es que

surgen los lenguajes llamados scripts ,

los cuales incorporan funcionalidades

en una página estática y la convierten

en dinámica. Los más conocidos son

los siguientes: JavaScript, JSP, ASP,

PHP, entre otros. Todos los anteriores

han permitido la creación de sitios

totalmente dinámicos e interactivos,

pero que con el pasar del tiempo han

presentado limitaciones en el desarrollo

y utilización de los sitios, tanto para el

programador, como para el usuario

final.

Desde esta perspectiva surge lo que se

conoce como AJAX (Asynchronous

JavaScript And XML), el cual permite

realizar cambios sobre las páginas sin

necesidad de recargarlas, lo que

significa aumentar la interactividad,

velocidad y la usabilidad en las

aplicaciones Web. Todas estas

ventajas para los usuarios producidas

por Ajax, es sacrificada por los

programadores, quienes se enfrentan a

la dura tarea de desarrollar

aplicaciones con el uso de las

tecnologías que Ajax involucra.

Como respuesta a este problema surge

! $!

ZK que es un framework de

aplicaciones Web en Ajax,

completamente en Java de software de

código abierto que permite una

completa interfaz de usuario para

aplicaciones Web sin usar JavaScript y

con poca programación, lo cual hace

que ZK sea un Framework para

programadores de diversos niveles, ya

sean novatos o expertos [2].

De esta forma, el estudio y aplicación

de este Framework en el desarrollo de

aplicaciones Web resulta de gran

ayuda y dinamismo para los

profesionales que se desarrollan en el

área de la Computación.

2. PRERREQUISITOS

• Grupo Meta

Profesionales y estudiantes en

el área de informática y

computación con conocimientos

avanzados de programación.

• Equipo

Laboratorio de computo con

cualquier Sistema Operativo

que soporte Netbeans 6.0 o

superior.

Proyector u otro medio de

exposición.

• Tiempo

El tiempo estimado para el taller es de 3 horas

3. OBJETIVOS DEL TALLER

• General Al final de este taller los

participantes estarán en la

capacidad de desarrollar

aplicaciones Web dinámicas

con el uso del Framework de

desarrollo ZK, a un nivel de las

dos primeras capas de su

arquitectura (capa de

presentación y capa de

negocios). Además de conocer

un nuevo marco de desarrollo

de dichas aplicaciones basadas

en AJAX.

• Específicos Describir las principales

características y componentes

de desarrollo con que cuenta ZK

Framework.

Conocer la forma de

preparación del ambiente de

trabajo para desarrollar

aplicaciones que soporten el

uso de ZK.

Desarrollar una aplicación Web

a nivel de capa de presentación

y lógica con el uso de ZK. Conocer componentes (wigets)

avanzados desarrollados con

este Framework.

4. CONTENIDO

• ¿Qué es ZK?

ZK es un Framework de

! %!

aplicaciones Web en AJAX,

completamente en java de

código abierto que permite una

rica interfaz de usuario para

aplicaciones Web sin usar

JavaScript y con poca

programación. Además, soporta

un lenguaje de marcación para

la definición de una potente

interfaz de usuario llamada ZUL

[2].

Los programadores diseñan las

páginas de su aplicación en

componentes XUL/XHTML ricos

en características, y los

manipulan con eventos

disparados por la actividad del

usuario final. Es similar al

modelo de programación

encontrado en las aplicaciones

basadas en GUI de escritorio

[2].

ZK utiliza el acercamiento

llamado centrado-en-el-servidor

para la sincronización de

componentes y el pipelining

entre clientes y servidores se

haga automáticamente por el

motor, y los códigos de Ajax

sean completamente

transparentes para los

desarrolladores de aplicaciones

Web. Por lo tanto, los usuarios

finales obtienen una interacción

y respuesta similar a las de una

aplicación de escritorio,

mientras que la complejidad del

desarrollo es similar a la que

tendría la codificación de

aplicaciones de este mismo tip

[1].

Además de la programación

basada en componentes y

orientación a eventos, ZK

soporta un lenguaje de

marcación para la definición de

una potente interfaz de usuario

llamada ZUL.

• Ventajas

Zk incorpora una amplísima

gama de posibilidades en el

desarrollo de aplicaciones

Web con alto dinamismo e

interactividad, además entre

otras ventajas se destacan

las siguientes:

- Su lenguaje de

demarcación de

interfaces ZUL permite a

los no expertos diseñar

eficientemente interfaces

de usuario.

- Empotrar script en Java

ayuda al prototipado

rápido y a las

personalizaciones sin

mayor costo.

- No es necesario que el

desarrollador tenga

conocimientos de Ajax o

JavaScript.

- Modelo basado en

! &!

componentes intuitivo

dirigido por eventos.

- Permite centrar toda la

lógica de programación

en el servidor, y no en el

cliente.

• Componentes y aplicaciones Si se quiere ir un paso

más allá con ZK, éste

permite una colaboración

online, informes

dinámicos y business

intelligence, su ZK

Spreadsheet permite a

los desarrolladores

incrustar funcionalidades

Excel en aplicaciones

empresariales de

Internet [1].

Por otra parte, ZK

Calendar es un

componente Ajax que

integra ricas e intuitivas

procesos en las

aplicaciones

empresariales existentes

[1].

• Herramientas de

desarrollo

Además de ZK Calendar

y Spreadsheet, la

comunidad de

desarrolladores de ZK

creó el llamado ZK

Studio, el cual es un

entorno de desarrollo

integrado que

proporciona

herramientas intuitivas

que abarcan ciclos de

vida de desarrollo

íntegros, incluyendo

diseño de UI,

prototipado, desarrollo y

desarrollo de nuevas

herramientas para

aplicaciones ZK. Esta

herramienta puede ser

incorporada a los

distintos IDE`s de

desarrollo, como por

ejemplo Eclipse, con el

cual se potencian

muchas de sus

funcionalidades [5].

• Opciones Enterprise e

integración

Finalmente, el desarrollo

de aplicaciones y

componentes para la

integración de otras

tecnologías es el último

de los aciertos de la ZK

Framework. ZK JSP

Tags, y ZK JSF

Components

proporcionan un camino

directo al

enriquecimiento de las

aplicaciones Web y las

! '!

aplicaciones Java, ya

que permiten la

integración de éstas y

otras tecnologías en el

ambiente de desarrollo

ZK [6].

5. METODOLOGÍA El Programa de Actividades se

desarrollará en tres etapas y

estará dirigido por guías

impresas que permitirán el

desarrollo y logro de los

objetivos programados para el

Taller.

Etapa 1: Exposición magistral.

Inicialmente se presentará la

información más relevante

sobre ZK Framework, ya que

éste no es muy conocido en

Costa Rica, por lo tanto resulta

indispensable hacer una breve

explicación, de forma que se

contesten las siguientes

preguntas:

- ¿Qué es ZK?

- ¿Qué tecnologías

utiliza?

- ¿Cuáles son las

ventajas frente a otros

Frameworks de

desarrollo?

- ¿Cuáles son los

principales componentes

gráficos con los que

cuenta?

Etapa 2: Preparación y

configuración del ambiente de

trabajo.

Luego de conocer con qué se

va a trabajar, hay que preparar

el ambiente de trabajo.

Los participantes deberán

preparar el ambiente de trabajo,

dirigidos por la instructora del

taller, utilizando la guía de

trabajo inicial, así como los

materiales aportados en el CD.

Etapa 3: Desarrollo de la

aplicación mediante la guía de

trabajo.

Una vez listo el ambiente de

trabajo se procede a dar inicio a

las actividades de desarrollo de

la aplicación Web con ZK.

Esta aplicación será

desarrollada de manera que

abarcan la mayor cantidad de

los diferentes componentes que

ZK soporta, de manera que se

haga un recorrido desde su

aplicación, funcionalidad y

parametrización en el entorno

Web.

Se dará inicio con el famoso

“Hello World”, de forma que los

participantes empiecen a

familiarizarse con ZK. Posterior

a esta actividad, se irán

! (!

incluyen los diversos

componentes (siguiendo

siempre la guía de trabajo) que

darán como resultado un sitio

Web dinámico con posibilidad

de involucrar bases de datos.

La guía de trabajo explica paso

a paso los procedimientos a

seguir para realizar la aplicación

desea, pero además incorpora

sugerencias adicionales que

permita añadir elementos extra

a la aplicación, lo cual será

decisión del participante si los

agrega o no. Esta guía esta

elaborada de manera que sirva

como un tutorial de ZK, donde

los usuarios más expertos en

aplicaciones Web lo desarrollen

sin necesidad de explicaciones

adicionales, lo cual hace que

este taller se pueda extender

después de su desarrollo

presencial.

6. CRITERIOS DE

EVALUACIÓN Para evaluar el logro de los

objetivos propuestos en este

taller se utilizará la hoja de

evaluación que se presenta en

el anexo 1 de este documento,

con el fin de obtener

retroalimentación de los

participantes del mismo, de

forma que se potencien los

aciertos del taller y se corrija

algún posible error o deficiencia.

7. CRONOGRAMA DE

ACTIVIDADES

A continuación se detalla el

cronograma de actividades a

seguir en el taller:

Actividad Tiempo

estimado

Exposición

magistral sobre

ZK.

20 min.

Preparación y

configuración de

ambiente de

trabajo.

10 min.

Exploración de IDE

de trabajo.

10 min.

Desarrollo de

aplicación “Hello

World”.

30 min.

Implementación

interfaz gráfica de

aplicación Web.

40 min.

Implementación

Controladores del

sitio Web.

40 min.

Incorporación de

componentes

adicionales.

30 min.

8. LISTA DE MATERIALES DE APOYO

Guía de trabajo impresa

CD con los siguientes contenidos:

! )!

- Carpeta con librerías de

ZK Framework.

- Netbeans-ZK Plugin

- Carpeta con

documentación de ZK

(inglés).

- Guía de trabajo del

taller.

- Carpeta con ejemplos

desarrollados con ZK.

- Carpeta con IDE Eclipse

(varios SO).

Hoja de evaluación del taller

9. REFERENCIAS Y CITAS

[1] Sekula, A. (2008). La Plataforma

ZK. Recuperado el 8 de mayo de

2008, en dirección electrónica:

http://www.mkm-

pi.com/mkmpi.php?article2202&var

_recherche=zk

[2] The Developer’s Guide.

Recuperado el 6 de febrero de

2010, en

http://www.zkoss.org/doc/devguide/

[3] Tidwell, J. “Designing Interfaces”.

O´Reilly, 2005.

[4] Página principal ZK Framework en:

http://www.zkoss.org/

[5] Ian Tsai. “ZK Studio, An Eclipse

Plug-in to Quick start Your ZK

Project”. En

http://www.zkoss.org/smalltalks/zks

tudioI/index.dsp

[6] ZK JSP Tags. Recuperado el 6 de

febrero de 2010, en

http://www.zkoss.org/product/zkjsp.

dsp

[7] Zk libreries. En

http://www.zkoss.org/downloadup/z

k.dsp

[8] Zk wigets Demo. En

http://www.zkoss.org/zkdemo/userg

uide/