Ejemplos de binding entre vista y modelo

De Uqbar wiki

Introducción

Recordemos nuestro objetivo:

pero también

Esta relación se determina a través de dos observers, que están asociados a un característica específica del modelo o del control. En el caso del modelo serán sus atributos, en el caso del control puede ser su valor u otra propiedad. Para JFace, estos observers tienen la capacidad tanto de actualizar la propiedad correspondiente como de obtener su valor. En otras tecnologías podrían tener una sola de las dos capacidades o bien estar repartidas en objetos distintos.

Dónde manejar el binding bidireccional

Para que esta lógica de notificación bidireccional entre modelo y vista funcione, recordemos la técnica que se usa con los observers, también llamados listeners:

Volviendo al ejemplo modelo-vista,

Toda esta responsabilidad que marcamos anteriormente bien podría ser de los observers, pero dada la complejidad del manejo de eventos en UI es común que esté separado en un objeto que se ocupe exclusivamente de esto: un contexto de binding, objeto responsable de recordar las diferentes parejas de modelo-control que están vinculados entre sí y de repartir los eventos teniendo en cuenta todas las complejidades que eso implica (evitar los ciclos, manejar la concurrencia, etc).

Control Textbox

Dependiendo del framework el textbox puede llamarse text, input (type text), input field, etc. A partir de aquí utilizaremos en forma genérica al textbox para referirnos al elemento gráfico de forma rectangular que permite ingresar caracteres (por default, alfanuméricos).

Queremos observar el valor de ese textbox para bindearlo contra un atributo del modelo. Algunos ejemplos de binding contra la propiedad value del textbox:

  1. un String: nombre del cliente (variable de instancia nombre de la clase cliente)
  2. un Date: fecha de nacimiento de un cliente (variable fechaNacimiento de la clase cliente)
  3. un Number: la nota de un examen (variable nota de la clase examen)

En el primer caso el binding se da naturalmente; en los otros dependemos de que la tecnología de UI tenga un control textbox particular cuyo value sea de tipo Date/Number/etc. De otro modo vamos a necesitar

A estas validaciones pueden sumarse otras realizadas por el modelo de dominio, por ejemplo en el momento de setearle el valor. Todos estos objetos en conjunto intervienen cada vez que se produce un evento en uno de los dos extremos de la cadena de binding, para hacer llegar el evento (y probablemente el valor asociado) hasta el otro extremo.

Otras propiedades de interés

Control Checkbox

Dependiendo del framework se los denomina checkbox, button(de tipo check), input (type check), etc.

Es un control pensado para modelar atributos booleanos del modelo (a través de la propiedad value), de forma cuadrada con un tilde marcado o desmarcado según la propiedad sea true/false respectivamente. A los checkboxes se les puede setear por lo general los atributos read only y visible.

Ejemplos que pueden modelarse con este control:

Control Combo

Dependiendo del framework se los llama combo box, drop down, input (type select), etc.

Ejemplo: si modelamos una aplicación para un Videoclub, cada película se relaciona con un género. Entonces la pantalla de carga de una película tiene:

Cuando el usuario cambia la selección del combo tenemos que enviar el mensaje pelicula.setGenero(genero);

El combo necesita tener asociado:

¿De qué tipo es esa lista de elementos seleccionables? Si trabajamos con generics, podríamos pensar en un Combo de manera que el modelo subyacente sea un Collection/Set/List y el elemento seleccionado un T. En el ejemplo planteado T = Genero.

Otra alternativa menos elegante es

Independientemente de la manera en que trabajemos, vamos a necesitar tener un conversor para asociar los elementos visuales del combo con los objetos que representan esas opciones y pasar de uno a otro en ambas direcciones, esto es capturar el evento de cambio para mapear el elemento/índice seleccionado con un objeto Genero que es lo que el modelo necesita.

Control Grilla

Dependiendo del framework se los llama table, grid, etc. La grilla es un control compuesto en forma de matriz que tiene:

Al igual que el combo la grilla conoce a

Ejemplo: en una pantalla que busca socios de un videoclub, la grilla tiene como modelo asociado el resultado de la búsqueda (un Collection/Set/List), separados en columnas:

etc.

En algunas tecnologías las columnas pueden contener controles de ingreso de datos (textboxes, checkboxes, botones, etc.), en otras sólo se puede visualizar la información.

Es común utilizar paginadores para segmentar la cantidad de registros que deben mostrarse. Ejemplo: la grilla se parte en segmentos de 10 socios, entonces si la búsqueda trae 1.200 socios, se guardan 12 páginas de 10 socios cada una, y se avanzan de a 10 socios. Esto se hace por varios motivos:

Control Botón

Dependiendo del framework se los llama button, action, actionButton, command, etc. Se utilizan para disparar eventos de la UI o mapear acciones del negocio.

Ejemplos: en un caso de uso que actualiza los socios de una biblioteca podemos mencionar los siguientes botones

En otras pantallas, también permiten disparar procesos de naturaleza batch (Generar Facturación), etc.

Otros controles

Ingreso

Visualización

Selección

Controles contenedores

Menú de opciones

Latest update on July 17, 2017 by GitHub