Navegación lineal
En esta sección puedes ver los dos aspectos principales del caso de navegación: primero, la navegación en sí, es decir, cuando se invoca el módulo y aparece en la pantalla y luego, cuando se cierra, a qué predecesor (ya sea un módulo o la app padre) vuelve. Luego, la interacción con la interfaz de usuario, que se refiere al impacto visual de la navegación en la app, es decir, las pantallas que se mostrarán al usuario de la app.
La siguiente imagen muestra la navegación en pasos y cómo el usuario experimentará la navegación en la app. En este caso, la raíz es la app padre y, desde esa app, has invocado el primer módulo, mod1, que a su vez invoca un segundo módulo llamado mod2. En la tabla a continuación se describen los diferentes pasos de la navegación y se explica cómo debes realizar cada acción ejecutada en cada paso cuando estás trabajando en Studio, con ejemplos. Para obtener más información sobre cómo crear y editar una interfaz y, a continuación, invocar su contenido desde una app, lee el siguiente caso de uso.
Nota
Utiliza la barra de desplazamiento a la derecha para ver todas las columnas de la tabla siguiente.
Acción ejecutada | Paso de navegación | Syntax | Descripción | Explicación y ejemplos |
|---|---|---|---|---|
root abre mod1 | start (1) | LMOD1(INTERFACE1) | Te encuentras en el nivel raíz de la app padre y se invoca el módulo mod1. | Estás en la pantalla deinicio de sesiónde la app. Necesitas reutilizar el contenido del módulo mod1, que contiene un flujo de pantallas de onboarding. Para reutilizarlo, debes invocar la interfaz de pantalla del módulo desde un componente dentro de la pantalla deinicio de sesión. Para este ejemplo, se define que, cuando el usuario de la app haga clic en el botón Iniciar sesión , se invoca el contenido del módulo (es decir, la interfaz de tipo pantalla). Entonces, seleccionas el componente button, te diriges al panel derecho y luego a la pestaña Actions. En el atributo On Click de la sección Events and Actions, haces clic en el icono de tres puntos verticales. Se abre el vínculo Create new link y seleccionasModule Screen en el menú desplegable. A continuación, seleccionas la interfaz de tipo de pantalla que deseas vincular y haces clic en Ready to link. Para este ejemplo, la sintaxis que se muestra será L28E76850A1C48D8F4D2700A4FBB027(HOME)dónde L representa la interfaz de tipo de pantalla, 28E76850A1C48D8F4D2700A4FBB027 representa la interfaz de pantalla seleccionada, y (HOME) representa la vista de contenedor donde se abre la interfaz de tipo pantalla. |
root -> mod1(root) | N/A | N/A | La interfaz del módulo mod1 se muestra en pantalla. La interfaz se invoca desde la app raíz (app padre). | La app muestra la vista de contenedor que representa la primera pantalla de la interfaz de pantalla invocada del módulo mod1 . El flujo de pantallasMod1 contiene tres pantallas. |
Elmod1 abre elmod2 | Start | LMOD2(INTERFACE2) | Estás en el nivel 1, en el módulo mod1 y, desde este módulo, invocas el módulo mod2. | Te encuentras en la tercera pantalla del flujo de pantallas de onboarding del módulo instanciado. Para este ejemplo, defines que, cuando el usuario de la app haga clic en un icono de flecha, sea redirigido a otra pantalla con un mensaje de bienvenida, que forma parte del conjunto de flujo de pantallas en el módulo mod2. Por eso, seleccionas el componente Icon que representa la flecha, te diriges al panel derecho y, a continuación, a la pestaña Actions. En el atributo On Click de la sección Events and Actions, defines la pantalla del módulo que se debe invocar, como se ha explicado anteriormente. |
root-> mod1(root) -> mod2(mod1) | N/A | N/A | La interfaz del módulo mod2 se muestra en pantalla. La interfaz se invoca desde el módulo mod1. | La app muestra la vista de contenedor que representa la primera pantalla de la interfaz de pantalla invocada del módulo mod2. En este ejemplo, la primera vista de contenedor es una pantalla que muestra un mensaje debienvenida junto con una lista de enlaces útiles. |
mod2 back-close | back (3) | E__CURRENT_MODULE_ INTERFACE__(CLOSE) | Estás en el módulo mod2 (nivel 2) y configuras un evento para cerrarlo. ImportanteEl evento para cerrar un módulo solo se puede configurar en el mismo módulo. No puedes indicar a la app padre u otro módulo que lo cierre. | Tienes que cerrar el módulo mod2. Para cerrar el módulo, debes configurar un evento en un componente de la pantalla en el flujo de pantallas. En este caso, la interfaz de pantalla del mod2 contiene un flujo de pantallas de dos pantallas, y debes establecer el evento en la segunda pantalla del flujo. El evento indicará la pantalla abierta actualmente para cerrar el flujo de pantallas. Para este ejemplo, defines que el cierre del módulo se ejecute cuando el usuario haga clic en el componente Text Label que contiene el mensajeReady to work! . Te diriges al panel derecho y luego a la pestaña Actions. En el atributo On Click de la sección Events and Actions, haces clic en el icono de tres puntos verticales. Se abre el modal Create new link y seleccionas Interface Message en el menú desplegable. A continuación, seleccionas CLOSE MODULE, que aparece de forma predeterminada. NotaAunque los mensajes de interfaz se comunican a la app padre, el mensaje CLOSE MODULE es una excepción y el mensaje se comunica al propio módulo. Para este ejemplo, la sintaxis que se muestra será E__CURRENT_MODULE_INTERFACE__(CLOSE)donde E representa el evento de cierre solicitado, CURRENT_MODULE_INTERFACE representa la interfaz de tipo de pantalla invocada y (CLOSE) representa el evento que se ejecutará cuando el usuario de la app realice la acción. ImportanteLa app padre muestra solo una pantalla al mismo tiempo, lo que significa que solo una pantalla está activa y en ejecución al mismo tiempo. |
root-> mod1(root) | N/A | N/A | La app muestra el módulo mod1. | El módulo mod2 se cerró y ahora la app padre muestra el módulo mod1 nuevamente, siguiendo la pila de navegación lineal. |
mod1 back-close | back (4) | E__CURRENT_MODULE_ INTERFACE__(CLOSE) | Estás en el módulo mod1 (nivel 1) y configura un evento para cerrarlo. | Tienes que cerrar el módulo para volver a la pantalla de la app padre. Para cerrar el módulo, debes configurar un evento en el módulo que indique a la pantalla abierta actualmente, es decir, la pantalla de onboarding mencionada anteriormente, que se cierre. Para cerrar el módulo, debes seguir las mismas instrucciones dadas anteriormente: selecciona un componente dentro del flujo de pantallas y defines el mensaje de interfaz CLOSE MODULE. |
root | N/A | N/A | La app vuelve al nivel raíz (nivel 0) y muestra la pantalla de la app padre. | Configuras eventos para cerrar todos los módulos y ahora el usuario de la app ve la pantalla de la app principal. |