El presente artículo tiene el objetivo de iniciarle en el desarrollo de aplicaciones web, usando el patrón MVC (modelo-vista-controlador) con el framework ZK. Le permitirá aprender a manejar los componentes de la vista manualmente e implementar la lógica necesaria para que funcione nuestra aplicación.
Importar y ejecutar la aplicación de ejemplo.
Se provee un proyecto eclipse, en un fichero zip, que contiene el código fuente completo de la aplicación de ejemplo; usted puede descargar e importarlo para su Eclipse, para que no tenga que iniciar desde cero.
Para usar la aplicación de ejemplo, siga los siguientes pasos:
- En Eclipse, seleccione File \ Import \ General \ Existing Projects into Workspace, escoja Select archive file para importar el zip de la aplicación de ejemplo como un proyecto en su Eclipse.
Declarando una Clase de Dominio
Lo siguiente es la clase de dominio que representa a un carro.
Extraído de Car.java:
public class Car {
private Integer id;
private String name;
private String company;
private String preview;
private String description;
private Integer price;
//omit getter and setter for brevity
}
Para ver el código completo de la clase puedes ir a continuación, a la sección de referencias [3].
Ahora definimos una interfaz para implementarla en una clase de servicio que contendrá la lógica de negocio necesaria en el ejemplo, como buscar los carros.
Extraído de CarService.java:
public interface CarService {
/**
* Retrieve all cars in the catalog.
* @return all cars
*/
public List findAll();
/**
* search cars according to keyword in name and company.
* @param keyword for search
* @return list of car that match the keyword
*/
public List search(String keyword);
}
En este ejemplo, hemos definido la clase CarServeImpl que implementa la interfaz anterior. Para simplificar, usamos una lista estática de objetos como modelo de datos. Puedes reescribirla para que se conecte a una base de datos en una aplicación real. Los detalles de la implementación no están cubiertos en el ámbito de este artículo, puedes echar una ojeada a continuación en la sección de referencias [4].
Creando la Interfaz de Usuario
Diseñar la interfaz de usuario es un buen comienzo para crear una aplicación, además de que te ayuda a definir el alcance de tu aplicación.
ZK nos provee de cientos de componentes, listos para ser usados en el interfaz del usuario, por lo tanto un desarrollador puede crear la interfaz de usuario que desee combinando y mezclando esos componentes sin tener que crearlos desde 0.
En ZK puedes usar el ZK Markup Language para la creación del Interfaz del usuario (ZUML) [5], que es un lenguaje estructurado como un XML, que te permite definir la Interfaz del Usuario.
La convención que se utiliza en ZK es que para los ficheros en formato ZUML utilicemos la extensión .zul como sufijo. En los ficheros zul, podemos representar un componente como un elemento del XML (tag) y configurarlo (estilo, comportamiento, funcionalidad) mediante los atributos del elemento XML. [6]
En el caso de esta aplicación de ejemplo, primero, queremos diseñar una ventana con un título específico y bordes normales, como si fuera el borde exterior (marco) de la aplicación.
Extraído de search.zul:
<window title="Search" width="600px" border="normal">
<!-- put child components inside a tag's body -->
</window>
Como "window" es el componente que contiene al resto, lo llamamos componente raíz o "root". El componente "window" (ventana) normalmente se usa como contenedor de otros componentes, porque en esencia, simplemente muestra una ventana vacía como en una aplicación de escritorio tradicional, y en esta podemos añadir los componentes que queramos.
Los componentes dentro de la ventana los llamaremos hijos o "child", y deben estar dentro del cuerpo del elemento "window".
Por ejemplo, hacemos que aparezca el título de la ventana estableciendo texto en el atributo "title" del elemento "window", y hacemos visible el borde de la ventana estableciendo el atributo "border". En el caso del ancho, usaremos el atributo "width", pero en este caso estableceremos el valor de la propiedad CSS, es decir "800px" o "60%".
Básicamente, el interfaz de usuario de nuestra aplicación de ejemplo se divide en 3 áreas dentro de la ventana ("window"), que son (de arriba a abajo): área del buscador, área de listado de los carros y área de detalles del carro.
Área del buscador
Trabajar con los componentes de ZK es como trabajar construir bloques de código, puedes combinar y mezclar componentes que existan (incluso crear los tuyos propios) para crear la interfaz de usuario que desees.
Para permitir a los usuarios buscar, necesitamos un componente que les permita escribir el texto, es decir un "input", y un botón para lanzar la búsqueda.
A continuación vemos un ejemplo de cómo podemos usar algunos componentes simples para cubrir estos requisitos.
Extraído de search.zul:
<hbox align="center">
Keyword:
<textbox id="keywordBox" />
<button id="searchButton" label="Search" image="/img/search.png" />
</hbox>
hbox es un componente contenedor, que ordena horizontalmente los componentes que contenga. Seguro que has adivinado, la "h" de "hbox" significa horizontal. Como los componentes hijos o "child", tienen diferentes tamaños, establecemos el atrubuto "align" con valor "center" para que se alineen, entre ellos sobre su línea central.
En algunos componentes del ejemplo también especificamos un atributo "id", esto nos permitirá referirnos a ellos y por lo tanto poder controlarlos usando el "id". Si quieres convertir el botón en un botón con imagen solo tienes que especificar el path de la imagen en el atributo "image" del mismo.
Área de listado de los coches
ZK dispone de muchos componentes para mostrar un conjunto de datos, como por ejemplo los componentes de lista "listbox", malla "grid" y árbol "tree". En este ejemplo, hemos elegido usar una lista "listbox" para mostrar un listado de coches, con tres columnas: Nombre, Compañía y Precio.
Establecemos el atributo "height", de forma que se mostrarán tantas filas como quepan; puedes navegar con la barra de scroll para ver el resto de filas.
El atributo "emptyMessage" se usa para mostrar un mensaje cuando la lista no contiene elementos.
Puesto que el componente de lista "listbox" también es un componente contenedor puedes añadirle un componente "listhead" para mostrar y definir los nombres de las columnas. También puedes añadirle un componente "listitem" para mostrar los datos, y dentro de este componente "listcell", tantos como columnas hayas definido (en el "listhead" por ejemplo).
En el siguiente código de ejemplo usamos "listcell" con contenido estático (3 listcells) para mostrar la estructura de un componente "listitem", pero a continuación, te mostramos cómo crear un listitem dinámicamente, de acuerdo a los datos que recibe.
Extraído de search.zul:
<listbox id="carListbox" height="160px" emptyMessage="No car found in the result">
<listhead>
<listheader label="Name" />
<listheader label="Company" />
<listheader label="Price" width="20%"/>
</listhead>
<listitem>
<listcell label="product name"></listcell>
<listcell label="company"></listcell>
<listcell>$<label value="price" /></listcell>
</listitem>
</listbox>
Área de detalles del coche
Al igual que el "hbox", "vbox" es un componente que distribuye los componentes hijos "child", pero en este caso en vertical. Combinando estos 2 componentes contenedores, podemos mostrar más información en la pantalla. El atributo "style" permite personalizar el estilo del componente escribiendo en él CSS directamente.
Extraído de search.zul
<hbox style="margin-top:20px">
<image id="previewImage" width="250px" />
<vbox>
<label id="nameLabel" />
<label id="companyLabel" />
<label id="priceLabel" />
<label id="descriptionLabel"/>
</vbox>
</hbox>
Para ver el fichero search.zul diríjase a la sesión de referencias [7].
Manipulando la lógica de la UI.
El próximo paso después de construir una UI (Interfaz Gráfica de Usuario) es hacer que responda al usuario. A continuación realizaremos una aproximación al mecanismo para controlar los componentes de la UI por ti mismo. Este mecanismo puede ser clasificado en el patrón de diseño Modelo-Vista-Controlador (MVC) [8]. Este patrón divide la aplicación en tres partes:
El Modelo consiste en los datos de la aplicación y las reglas del negocio. CarService y otras clases usadas por ella representan esta parte de la aplicación de ejemplo.
La Vista representa la interfaz de usuario. La página zul que contiene los componentes ZK representa esta parte. La interacción del usuario con los componentes genera eventos que son lanzados a los controladores.
El Controlador juega el papel de coordinador entre la Vista y el Modelo. Recibe los eventos desde la Vista para actualizar el Modelo y busca datos en el modelo para cambiar la presentación de la Vista.
- Cuando un usuario interactúa con un componente (ej. Hace clic en un botón) en un ZUL, la acción del usuario lanza un evento.
- Este evento es enviado al controlador e invoca el correspondiente método que escucha el evento.
- El método que escucha el evento ejecuta lógica del negocio o accede a datos, entonces manipula los componentes de ZK.
- El cambio de estado de un componente en el método que escucha su evento se refleja en su correspondiente UI.
Referencias:
Me ayuda bastante el ejemplo. Muchas gracias.
ResponderEliminar