6263 cicma 2010 creacion de aplicaciones web dinamicas con el uso de … · una página “en...
TRANSCRIPT
! "!
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 [email protected] / [email protected] 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/