Temas: templates, colección de modelos.
A través de este post aprenderás sobre qué son los templates, cuándo usarlos y cómo hacer uso de ellos mediante un ejemplo de aplicación.
Modelos
Un modelo a la estructura básica de representación y modelado de datos para una aplicación mat|r. La sintaxis para definir un modelo, es usando la palabra reservada: Model. Un modelo permite almacenar un conjunto de datos de diferente tipo, como ser tipos simples (String, Integer, Double) o a su vez de tipos compuestos (otros modelos, Array, Map). A cada uno de los datos o elementos almacenados dentro de un modelo los denominamos atributos.
Ejemplos:
Model Grupo {
Array<Persona> integrantes
Persona representante
}
, donde:
Model Persona {
String nombre
Double altura
Integer edad
Bool tieneNovia
Date fechaNacimiento
}
Templates
Los templates son sublayouts para representar un modelo en listas (List) o selectores (Select). Los selectores son componentes que permiten visualizar y seleccionar un listado de opciones, mientra que las listas permite listar una colección de valores.
Ejemplo: lista de modelos
La idea es mostrar un listado de modelos correspondiente a datos sobre libros usando un template (Figura 1).
Figura 1. Listado de modelos con datos de libros usando un template.
Lógica de la App
Definimos el modelo “Libro” con 3 atributos de tipo String: “titulo”, “autor” y “tapa” (Figura 2)
Figura 2. Modelo “Libro”.
Luego, definimos la experiencia “Main” con el atributo “libros” de tipo Array<Libro> y lo asociamos a un componente List (Figura 3).
Figura 3. Experiencia “Main”.
A continuación, en el bloque OnInit de Application defimos 5 variables “l1”, “l2”, “l3, “l4” y “l5” de tipo “Libro”. A cada una de ellas la inicializamos con su constructor e inicializamos también sus atributos con el título de un libro, el nombre del autor y una URL a la imagen de su tapa. Finalmente, definimos una experiencia “exp” de tipo “Main” y la inicializamos con su constructor. Al atributo libros de la misma lo inicializamos con [l1, l2, l3, l4 y l5] y finalmente colocamos el layout asociado a la experiencia en la cima de la pila de navegación a treavés de broker.push.
Figura 4. Lógica dentro del bloque OnInit de Application.
Template
Para crear un template ve al panel izquierdo del Build UI, haz click en el símbolo “+” y selecciona “Create Template” (Figura 5). Aparecerá una ventana para que le coloques un nombre al template, en este caso llamemoslo “ temp” (Figura 6).
Figura 5. Creación de un template.
Figura 6. Nombre del template.
Luego, coloca componentes visuales usando el Palette. Es este caso usamos un contenedor vertical para que contenga 2 etiquetas, correspondientes al título y autor del libro respectivamente. Además, se añadió un contenedor horizontal para colocar aquella estructura y una imagen, la de la tapa del libro. Haz click en cada componente, ve a “data binding” y colocales un nombre representativo. En este caso “title” y “author” a cada etiqueta e “image” a la imagen. Estos serán los nombres de los componentes que hay en el template (Figura 7).
Figura 7. Componente visuales añadidos al template desde el Palette.
Por último, hay que vincular el template al componente lista del layout. Seleccionamos el componente List, vamos a “Properties” y seleccionamos “Templates y template binding”. Optamos por el nombre del template a asociar “temp” y procedemos con el template binding (Figura 8). Veamos cómo hacerlo con uno de ellos:
TITLE (es el nombre del componente en el template)
{{item.title}} (entre llaves se coloca la palabra item seguido de un punto seguido del nombre del atributo del modelo a bindear, en este caso “titulo”).
Así hemos vinculado title del template con “titulo” de modelo Libro. Has lo mismo para los dos campos restantes.
Figura 8. Asociación de template “temp” al componente List y completamos el template binding.
Finalmente, prueba la app con el mat|r Viewer escaneando el siguiente código QR:
Recuerda que puedes acceder a la app y forkeala a través del siguiente link:
https://platform.matrproject.com/hub/view/5e5af9ab7b4f9c0014d442e5