Guia de início rápido: usando a navegação de página única (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Saiba mais sobre o modelo de navegação de página única e como você pode implementá-lo no seu próprio aplicativo usando objetos e PageControl e recursos WinJS.Navigation.

Para obter ajuda sobre como escolher o melhor padrão de navegação para o seu aplicativo, veja Padrões de navegação.

Além disso, você pode ver os padrões de Navegação simples e Navegação hierárquica em ação como parte da nossa série Recursos do aplicativo, do começo ao fim.

Pré-requisitos

Uma das formas mais simples e mais utilizadas de navegação é o hiperlink. O código HTML a seguir cria um hiperlink que navega para page2.html.

<p><a href="page2.html">Go to page 2</a></p>

Como é um link relativo, o sistema pressupõe que page2.html é uma página local e que faz parte do seu aplicativo, relativa à URL base do documento atual. Por exemplo, se o link aparecer em /folder/default.html, clicar no link o levará para /folder/page2.html.

Observação  Se tiver otimizado seu aplicativo para localização (o que é sempre uma boa ideia), esse comportamento irá variar de acordo com as pastas de conteúdo localizado, em /folder/. Veja Globalizando seu aplicativo

 

Se quiser especificar explicitamente o URI completo de um arquivo local no aplicativo, use o novo esquema de URL de conteúdo empacotado (ms-appx). Algo assim:

  • **ms-appx://package name/**file path

Você poderá omitir o nome do pacote, se quiser.

  • **ms-appx:///**file path

Veja um exemplo.

<p><a href="ms-appx:///page2.html">Go to page 2</a></p>

O esquema de URL ms-appx pode ser usado para referenciar qualquer arquivo que esteja incluído no pacote do aplicativo. Recomendamos, porém, o uso de URLs relativas, porque elas são resolvidas automaticamente de acordo com a URL base do documento.

O exemplo anterior mostrou como criar um link que executa uma navegação de nível superior. Isso é adequado para uma página da Web, mas há vários motivos para você não executar uma navegação de nível superior em um aplicativo. Por exemplo:

  • A tela fica em branco enquanto o aplicativo carrega a próxima página.
  • O contexto do script é destruído e deve ser inicializado novamente. O aplicativo pode receber eventos do sistema, mas não manipulá-los, porque o contexto de script está sendo destruído e reinicializado.

O uso da navegação de página única proporciona melhor desempenho e oferece uma experiência mais semelhante à navegação de nível superior. Os controles de navegação não são fornecidos automaticamente nos projetos do novo Microsoft Visual Studio. Portanto, quando você executa uma navegação de nível superior para uma nova página, não há como voltar à primeira página, a menos que você crie um link manualmente ou outro mecanismo de navegação para conduzi-lo de volta. Além disso, é na página inicial que você define como o aplicativo gerenciará seu respectivo ciclo de vida — como se comportará ao ser iniciado, encerrado, suspenso etc. Se você tiver várias páginas de nível superior, cada uma delas precisará conter a lógica de gerenciamento do ciclo de vida e do estado do aplicativo.

Qual controle você deve usar para trazer conteúdo para a página principal?

  • Você pode usar o DOM (Document Object Model) para carregar documentos de outra fonte.
  • Para conteúdo HTML simples (conteúdo que não é interativo, nem contém referências de script), use um objeto HtmlControl.
  • Para conteúdo externo da Web, use o controle x-ms-webview, sempre que possível. Comparado a um iframe, esse controle fornece melhor isolamento, navegação, disponibilidade do Filtro SmartScreen e suporte para sites que não podem ser hospedados em um iframe.
  • Para qualquer outro conteúdo, use um controle de página.

O Visual Studio fornece vários modelos de projetos JavaScript para aplicativos que podem facilitar o gerenciamento da navegação. Esses modelos de projeto fornecem um controle de navegação chamado PageControlNavigator, que você pode usar para navegar entre objetos PageControl. A classe PageControlNavigator demonstra uma maneira de usar o PageControl para facilitar a navegação de página única.

As próximas etapas mostram como criar um aplicativo contendo vários objetos PageControl e como usar o modelo de navegação de página única para navegar entre essas páginas.

Etapa 1: Criar um novo projeto de Aplicativo de Navegação

  1. Inicie o Microsoft Visual Studio 2013 Update 2.

    Observação  Quando você executa o Visual Studio pela primeira vez, ele pede para você obter uma licença de desenvolvedor.

     

  2. Selecione Arquivo > Novo Projeto ou clique em Novo Projeto na guia Página Inicial. A caixa de diálogo Novo Projeto é aberta.

  3. No painel à esquerda em Modelos, expanda Instalado => Modelos => JavaScript => Aplicativos Store.

  4. Selecione o tipo de modelo de Aplicativos Universais. Os modelos de projeto disponíveis para JavaScript são exibidos no painel central da caixa de diálogo.

  5. No painel central, selecione o modelo de projeto Aplicativo de Navegação (Aplicativos Universais).

  6. Na caixa de texto Nome, digite um nome para o seu projeto. Os exemplos neste tópico usam "NavigationAppExample".

    A caixa de diálogo Novo Projeto exibe os modelos de Aplicativos Universais em JavaScript.

  7. Clique em OK para criar o projeto.

    O novo projeto Aplicativo de Navegação contém uma página inicial, uma home page e alguns arquivos de suporte adicionais. No Gerenciador de Soluções, ele se parece com o seguinte.

    Arquivos no novo projeto de Aplicativo de Navegação.

    O novo projeto de Aplicativo de Navegação inclui vários arquivos. Alguns são específicos para um aplicativo do Windows, outros são específicos para um aplicativo do telefone e outros são compartilhados.

    O projeto inclui estes arquivos HTML:

    • default.html—a página inicial. É carregada primeiro. Essa página contém um PageControlNavigator (que carrega cada página na janela principal) e é aí que você criará a AppBar, se o seu aplicativo usar uma.Observação  As páginas HTML são carregadas em um único host de conteúdo, um elemento div declarado em default.html. Em default.html, o elemento div de host de conteúdo é declarado como um controle do tipo PageControlNavigator, usando o atributo data-win-control que é fornecido pela WinJS (Biblioteca do Windows para JavaScript).  
    • home.html— a home page. Ela exibe um título de boas-vindas.

    O projeto inclui estes arquivos JavaScript:

    • default.js— especifica como o aplicativo se comporta quando é iniciado.
    • home.js— especifica o comportamento associado à home page.
    • navigator.js— implementa o objeto PageControlNavigator que dá suporte ao modelo de navegação para os modelos em JavaScript do aplicativo da Windows Store.

    O projeto inclui estes arquivos CSS:

    • default.css— especifica os estilos de CSS (Folhas de Estilos em Cascata) para a página do host de conteúdo e para o aplicativo como um todo.
    • home.css— especifica estilos de CSS para a home page.

    O projeto também inclui o arquivo package.appxmanifest, que descreve o pacote do aplicativo. Por fim, o projeto também inclui vários arquivos de imagem, como splashscreen.png, para a imagem da tela inicial, e storelogo.png, que é usado para a Windows Store.

  8. Execute o aplicativo. Selecione Depuração > Iniciar Depuração ou selecione F5 (use SHIFT + F5 para interromper a depuração e retornar ao Visual Studio).

    Veja a seguir uma captura de tela do aplicativo do Windows.

    O novo Aplicativo de Navegação do Windows.

    Veja a seguir uma captura de tela do aplicativo do telefone.

    O novo Aplicativo de Navegação do Telefone.

    Observe que o conteúdo que você está vendo não é definido no arquivo default.html. Ele é definido no arquivo home.html, uma página separada. É o PageControlNavigator que recupera o conteúdo da home page e o exibe dentro de default.html.

    O controle de navegação PageControlNavigator é mostrado aqui. Ele define várias funções, que são usadas para navegação. Esse controle é implementado em navigator.js.

    
WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            // Initialization code.
            }, {
                // Members specified here.
            }
    ), // . . .
});

    A função de construtor realiza a inicialização para o controle de navegação. Algumas tarefas importantes de inicialização incluem a configuração de manipuladores para eventos da WinJS, como o evento WinJS.Navigation.onnavigating, e a configuração da home page do aplicativo. (O valor inicial é especificado no elemento contenthost DIV, em um atributo data-win-options.)

    
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);

    Um elemento DIV que é declarado como controle de navegação do aplicativo (em default.html) fornece o host de conteúdo para todas as páginas do aplicativo. O elemento DIV usa o atributo data-win-control da WinJS para se declarar como o controle de navegação, e esse controle fornece o modelo de navegação do aplicativo. Todo o conteúdo da página é carregado nesse DIV.

    Aqui está a marcação completa da página default.html.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavigationAppExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- NavigationAppExample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" 
        data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}">
        </button>
    </div> -->
</body>
</html>

    A ilustração mostra as diferentes unidades de conteúdo que aparecem na janela do aplicativo:

    Detalhamento do conteúdo de um Aplicativo de navegação.

Nas próximas etapas, você aprenderá mais sobre como adicionar páginas com o PageControlNavigator e com o objeto PageControl.

Etapa 2: Criar uma nova página

Um PageControl é uma unidade modular de HTML, CSS e JavaScript que funciona como uma página lógica.

Quando você adiciona uma nova página a um projeto do Visual Studio 2013, precisa:

  1. Adicionar a nova página usando o modelo de item de Controle de Página do Visual Studio.
  2. Adicione código para navegar até a nova página por meio da função WinJS.Navigation.navigate. Dica  Essa função não realiza a navegação diretamente, mas invoca o evento WinJS.Navigation.onnavigated, que é tratado no navigator.js. O código no navigator.js chama a função ready em sua nova página. Normalmente, você não precisa modificar o navigator.js.  
  3. Adicione manipuladores de interface do usuário e de eventos adequados para seu aplicativo, se necessário, para invocar o código de navegação da página.

Uma página contém um conjunto de métodos predefinidos que a biblioteca chama automaticamente, em uma ordem predeterminada. A função WinJS.UI.Pages.define expõe esses métodos para implementação.

Hh452768.wedge(pt-br,WIN.10).gifAdicionar uma página

  1. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta pages e selecione Adicionar > Nova Pasta.Observação  Para este exemplo, adicionamos uma página Compartilhada. Você pode adicionar páginas únicas aos projetos do Windows ou do Telefone, conforme desejado.

     

  2. Dê um nome para a nova pasta página2.

  3. Clique com o botão direito do mouse na pasta page2 e selecione Adicionar > Novo Item.

  4. Na caixa de diálogo Adicionar Novo Item, selecione Controle de Página no painel central.

  5. Nomeie a página como page2.html e selecione Adicionar.

    O arquivo page2.html é criado na pasta página2, juntamente com dois outros arquivos de projeto: page2.css e page2.js. Juntos, esses arquivos representam uma página lógica.

    Dica  Se você adicionar o modelo de item a qualquer outro local no projeto, possivelmente precisará atualizar as referências de script e CSS em page2.html.

     

  6. Abra page2.js e verifique se o URI está correto na função define. O resultado deve ser semelhante a isto:

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
    // . . .
    ready: function (element, options) {
        // ready function implementation.
    },
    // . . .
});

Etapa 3: Personalizar a página

Agora, modifique a nova página para que ela exiba uma mensagem diferente e o dia da semana.

  1. Abra page2.html. O modelo de item Controle de Página cria uma página HTML contendo uma seção de cabeçalho (com um botão voltar) e uma seção para o conteúdo principal da página.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

  2. Substitua a seção de conteúdo principal por esta.

    
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>

    Seu arquivo page2.html agora deve ter a seguinte aparência:

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>
    </div>
</body>
</html>

  3. Abra page2.js. O PageControl inclui um conjunto de funções predefinidas, que é chamado automaticamente em uma ordem predeterminada. Os modelos de item Controle de Página inclui a função ready e updateLayout e as funções unload.

    O PageControlNavigator chama a função updateLayout quando o usuário alterna entre retrato e paisagem ou muda o tamanho das janelas do aplicativo. Este tópico não mostra como definir updateLayout, mas isso é algo que todo aplicativo deveria fazer. Veja Diretrizes de redimensionamento em layouts altos e estreitos e Design responsivo 101 para aplicativos da Plataforma Universal do Windows (UWP).

    A função ready é chamada quando o DOM da página tiver sido carregado, os controles estiverem ativos e a página tiver sido carregada no DOM principal.

    (O PageControl dá suporte a funções adicionais para o ciclo de vida da página. Para saber mais, veja Adicionando controles de página.)

    Este é o arquivo page2.js que o Controle de Página criou.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

  4. Modifique a função ready para que ela recupere o intervalo que você criou na etapa 2 ("dayPlaceholder") e defina innerText como o dia atual.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.

            var dayPlaceholder = document.querySelector("#dayPlaceholder");
            var calendar = new Windows.Globalization.Calendar();
            dayPlaceholder.innerText =
                calendar.dayOfWeekAsString();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

Você criou e personalizou uma página. Na próxima etapa, você permitirá que o usuário que está executando o aplicativo navegue até a sua página.

Etapa 4: Usar a função navigate para movimentação entre páginas

Se você executar o aplicativo neste exato momento, ele exibirá home.html. Não há como o usuário navegar até page2.html. Um jeito simples de ajudar o usuário a chegar na page2.html é estabelecer um link para essa página partindo de home.html.


<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to NavigationAppExample!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>

            <!-- A hyperlink to page2.html. -->
            <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
        </section>
    </div>
</body>
</html>

Se executar o aplicativo e clicar no link, você terá a impressão de que ele funciona: o aplicativo exibe a page2.html. O problema é que o aplicativo executa uma navegação de nível superior. Em vez de navegar de home.html para page2.html, ele vai de default.html para page2.html.

Executando uma navegação de nível superior.

Em vez disso, o que você quer é substituir o conteúdo de home.html pelo de page2.html.

Navegando para page2.html da maneira recomendada.

Felizmente, o controle PageControlNavigator facilita muito a execução desse tipo de navegação. O código de PageControlNavigator (no arquivo navigator.js do aplicativo) manipula o evento WinJS.Navigation.onnavigated para você. Quando o evento ocorre, PageControlNavigator carrega a página especificada por ele.

O evento WinJS.Navigation.navigated ocorre quando você usa as funções WinJS.Navigation.navigate, WinJS.Navigation.back ou WinJS.Navigation.forward para navegar.

Você mesmo precisa chamar WinJS.Navigation.navigate em vez de usar o comportamento padrão do hiperlink. Você pode substituir o link por um botão e usar o manipulador de evento de clique do botão para chamar WinJS.Navigation.navigate. Ou então, pode alterar o comportamento padrão do hiperlink, de modo que, quando o usuário clica em um link, o aplicativo usa WinJS.Navigation.navigate para navegar até o destino do link. Para fazer isso, manipule o evento click do hiperlink e use o evento para interromper o comportamento de navegação padrão do hiperlink; em seguida, chame a função WinJS.Navigation.navigate e passe para ela o destino do link. Veja aqui como fazer isso:

  1. No arquivo home.js, defina um manipulador de eventos click para os hiperlinks.

    
function linkClickEventHandler(eventInfo) {

}

  2. Chame o método preventDefault para evitar o comportamento padrão do link (que navegaria diretamente para a página especificada).

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
}

  3. Recupere o hiperlink que disparou o evento.

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
}

  4. Chame a função WinJS.Navigation.navigate e passe para ela o destino do link. (Opcionalmente, também seria possível passar um objeto de estado que descreve o estado dessa página. Para saber mais, veja WinJS.Navigation.navigate.)

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href); 
}

  5. Na função ready em home.js, anexe o manipulador de eventos aos hiperlinks.

        WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 

        }
    });

Esta é a última etapa. Veja aqui o código completo do arquivo home.js.


// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 
        
        }
    });

    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }


})();

Execute o aplicativo e clique no link para page2.html. Eis o que você vê.

A tela page2.html com botão Voltar

Desta vez, a página será exibida usando o padrão de navegação correto.

Detalhamento do conteúdo após navegar para page2.html.

O modelo de controle de Página inclui um botão voltar que é habilitado quando você usa as funções WinJS.Navigation para navegar. Quando as funções WinJS.Navigation são usadas, o aplicativo armazena o histórico de navegação. Você pode usar esse histórico para navegar para trás chamando WinJS.Navigation.back ou para frente chamando WinJS.Navigation.forward.

Observação  Os aplicativos da Windows Store geralmente usam um dos dois padrões de navegação (simples e hierárquico). Recomendamos que você não use o objeto BackButton em aplicativos de navegação simples. Para saber mais, veja Padrões de navegação.

 

Salvando o histórico de navegação quando o aplicativo é suspenso

O histórico de navegação não é armazenado automaticamente quando o aplicativo é suspenso ou desligado, mas você mesmo pode armazenar facilmente essas informações. Use a propriedade WinJS.Navigation.history para recuperar o histórico de navegação e use o objeto WinJS.Application.sessionState para armazená-lo. Para garantir uma experiência tranquila de suspensão/retomada, o melhor é armazenar essas informações a cada navegação.

Quando o aplicativo é reiniciado, recupere as informações de histórico no objeto WinJS.Application.sessionState e use-as para definir a propriedade WinJS.Navigation.history.

Para ver um exemplo sobre como usar o objeto WinJS.Application.sessionState para armazenar e restaurar dados de sessão, consulte Parte 2: gerenciar o ciclo de vida e o estado do aplicativo. Para saber mais sobre as ações de suspensão e retomada, veja Iniciando, retomando e usando multitarefas.

Resumo

Você aprendeu como usar objetos e métodos do namespace WinJS.UI.Pages para dar suporte ao modelo de navegação de página única.

Você aprendeu a compilar aplicativos usando o modelo de navegação de página única. Você usou a classe PageControlNavigator fornecida pelos modelos para implementar esse modelo em seu próprio aplicativo usando objetos PageControl e recursos WinJS.Navigation.

Tópicos relacionados

Para desenvolvedores

O seu primeiro aplicativo - Parte 3: Objetos PageControl e navegação

Adicionando barras de aplicativos

Guia de início rápido: adicionando uma barra de navegação (NavBar)

Guia de início rápido: usando um controle hub para layout e navegação

WinJS.Navigation Namespace

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

Exemplo de controle HTML Hub

Exemplo de controle AppBar em HTML

Exemplo de controle HTML NavBar

Navegação e exemplo de histórico de navegação

Para designers

Padrões de navegação

Padrões de comando

Layout

Botão Voltar

Diretrizes do controle hub

Diretrizes de barras de aplicativos (aplicativos da Windows Store)

Tornando a barra de aplicativos acessível