Buscar
Social
Ofertas laborales ES
« Taller gratuito de Integración Continua con Java | Main | Tweets más populares del último mes »
martes
jun042013

ZK Essentials 1 - Introducción

ZK Framework




Framework ZK

Conocimientos esenciales

Introducción

Contenido

Valor y Puntos Fuertes de ZK

ZK es un framework basado en coponentes de interfaz de usuario. Te permite crear aplicaciones ricas de internet (RIA) y aplicaciones móviles sin tener que aprender JavaScript o Ajax. Puedes construir aplicaciones altamente interactivas y haceras responsive mediante Ajax únicamente programando en Java. ZK pone a tu disposición miles de componentes que están diseñados para varios propósitos, algunos para manejar grandes cantidades de datos y otros para recoger los datos que el usuario introduce. Además puedes usar nuestro lenguaje XML para crear las interfaces: ZUL.

Toda interacción que un usuario realice sobre una página, como hacer clic y escribir puede ser manejada en un Controlador de forma muy simple. Puedes usar los componentes para que respondan a la interacción del usuario en un controlador y estos cambios serán actualizados en los navegadores automáticamente. No necesitas preocuparte sobre los detalles de la comunicación entre el navegador y el servidor, ZK lo maneja por tí.

Adicionalmente para el manipular directamente componentes, como requiere el patrón MVC (Modelo-Vista-Controlador), ZK también pone a tu disposición otro patrón de diseño MVVM (Modelo Vista VistaModelo) que permite mayor separación entre el controlador y la vista. Estos 2 enfoques son totalmente intercambiables, únicamente siendo tú quien eliges en función de tu arquitectura.

Arquitectura de ZK

Arquitectura Simple

La imágen anterior es la arquitectura de ZK simplificada.

Cuando un navegador visita una página de un aplicación hecha con ZK, ZK crea los componentes que defina el fichero ZUL y los renderiza en el navegador. Puedes manipular los componentes directamente desde el controlador para implementar la lógica de la vista. Todos los cambios que hagas en los componentes será automáticamente reflejado en el navegador del usuario y ZK se encarga de abstraerte de la comunicación

Acerca de esta colección de artículos esenciales

Esta colección de artículos presenta los conceptos clave y prácticas para utilizar ZK desde la perspectiva que requiere crear una aplicación web. Cada capítulo cubre un tema, y te facilitamos uno o varios ejemplos para demostrarte lo que argumentamos en cada capítulo.

Cada ejemplo sigue al del capítulo anterior, iremos añadiendo más y más funciones. En el último capítulo, la aplicación de ejemplo se a cerca mucho a una aplicación real. El código fuente de las aplicaciones de ejmplo pueden ser descargadas a través de github, hablaremos en detalle de esto en el siguiente capítulo: Estructura de un proyecto

  1. Introducción
  2. Introducción a ZK, incluyendo su valor y sus puntos fuertes, resumen de su arquitectura.

  3. Estructura de un proyecto
  4. Te enseñamos con ejemplos la estructura de un proyecto

  5. Interfaz de usuario y Diseño
  6. En este punto te enseñamos a crear un diseño base que contenga cabecera, pié y sidebar

  7. Controlando Componentes
  8. En este punto te enseñamos cómo controlar componentes mediante programación

  9. Manejando la entrada de usuario
  10. Explicación al respecto de cómo interactuar con el usuario

  11. Implementando CRUD (Crear Leer Actualizar y Borrar)
  12. Operaciones básicas de insertar, borrar, actualizar y leer sobre una aplicación de ejemplo real tipo lista de tareas

  13. Navegación y Plantillas
  14. 2 posibles formas de controlar la navegación en ZK, mediante páginas o mediante Ajax

  15. Autenticación
  16. Ejemplo simple de cómo implementar la autenticación de los usuarios

  17. Integración con Spring
  18. Cómo integrar Spring Framework con ZK

  19. Integración con JPA
  20. Te demostramos como usar JPA en una aplicación ZK

Aplicación de ejemplo

El resultado final de esta serie esencial de artículos es crear una pequeña y rica aplicación que disponga de las características más comunes como autenticación, navegación, formularios de entrada y una gestión de listas de tareas pendientes. A nivel de infraestructura se apoya en Spring y persiste la información mediante JPA.

La aplicación tiene un diseño común. La cabecera superior tendrá el icono de la aplicación y el título, y el pié inferior contendrá la información general. El área central mostrará la función principal. Debes loguearte para acceder al resto de funciones.

Example application - login

Una vez te hayas logueado, puedes ver la página principal. La barra lateral en el lado izquierdo es una barra de navegación que te permite cambiar entre diferentes funciones. Los primeros 3 elementos te llevarán a links externos. Habrá 2 funciones principales, perfil y lista de tareas pendientes, que han sido implementadas con los 2 enfoques, MVC y MVVM.

Example application - profile form

La siguiente imagen enseña la función de lista de tareas pendientes, puedes crear, actualizar y borrar cualquier elemento.

Example application - todo list

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

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (3)

los links no tienen sentido
redirijen a la misma pagina
pueden solucionarlos

junio 4, 2013 | Unregistered Commenterluis

Los links funcionarán en cuanto vayamos publicando los diferentes artículos.

junio 4, 2013 | Unregistered CommenterFrancisco Ferri

hola muy buen post pero los links dirgen al mismo lugar donde puedo consultar el ejemplo paso a paso gracias

septiembre 11, 2015 | Unregistered Commentergamaliel

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>