Aplicativos do Windows
Recolher sumário
Expandir sumário

Adicionando um modelo de item Controle de Página

Este tópico demonstra como adicionar o modelo de item de Controle de Página a um aplicativo da Windows Store que permite navegar com facilidade entre páginas. Para ver descrições dos modelos de itens, consulte Modelos de itens do JavaScript. Na maioria dos aplicativos, você pode usar modelos de itens incluídos no Microsoft Visual Studio 2013 para simplificar o desenvolvimento de aplicativos.

O modelo de item de controle de página dá suporte ao modelo de navegação de página única que é recomendado para aplicativos da Windows Store multipágina. Os modelos de projeto Hub, Grade, Dividido e Navegação implementam esse modelo de navegação. O modelo de navegação fornece uma página única de host de conteúdo (default.html) e permite a navegação entre páginas lógicas que são carregadas no host de conteúdo. Para saber mais, veja Modelo de navegação.

Para obter ajuda sobre como escolher o melhor padrão de navegação para o seu aplicativo, veja Padrões de navegação. Veja o padrão de navegação simples em ação como parte da nossa série Recursos do aplicativo, do começo ao fim.

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

  • Adicionar a nova página usando o modelo de item de Controle de Página do Visual Studio.
  • Adicionar código para navegar até a página correta 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 navigator.js.

  • 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.

Cuidado  Para usar o modelo de item de Controle de Página com o modelo em Branco, adicione o navigator.js ao projeto e adicione o código de host de conteúdo ao default.html (obtenha o navigator.js e o código de host de conteúdo de outro modelo de projeto, como Grade). Para saber mais, veja Modelo de navegação.

Criar o projeto

Primeiro, vamos criar um aplicativo usando o modelo Navegação. O modelo de Navegação fornece um aplicativo muito simples, no qual o modelo de navegação multipágina já é fornecido.

Dica  Caso você esteja usando o modelo Hub, Grade ou Dividido, as etapas são semelhantes, mas os nomes de arquivo são diferentes. O código HTML e CSS abaixo precisa ser modificado para se ajustar ao modelo.

Hh920268.wedge(pt-br,WIN.10).gifPara criar o projeto

  1. No Visual Studio, selecione Arquivo > Novo Projeto.
  2. No painel esquerdo da caixa de diálogo Novo Projeto, expanda o nó JavaScript.
  3. No painel central, selecione Aplicativo de Navegação.
  4. Dê um nome para o projetoNavApp e clique em OK.

    A solução é criada e os arquivos de projeto aparecem no Gerenciador de Soluções. Para saber mais sobre os arquivos de projeto, consulte o tópico de modelos de projeto JavaScript.

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

  5. Para executar o programa, selecione Depurar > Iniciar Depuração ou pressione F5. O seguinte conteúdo de página é exibido: "Bem-vindo ao NavApp!"
  6. Pressione SHIFT + F5 para interromper a depuração e voltar ao Visual Studio.

Adicionar o controle de página

Nesta seção, adicionaremos o modelo de item Controle de Página. Depois disso, adicionaremos códigos para navegar entre as páginas.

Hh920268.wedge(pt-br,WIN.10).gifPara adicionar o controle de página

  1. No Gerenciador de Soluções, abra o menu de atalho da pasta pages e selecione Adicionar > Nova Pasta.
  2. Dê um nome para a nova pasta page2.
  3. Abra o menu de atalho para a 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 page2, junto com dois outros arquivos de projeto: page2.css e page2.js.

    Dica  Se você adicionar o modelo de item a qualquer outro local no projeto, pode ser necessário atualizar referências de script e de 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 este:
    
    WinJS.UI.Pages.define("/pages/page2/page2.html", {
        // . . . 
    },
    
    

Adicionar código de navegação

Nesta seção, adicionaremos códigos para navegar entre as páginas. O aplicativo de navegação que estamos criando usa um evento de clique em botão para navegar de uma página para outra. A folha de estilos do modelo do aplicativo (ui.css) atualiza automaticamente o botão, aplicando a aparência de um aplicativo da Windows Store.

Hh920268.wedge(pt-br,WIN.10).gifPara adicionar código de navegação

  1. No Gerenciador de Soluções, abra home.html.
  2. No elemento SECTION, adicione um botão, conforme mostrado aqui:
    
    
    <section aria-label="Main content" role="main">
      <p>Content goes here.</p>
      <button class="navButton" title="Nav" >Next Page</button>
    </section>
    
    
    
  3. Para configurar as características específicas do botão na página, abra home.css.
  4. Adicione esta seção a home.css:
    
    
    .navButton {
        width: 10%;
        height: 10%;
    }
    
    
    
  5. Abra home.js.
  6. Adicione o código de manipulação de eventos que usa a função WinJS.Navigation.navigate para navegar para a nova página. A função nextPage deve estar no mesmo escopo da função ready, para que o código fique assim (com a vírgula adicionada apósready):
    
    
    WinJS.UI.Pages.define("/pages/home/home.html", {
        // . . .
        ready: function (element, options) {
            // . . .
        },
            
        nextPage: function () {
            WinJS.Navigation.navigate("/pages/page2/page2.html");
        }
    });
    
    
    

    O código no navigator.js se conecta aos eventos gerados quando você chama WinJS.Navigation.navigate, e então o código carrega o conteúdo da nova página.

  7. No home.js, adicione um ouvinte de eventos para o botão na função ready, como ilustrado no código a seguir. Para saber mais sobre o uso de ready em modelos, consulte o modelo Navegação.

    Para recuperar o elemento, usaremos querySelector em vez de document.getElementByID.

    Dica  Os modelos usam nomes de classe para identificar elementos nos controles de páginas. Pode haver mais de uma instância de um controle na página (embora este não seja o caso do nosso exemplo); o uso de IDs em controles de páginas pode resultar em vários elementos com a mesma ID. O uso de querySelector e dos nomes de classe CSS impedem possíveis conflitos de nomenclatura e garantem que os elementos DOM corretos sejam encontrados.

    Depois que você adicionar o código, a função ficará assim:

    
    
    ready: function(element, options) {
      // TODO: Initialize the fragment here.
      var elem = element.querySelector('.navButton');
      elem.addEventListener('click', this.nextPage.bind(this));
    },
    
    
    
  8. Pressione F5 para executar o aplicativo. Quando você clica no botão Next Page, page2.html é carregada e exibe seu conteúdo HTML padrão.

Testar o aplicativo

Hh920268.wedge(pt-br,WIN.10).gifPara testar o aplicativo

  1. Pressione F5 para executar o aplicativo.
  2. Quando o aplicativo for carregado, clique no botão Próxima Página. page2.html carrega e exibe seu conteúdo HTML padrão.

    Página 2 do aplicativo de navegação

    Você pode clicar no botão Voltar para retornar à primeira página do aplicativo.

Tópicos relacionados

Modelos de projeto em JavaScript para aplicativos da Windows Store
Modelos de item em JavaScript para aplicativos da Windows Store
Guia de início rápido: usando a navegação em uma única página
Adicionando um modelo de item Controle de Página (C#, VB e C++)

 

 

Mostrar:
© 2017 Microsoft