Aplicativos de página única e navegação

    Outro recurso do App Builder é o de aplicativos de página única e navegação. Diferentemente de uma abordagem de design baseada em páginas, o App Builder permite que você crie visualizações separadas que são injetadas ou alternadas com base em como os usuários navegam. Para ver essa ação, você pode criar um novo aplicativo usando o botão de criar novo aplicativo e, em seguida, selecionar um dos layouts padrão que mostra uma navegação superior definida.

    Adicionar predefinição de layout pelo botão Menu, em seguida, selecione Criar Novo App

    Visualização pai versus visualizações filhas

    O que você vê aqui é a visualização mestre. E quando você olha para a lista de visualizações na caixa de ferramentas, pode ver que existem duas visualizações filhas aninhadas sob ela. Cada visualização filha corresponde aos botões de navegação na área da barra de ferramentas principal. Quando você visualiza o aplicativo, verá que clicar na visualização 1 mostra o conteúdo disponível dentro da visualização 1, e o mesmo para a visualização 2.

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

    Alternar entre visualizações - predefinição de layout

    Com relação ao conceito de visualização mestre e visualização filha, deve-se observar que a visualização mestre representa o shell do seu aplicativo e pode conter elementos de interface do usuário que serão compartilhados em todas as suas visualizações filhas. Neste caso, a barra de ferramentas de navegação e a navegação lateral são os componentes compartilhados. Para injetar as visualizações filhas com base na navegação, você pode adicionar um componente chamado views-container para servir como espaço reservado. E essa é a área onde as views filhas são renderizadas. O Views-container, por padrão, ocupa o espaço disponível.

    switch-views-indigo-design-app-builder

    Alternar entre visualizações - aplicativo de exemplo

    O views-container possui uma propriedade para definir qual das duas visualizações filhas será exibida por padrão quando o aplicativo carrega. Uma vez que o container Views é selecionado, as Propriedades do Container Views podem definir qual é a visualização filha padrão exibida.

    Componente Views container - aplicativo de exemplo

    views-interaction-Indigo-Design-App-Builder

    Interação de alteração de visualizações - aplicativo de exemplo

    Adicionar navegações (roteamento)

    Para conectar a navegação às visualizações filhas, uma ação de navegação pode ser adicionada ao botão na seção de 'interações'. Atualmente, oferecemos ações Navegar para e Alternar (para componentes como Nav Drawer, Dropdown e Select), mas adicionaremos mais ações em versões futuras.

    Definir navegação - aplicativo de exemplo

    Isso é tudo para aplicativos de página única e o recurso de navegação. Para resumir, as visualizações filhas são injetadas dentro da visualização mestre com base na ação de navegação. As visualizações filhas são hospedadas dentro da visualização mestre usando o componente views-container. E os componentes adicionados à visualização mestre são compartilhados em todas as suas visualizações filhas.

    Recursos Adicionais