Tu aplicación web ZK enfoque MVC (4-5)

Framework ZK

Tu aplicación web ZK enfoque MVC (4-5)

Contenido

1. Introducción
2. Manejando la Lógica de la Interfaz de Usuario
3. Declarando los Controladores de la Interfaz de Usuario
4. Respondiendo a las Interacciones del Usuario
5. Controlando los Componentes de la Interfaz de Usuario
6. Mostrando un Conjunto de Datos
7. Implementando la Funcionalidad de "Ver Detalles"
8. Importar y Ejecutar la Aplicación de Ejemplo
9. Referencias

Introducción

Este tutorial pertenece a la siguiente serie:

1. Configurar el entorno
2. Empezar a programar
3. MVC y MVVM ¿Qué son y en qué se diferencian?
4. MVC en ZK
5. MVVM en ZK

Está dirigido a desarrolladores con experiencia en la creación de aplicaciones web en Java. A continuación aprenderás a manejar los componentes de la vista manualmente e implementar la lógica necesaria para que funcione nuestra aplicación.

A lo largo de este documento hacemos referencias a fuentes externas, las encontrarás todas en la sección de Referencias

Manejando la Lógica de la Interfaz de Usuario

El siguiente paso, después de crear el interfaz de usuario, es que esta, responda a la interacción del usuario. Lo que vamos a hacer a continuación es mostrarte cómo controlar por tí mismo los componentes del interfaz de usuario. Este podría estar considerado como el patrón de diseño Modelo-Vista-Controlador (MVC) [2].

El patrón MVC divide la aplicación en 3 partes.

El modelo consta de los datos de la aplicación y las reglas de negocio. La clase CarService y otras clases usadas por ella representan la parte del modelo en nuestra aplicación de ejemplo.

La vista cubre la interfaz de usuario. La página zul que contiene los componentes de ZK representa esta parte. La interacción del usuario con los componentes de la vista genera eventos que son enviados a los controladores.

El controlador juega el rol de coordinador entre la Vista y el Modelo. En esencia, recibe eventos de la vista para actualizar el Modelo y recibe datos del Modelo para cambiar la presentación, es decir la Vista.

1. Cuando un usuario interactua con un componente (por ejemplo hacemos clic en un botón) de la vista (fichero ZUL), esta interacción lanza un evento (onClick).
2. El evento es enviado al controlador e invoca el método correspondiente del “listener” (la clase que está escuchándo a los eventos).
3. El método del “listener”, normalmente, ejecuta la lógica de negocio o accede a los datos que necesita, para finalmente enviar las interacciones necesarias a los componentes de la vista.
4. Por lo tanto, cuando el estado de un componente cambia en el “listener”, este cambio se propaga a la vista.

Declarando los Controladores de la Interfaz de Usuario

En ZK, el controlador es responsable de controlar los componentes de la vista y escuchar y lanzar los eventos que genera la interacción de los usuarios con los mismos. Para crear un controlador simplemente tenemos que extender la clase org.zkoss.zk.SelectorComposer:

package tutorial;
 
// omit import for brevity
 
public class SearchController extends SelectorComposer<Component> {
 
}

Después de crear el controlador, lo asociamos al componente de la vista correspondiente. Asociar un controlador con un componente requiere que indiquemos el nombre completo de la clase en el atributo “apply” en la página zul. A continuación vemos como asociar un controlador a un componente “window” en la vista.

Extraído de searchMvc.zul

<window title="Search" width="600px" border="normal"

apply="tutorial.SearchController">

<!-- omit other components for brevity -->

</window>

Puesdes ver el fichero .zul completo en la sección de referencias en el siguiente link [3]

Después de asociar el controlador con el componente “window” de la vista, el controlador puede escuchar los eventos que se generan en la interfaz de usuario, tanto los del componente windows como los de los componentes hijos “child”, y esto nos permite implementar las funciones de la aplicación.

Empecemos con la función de buscar: Un usuario escribe un texto, hace clic sobre el botón “Search” para lanzar la búsqueda.

Pasos para implementar la función necesaria:

1. Declaramos un método que escucha el evento, en este caso clic del botón.
2. Controlamos los componentes de la interfaz de usuario para implementar los cambios que requiera y ejecutamos la lógica de negocio en el método que recoge el evento.

Respondiendo a las Interacciones del Usuario

Cuando asociamos un controlador a un componente, todos los eventos lanzados por ese componente (y sus componentes hijos “child”) son enviados al controlador. Si hay un método que hemos asignado para recoger el evento será invocado.

Por ejemplo si un usuario hace clic sobre el botón “Search”, para lanzar la función de búsqueda, tenemos que escuchar el evento “onClick”. Declaramos el método “search()”, y lo asociamos al evento lanzado por el botón con la siguiente anotación:

@Listen(“[EVENT_NAME] = #[COMPONENT_ID]”)

Por lo tanto el método con la anotación queda como método “listener”

El código final quedaría como se muestra a continuación:

public class SearchController extends SelectorComposer<Component> {
 
    @Listen("onClick = #searchButton")
    public void search(){
 
    }
}

• Linea 3: “searchButton” es el id del componente en el fichero zul. Además, la anotación @Listen soporta más parámetros para encontrar el componente en el fichero zul. Más información en las referencias [4]
• Linea 4: Tiene que ser un método de ámbito público.

Controlando los Componentes de la Interfaz de Usuario

Después de establecer la relación entre el evento de la vista (zul) y el método del “Listener”, podemos empezar a implementar la lógica de negocio. Pero primero tenemos que definir en el controlador, los componentes de los que escuchamos sus eventos mediante la anotación @Wire.

Pasos para recibir eventos de los componentes:

1. Declaramos una variable con el tipo del componente (por ejemplo Listbox, Label...)
2. La variable tiene que llamarse como el id (en la página zul) del componente que representa.
   Podemos hacer esto de diferentes forma, esta es la forma por defecto para la anotación @Wire, si quieres saber otra forma de asociar componentes visita la Guía de Referencia para Desarrolladores de ZK [5] para descubrir otras formas.
3. Añadimos la anotación @Wire a la variable que hemos creado.

Entonces ZK “conecta” el componente de la vista ZUL a la variable declarada. Después de que esto esté hecho, podemos controlar y manipular el interfaz de usuario directamente manipulando las variables que hemos declarado.

public class SearchController extends SelectorComposer<Component> {
 
    @Wire
    private Textbox keywordBox;
    @Wire
    private Listbox carListbox;
 
    //other codes...
}

• Linea 5-6: en el fichero searchMVC.zul hay un listbox en el que su id es “carLisbox”. ZK creará la relación entre la variable “carListBox” y el componente de la vista de tipo listbox, después de que los componentes de la vista sean creados.

El método de la búsqueda contiene una lógica simple: Llama a la clase de servicio “carService” con el texto que buscamos e inserta los resultados en la lista “listbox”. De una variable que está referenciada/unida a un componente, podemos conocer el valor de sus atributos a través de getters (por ejemplo getValue()) o cambiar el estado del componente visual, por ejemplo haciendo un componente de etiqueta “label” invisible mediante un setter (por ejemplo setVisible(false)) para conseguir una respuesta dinámica en el interfaz de usuario.

Por lo tanto, podemos obtener el texto escrito por el usuario mediante “keywordBox.getValue()” y cambiar la información de la lista “listbox” mediante “carListbox.setModel()”. El modelo de un componente es la información que este componente contiene, y podemos cambiar el modelo cambiando los datos directamente en la pantalla.

public class SearchController extends SelectorComposer<Component> {
    //omit codes to get components
 
    @Listen("onClick = #searchButton")
    public void search(){
        String keyword = keywordBox.getValue();
        List<Car> result = carService.search(keyword);
        carListbox.setModel(new ListModelList<Car>(result));
    }
}

• Línea 8: Nótese que “setModel()” solo acepta un objeto de tipo “ListModel”, por lo tanto podemos usar “org.zkoss.zul.ListmodelList” para encapsular/envolver la lista de resultados de la búsqueda. También hay otros objetos de tipo “ListModel” para diferentes tipos de listas y colecciones, más información al respecto en la sección de referencias [6]

Mostrando un Conjunto de Datos

Hemos conseguido que se invoque la búsqueda correctamente al hacer clic, pero todavía queremos mostrar en el listbox los resultados de la búsqueda correctamente. Ese es el motivo por el cual no hemos especificado cómo mostrar el modelo de datos en el componente “listbox”. Ahora usaremos una etiqueta de zul especial, “