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

  • 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 como usar um controle WinJS.UI.Pivot para layout e navegação em seu aplicativo do Windows Phone 8.1.

O controle Pivot fornece uma maneira rápida de gerenciar, apresentar e navegar com rapidez pelas seções de conteúdo em seu aplicativo pelo movimento panorâmico para a esquerda ou para a direita — encapsulando continuamente como um carrossel. Use-o para filtrar grandes conjuntos de dados, exibir vários conjuntos de dados ou alternar exibições do aplicativo.

Exemplo de implementação de Pivô.

Para obter ajuda sobre como escolher o melhor padrão de navegação para o seu aplicativo, consulte 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

Instruções

1. Criar um novo projeto usando o modelo Aplicativo Pivot (Windows Phone)

Também é possível usar o modelo Aplicativo de Hub/Dinâmico (Aplicativos Universais) para criar um aplicativo Universal do Windows. Neste exemplo, usaremos o modelo Aplicativo Dinâmico (Windows Phone).

Modelos Aplicativo Hub no Visual Studio

  1. Inicie o Microsoft Visual Studio 2013 Update 2.

  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 Aplicativos do Windows Phone. 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 Pivot (Windows Phone).

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

  7. Clique em OK para criar o projeto.

2. Adicionar uma nova seção (PivotItem)

Cada seção em um Pivot é definida por um controle PivotItem. O modelo inclui quatro seções de demonstração que você pode modificar ou excluir, conforme necessário. Aqui, mostraremos como adicionar uma quinta seção.

A estrutura base do arquivo do modelo é semelhante a este Gerenciador de Soluções.

Observação   Para fins de consistência com aplicativos Universais do Windows, o modelo usa o formato hub-seção-detalhe/item do padrão Navegação hierárquica para a convenção de nomenclatura de arquivos.

 

Os arquivos na nova solução Aplicativo Hub/Pivô.

  1. O Pivot e cada PivotItem são declarados em hub.html na pasta pages\hub.

    Aqui, o modelo inclui um único controle Pivot (hub) com quatro controles PivotItem (seções) que contêm conteúdo estático (seção1, seção2, seção4) e conteúdo controlado por dados (seção3).

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

  <link href="/css/phone.css" rel="stylesheet" />
  <link href="/pages/hub/hub.css" rel="stylesheet" />
  <link href="/pages/hub/hubphone.css" rel="stylesheet" />
  <script src="/js/data.js"></script>
  <script src="/pages/hub/hub.js"></script>
  <script src="/pages/hub/section1Page.js"></script>
  <script src="/pages/hub/section2Page.js"></script>
  <script src="/pages/hub/section3Page.js"></script>
  <script src="/pages/hub/section4Page.js"></script>
</head>
<body>
  <div class="hubpage fragment">
    <header aria-label="Header content" role="banner">
      <button class="titlearea backbutton" 
        data-win-control="WinJS.UI.BackButton">
      </button>
      <h1 class="titlearea win-type-ellipsis">
        <span class="pagetitle">PivotDemo</span>
      </h1>
    </header>

    <section aria-label="Main content" role="main">
      <!-- Customize the Hub control by modifying the 
           HubSection controls here. -->

      <div class="hub" data-win-control="WinJS.UI.Pivot">

        <div class="section1 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section1'} }">
          <div class="sectioncontrol" 
            id="section1contenthost" 
            data-win-control="HubApps_SectionControls.Section1Control">
          </div>
        </div>

        <div class="section2 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section2'} }">
          <div class="added pivot-item-viewport" >
            <div class="added pivot-item-surface" >
              <div class="sectioncontrol" 
                id="section2contenthost" 
                data-win-control="HubApps_SectionControls.Section2Control">
              </div>
            </div> 
          </div> 
        </div>

        <div class="section3 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-res="{ winControl: {'header': 'Section3'} }">
          <div class="section3contenthost sectioncontrol" 
            id="section3contenthost" 
            data-win-control="HubApps_SectionControls.Section3Control"
            data-win-options="{
              dataSource: select('.pagecontrol').winControl.section3DataSource,
              layout: {type: WinJS.UI.ListLayout},
              oniteminvoked: select('.pagecontrol').winControl.section3ItemNavigate}">
          </div>
        </div>

        <div class="section4 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section4'} }">
            <div class="sectioncontrol" 
              id="section4contenthost" 
              data-win-control="HubApps_SectionControls.Section4Control">
            </div>
        </div>
      </div>
    </section>
  </div>
</body>
</html>

    Declare páginas adicionais simplesmente copiando e colando uma das seções existentes. Modifique a nova especificação de seção conforme necessário.

    Aqui, podemos declarar uma quinta seção com base na section4.

    <div class="section4 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section4'} }">
  <div class="sectioncontrol" 
    id="section4contenthost" 
    data-win-control="HubApps_SectionControls.Section4Control">
  </div>
</div>

<div class="section5 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section5'} }">
     <div class="sectioncontrol" 
    id="section5contenthost" 
    data-win-control="HubApps_SectionControls.Section5Control">
  </div>
</div>

  2. Cada PivotItem declarado em hub.html deve ter seu layout e sua funcionalidade definidos nos arquivos HTML, JavaScript e, possivelmente, CSS (Cascading Style Sheets) correspondentes.

    No nosso exemplo, adicionamos section5Page.html e section5Page.js à pasta pages/hub.

    • section5Page.html— especifica o conteúdo da seção.

      Aqui, queremos exibir apenas um link de texto para uma página de itens.

      <!DOCTYPE html>
<html>
<head>
   <title></title>
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <script src="/pages/hub/section5Page.js"></script>
</head>
<body>
   <div class="fragment section1page">
      <section aria-label="Main content" role="main">
        <a href="/pages/item/section5Item1.html">Link</a>
      </section>
   </div>
</body>
</html>

    • As cadeias de caracteres do cabeçalho para cada seção são definidas em resources.resjson na pasta strings/en-US.

      Aqui, nós vamos adicionar outro par nome-valor à Seção 5.

          "Section5": "Section 5",
    "Section5Description": "",

    • section5Page.js— especifica o comportamento associado à seção.

      Aqui, chamamos uma função ready para a página e expomos section5Page como um controle personalizado para exibição no hub. Temos também um manipulador de cliques para o link de texto que inicia a navegação para uma página de item.

      (function () {
   "use strict";

   var ControlConstructor = 
     WinJS.UI.Pages.define("/pages/hub/section5Page.html", {
       // This function is called after the page control contents 
       // have been loaded, controls have been activated, and 
       // the resulting elements have been parented to the DOM. 
       ready: function (element, options) {
         options = options || {};

         // Retrieve the page 2 link and register the event handler. 
         // Don't use a button when the action is to go to another 
         // page; use a link instead. 
         // See Guidelines and checklist for buttons at 
         // https://go.microsoft.com/fwlink/p/?LinkID=313598
         // and Quickstart: Using single-page navigation at 
         // https://go.microsoft.com/fwlink/p/?LinkID=320288.
         WinJS.Utilities.query("a").listen(
           "click", linkClickHandler, false);
      },
   });

   // The following lines expose this control constructor as a global. 
   // This lets you use the control as a declarative control inside 
   // the data-win-control attribute. 

   WinJS.Namespace.define("HubApps_SectionControls", {
      Section5Control: ControlConstructor
   });

   function linkClickHandler(eventInfo) {
      var link = eventInfo.target;
      eventInfo.preventDefault();
      if (link.href.indexOf("ms-appx") > -1) {
        WinJS.Navigation.navigate(link.href);
      }
      else if (link.href.indexOf("http") > -1) {
        // Create a Uri object from a URI string 
        var uri = new Windows.Foundation.Uri(link.href);
        var options = new Windows.System.LauncherOptions();
        // Launch the URI with a warning prompt
        options.treatAsUntrusted = true;
        // Launch the URI
        Windows.System.Launcher.launchUriAsync(uri, options).then(
           function (success) {
              if (success) {
                // URI launched
              } else {
                // URI launch failed
              }
           });
      }
   }
})();

    Uma referência ao section5Page.js também deve ser adicionada ao hub.html na pasta pages/hub.

    <head>
   <meta charset="utf-8" />
   <title>hubPage</title>

   <link href="/css/phone.css" rel="stylesheet" />
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <link href="/pages/hub/hubphone.css" rel="stylesheet" />
   <script src="/js/data.js"></script>
   <script src="/pages/hub/hub.js"></script>
   <script src="/pages/hub/section1Page.js"></script>
   <script src="/pages/hub/section2Page.js"></script>
   <script src="/pages/hub/section3Page.js"></script>
   <script src="/pages/hub/section4Page.js"></script>
   <script src="/pages/hub/section5Page.js"></script>
</head>

  3. Execute o aplicativo. Selecione Depurar > Iniciar depuração ou selecione F5 (escolha SHIFT + F5 para interromper a depuração e retornar ao Microsoft Visual Studio).

    Veja a seguir uma captura de tela do aplicativo do telefone com a nova seção.

    O exemplo de pivô mostrando a nova Seção 5.

3. Criar um aplicativo Universal do Windows com o modelo Aplicativo de Hub/Dinâmico (Aplicativos Universais)

Use o modelo Aplicativo de Hub/Dinâmico (Aplicativos Universais) para criar um aplicativo Universal do Windows para Windows e Windows Phone.

  1. Inicie o Visual Studio 2013 Update 2.

  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 Hub/Pivô (Aplicativos Universais).

  6. Na caixa de texto Nome, digite um nome para o seu projeto.

  7. Clique em OK para criar o projeto.

  8. Sua nova solução Aplicativo Hub/Pivô contém três projetos. Um para arquivos específicos do Windows, um para arquivos específicos do Phone e um para código que é compartilhado. Defina Projeto de Inicialização como projeto Windows ou WindowsPhone, como necessário para os testes.

4. Adicionar uma nova seção para aplicativos Universais do Windows

Tal como no modelo Aplicativo Pivot (Windows Phone), o modelo Aplicativo de Hub/Pivot inclui quatro seções de demonstração que você pode modificar ou excluir, conforme necessário.

A estrutura base do arquivo do modelo é semelhante a este Gerenciador de Soluções.

Os arquivos na nova solução Aplicativo Hub/Pivô.

Cada arquivo HTML, JavaScript, CSS e de recursos correspondente pode ser universal tanto em projetos do Windows como do Phone ou exclusivo para a plataforma específica (consulte os vários projetos na demonstração de exemplo).

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

Lembre-se: Defina o projeto WindowsPhone como Projeto de inicialização.

Veja a seguir uma captura de tela do aplicativo do telefone com a nova seção.

O exemplo de pivô mostrando a nova Seção 5.

E aqui está uma captura de tela da nova seção no aplicativo do Windows.

O exemplo de pivô universal mostrando a nova Seção 5.

Resumo

Nesse guia de início rápido, você analisou o modelo Aplicativo Pivot (Windows Phone) e o modelo universal Aplicativo de Hub/Pivot (Aplicativos Universais) incluído no Visual Studio 2013 Update 2. Você adicionou uma nova seção ao controle PivotItem e uma função de manipulador simples ao evento click no link de texto incluído no conteúdo da seção.

Tópicos relacionados

Para desenvolvedores

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

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

WinJS.Navigation Namespace

WinJS.UI.Pivot

WinJS.UI.PivotItem

Exemplo de controle HTML Pivô

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

Para designers

Orientações para pivôs

Padrões de navegação

Padrões de comando

Layout