A través de este post aprenderás cómo crear y visualizar un crossmenu en una app, así como también, configurar sus propiedades mediante un ejemplo.

 

El crossmenu, menú o cajón de navegación es un panel en el que las transiciones entre layouts ocurren desde el borde izquierdo de la pantalla y muestra las principales opciones de navegación de la aplicación. En mat|r una aplicación puede tener sólo un crossmenu. El usuario puede llevar el crossmenu en la pantalla deslizando desde el borde izquierdo de la pantalla o tocando el icono de hamburguesa en la esquina izquierda de la barra de acción (Figura 1).

Figura 1. Ilustración de un ícono de hamburguesa (arriba) y de una app con crossmenu (abajo).

 

Cuando se expande el crossmenu, el usuario puede descartarlo de dos maneras:

• Al tocar el contenido fuera del crossmenu.
• Al deslizar hacia la izquierda en cualquier parte de la pantalla.

 

Ejemplo

 

A continuación desarrollaremos una aplicación sencilla para mostrar cómo crear un crossmenu y configurar sus propiedades. Supongamos que se trata de una app perteneciente a alguna institución educativa que brinda cursos virtuales de diversas temáticas. En particular supongamos algo simple, de todas las funciones que puede ofrecer la app nos quedamos sólo con 3 de ellas. Por lo tanto, organizaremos la app de manera tal de que consista de 3 layouts principales “Questions”, “Profile” y “My Courses” dispuestos en un crossmenu (Figura 2 y 3). “Profile” contendrá datos de un usuario hipotético, alumno de la institución que brinda los cursos; “My Courses” ofrece un listado de los cursos en los cuales el alumno se ha inscripto y “Questions” es una sección en la que el alumno selecciona un curso y puede enviar rápidamente una consulta a los responsables del dictado del mismo.

Figura 2. Crossmenu (izquierda) y layout “Questions” (derecha).

Figura 3. Layout “My Courses” (izquierda) y layout “Profile” (derecha).

A continuación se indica la lógica de la app, la Figura 4, 5 y 6 muestran las definiciones de las experiencias “Profile”, “Questions” y “MyCourses” respectivamente. 

Figura 4. Definición de experiencia “Profile”.

Figura 5. Definición de experiencia “Questions”.

Figura 6. Definición de experiencia “MyCourses”.

Asimismo, se definió un contexto de reglas llamado “CoursesContext” que contiene la regla “sendQuestion” asociada al evento de presionar el botón “Send” de la experiencia “Questions”. Esta es una regla representativa que simula enviar la consulta del alumno a los responsables del curso. En realidad su lógica debería ser más compleja, sin embargo para el fin de este post tal como fue definida la regla es suficiente (Figura 7).

Figura 7. Definición del contexto de reglas “CoursesContext” y la regla “sendQuestion”.

 

Luego, definimos el bloque Application y dentro del OnInit dispondremos las  experiencias en un menú (Figura 8). Para ello, definimos tres experiencias de tipo “Profile”, “Questions” y “MyCourses” y las inicializamos con su constructor. Luego, para que puedan ser visualizadas por el usuario de la app usamos la sentencia broker.ui.push (de forma similar se podría haber usado broker.ui.present). Supongamos que al mismo lo llamaremos “appmenu”.

Figura 8. Bloque Application y OnInit.

 

La sentencia:

 

void broker.ui.push(String nombreLayout, Model dataSourceModel1, …, Model dataSourceModelN),

 

Hace visible el layout referenciado en “nombreLayout” (en este caso “appmenu”) y lo añade a la pila de navegación actual. En la misma acción, los modelos pasados después del primer argumento, se bindean (asocian) a los datasources configurados en el layout. Para las experiencias siempre existe como máximo 1 dataSource a bindear. En el caso de un layout de tipo crossmenu, los modelos argumentos a bindear en los dataSources son tantos como ítems tenga el menú. Es importante observar que en este tipo de layout, todos los layouts referenciados dentro del crossmenu deben tener un dataSource asociado.

 

Por otro lado, cabe mencionar que el número de layouts referenciados en el crossmenu y el orden en el que se han añadido debe coincidir con el número de ítems ingresados cuando se cree el menú y con el orden en el que se ha ingresado cada ítem. Por lo tanto, según el ejemplo el primer ítem a crear dentro del “appmenu” debe ser de tipo “Profile”, seguido de uno de tipo “MyCourses” y por último uno de tipo “Questions”.

 

Creación del crossmenu

 

En el Build UI, presionamos el ícono “+” del panel izquierdo. Se desplegará una lista de componentes que permite crear mat|r, elegimos el primero de ellos “Create menu” (Figura 9). Luego, aparece una ventana “Crossmenu Information” donde colocaremos un nombre al crossmenu, en este caso lo llamaremos “appmenu” (Figura 10).

 

Figura 9. Creación del crossmenu en el Build UI.

Figura 10. Crossmenu Information.

 

Propiedades del crossmenu

 

En el panel de  propiedades (“Properties”) hay 4 secciones principales a configurar: “Color”, “Header”, “Header Line” y “Create Menu Item”.

 

En “Color” se especifican los colores en formato hexadecimal de los siguientes 4 elementos: los ítems del menú (menu item) cuando estos no han sido seleccionados, los ítems cuando se ha seleccionado uno de ellos (selected menu item), el fondo del encabezado del menú (header background) y el fondo del cuerpo del menú (menu background) en el que se encuentran listados los ítems (Figura 11).

 

Figura 11. Sección “Color” del panel “Properties” del crossmenu.

 

En “Header” se especifica el título del encabezado del menú (header), el tipo de letra (font family), el tamaño de letra (font size), el color (header color) y la alineación del texto (text alignment) (Figura 12).

Figura 12. Sección “Header” del panel “Properties” del crossmenu.

 

En “Header Line” se especifica un subtítulo (Header line), el tipo de letra (font family), tamaño de letra (font size) y su color (header line color), así como también, la alineación del texto (text alignment). Además, se debe especificar el ítem cuyo contenido se mostrará por defecto cuando se inicie la app (default selected). Si este campo no es configurado se mostrará el primero de ellos (Figura 13).

 

Figura 13. Sección “Header Line” del panel de “Properties” de un crossmenu.

 

Finalmente, en “Create Menu Item” se deben ingresar cada uno de los items que queremos que contenga el menú. Para cada uno de ellos se debe especificar su título (title), seleccionamos el layout correspondiente (layout), previamente definido en el Modeller o en el Build UI, y por último ingresamos una URL a un ícono (icon URL) que acompañará al título del ítem ingresado (Figura 14).

Figura 14. Sección “Create Menu Item” del panel “Properties” del crossmenu.

 

En el caso del ejemplo ingresamos la siguiente información:

 

• Title: Profile; Layout: Profile e Icon URL: https://imgur.com/Z0ucC0h.png
• Title: My Courses; Layout: MyCourses e Icon URL: https://imgur.com/SseKfjL.png
• Title: Questions; Layout: Questions e Icon URL: https://imgur.com/Fkmkj5i.png

 

Finalmente el crossmenu llamado “appmenu” quedará de la siguiente manera (Figura 15):

Figura 15. Crossmenu “appmenu” de la app.

 

Recuerda que puedes acceder a la app y forkearla a través del siguiente link:

https://platform.matrproject.com/hub/view/5ea0d2cec7935b0018b6a985