Parte 3: Navegação e objetos PageControl (aplicativos da Windows Store em JavaScript e HTML)

Applies to Windows only

O aplicativo "Olá, mundo" que você criou nos tutoriais anteriores tem apenas uma página de conteúdo. Na vida real, a maioria dos aplicativos contém várias páginas.

Existem vários padrões de navegação que podem ser usados​em aplicativos da Windows Store. Os Padrões de navegação vão ajudá-lo a escolher o melhor padrão de navegação para o seu aplicativo.

Observação  

Veja os dois principais padrões de navegação (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.

Neste tutorial, você copia o código do seu aplicativo "Olá, mundo" em um novo aplicativo que usa o modelo Navigation App e depois insere uma página adicional.

Saiba como:

  • Usar o modelo de projeto Navigation App para criar um aplicativo com várias páginas de conteúdo.
  • Usar objetos PageControl para separar seu código em unidades modulares.
  • Usar o modelo de navegação de página única para navegar entre páginas.
  • Usar uma NavBar para fornecer comandos de navegação.

Dica  

Se desejar pular o tutorial e ir direto para o código, consulte Introdução ao JavaScript: código completo para a série de tutoriais.

Antes de começar...

Sobre a navegação em aplicativos da Windows Store

Quase todos os sites oferecem alguma forma de navegação, geralmente sob a forma de hiperlinks nos quais você clica para ir para outra página. Cada página tem seu próprio conjunto de funções JavaScript e dados, um novo conjunto de HTML para exibição, informações de estilo e outros elementos. Esse modelo de navegação é conhecido como navegação multipágina. Esse design funciona bem para a maioria dos sites, mas pode causar problemas para um aplicativo porque fica difícil manter o estado nas diversas páginas.

Outro modelo de navegação é o de navegação de página única, no qual você usa uma única página para o aplicativo e carrega dados adicionais na página conforme necessário. O aplicativo continua dividido entre vários arquivos, mas, em vez de se mover de página para página, ele carrega outros documentos para a página principal. Como a página principal do aplicativo nunca é descarregada, seus scripts também permanecem carregados, o que facilita o gerenciamento de estado, de transições ou de animações. Recomendamos que os aplicativos da Windows Store usem o modelo de navegação de página única.

Para ajudá-lo a criar aplicativos que empregam o modelo de navegação de página única, a Biblioteca do Windows para JavaScript fornece o objeto WinJS.UI.Pages.PageControl. Há também o modelo de projeto Navigation App, que oferece uma infraestrutura de navegação adicional. Na próxima etapa, você usa esse modelo para criar um novo projeto.

Etapa 1: crie um novo aplicativo de navegação no Visual Studio

Vamos criar um novo aplicativo denominado HelloWorldWithPages usando o modelo Navigation App. Veja como:

  1. Inicie o Microsoft Visual Studio Express 2013 para Windows.
  2. No menu Arquivo, selecione Novo Projeto.

    A caixa de diálogo Novo Projeto será exibida. O painel esquerdo da caixa de diálogo permite selecionar o tipo dos modelos que serão exibidos.

  3. No painel esquerdo, expanda Instalado, Modelos e JavaScript e depois selecione o tipo de modelo Windows Store. O painel central da caixa de diálogo exibe uma lista dos modelos de projeto em JavaScript.

    Para este tutorial, usaremos o modelo Navigation App.

  4. No painel central, selecione o modelo Navigation App.
  5. Na caixa de texto Name, insira "HelloWorldWithPages".
  6. Desmarque a caixa de solução Criar diretório para solução.

    A janela Novo Projeto

  7. Clique em OK para criar o projeto.

    O Visual Studio criará seu projeto e o exibirá no Gerenciador de Soluções.

    Projeto HelloWorldWithPages no Gerenciador de Soluções

Observe que seu novo Navigation App contém alguns arquivos a mais do que seu aplicativo "Olá, mundo". Vamos dar uma olhada nesses novos arquivos:

  • /pages/home/home.css, /pages/home/home.html e /pages/home/home.js

    Estas três página definem um PageControl para a home page do aplicativo. Um PageControl é composto de um arquivo HTML, um arquivo JavaScript e um arquivo CSS. Um PageControl é uma unidade modular de HTML, CSS e JavaScript que pode ser navegada (como uma página HTML) ou usada como um controle personalizado. Você pode usar os objetos PageControl para dividir um aplicativo grande em partes menores e mais gerenciáveis.

    Os objetos PageControl dão suporte a diversos métodos que facilitam seu uso no aplicativo para ficar mais fácil que usar uma coleção dessas páginas HTML, CSS e JavaScript. Você verá mais sobre esses métodos em uma etapa mais adiante.

  • /js/navigator.js

    Esse file fornece a classe auxiliar PageControlNavigator que você pode usar para exibir os objetos PageControl e navegar entre eles. Você não precisa exibir um PageControl, mas pode tornar seu uso mais fácil.

Vamos dar uma olhada na página default.html do novo aplicativo:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorldWithPages</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>

    <!-- HelloWorldWithPages 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'}" 
            type="button"></button>
    </div> -->
</body>
</html>

O body do arquivo contém dois elementos: um elemento div para o PageControlNavigator e um div comentado para uma AppBar. Por enquanto vamos ignorar a app bar e observar melhor o primeiro elemento div.



    <div id="contenthost" data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
 

Esse elemento div cria um controle PageControlNavigator. O PageControlNavigator carrega e exibe a home page. Você usa o atributo data-win-options para informar qual é a página a ser carregada (/pages/home/home.html).

Prossiga executando o aplicativo.

O aplicativo HelloWorldWithPages

Embora não seja óbvio, na verdade o aplicativo está mostrando o default.html e o home.html. Isso é semelhante ao uso de um iframe para exibir uma página HTML dentro de outra.

O PageControl home.html é exibido de dentro da página default.html

Etapa 2: copie seu conteúdo HTML e CSS do aplicativo "Olá, mundo"

Nosso novo aplicativo tem duas páginas HTML: default.html e home.html. Onde você coloca seu conteúdo?

  • Use default.html para a interface de usuário que sempre deve estar presente, qualquer que seja a página exibida no aplicativo. Por exemplo, você pode usar default.html para hospedar uma barra de navegação.

  • Use páginas, como home.html, para o conteúdo que compõe uma tela individual do aplicativo.

Vamos abrir o home.html e dar uma olhada em parte da marcação que ele contém.

  • Ele tem um elemento head que contém referências ao código e às folhas de estilo WinJS. Também inclui referências à folha de estilos padrão do aplicativo (default.css) e aos outros arquivos que formam a home page (home.css e home.js).

    
    
    <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>
    
    
    
  • Ele tem uma área de cabeçalho de página contendo um BackButton para navegação para trás, e uma área de título. O modelo contém um código que habilita automaticamente o botão Voltar quando você pode navegar para trás. O botão só ficará visível quando nós adicionarmos uma segunda página e navegarmos para ela.

    
    
            <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 HelloWorldWithPages!</span>
                </h1>
            </header>
    
    
    
  • Ele tem uma seção para o conteúdo principal.

    
    
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
    
    
    

Vamos adicionar o conteúdo do aplicativo "Olá, mundo" à home page (home.html) do novo projeto HelloWorldWithPages.

JJ663505.wedge(pt-br,WIN.10).gifPara adicionar o conteúdo HTML e CSS do aplicativo "Olá, mundo"

  1. Copie o conteúdo HTML final do arquivo default.html do aplicativo "Olá, mundo" para a seção do conteúdo principal do /pages/home/home.html em seu novo projeto.
    
    <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 HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
    
                <!-- Copied from "Hello, world" -->
                <h1 class="headerClass">Hello, world!</h1>
                <div class="mainContent">
                    <p>What's your name?</p>
                    <input id="nameInput" type="text" />
                    <button id="helloButton">Say "Hello"</button>
                    <div id="greetingOutput"></div>
                    <label for="ratingControlDiv">
                        Rate this greeting: 
                    </label>
                    <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                    </div>
                    <div id="ratingOutput"></div>
                </div>
            </section>
        </div>
    </body>
    
    
  2. Mova o conteúdo de cabeçalho que você copiou para o elemento h1 fornecido pelo home.html. Como o home.html já inclui uma seção de conteúdo principal, remova o elemento "mainContent" div que você copiou (mas mantenha o respectivo conteúdo).
    
    <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 HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
            </section>
        </div>
    </body>
    
    
  3. Alterne para a folha de estilos clara. Substitua a referência à folha de estilos escura:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Por esta:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  4. Cada PageControl tem um arquivo CSS (folha de estilos em cascata) próprio.

    Copie o estilo greetingOutput do arquivo default.css que você criou na Parte 1: Criar um aplicativo "Olá, mundo!" para home.css.

    
    .homepage section[role=main] {
        margin-left: 120px;
        margin-right: 120px;
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  5. Execute o aplicativo.

    O aplicativo HelloWorldWithPages com o conteúdo proveniente do aplicativo Olá, mundo

    Você recriou o conteúdo do aplicativo "Olá, mundo" original. A seguir, acrescentamos interatividade copiando os manipuladores de eventos de "Olá, mundo".

Etapa 3: copie os manipuladores de eventos

Cada PageControl tem um arquivo JavaScript próprio. Vamos dar uma olhada no arquivo JavaScript que o Visual Studio criou para nosso PageControl "home", 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.
        }
    });
})();

Esse arquivo parece bem diferente do seu arquivo default.js. Para começar, é bem menor. Isso acontece porque o default.js já manipula a lógica de ativação e a lógica básica do aplicativo. Cada PageControl só precisa conter a lógica da própria página.

Uma das primeiras linhas de código, uma chamada para a função WinJS.UI.Page.define, cria o objeto PageControl. Essa função utiliza dois parâmetros: o URI da página ("/pages/home/home.html" neste exemplo) e um objeto que define os membros do PageControl. Você pode adicionar qualquer tipo de membro que quiser. Também pode implementar um conjunto de membros especiais, descritos pela interface IPageControlMembers, que são chamados automaticamente pelo aplicativo quando você usa o PageControl.

O arquivo home.js criado pelo modelo define um desses membros especiais, a função ready. A função ready é chamada depois que a página é inicializada e renderizada. Esse é um bom lugar para anexar manipuladores de eventos.

Observe que o código não inclui uma chamada para o WinJS.UI.processAll. O motivo é que ele é chamado automaticamente pelo PageControl. Até que a função ready seja chamada, o WinJS.UI.processAll já foi chamado e seu processamento já foi concluído.

JJ663505.wedge(pt-br,WIN.10).gifPara adicionar manipuladores de eventos

  1. Na Parte 1: Criar um aplicativo "Olá, mundo!" e na Parte 2: Gerenciar o ciclo de vida e o estado do aplicativo, você definiu três manipuladores de eventos: buttonClickHandler, ratingChanged e nameInputChanged. Copie-os para seu arquivo home.js e torne-os membros do seu PageControl. Adicione os manipuladores após a função ready criada pelo modelo.

    
        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.
    
            },
    
            buttonClickHandler: function (eventInfo) {
    
                var userName = document.getElementById("nameInput").value;
                var greetingString = "Hello, " + userName + "!";
                document.getElementById("greetingOutput").innerText = greetingString;
    
                // Save the session data. 
                WinJS.Application.sessionState.greetingOutput = greetingString;
            },
    
            ratingChanged: function (eventInfo) {
    
                var ratingOutput = document.getElementById("ratingOutput");
                ratingOutput.innerText = eventInfo.detail.tentativeRating;
    
                // Store the rating for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
            },
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            }
    
    
        });
    
    
  2. Agora precisamos anexar nossos manipuladores de eventos. Nas Partes 1 e 2, criamos uma função then para o Promise retornado pelo WinJS.UI.processAll. Agora as coisas são um pouco mais simples, já que podemos usar a função ready para anexar os manipuladores de eventos. A função ready é chamada depois que o PageControl chamou automaticamente o WinJS.UI.processAll.

    Copie o código que anexa os manipuladores de eventos para a função ready no home.js.

    
            // 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.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
            },
    
    
  3. Execute o aplicativo. Quando você digita um nome e clica no botão, é exibida uma saudação. Quando você classifica a saudação, é exibido o valor numérico da classificação.

    O aplicativo HelloWorldWithPages após a escolha da classificação

Etapa 4: restaure o estado do aplicativo

Nós quase recriamos a funcionalidade encontrada em nosso aplicativo "Olá, mundo". A única coisa que falta é restaurar o estado do aplicativo quando ele for iniciado pelo usuário.

Você deve se lembrar de que nós tínhamos dois tipos de estados do aplicativo para restaurar:

  • O nome do usuário e a classificação. Nós restauramos esse estado, não importa como o aplicativo tenha sido desligado.
  • A saudação personalizada. Nós só restauramos esse estado se o aplicativo foi terminado corretamente na última vez em que foi executado.

JJ663505.wedge(pt-br,WIN.10).gifPara restaurar o estado do aplicativo

  1. Copie o código do aplicativo "Olá, mundo" que restaura o nome do usuário e a classificação. Adicione o código à função ready do home.js.
    
            // 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.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
                // Restore app data. 
                var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
    
                // Restore the user name.
                var userName =
                    Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                if (userName) {
                    nameInput.value = userName;
                }
    
                // Restore the rating. 
                var greetingRating = roamingSettings.values["greetingRating"];
                if (greetingRating) {
                    ratingControl.userRating = greetingRating;
                    var ratingOutput = document.getElementById("ratingOutput");
                    ratingOutput.innerText = greetingRating;
                }
    
            },
    
    
  2. Nós só queremos restaurar a saudação personalizada se o aplicativo foi terminado corretamente na última vez em que foi executado. Infelizmente, nosso PageControl não oferece uma maneira interna de verificar o estado de execução anterior do aplicativo: essa informação é fornecida ao manipulador de evento onactivated em nosso arquivo default.js. Mas esse problema tem uma solução simples: basta salvar o estado de execução anterior do aplicativo no objeto sessionState para que o PageControl possa acessá-lo.
    1. No arquivo default.js, adicione ao manipulador de onactivated um código para salvar o estado de execução anterior. Salve o estado adicionando ao objeto sessionState uma propriedade denominada previousExecutionState.
      
          app.addEventListener("activated", function (args) {
              if (args.detail.kind === activation.ActivationKind.launch) {
                  if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                      // TODO: This application has been newly launched. Initialize
                      // your application here.
                  } else {
                      // TODO: This application has been reactivated from suspension.
                      // Restore application state here.
                  }
      
                  // Save the previous execution state. 
                  WinJS.Application.sessionState.previousExecutionState = 
                      args.detail.previousExecutionState;
      
                  if (app.sessionState.history) {
                      nav.history = app.sessionState.history;
                  }
                  args.setPromise(WinJS.UI.processAll().then(function () {
                      if (nav.location) {
                          nav.history.current.initialPlaceholder = true;
                          return nav.navigate(nav.location, nav.state);
                      } else {
                          return nav.navigate(Application.navigator.home);
                      }
                  }));
              }
          });
      
      
    2. No arquivo home.js, adicione ao método ready um código que verifique os dados de previousExecutionState. Se o estado de execução anterior for terminated, restaure a saudação personalizada (você pode copiar seu código que faz isso do arquivo default.js no aplicativo "Hello, world").
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
      

      Veja aqui o método ready completo.

      
              // 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.
      
                  // Retrieve the div that hosts the Rating control.
                  var ratingControlDiv = document.getElementById("ratingControlDiv");
      
                  // Retrieve the actual Rating control.
                  var ratingControl = ratingControlDiv.winControl;
      
                  // Register the event handler. 
                  ratingControl.addEventListener("change", this.ratingChanged, false);
      
                  // Retrieve the button and register our event handler. 
                  var helloButton = document.getElementById("helloButton");
                  helloButton.addEventListener("click", this.buttonClickHandler, false);
      
                  // Retrieve the input element and register our
                  // event handler.
                  var nameInput = document.getElementById("nameInput");
                  nameInput.addEventListener("change", this.nameInputChanged);
      
                  // Restore app data. 
                  var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
      
                  // Restore the user name.
                  var userName =
                      Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                  if (userName) {
                      nameInput.value = userName;
                  }
      
                  // Restore the rating. 
                  var greetingRating = roamingSettings.values["greetingRating"];
                  if (greetingRating) {
                      ratingControl.userRating = greetingRating;
                      var ratingOutput = document.getElementById("ratingOutput");
                      ratingOutput.innerText = greetingRating;
                  }
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
              },
      
      
  3. Execute o aplicativo. Agora nós duplicamos a funcionalidade encontrada no aplicativo "Olá, mundo" original.

Etapa 5: adicione outra página

A maioria dos aplicativos contém várias páginas. Vamos adicionar outra página ao nosso aplicativo. Já que estamos usando o modelo Aplicativo de Navegação, é fácil adicionar páginas extras.

JJ663505.wedge(pt-br,WIN.10).gifPara adicionar outra página

  1. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta pages e selecione Adicionar > Nova Pasta. Uma nova pasta aparece no projeto.
  2. Renomeie-a como "page2".
  3. Clique com o botão direito na pasta page2 e selecione Adicionar > Novo Item.... A caixa de diálogo Adicionar Novo Item aparece.
  4. Selecione Controle de Página na lista. Na caixa de texto Nome, digite "page2.html".

  5. Clique em Adicionar para adicionar o PageControl. O novo PageControl aparece no Gerenciador de Soluções.

    O projeto HelloWorldWithPages

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

  6. No arquivo page2.html, substitua a referência à folha de estilos escura:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Por esta:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    

Você criou uma nova página. Na próxima etapa, você verá como navegar para ela.

Etapa 6: use a função navigate para movimentação entre páginas

Neste momento, temos uma segunda página, mas não há uma maneira de o usuário acessá-la. Vamos atualizar nossa página home.html adicionando um link para page2.html.

JJ663505.wedge(pt-br,WIN.10).gifPara navegar entre as páginas

  1. Abra seu home.html e adicione um link para page2.html.
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Hello, world!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
    
                <!-- A hyperlink to page2.html. -->
                <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
            </section>
        </div>
    </body>
    
    
  2. Execute o aplicativo e clique no link. Parece funcionar: o aplicativo exibe page2.html.

    A caixa de diálogo Adicionar Novo Item

Mas há um problema: o aplicativo realizou uma navegação de nível superior. Em vez de navegar de home.html para page2.html, ele navega 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.navigated 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ê poderia 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, poderia alterar o comportamento padrão do hiperlink de modo que, quando o usuário clicar em um link, o aplicativo use WinJS.Navigation.navigate para navegar para o destino do link. Para fazer isso, manipule o evento click do hiperlink e utilize-o para parar 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.

JJ663505.wedge(pt-br,WIN.10).gifPara substituir o comportamento padrão do hiperlink

  1. Em seu arquivo home.js, defina um manipulador de evento click para seus hiperlinks e torne-o um membro do seu PageControl. Nomeie-o linkClickEventHandler e adicione-o após o manipulador nameInputChanged.
    
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            },        
    
     
            linkClickEventHandler: function (eventInfo) {
    
            }
    
    
  2. Chame o método preventDefault para evitar o comportamento padrão do link (navegando diretamente para a página especificada).
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
    
            }
    
    
  3. Recupere o hiperlink que disparou o evento.
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
    
            }
    
    
  4. Chame a função WinJS.Navigation.navigate e passe para ela o destino do link. (Como opção, também seria possível passar um objeto de estado que descreva o estado para essa página. Para saber mais, veja a página WinJS.Navigation.navigate.)
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
                WinJS.Navigation.navigate(link.href);
            }
    
    
  5. Na função ready do arquivo home.js, anexe o manipulador de evento aos seus hiperlinks.

    O WinJS fornece uma função WinJS.Utilities.query que facilita a recuperação de diversos elementos na página. A função WinJS.Utilities.query retorna uma QueryCollection, que fornece métodos adicionais para anexar e remover manipuladores de eventos. Vamos usar a coleção WinJS.Utilities.query e o método listen para anexar nosso linkClickEventHandler.

    
            // 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", 
                    this.linkClickEventHandler, false);
    
    

    O bom dessa abordagem é que ela funciona para qualquer número de links na página. Por enquanto só temos um link, mas, com essa abordagem, poderíamos adicionar outros links sem precisar alterar o código.

  6. Execute o aplicativo e clique no link para page2.html.

    Agora o aplicativo exibe page2.html corretamente

    Agora a página é exibida usando o padrão de navegação correto.

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

Etapa 7: adicione uma barra de navegação para navegação extra

A NavBar é como uma AppBar que é dedicada a comandos de navegação. (Na verdade, a NavBar é uma subclasse da AppBar.) Ela pode conter uma lista simples de links e ter vários níveis de links organizados em categorias. Você pode preencher a NavBar com entradas embutidas em código, atualizá-la de forma programática ou usando vinculação de dados.

A NavBar aparece na parte superior da tela do aplicativo quando o usuário precisa dela. O usuário invoca a NavBar passando o dedo pela borda, pressionando a tecla do logotipo do Windows + Z ou clicando com o botão direito do mouse.

A NavBar também dá suporte a layouts verticais e itens de navegação dividida (itens de navegação que possuem opções de navegação secundária). A NavBar é altamente personalizável: você pode usar CSS para alterar o estilo praticamente de qualquer aspecto da NavBar e de seu conteúdo, e você também pode criar itens de navegação personalizados.

A barra de navegação é um controle do WinJS. Para declarar uma no HTML, use esta sintaxe:



<div id="navbar" data-win-control="WinJS.UI.NavBar">

</div>


A NavBar tem três componentes:

  • A própria NavBar.
  • Um objeto NavBarContainer, que contém itens de navegação (objetos NavBarCommand) e dá suporte a movimentos de paginação, panorâmico e de rolagem. Você pode ter um ou mais objetos NavBarContainer em uma única NavBar. Use objetos NavBarContainer para definir grupos de opções de navegação.
  • Um ou mais objetos NavBarCommand. É neles que o usuário clica para navegar.

Veja um exemplo de uma NavBar simples:


<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',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
    </div>
</div>

Nosso aplicativo contém várias páginas. Onde devemos adicionar a barra de navegação?

  • Caso a barra de navegação contenha comandos que devem ficar disponíveis em todas as páginas, adicione-a ao arquivo default.html.
  • Caso ela seja diferente de uma página para a outra, você pode definir uma barra de navegação diferente em cada um dos objetos PageControl.
  • Também é possível definir uma barra de navegação central no default.html e depois modificá-la carregando objetos PageControl diferentes.

Vamos criar uma barra de navegação simples que permita que o usuário navegue entre home.html e page2.html. Definiremos a barra de navegação no arquivo default.html.

JJ663505.wedge(pt-br,WIN.10).gifPara adicionar uma barra de navegação

  1. Abra o arquivo default.html. Adicione um controle NavBar como o primeiro filho do elemento body.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
    
        </div>
     
    
    
  2. Cada barra de navegação contém um ou mais objetos NavBarContainer. Use objetos NavBarContainer para definir grupos de opções de navegação. Adicione um NavBarContainer à sua barra de navegação.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
            <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
                   
            </div>
        </div>
     
    
    
  3. Cada NavBarContainer contém um ou mais objetos NavBarCommand. É neles que o usuário clica para navegar. Adicione objetos NavBarCommand ao seu NavBarContainer.

    Estas são as propriedades a serem definidas para cada NavBarCommand:

    • label: o rótulo a ser exibido para o comando.

    • icon: o ícone a ser exibido para o comando, ou o caminho de um arquivo PNG personalizado. (Para ver uma lista de valores de ícones, consulte AppBarIcon.)

    • location: o local para onde ir.

    • splitButton: se o comando tem um submenu. (O padrão é false.)

    
    
        <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',
                        icon: WinJS.UI.AppBarIcon.home,
                        location: '/pages/home/home.html',
                        splitButton: false
                        }">
                    </div>
                    <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                        label: 'Page 2',
                        icon: WinJS.UI.AppBarIcon.page,
                        location: '/pages/page2/page2.html',
                        splitButton: false
                        }">
                    </div>
            </div>
        </div>
     
    
    

    (Este exemplo mostra como definir objetos NavBarCommand embutidos, mas você também pode gerá-los a partir de uma fonte de dados. Para ver um exemplo, confira a amostra de barra de navegação em HTML.

  4. Execute o aplicativo. Para mostrar a barra, passe o dedo pela borda, pressione Win + Z ou clique com o botão direito do mouse.

    Uma barra de aplicativos simples

    Quando você clica em um botão, a barra de navegação automaticamente chama navigate e o direciona para a página.

    Você declarou uma barra de navegação. A seguir, vamos definir o estilo dela.

  5. Abra o arquivo default.css e, no início dele, crie um estilo CSS que mude a cor da tela de fundo da barra de aplicativos.
    
    #navbar {
    
        background-color: #03abe2;
    }
    
    
    
  6. Execute o aplicativo. Agora você pode usar a barra de navegação para navegar entre as duas páginas.

    O aplicativo HelloWorldWithPages, agora com uma barra de aplicativos

Resumo

Parabéns, você concluiu o terceiro tutorial! Você aprendeu a criar um projeto que usa o modelo Aplicativo de Navegação e aprendeu a usar objetos PageControl. Também aprendeu a criar uma barra de aplicativos.

Baixar o exemplo

Você se atrasou ou deseja verificar seu trabalho? Nesse caso, baixe o exemplo de Introdução ao JavaScript.

Próximas etapas

Na próxima parte desta série de tutoriais, você aprenderá a criar um aplicativo mais complexo. Vá para a Parte 4: Layout e modos de exibição.

Tópicos relacionados

Introdução ao JavaScript: código completo para a série de tutoriais
Programando aplicativos do Windows 8 com HTML, CSS e JavaScript (livro eletrônico)
Para designers
Padrões de navegação
Padrões de comando
Layout
Hub
Barra de aplicativos inferior
Barra de aplicativos superior
Botão Voltar
Diretrizes do controle hub
Diretrizes de barras de aplicativos (aplicativos da Windows Store)
Tornando a barra de aplicativos acessível
Para desenvolvedores (aplicativos da Windows Store que usam JavaScript e HTML)
Navegação e exemplo de histórico de navegação
Adicionando barras de aplicativos
Adicionando barras de navegação
Navegando entre as páginas (HTML)
Exemplo de controle HTML Hub
Exemplo de controle AppBar em HTML
Exemplo de controle HTML NavBar
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object

 

 

Mostrar:
© 2014 Microsoft