Agregar una barra de la aplicación con comandos (HTML)

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

En este artículo se explica cómo agregar una AppBar a la aplicación de Windows en tiempo de ejecución con JavaScript. Si usas los estilos predeterminados y el marcado que se muestran en este ejemplo, se aplicará el estilo adecuado a los comandos que coloques en la AppBar. Para los iconos de los comandos, se admiten tanto los gráficos móviles de la imagen como los glifos de fuentes.

(Solo Windows) Consulta esta función en acción como parte de nuestra serie Funciones de aplicaciones, de principio a fin: Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Requisitos previos

Instrucciones

1. Crear un nuevo proyecto usando la plantilla Aplicación vacía

Inicia Microsoft Visual Studio.
En la pestaña Página de inicio, haz clic en Nuevo proyecto. Se abre el cuadro de diálogo Nuevo proyecto.
En el panel Instalado, expande Plantillas y JavaScript, y luego haz clic en el tipo de plantilla Aplicación de la Tienda. Elige la plataforma que quieres como destino (Aplicaciones universales, Aplicaciones de Windows o Aplicaciones de Windows Phone), pero en este inicio rápido utilizaremos Aplicaciones universales.
En el panel central, selecciona la plantilla de proyecto Aplicación vacía (aplicaciones universales) (no hagas clic en Aceptar aún).
En el cuadro de texto Nombre, escribe Demostración de AppBar.
Haz clic en Aceptar para crear el proyecto.

2. Agrega la definición de la AppBar al proyecto.

La AppBar se define en un archivo HTML con un archivo JavaScript correspondiente (uno para Windows y otro para Windows Phone).

Como se muestra a continuación y para cada plataforma (por ejemplo, Windows y Windows Phone), abre default.html y reemplaza el código HTML generado automáticamente por el siguiente código HTML. El procedimiento recomendado consiste en crear una AppBar global por aplicación, y esta AppBar debe ser un elemento secundario directo del elemento <body>. También es una buena idea colocar comandos globales antes de los comandos contextuales en el DOM para obtener el mejor diseño cuando los usuarios acoplen la aplicación.

En este ejemplo se agrega una AppBar con un comando alineado a la izquierda y tres comandos alineados a la derecha, con un separador entre ellos.

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>

Precaución El siguiente bloque de código de muestra solo es válido para Windows Phone a través de la versión 2.1. Cuando uses WinJS 4.0 y versiones posteriores, el enfoque correcto es usar el mismo código HTML para la AppBar para las aplicaciones de Windows y Windows Phone.

default.html solo para Windows Phone 2.1

<!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(es-es,WIN.10).gif Agregar el archivo Appbar.js

En el Explorador de soluciones, haz clic con el botón secundario en la carpeta js, elige Agregar y haz clic en Nuevo elemento.
En el panel Instalado, expande JavaScript y haz clic en Archivo JavaScript en el panel central del cuadro de diálogo.
En el cuadro de texto Nombre (cerca del final del cuadro de diálogo), escribe Appbar.js.
Haz clic en Agregar para crear el archivo y agregarlo al proyecto.

Abre Appbar.js (si es necesario) y agrega el código siguiente.

(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;
    }
  };
})();

El archivo Appbar.js se inyecta en los dos archivos default.html a través de su marcado <script src="/js/appbar.js"></script>.

3. Notas del desarrollador

Solo se puede usar AppBarCommands en una AppBar. Consulta la enumeración AppBarIcon para ver una lista de iconos disponibles para su uso.
La AppBar es una superposición descartable por cambio de foco, lo que significa que siempre tapará alguna parte de la pantalla.
La AppBar, al igual que todas las superposiciones descartables por cambio de foco, siempre debe ser un elemento secundario directo del elemento <body>.
Para mitigar la naturaleza de una superposición de la AppBar para tapar otro contenido de la pantalla, reserva espacio en la parte superior o inferior de la pantalla para la AppBar cerrada. De este modo, solo la AppBar abierta tapará otro contenido.
El alto de la AppBar cerrada puede controlarse con la propiedad closedDisplayMode.
La posición superior o inferior de la AppBar está controlada por la propiedad placement.

Resumen

En este inicio rápido has agregado una AppBar a la aplicación.

Temas relacionados

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon