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

Artigo
12/12/2015

[ 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 como adicionar uma barra de navegação (também chamada de "NavBar" ou "barra de aplicativos superior") ao seu aplicativo da Windows Store em JavaScript. A WinJS (Biblioteca do Windows para JavaScript) inclui os controles NavBar, NavBarCommand e NavBarContainer para ajudá-lo a compilar um aplicativo de página única.

Observação Os controles NavBar, NavBarCommand e NavBarContainer são novos no Windows 8.1. No Windows 8, use o controle AppBar e a propriedade placement para fornecer uma barra de navegação.

A maioria dos modelos do Microsoft Visual Studio 2013 para aplicativos da Windows Store implementa a estrutura de navegação, portanto, você não precisa fazer isso. Esses modelos, incluindo o item Controle de Página (veja Adicionando controles de página), incluem o controle BackButton que permite fornecer navegação para trás aos usuários.

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.

O exemplo que abordamos aqui usa o modelo Aplicativo em Branco do Microsoft Visual Studio. Se você usar os estilos e a marcação padrão, os comandos que você colocar no controle NavBar serão devidamente estilizados. Isso inclui sprites de imagens e glifos de fontes para os ícones dos comandos.

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

Veja também os padrões 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

Instruções

1. Crie um novo projeto usando o modelo de Aplicativo em Branco

Inicie o Visual Studio 2013.

Observação Quando você executa o Visual Studio pela primeira vez, ele pede para você obter uma licença de desenvolvedor.
Selecione Arquivo > Novo Projeto ou clique em Novo Projeto na guia Página Inicial. A caixa de diálogo Novo Projeto é aberta.
No painel Instalado, expanda Modelos, expanda JavaScript e selecione o tipo de modelo Aplicativo da Windows Store. Os modelos de projeto disponíveis para JavaScript são exibidos no painel central da caixa de diálogo.
No painel central, selecione o modelo de projeto Aplicativo em Branco.
Na caixa de texto Nome, digite um nome para o seu projeto. Os exemplos neste tópico usam Demonstração da barra de navegação.
Clique em OK para criar o projeto.

2. Adicione a definição de barra de navegação ao projeto

A sua barra de navegação pode ser definida de modo declarativo em uma página HTML ou em tempo de execução em um arquivo JavaScript carregado com a página. Esse exemplo cria a barra de navegação de modo declarativo na marcação HTML.

Abra default.html e insira o HTML a seguir no elemento body. A barra de navegação deve ser filho direto do elemento body.

Aqui, declaramos que um controle NavBar contém um NavBarContainer com dois controles NavBarCommand.

Observação Embora isso seja válido, recomendamos que você não adicione controles NavBarCommand como elementos filho imediatos da NavBar. O layout do botão e a acessibilidade do teclado ficam comprometidos.


<div id="navBar" data-win-control="WinJS.UI.NavBar">
  <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Home',
        tooltip: 'Take me home',
        id:'homeButton',
        icon: WinJS.UI.AppBarIcon.home,
        location: '/pages/home/home.html',
      }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Page 2',
        tooltip: 'Take me to Page 2',
        id:'page2Button',
        icon: WinJS.UI.AppBarIcon.page,
        location: '/pages/page2/page2.html',
      }">
    </div>
  </div>
</div>

3. Adicione o controle de manipulador de navegação

Os objetos NavBarCommand declarados na marcação emitem inerentemente eventos de navegação (Navigation.onnavigating e Navigation.onnavigated), por isso, não é necessário adicionar código de manipulador aos objetos NavBarCommand. Em vez disso, você precisa adicionar código de manipulador aos eventos Navigation.onnavigating ou Navigation.onnavigated no arquivo default.js associado ao arquivo default.html.

Aqui, o exemplo adiciona um manipulador ao evento Navigation.onnavigated. O manipulador obtém a URL do local (para o qual a navegação está sendo direcionada) no objeto de evento (definido na propriedade location do atributo data-win-options de NavBarCommand). O manipulador então esvazia o host de conteúdo (controle de página) do conteúdo existente e renderiza a nova página no host.

No Gerenciador de Soluções, abra default.js na pasta js.

Em default.js, substitua o código padrão pelo seguinte.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }

            var start = WinJS.UI.processAll().
                then (function () {
                    return nav.navigate("/pages/home/home.html");
                                                                });

            args.setPromise(start);
        }
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    nav.onnavigated = function (evt) {
        var contentHost = 
            document.body.querySelector("#contenthost"),
            url = evt.detail.location;

        // Remove existing content from the host element.
        WinJS.Utilities.empty(contentHost);

        // Display the new page in the content host.
        WinJS.UI.Pages.render(url, contentHost);
    }

    app.start();
})();

4. Adicionar duas páginas para navegação

Você pode adicionar manualmente essas páginas ou por meio do modelo de item Controle de Página do Visual Studio, que fornece a marcação e o código JavaScript necessários.

Dn376409.wedge(pt-br,WIN.10).gif Adicionar manualmente novas páginas ao projeto

No Gerenciador de Soluções, clique com o botão direito do mouse no nome do projeto (Demonstração da barra de navegação) e escolha Adicionar, Nova Pasta Dê um nome para a nova pasta "páginas".
Clique com o botão direito do mouse na pasta páginas que acabou de criar e selecione Adicionar, Nova Pasta. Dê um nome para a nova pasta "página inicial".
Crie uma segunda pasta em páginas. Dê o nome "página2" para essa pasta.
Clique com o botão direito do mouse na pasta página inicial e selecione Adicionar, Novo Arquivo HTML. Na caixa de diálogo Adicionar Novo Item, dê a esse arquivo o nome "home.html" e selecione Adicionar.

Substitua o HTML padrão pelo seguinte.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Home</p>
</body>
</html>
```
Repita a etapa anterior para a pasta página2. Dê um nome para o arquivo "page2.html" .

Substitua o HTML padrão pelo seguinte.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Page2</p>
</body>
</html>
```

Alternativamente, você pode usar os modelos de item em JavaScript para aplicativos da Windows Store no Visual Studio.

Dn376409.wedge(pt-br,WIN.10).gif Usar o modelo de item Controle de Página para adicionar novas páginas ao projeto

Crie a pasta páginas com subpastas página inicial e página2, como descrito anteriormente.
Clique com o botão direito na pasta inicial e selecione Adicionar > Novo Item.... A caixa de diálogo Adicionar Novo Item aparece.
Selecione Controle de Página na lista. Na caixa de texto Nome, digite "home.html".
Clique em Adicionar. Um novo objeto PageControl aparece no Gerenciador de Soluções.

O novo PageControl inclui três arquivos:home.css, home.html e home.js.

Observação Arquivos HTML adicionados dessa forma incluem código para o controle BackButton. Como afirmado anteriormente, se estiver usando um padrão de navegação simples, recomendamos que você não use o BackButton. Portanto, você pode excluir esse código. Para saber mais, veja Padrões de navegação.
Clique com o botão direito na pasta página2 e selecione Adicionar > Novo Item... A caixa de diálogo Adicionar Novo Item aparece.
Selecione Controle de Página na lista. Na caixa de texto Nome, digite "page2.html".
Clique em Adicionar. Um novo objeto PageControl aparece no Gerenciador de Soluções.

O novo PageControl tem três arquivos:page2.css, page2.html e page2.js.

5. Teste o aplicativo

Pressione F5 para executar o aplicativo. O aplicativo exibe Página Inicial.
Enquanto o aplicativo é executado, clique com o botão direito do mouse em qualquer local do aplicativo para acionar a barra de navegação e selecione Página2

A Página2 aparece no controle de página do aplicativo.
Clique com o botão direito do mouse para acionar a barra de navegação e selecione Página Inicial.

A Página Inicial aparece no controle de página do aplicativo.

Resumo e próximas etapas

Nesse guia de início rápido, você adicionou uma NavBar com um NavBarContainer e quatro objetos NavBarCommand ao seu aplicativo. Adicionou também uma função de manipulador simples ao evento Navigation.onnavigated.

Para ver um exemplo mais complexo de navegação hierárquica e layout, consulte nosso próximo tutorial no controle Hub.

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