Hinzufügen eines AppBar-Elements mit Befehlen (HTML)

  • Artikel

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

In diesem Artikel wird beschrieben, wie Sie einer Windows-Runtime-App mit JavaScript eine App-Leiste hinzufügen. Wenn Sie die standardmäßigen Formatvorlagen und das Markup aus diesem Beispiel verwenden, werden die in der App-Leiste abgelegten Befehle passend formatiert. Für die Befehlssymbole werden sowohl Bildüberlagerungen als auch Schriftartensymbole unterstützt.

(Nur Windows) In unserer Reihe App-Features von A bis Z können Sie dieses Feature in Aktion sehen. : Windows Store-App-Benutzeroberfläche von A bis Z

Voraussetzungen

Anweisungen

1. Erstellen eines neues Projekts mit der Vorlage "Leere App"

  1. Starten Sie Microsoft Visual Studio.

  2. Klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.

  3. Erweitern Sie im Bereich Installiert die Einträge Vorlagen und JavaScript, und klicken Sie dann auf den Vorlagentyp Store-Apps. Wählen Sie die gewünschte Plattform (Universelle Apps, Windows-Apps, oder Windows Phone-Apps) aus. In dieser Schnellstartanleitung verwenden wir Universelle Apps.

  4. Wählen Sie im mittleren Bereich die Projektvorlage Leere App (Universelle Apps) aus (klicken Sie noch nicht auf OK).

  5. Geben Sie im Textfeld Name den Namen Demo für AppBar ein.

  6. Klicken Sie auf OK, um das Projekt zu erstellen.

2. Hinzufügen der Definition der App-Leiste zum Projekt

Die App-Leiste (AppBar) wird in einer HTML-Datei mit einer entsprechenden JavaScript-Datei (eine für Windows und eine für Windows Phone) definiert.

Öffnen Sie wie unten gezeigt für jede Plattform (z. B. Windows und Windows Phone) default.html, und ersetzen Sie den automatisch generierten HTML-Code durch den folgenden HTML-Code. Die beste Vorgehensweise besteht in der Erstellung einer globalen App-Leiste pro Anwendung. Diese App-Leiste sollte ein direktes untergeordnetes Element des <body>-Elements sein. Es wird außerdem empfohlen, im DOM globale Befehle vor Kontextbefehlen zu platzieren, um beim Andocken der App das optimale Layout zu erzielen.

In diesem Beispiel wird eine App-Leiste mit einem links ausgerichteten Befehl und drei rechts ausgerichteten Befehlen mit einer Trennlinie hinzugefügt:

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>

Achtung  Der folgende Block mit Beispielcode ist nur für Windows Phone bis Version 2.1 gültig. Wenn Sie WinJS 4.0 oder höher verwenden, ist der richtige Ansatz die Nutzung des gleichen HTML-Codes für die App-Leiste – sowohl für Windows-Apps als auch für Windows Phone-Apps.

 

Nur 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(de-de,WIN.10).gif Hinzufügen der Datei Appbar.js

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner js, zeigen Sie auf Hinzufügen, und klicken Sie auf Neues Element.
  2. Erweitern Sie im Bereich Installiert den Eintrag JavaScript, und klicken Sie im mittleren Bereich des Dialogfelds auf JavaScript-Datei.
  3. Geben Sie im Textfeld Namen (im unteren Bereich des Dialogfelds) Appbar.js ein.
  4. Klicken Sie auf Hinzufügen, um die Datei zu erstellen und sie dem Projekt hinzuzufügen.

Öffnen Sie Appbar.js (falls erforderlich), und fügen Sie folgenden Code ein.

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

Die Appbar.js-Datei wird in den beiden default.html-Dateien über ihr <script src="/js/appbar.js"></script>-Markup eingefügt.

3. Hinweise für Entwickler

  • In einer App-Leiste können nur AppBarCommands verwendet werden. Eine Liste der verfügbaren Symbole finden Sie im Thema zur AppBarIcon-Enumeration.
  • Eine App-Leiste ist eine einfach auszublendende Überlagerung. Dies bedeutet, dass davon immer ein Teil des Bildschirms eingenommen wird.
  • Die App-Leiste muss, wie alle einfach auszublendenden Überlagerungen, immer ein direktes untergeordnetes Element des <body>-Elements sein.
  • Reservieren Sie für die geschlossene App-Leiste Platz oben oder unten auf dem Bildschirm, damit die App-Leiste andere Bildschirminhalte möglichst wenig verdeckt. So werden andere Inhalte nur von der geöffneten App-Leiste verdeckt.
  • Die Höhe der geschlossenen App-Leiste kann mit ihrer closedDisplayMode-Eigenschaft gesteuert werden.
  • Die obere oder untere Position der App-Leiste wird mit der placement-Eigenschaft gesteuert.

Zusammenfassung

In dieser Schnellstartanleitung haben Sie Ihrer Anwendung eine App-Leiste hinzugefügt.

Verwandte Themen

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon