Adicionando uma AppBar com comandos (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 ]

Este artigo explica como adicionar uma AppBar ao seu aplicativo do Tempo de Execução do Windows que usa JavaScript. Se você usar os estilos e a marcação padrão mostrados neste exemplo, os comandos que você colocar na AppBar terão o estilo adequado. As sprites de imagens e os glifos de fontes são compatíveis com os ícones dos comandos.

(Somente Windows) Veja este recurso em ação como parte da nossa série de Recursos para aplicativos, do início ao fim. : Interface do usuário de aplicativo da Windows Store, do início ao fim

Pré-requisitos

Instruções

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

  1. Inicie o Microsoft Visual Studio.

  2. Na guia Página Inicial, clique em Novo Projeto. A caixa de diálogo Novo Projeto é aberta.

  3. No painel Instalado, expanda Modelos e JavaScript, e clique no tipo de modelo Aplicativos da Loja. Escolha a plataforma de destino dos (aplicativos universais, aplicativos do Windows ou aplicativos do Windows Phone), mas este guia de início rápido, utilizaremos aplicativos universais.

  4. No painel central, selecione o modelo de projeto Aplicativo em Branco (aplicativos universais) (não clique em OK ainda).

  5. Na caixa de texto Nome, insira AppBar demo.

  6. Clique em OK para criar o projeto.

2. Adicione a definição de AppBar ao projeto.

A AppBar é definida em um arquivo HTML com um arquivo JavaScript correspondente (um para o Windows e outro para o Windows Phone).

Conforme mostrado abaixo e para cada plataforma (ou seja, Windows e Windows Phone), abra default.html e substitua o HTML gerado automaticamente pelo HTML a seguir. A prática recomendada é criar uma AppBar global por aplicativo, e essa AppBar deve ser um filho direto do elemento <body>. Também é recomendável colocar comandos globais antes de comandos contextuais no DOM para obter o melhor layout quando as pessoas ajustarem seu aplicativo.

Este exemplo adiciona uma AppBar com um comando alinhado à esquerda e três comandos alinhados à direita com um separador entre eles.

Windows — default.html

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

  <!-- App_bar_demo.Windows references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body>
  <ol>
    <li>
      To show the AppBar, swipe up from the bottom of the screen, swipe down from
      the top of the screen, right-click, or press Windows&nbsp;Logo&nbsp;+&nbsp;Z.
    </li>
    <li>
      Click or tap one of the following AppBar buttons: <strong>Camera</strong>,
      <strong>Add</strong>, <strong>Remove</strong>, or <strong>Delete</strong>
    </li>
    <li>
      To dismiss the AppBar, click or tap in the application, swipe, right-click,
      or press Windows&nbsp;Logo&nbsp;+&nbsp;Z again.
    </li>
  </ol>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> <!-- SEPARATOR NOT AVAILABLE ON PHONE prior to WinJS 4.0 -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

Cuidado  O bloco de código de exemplo a seguir é válido somente para o Windows Phone até a versão 2.1. Ao usar o WinJS 4.0 e superior, a abordagem correta é usar o mesmo código HTML da AppBar para aplicativos do Windows e do Windows Phone.

 

Somente Windows Phone 2.1 - default.html

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

  <!-- WinJS references -->
  <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css
  based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
  <link href="/css/ui-themed.css" rel="stylesheet" />
  <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
  <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

  <!-- App_bar_demo.Phone references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body class="phone">
  <p>
    Tap the Add, Remove, or Delete AppBar button, or swipe the ellipsis and tap the Camera AppBar button.
  </p>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <!-- <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> SEPARATOR NOT AVAILABLE ON PHONE -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

Hh465309.wedge(pt-br,WIN.10).gif Adicione o arquivo Appbar.js

  1. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta js, aponte para Adicionar e clique em Novo item.
  2. No painel Instalado, expanda o JavaScript, clique em Arquivo JavaScript no painel central da caixa de diálogo.
  3. Na caixa de texto nome (perto da parte inferior da caixa de diálogo), insira Appbar.js.
  4. Clique em Adicionar para criar o arquivo e adicioná-lo ao projeto.

Abra Appbar.js (se necessário) e adicione o código a seguir.

(function () {
  "use strict";

  WinJS.UI.Pages.define("default.html", {
    ready: function (element, options) {
      // Use element.querySelector() instead of document.getElementById() to ensure that the correct default.html page is targeted:
      element.querySelector("#cmdAdd").addEventListener("click", doClickAdd, false);
      element.querySelector("#cmdRemove").addEventListener("click", doClickRemove, false);
      element.querySelector("#cmdDelete").addEventListener("click", doClickDelete, false);
      element.querySelector("#cmdCamera").addEventListener("click", doClickCamera, false);
    }
  });

  // Command button functions
  function doClickAdd() {
    WinJS.log && WinJS.log("Add button pressed", "status");
  }

  function doClickRemove() {
    WinJS.log && WinJS.log("Remove button pressed", "status");
  }

  function doClickDelete() {
    WinJS.log && WinJS.log("Delete button pressed", "status");
  }

  function doClickCamera() {
    WinJS.log && WinJS.log("Camera button pressed", "status");
  }

  WinJS.log = function (message, messageType) {
    var statusDiv = document.getElementById("statusMessage"); // For a multi-page app, always ensure that each element ID is unique (across all pages).

    if (statusDiv && messageType === "status") {
      statusDiv.innerText = "STATUS: " + message;
    }
  };
})();

O arquivo Appbar.js é injetado nos dois arquivos default.html através da marcação <script src="/js/appbar.js"></script>.

3. Notas para desenvolvedor

  • Você só pode usar AppBarCommands em uma AppBar. Para obter uma lista dos ícones disponíveis para uso, veja a enumeração AppBarIcon.
  • AppBar é uma sobreposição com light dismiss, o que significa que ela sempre cobrirá alguma parte da tela.
  • A AppBar, assim como todas as sobreposições com light dismiss, deve sempre ser um filho direto do elemento <body>.
  • Para atenuar a natureza de uma sobreposição de AppBar para cobrir outro conteúdo da tela, reserve espaço na parte superior ou inferior da tela para a AppBar closed. Dessa forma, somente a AppBar opened cobrirá outro conteúdo.
  • A altura da AppBar fechada pode ser controlada com sua propriedade closedDisplayMode.
  • A posição superior ou inferior da AppBar é controlada pela sua propriedade placement.

Resumo

Neste guia de início rápido, você adicionou uma AppBar ao seu aplicativo.

Tópicos relacionados

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon