Aplicaciones de página única y navegación

    Otra característica de App Builder es la de las aplicaciones de página única y navegación. A diferencia de un enfoque de diseño basado en páginas, App Builder le permite crear vistas independientes que se inyectan o cambian según cómo naveguen los usuarios. Para ver esto en acción, puede crear una nueva aplicación usando el botón de crear nueva aplicación, y luego seleccionar uno de los diseños predeterminados que muestra una navegación superior definida.

    Agregue un preajuste de diseño desde el botón Menú y luego seleccione Crear Nueva Aplicación

    Vista principal vs. Vistas secundarias

    Lo que ve aquí es la vista maestra. Y cuando observa la lista de vistas en el cuadro de herramientas, puede ver que hay dos vistas secundarias anidadas bajo ella. Cada vista secundaria corresponde a los botones de navegación en el área de la barra de herramientas principal. Cuando obtiene una vista previa de la aplicación, verá que hacer clic en la vista 1 le muestra el contenido disponible dentro de la vista 1, y de forma similar para la vista 2.

    top-navigation-interactions-preview-Indigo-Design-App-Builder

    Cambiar entre vistas - preajuste de diseño

    En cuanto al concepto de vista maestra y vista secundaria, debe tenerse en cuenta que la vista maestra representa el shell de su aplicación y puede contener elementos de interfaz de usuario que se compartirán en todas sus vistas secundarias. En este caso, la barra de herramientas de navegación y la navegación lateral son los componentes compartidos. Para inyectar las vistas secundarias en función de la navegación, puede agregar un componente llamado views-container para que sirva como marcador de posición. Y esta es el área donde se representan las vistas secundarias. El Views-container ocupa, de forma predeterminada, el espacio disponible.

    switch-views-indigo-design-app-builder

    Cambiar entre vistas - aplicación de ejemplo

    El views-container tiene una propiedad para definir cuál de las dos vistas secundarias se mostrará de forma predeterminada cuando se cargue la aplicación. Una vez que se selecciona el contenedor de vistas, desde las propiedades del contenedor de vistas se puede definir cuál es la vista secundaria predeterminada que se muestra.

    Componente de contenedor de vistas - aplicación de ejemplo

    views-interaction-Indigo-Design-App-Builder

    Interacción de cambio de vistas - aplicación de ejemplo

    Agregue navegaciones (enrutamiento)

    Para conectar la navegación a las vistas secundarias, se puede agregar una acción de navegación al botón en la sección "interacciones". Actualmente, ofrecemos las acciones Navegar a y Alternar (para componentes como Navegador de elementos, Desplegable y Seleccionar), pero agregaremos más acciones en versiones futuras.

    Defina la navegación - aplicación de ejemplo

    Eso es todo para las aplicaciones de página única y la característica de navegación. En resumen, las vistas secundarias se inyectan dentro de la vista maestra en función de la acción de navegación. Las vistas secundarias se alojan dentro de la vista maestra usando el componente views-container. Y los componentes agregados a la vista maestra se comparten en todas sus vistas secundarias.

    Recursos Adicionales