Moderne Apps

Verwenden von Steuerelementen und Einstellungen in Windows Store-Apps, die mit JavaScript erstellt wurden

Rachel Appel

Für eine optimale Benutzererfahrung müssen Daten unabhängig von Formfaktoren in einer natürlichen und intuitiven Weise dargestellt werden. Diese Darstellung von Daten und Inhalten erfordert aktualisierte APIs, Steuerelemente und Tools zur Erstellung eines modernen Nutzungserlebnisses. In Windows Store-Apps ist der Umfang des erforderlichen Codes sowie die Komplexität der Steuerelemente davon abhängig, welche Art von App – zur Unterstützung der Produktivität, zum Spielen, für soziale Kontakte oder Finanztransaktionen – erstellt werden soll. Steuerelemente der Windows-Bibliothek für JavaScript (WinJS) sind für jeden Entwickler, der Windows Store-Apps mit JavaScript erstellt, einfach zu verwenden. Diese Steuerelemente sollen im Folgenden besprochen werden.

Windows 8 führt eine neuartige Benutzeroberfläche mit neuen Steuerelementen ein

Windows Store-Apps unterscheiden sich in Aussehen und Verhalten deutlich von Programmen für frühere Windows-Versionen. Es gibt einige bedeutende Neuerungen in Windows, etwa die Startseite mit Live-Kacheln, auf der ein Benutzer zuerst mit Apps interagiert. Eine weitere offensichtliche Neuerung ist, dass Windows Store-Apps im Vollbildmodus oder in angedockter Ansicht ausgeführt werden, wobei Inhalte im Vordergrund zentriert sind, während Befehle und Menüs erst sichtbar werden, wenn der Benutzer sie anfordert.

Windows-Benutzeroberflächenelemente wie die Schaltflächen zum Minimieren, Maximieren und Schließen, die zuvor allgegenwärtig waren, sind in Windows Store-Apps nicht mehr vorhanden, da sie durch Streif- und Mausbewegungen überflüssig geworden sind. Zum Schließen einer App genügt eine Streifbewegung vom oberen zum unteren Bildschirmrand bzw. eine entsprechende Mausbewegung. Sogar Menüs müssen nicht mehr unbedingt am oberen Rand jedes Bildschirms fixiert sein. In Windows Store-Apps bleiben Menüs versteckt, bis sie durch eine Streifbewegung oder Mausgeste am unteren Rand in einer App-Leiste zum Vorschein kommen (wie in Abbildung 1 anhand einer kleinen Countdown-Timer-App dargestellt).

Abbildung 1: Die App-Leiste am unteren Rand der App

Wie Sie in Abbildung 1 sehen können, sind keine Menüs mehr vorhanden, und Befehlselemente sind grafikorientiert (mit wenig Text) statt textorientiert (mit wenig Grafik). Diese Elemente haben die richtige Größe für Fingereingaben. Wenn Sie mehr Platz für Optionen benötigen, als am unteren Rand zur Verfügung steht, können Sie eine Navigationsleiste einfügen, bei der es sich im Grunde um eine App-Leiste für den oberen Rand handelt.

Die Navigation in herkömmlichen Windows-Menüs kann teilweise mühsam sein. Sie haben sicher auch schon Programme mit tief verschachtelten Menüs kennengelernt, in denen Sie nach 13 Unterebenen nicht mehr wussten, wonach Sie zu Beginn gesucht haben. In Windows Store-Apps schlängelt sich die Navigation selbst zum Inhalt, weil Finger- und Mausgesten über ListView-Elementen andere Seiten aufrufen. Zoomgesten (Finger zusammen- und auseinanderbewegen) und STRG+Mausrad aktivieren den semantischen Zoom (bit.ly/16IDtdi), der ein Steuer- und Navigationsparadigma in Windows Store-Apps darstellt. Der semantische ­Zoom ist in der vollständigen Liste der WinJS-Steuerelemente enthalten (bit.ly/w1jLM5).

Arbeiten mit HTML- und WinJS-Steuerelementen

Für Windows Store-Apps, die JavaScript verwenden, gibt es zwei primäre Arten von Steuerelementen: HTML-Standardsteuerelemente und WinJS-Steuerelemente. WinJS-Steuerelemente bestehen aus HTML und vordefiniertem JavaScript, mit dem Aussehen und Verhalten der HTML-Steuerelemente festgelegt wird. Da es sich um HTML handelt, können WinJS-Steuerelemente mit CSS formatiert werden. Abbildung 2 zeigt ein Beispiel für ein WinJS-Standardsteuerelement, den „WinJS DatePicker“. Es umfasst DropDown-Steuerelemente zum Anzeigen von Tag, Monat und Jahr. Der folgende Code bewirkt die Standardausgabe:

<span id="eventDate" data-win-control="WinJS.UI.DatePicker" />

Abbildung 2: Das Steuerelement „WinJS DatePicker“

Das DatePicker-Steuerelement in Abbildung 2 ist nur entsprechend den WinJS-Standardstilen formatiert, aber Sie können das ändern, indem Sie die WinJS-CSS-Selektoren „.win-datepicker-date“, „.win-datepicker-month“ und „.win-datepicker-year“ überschreiben. Mit „.win-datepicker“ formatieren Sie das gesamte Steuerelement.

Die Funktionsweise des DatePicker-Steuerelements (und jedes anderen WinJS-Steuerelements) wird festgelegt durch die HTML5-„data-*“-Attribute, insbesondere durch „data-win-control“. Das Attribut „data-win-control“ bezeichnet den Steuerelementtyp, der von WinJS direkt gerendert werden soll. Wenn Sie also den Wert von „data-win-control“ auf „WinJS.UI.DatePicker“ festlegen, werden die DropDown-Schaltflächen aus Abbildung 2 gerendert. Das Attribut „data-win-control“ ermöglicht die Festlegung weiterer Eigenschaften für das Steuerelement. So können Sie beispielsweise für „DatePicker“ mit der Eigenschaft „data-win-options“ das Standarddatum vorgeben sowie den minimalen und maximalen Datumsbereich. Statt des Datums kann das DatePicker-Steuerelement auch die Zeit anzeigen, beispielsweise Stunden, Minuten und Sekunden.

Da WinJS die endgültige Ausgabe für das Steuerelement erstellt und rendert, unterscheidet sich die HTML zur Entwurfszeit von der zur Laufzeit. Abbildung 3 zeigt die HTML, die WinJS zur Laufzeit in das Hostelement einfügt. Sie kann mit dem DOM Explorer (Debuggen | Fenster | DOM Explorer) angezeigt werden.

Abbildung 3: „DatePicker“ rendert drei DropDown-Steuerelemente, die Optionen für Tag/Monat/Jahr enthalten

<span class="win-datepicker" id="eventDate" role="group"
   lang="en-US" dir="ltr" data-win-control="WinJS.UI.DatePicker">
<select tabindex="0" class="win-datepicker-month win-order0"
   aria-label="Select Month">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<!-- more <options> that show the other months -->
</select>
<select tabindex="0" class="win-datepicker-date win-order1"
   aria-label="Select Day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<!-- more <options> that  show day numbers -->
</select>
<select tabindex="0" class="win-datepicker-year win-order2"
   aria-label="Select Year">
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<!—more <options> that show years -->
<option value="2112">2112</option>
<option value="2113">2113</option>
</select>

Der Code für WinJS-Steuerelemente wie „DatePicker“ ist in einer Datei enthalten, die unter „<ProjectRoot>\References\Windows Library for JavaScript 1.0\js\ui.js“ gespeichert wird, zusammen mit einigen Kernelementen für WinJS. Beachten Sie, das es sich hierbei um dieselbe <script>-Referenz handelt, die auch im <head>-Element der Seiten einer Windows Store-App erforderlich ist. Sie lautet:

<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

Ändern Sie diese Dateien nur mit größter Vorsicht, da sie grundlegenden WinJS-Code enthalten.

Auf jedes WinJS-Steuerelement, einschließlich „DatePicker“, kann zur Laufzeit über eine Eigenschaft mit dem Namen „winControl“ zugegriffen werden. WinJS fügt der winControl-Eigenschaft zur Laufzeit untergeordnete Eigenschaften an, die für den Typ des WinJS-Steuerelements spezifisch sind. Beispielsweise kann ein ListView-Steuerelement seine Liste von Elementen enthalten, oder Sie können mit einem WinJS.UI.Ratings-Steuerelement die vom Benutzer gewählte Bewertung abfragen. Sie können auf die winControl-Eigenschaft des Elements wie folgt zugreifen:

var control = document.getElementById("WinJSElementId").winControl

Schaltflächen, Kontrollkästchen, Optionsfelder, Dropdownlisten, Textfelder usw. funktionieren alle genau so wie auf einer konventionellen HTML-Seite. Der WinJS.UI-Namespace enthält darüber hinaus Benutzeroberflächen-Steuerelemente für viele komplexe Szenarien, einschließlich der immer erforderlichen Listensteuerelemente.

Listen- und Rastersteuerelemente

In vielen Apps müssen Daten in einem Raster oder einer Liste dargestellt werden. Für diese Szenarien steht das ListView-Steuerelement zur Verfügung. Es kann sich selbst als Raster oder als Liste rendern, wobei Gruppierungen und variable Elementgrößen möglich sind. Das ListView-Steuerelement ist nicht nur sehr flexibel, sondern arbeitet auch perfekt in der neuen Windows-Oberfläche, da es seine Größe automatisch an die Bildschirmgröße anpasst und seine Listenelemente in Reihen und Spalten ausgibt, deren Höhe und Breite der Auflösung und Bildgröße des jeweiligen Geräts entsprechen.

Während die meisten WinJS-Steuerelemente eigenständig sind, arbeitet „ListView“ zusammen mit der entsprechenden HTML als eine Vorlage. Dies bedeutet, dass Sie sowohl die Vorlagen-HTML als auch den Steuerelementcontainer einrichten müssen (wie in Abbildung 4 dargestellt). Beachten Sie, dass das data-win-control-Attribut der Vorlage und das data-win-options-Attribut von „ListView“ Einstellungen enthalten, mit denen „ListView“ und die zugehörige Vorlage verknüpft werden.

Abbildung 4: Die erforderliche HTML zum Erstellen eines WinJS ListView-Steuerelements

<div id="maincontent">     
  <div id="listViewTemplate"
         data-win-control="WinJS.Binding.Template" >
    <div data-win-bind="style.background: color" class="win-item">
      <h1 data-win-bind=" innerText: daysToGo"></h1>
      <h2 class="subtitle" 
             data-win-bind="innerText: eventTitle"></h2><br />
      <h2 class="subtitle-bottom" 
             data-win-bind=" innerText: eventDate"></h2>
    </div>
  </div>
  <div id="listView" data-win-control="WinJS.UI.ListView"
    class="win-listview"
    data-win-options=
    "{ itemDataSource: Data.items.dataSource,
    itemTemplate: select('#listViewTemplate'),
    selectionMode: 'single'}">
  </div>
</div>

Abbildung 4 enthält zwei <div>-Elemente, eines für die Vorlage mit dem Namen „listViewTemplate“, und eines für „ListView“ selbst mit dem Namen „listView“. Das listViewTemplate-Element enthält untergeordnete Elemente, die unterschiedliche Felder für jedes Element in der Liste bzw. im Raster darstellen, beispielsweise „eventTitle“ und „eventDate“. Wie Sie in Abbildung 4 sehen, wird die itemDataSource-Eigenschaft des ListView-Steuerelements auf „Data.items.dataSource“ festgelegt, wobei „Data“ ein Namespace ist und „items“ ein mit Daten gefülltes WinJS.Binding.List-Objekt. Da JavaScript mit lose typisierten Daten arbeitet, müssen Sie nur ein Array mit Objekten im List-Konstruktor bereitstellen, damit die ListView-Steuerelemente gebunden werden können, ähnlich wie in folgendem Code

var items = [
  { eventTitle: "Rachel's Birthday", 
    eventDate: new Date(2014, 1, 13) },
  { eventTitle: "Rachel's BFF's Birthday", 
    eventDate: new Date(2013, 5, 29) }
];
var list = new WinJS.UI.list(events);

Statt ein Array an den List-Konstruktor zu übergeben, können Sie auch die Push-Methode verwenden, um dem List-Objekt Elemente hinzuzufügen. Die beste Möglichkeit zur Verwaltung von Daten in einem ListView-Steuerelement ist die Bereitstellung der entsprechenden Optionen (Hinzufügen, Löschen usw.) durch eine App-Leiste.

App-Leisten und Befehle

„Content over Chrome“ ist ein wichtiges Designprinzip von Microsoft. App-Leisten sind ein wesentlicher Bestandteil dieses Designprinzips, da sie unsichtbar bleiben, bis der Benutzer ihre Optionen benötigt. Im Code ist eine App-Leiste nur ein <div>-Element, das einen oder mehrere <button>-Elemente enthält (Befehlsschaltflächen für die App-Leiste), deren data-win-control-Attribute auf „WinJS.UI.AppBarCommand“ festgelegt sind. Wie Sie sicher vermutet haben, erfolgt die Unterscheidung der einzelnen Befehlsschaltflächen für die App-Leiste durch das Attribut „data-win-options“.

In Abbildung 5 sehen Sie, dass die „data-win-options“-Attribute für jede Befehlsschaltfläche der App-Leiste die Optionen „id“, „label“, „icon“ und „section“ enthalten. Sie können der App-Leiste mit der section-Option „global“ Schaltflächen unten rechts im App-Bildschirm hinzufügen und mit der section-Option „selection“ unten links. Die Festlegung der section-Option einer Befehlsschaltfläche für die App-Leiste auf „selection“ macht den Befehl kontextbezogen für ein Element im ListView-Steuerelement, das der Benutzer durch eine Streifbewegung oder durch Anklicken auswählt.

Abbildung 5: Erstellen einer App-Leiste

<!-- HTML -->
<div id="appbar" class="win-appbar" 
       data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
   data-win-options="{id:'deleteButton', 
    label:'Delete',
    icon:'delete', section:'selection'}" 
    type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
   data-win-options="{id:'addButton', 
    label:'Add', icon:'add',
    section:'global'}" 
    type="button"></button>
<button 
   data-win-control="WinJS.UI.AppBarCommand"
   data-win-options="{id:'refreshButton',
   label:'Refresh',
   icon:'refresh', 
   section:'global'}" 
   type="button"></button>
</div>
// JavaScript
document.getElementById("addButton").addEventListener(
  "click", this.addButtonClick);
document.getElementById("deleteButton").addEventListener(
  "click", this.deleteButtonClick);
document.getElementById("refreshButton").addEventListener(
  "click", this.refreshButtonClick);

Sie können in der zur HTML-Seite gehörenden JavaScript-Datei Ereignislistener für die Schaltflächen der App-Leiste in gleicher Weise hinzufügen wie für jedes andere HTML-Element. Für die App-Leiste selbst benötigen Sie keine Listener, weil sie als Reaktion auf Benutzerbefehle automatisch angezeigt oder ausgeblendet wird. Sie können die App-Leiste jedoch programmgesteuert aufrufen. Das Beispiel in Abbildung 5 zeigt eine vollständige App-Leiste mit Schaltflächen zum Hinzufügen, Löschen und Aktualisieren von Daten.

Sie können Code schreiben, um Schaltflächen auf App-Leisten je nach Bedarf anzuzeigen, zu verbergen, zu aktivieren oder zu deaktivieren. 

Flyouts

Wie Sie wissen, können Sie Benutzeroberflächenelemente und Dialogfelder auf Touchbildschirmen auch dadurch einfach ausblenden, indem Sie auf eine beliebige andere Stelle des Bildschirms tippen. Dieses Verhalten wird als „Light-Dismiss“ bezeichnet und ist das Standardverhalten für Meldungsdialogfelder und Popupmenüs in Windows 8, weil der Benutzer Oberflächenelemente damit einfacher schließen kann als mithilfe einer entsprechenden Schaltfläche.

Wie für die bisher genannten Steuerelemente wird auch für ein Flyout mit dem „data-­win-control“-Attribut festgelegt, dass es sich um ein WinJS.UI.Flyout-Steuerelement handelt. Untergeordnete Elemente des Flyout-<div>-Elements werden innerhalb des Flyouts gerendert. Sie können beispielsweise in ein Flyout ein HTML-Formular einfügen, in das der Benutzer eine Bezeichnung und ein Datum für ein zukünftiges Ereignis einfügen kann. Abbildung 6 zeigt den entsprechenden Code, Abbildung 7 das Ergebnis.  

Abbildung 6: Ein Light-Dismiss-Flyout zum Abfragen von Informationen mit WinJS-Steuerelementen

<!-- HTML  -->
<div id="eventFlyoutPanel" data-win-control="WinJS.UI.Flyout">
  <table width="100%" height="100%">    
    <tr><td>Event Title:</td><td><input type="text"
 id="eventTitle"/></td></tr>
    <tr><td>Event Date:</td><td id="eventDate"
       data-win-control="WinJS.UI.DatePicker"></td></tr>        
    <tr><td> </td><td align="right">
    <input type="button" id="confirmButton" value="Submit" /></td></tr>
    </table>
</div>
// JavaScript
addButtonClick: function () {
  document.getElementById("eventFlyoutPanel").winControl.show(
  "addButton", "top");
}

Abbildung 7: Ein Flyout zum Abfragen von Informationen

Beachten Sie, dass es sich bei dem Flyout in Abbildung 7 nur um ein HTML-Formular handelt. Wenn der Benutzer auf die Befehlsschaltfläche „Add“ klickt oder tippt, wird das Flyout so eingeblendet, wie es in der addButtonClick-Funktion aus Abbildung 6 festgelegt ist. Flyouts werden auf dem Bildschirm in Beziehung zu anderen Steuerelementen dargestellt. Beim Aufruf der winControl.show-Methode müssen Sie also den Namen des Ankersteuerelements übergeben sowie die gewünschte Position – oberer (top) oder unterer (bottom) Rand des Ankersteuerelements.

Der Benutzer kann irgendwo außerhalb des Flyouts klicken oder tippen, um es auszublenden, da es sich um ein Light-Dismiss-Steuerelement handelt. Sie werden das Fehlen von modalen Dialogfeldern in Windows Store-Apps bemerkt haben – dies ist Teil der Designphilosophie von Microsoft. Das Designteam hat modale Dialogfelder verbannt, weil alles, was den Benutzer nervt oder einschränkt, als schlechtes Design angesehen wird.

Ein weiterer Flyout-Typ ist „SettingsFlyout“, ein großer Fortschritt gegenüber der Art und Weise, in der frühere Windows-Versionen Benutzereinstellungen verwaltet haben.

App-Einstellungen

Die üblichen Windows-Menüs für Einstellungen starten oft Dialogfelder mit einer unübersichtlichen Vielzahl von Einstellungsmöglichkeiten. Glücklicherweise wurden diese Dialogfelder in Windows Store-Apps durch Einstellungsmöglichkeiten ersetzt, die für den Benutzer intuitiver sind. Sowohl Einstellungs- als auch Informationsseiten sind schlanke, vertikale Flyouts, die eingeblendet werden, wenn der Benutzer die Schaltfläche „Einstellungen“ aus den Windows-Charms wählt (bit.ly/146cniM).

„Einstellungen“ ist in allen Windows Store-Apps identisch. Wenn der Benutzer den Charm „Einstellungen“ aufruft, wird in jeder App ein gleichartiges SettingsFlyout am rechten Rand angezeigt. Links zu Datenschutzerklärung, Benutzereinstellungen, Hilfe usw. gehören in das SettingsFlyout. Für Links zu den Seiten mit Ihrer Datenschutzerklärung oder Ihren Optionen genügen einige Codezeilen im app.onactivated-Ereignis, das üblicherweise in „/js/default.js“ zu finden ist:

// In default.js, app.onactivated

WinJS.Application.onsettings = function (e) {

  e.detail.applicationcommands =
   { "privacypolicy": { title: "Privacy Policy",
 href: "privacy.html" } };

    WinJS.UI.SettingsFlyout.populateSettings(e);

};

Nachdem der Benutzer auf einen der Einstellungslinks geklickt oder getippt hat, wird das entsprechende Flyout angezeigt. Abbildung 8 enthält die HTML für ein SettingsFlyout mit einer Datenschutzerklärung (eine kurze, eindeutige Datenschutzerklärung ist Voraussetzung für die Veröffentlichung einer App im Windows Store).

Abbildung 8: Die HTML für ein „Einstellungen“-Flyout mit einer Datenschutzerklärung

<div id="settingsFlyout" 
  data-win-control="WinJS.UI.SettingsFlyout"
  data-win-options="{settingsCommandId:'privacypolicy', width:'narrow'}">
  <div class="win-header" style="background-color:#312e2e">
    <button type="button" onclick="WinJS.UI.SettingsFlyout.show()"
       class="win-backbutton"></button>
    <div class="win-label">Privacy Policy</div>
  </div>
  <div class="win-content">
    <div class="win-settings-section">
      <p>This application does not collect any personal information.</p>
      <p>Internet access is only used to retrieve data from the web,<div id="settingsFlyout" 
  data-win-control="WinJS.UI.SettingsFlyout"
  data-win-options="{settingsCommandId:'privacypolicy', width:'narrow'}">
  <div class="win-header" style="background-color:#312e2e">
    <button type="button" onclick="WinJS.UI.SettingsFlyout.show()"
       class="win-backbutton"></button>
    <div class="win-label">Privacy Policy</div>
  </div>
  <div class="win-content">
    <div class="win-settings-section">
      <p>This application does not collect any personal information.</p>
      <p>Internet access is only used to retrieve data from the web,
         or to allow you to contact the developer:</p>
          <p>
            <a href="mailto:rachel@rachelappel.com">Email Rachel Appel </a>
 <br />
            <a href="http://rachelappel.com/privacy-policy"
             target="_blank">View privacy statement online</a>
          </p>
      </div>
  </div>
</div>

         or to allow you to contact the developer:</p>
          <p>
            <a href="mailto:rachel@rachelappel.com">Email Rachel Appel </a>
 <br />
            <a href="http://rachelappel.com/privacy-policy"
             target="_blank">View privacy statement online</a>
          </p>
      </div>
  </div>
</div>

Vergessen Sie nicht, die Datei mit der Datenschutzerklärung so zu benennen, wie es im href-Argument, mit dem Sie das Flyout registriert haben (s. Abbildung 8), vorgegeben ist.

Einstellungsseiten können natürlich mehr als nur Datenschutzerklärungen enthalten. SettingsFlyouts können jede gültige HTML enthalten, auch Umschalter, Kontrollkästchen und DropDown-Steuerelemente. Sie funktionieren in derselben Art und Weise wie die konventionellen Extras|Optionen-Dialogfelder. Allerdings sind SettingsFlyouts, wie bereits erwähnt, Light-Dismiss-Steuerelemente, sodass ein Antippen außerhalb genügt, um sie auszublenden – ganz im Gegensatz zu den modalen Dialogfeldern. Ein weiteres einfaches, aber neues Paradigma für die Entwicklung von Windows Store-Apps ist das SemanticZoom-Steuerelement, ein nützliches Hilfsmittel für die Navigation.

Semantischer Zoom

Einige Apps sind datenintensiv. Die Navigation in solchen Apps kann schwierig sein, insbesondere dann, wenn große Datenmengen zu behandeln sind. Hier hilft der semantische Zoom. Beim semantischen Zoom gibt es zwei Zustände für die Datenansicht: Vergrößert und verkleinert. In der vergrößerten Ansicht (Standardansicht) werden alle vorhandenen Daten angezeigt, und der Benutzer muss durch Verschieben oder mit einem Bildlauf in den Daten navigieren. In der verkleinerten Ansicht wird üblicherweise eine Zusammenfassung der Daten angezeigt. Der Benutzer kann dann leicht zu einem Datenbereich navigieren, diesen vergrößern und bestimmte Datenelemente anzeigen.

Ein SemanticZoom-Steuerelement setzt sich aus drei Steuerelementen zusammen: Ein übergeordnetes Steuerelement enthält die beiden untergeordneten Steuerelemente für die Zoomansichten (s. Abbildung 9. Die untergeordneten Steuerelemente müssen „IZoomable“ implementieren, um den semantischen Zoom ausführen zu können. Für WinJS-Apps ist deshalb nur „ListView“ geeignet.

Abbildung 9: Der Code für das SemanticZoom-Steuerelement

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">            
  <!-- The zoomed-in view. -->   
  <div id="zoomedInListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource:
      myData.groupedItemsList.dataSource,
     itemTemplate: select('#mediumListIconTextTemplate'),
     groupHeaderTemplate: select('#headerTemplate'),
     groupDataSource: myData.groupedItemsList.groups.dataSource,
     selectionMode: 'none',
     tapBehavior: 'none',
     swipeBehavior: 'none' }">  </div>
  <!-- The zoomed-out view. -->
  <div id="zoomedOutListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource:
     myData.groupedItemsList.groups.dataSource, itemTemplate:
     select('#semanticZoomTemplate'), selectionMode: 'none',
     tapBehavior: 'invoke', swipeBehavior: 'none' }">
  </div>
</div>

Wie Sie sehen, wird bei einem semantischen Zoom einfach nur zwischen zwei ListView-Steuerelementen umgeschaltet. Der semantische Zoom ist eine hervorragende Darstellungsmöglichkeit für Benutzer – und für Entwickler leicht zu implementieren.

Weitere Steuerelemente

Es gibt noch weitere Steuerelemente für die Windows-Oberfläche (Statusanzeigen, FlipViews, Popupmenüs, Meldungsdialogfelder, Ratings usw.), die hier aber aus Platzgründen nicht vorgestellt werden können. Da WinJS auf offenen Standards wie HTML5 und ECMAScript 5 (ES5) basiert, funktionieren alle Webelemente bis hin zu HTML5-Audio- und Videoanwendungen problemlos in Windows Store-Apps und stehen als Teil der Entwicklungsplattform zur Verfügung.

Rachel Appel ist Beraterin, Autorin, Mentorin und frühere Microsoft-Mitarbeiterin mit einer mehr als zwanzigjährigen Erfahrung in der IT-Industrie. Sie spricht oft auf wichtigen Industriekonferenzen wie beispielsweise Visual Studio Live!, DevConnections, MIX und weiteren. Ihre Schwerpunkte sind die Entwicklung von technologisch anspruchsvollen Unternehmensanwendungen mithilfe führender Microsoft-und Webtechnologien. Besuchen Sie Rachel Appel auf ihrer Website unter rachelappel.com.

 Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Keith Boyd (Microsoft)