Navegación con ramas
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 pantalla y luego, cuando se cierra, a qué predecesor (ya sea un módulo o app padre) regresa. 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 imagen que aparece más arriba muestra la navegación por pasos y cómo el usuario verá la navegación en la app. En este caso, la raíz es la app padre y desde esa app, invocaste los módulos mod1 y mod2, que no están conectados entre sí. La app padre invoca el módulo mod1 y luego invoca el módulo mod2.
Este caso de navegación es útil, por ejemplo, para manejar errores: si ocurre un error en el módulo y no se ha definido ningún error en él, el error ejecutará la acción definida en la app padre. Como resultado, es más fácil rastrear los errores que puedan ocurrir en la app. Para obtener más información sobre la herencia de errores, lee Crea o edita un módulo.
Nota
La principal diferencia entre la navegación lineal y la navegación con ramas se refiere a la conexión con la app padre o raíz. En la navegación lineal, mod1 responde a la app padre y mod2 responde al modulo mod1. En la navegación con ramas, ambos módulos mod1 y mod2 responde a la app padre en el nivel raíz.
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 |
|---|---|---|---|---|
rootabre mod1 | Start | LMOD1(INTERFACE1) | Estás en el nivel raíz de la app principal e invocas el módulo mod1. | Estás en la pantalla deinicio de sesión de 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 de inicio de sesión. Para este ejemplo, defines que, cuando el usuario de la app hace clic en el botón deIniciar sesión, se invoca el contenido del módulo (es decir, la interfaz de tipo pantalla). Por lo tanto, 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 ícono de tres puntos verticales. Se abre el modal Create new link y seleccionas Module Screen en el menú desplegable. Luego, seleccionas la interfaz de tipo de pantalla que deseas vincular y haces clic Ready to link. Para este ejemplo, la sintaxis mostrada será L28E76850A1C48D8F4D2700A4FBB027(HOME), dónde L representa la interfaz de tipo pantalla, 28E76850A1C48D8F4D2700A4FBB027 representa la interfaz de pantalla seleccionada, y (HOME) representa la vista del 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 la 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. |
raíz ejecuta evento | N/A | E__CURRENT_MODULE_ INTERFACE__(ONSUCCESS) | Módulo mod1 (nivel 1) indica una acción para la app padre que debe ejecutarse ante un evento On Success en el módulo. La app padre ejecuta la acción definida como se indica en mod1. NotaGeneralmente la acción a ejecutar por la app padre es un proceso que contiene como último paso un bloque NEXT que muestra el siguiente módulo. | Para este ejemplo, defines que este mensaje debe comunicarse a la app padre cuando el usuario hace clic en un ícono de flecha. Por lo tanto, seleccionas el componente icon que representa la flecha, te diriges al panel derecho y luego a la pestaña Actions. En el atributo On CLick de la sección Events and Actions, configuras el mensaje de interfaz ONSUCCESS como se explicó anteriormente. Ante este mensaje se ejecutará un proceso que invoca al módulo mod2. |
raíz abre mod2 | start (2) | LMOD2(INTERFACE2) | Cuando se ejecuta la acción definida, la app padre muestra el módulo mod2. | Ahora que el mensaje de interfaz ON SUCESS se comunicó desde el módulo mod1, la app padre invoca el módulo mod2. Debes invocar el módulo desde el evento On Success en la app padre. Como resultado, cuando mod1 indica el mensaje On Success, la app padre está lista para invocar y luego mostrar el módulo mod2. |
root-> mod1(root)-> mod2(root) | N/A | N/A | La app muestra el módulo mod2. | La app padre muestra la vista del contenedor que representa la primera pantalla de la interfaz de pantalla invocada del módulo mod2. Para este ejemplo, la primera vista del contenedor es una pantalla que muestra un mensaje debienvenida junto con una lista de enlaces útiles. En este paso, la app padre (en el nivel raíz) todavía está a cargo de invocar el módulo. ImportanteEn este paso, el módulo mod1 todavía está abierto pero no se muestra visualmente en la pantalla de la app. Por lo tanto, todavía está en la pila de navegación. |
mod2 back-close | back (3) | E__CURRENT_MODULE_ INTERFAZ__(CLOSE) | Estás en el módulo mod2 (nivel 2) y configuras un evento para cerrarlo. | Tienes que cerrar el módulo mod2. Para cerrar el módulo, debes establecer un evento en el módulo que indique que la pantalla actual abierta (es decir, la pantalla del mensaje de bienvenida de la interfaz invocada) se cierre a sí mismo. Para este ejemplo, estás en la pantalla del módulo mencionada anteriormente. Seleccionas el componente text label que representa el mensaje de bienvenida, 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 ícono de tres puntos verticales. Se abre el módulo Create new link y seleccionas Interface Message desde el menú desplegable. Luego, seleccionas CLOSE MODULE, que aparece por defecto. Para este ejemplo, la sintaxis mostrada será E__CURRENT_MODULE_INTERFACE__(CLOSE), dónde E representa el evento de cierre solicitado, CURRENT_MODULE_INTERFACE representa la interfaz de tipo pantalla invocada y (CLOSE) representa el evento que se ejecutará cuando el usuario de la app realice la acción. |
root-> mod1(root) | N/A | N/A | La app muestra el módulo mod1. | Ahora que has cerrado el módulo mod2, la app mostrará el módulo mod1 de nuevo, ya que todavía está incluido en la pila de navegación y no se cerró antes. NotaEl módulo permanecerá como parte de la pila de navegación (es decir, dentro de los niveles de navegación) hasta que se cierre a sí mismo. Si no está cerrado, aún se incluirá en la navegación aunque no se muestre en la pantalla de la app padre. |
mod1 back-close | back (4) | E__CURRENT_MODULE_ INTERFAZ__(CLOSE) | Estás en el módulo mod1 (nivel 1) y configuras un evento para cerrarlo. | Tienes que cerrar el módulo mod1 para volver a la pantalla de la aplicación principal. Para cerrar el módulo, debes configurar un evento en un componente de la pantalla en el flujo de pantallas (para este ejemplo, la tercera pantalla) indicando al módulo que se cierre a sí mismo. En el evento deseado (por ejemplo, On Click), debes configurar el mensaje de interfaz CLOSE MODULE como se explicó anteriormente. |
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 padre. |