JavaScript

Erstellen und Verwenden von Steuerelementen in Windows Store-Apps mit JavaScript

Chris Sells
Brandon Satrom

In dem früheren Artikel „Datenbindung in einer Windows Store-App mit JavaScript“ haben wir uns eingehend mit der Windows-Bibliothek für JavaScript (WinJS) und der Unterstützung der Datenbindung befasst. Datenbindung wird häufig im Zusammenhang mit Steuerelementen verwendet. Und darum konzentrieren wir uns auch so sehr auf die Pflege des ListView-Steuerelements und die Quellen, die zum Auffüllen des Steuerelements dienen (Sie finden diesen Artikel unter msdn.microsoft.com/magazine/jj651576). Mit dem vorliegenden Artikel geben wir Ihnen einen kurzen Überblick über die Steuerelemente, die Ihren als JavaScript-Programmierer für die Erstellung von Windows Store-Apps zur Verfügung stehen. Und falls diese nicht Ihren Anforderungen entsprechen, zeigen wir Ihnen, wie Sie Ihre eigenen Steuerelemente erstellen können.

Wenn Sie mit JavaScript Steuerelemente in einer Windows Store-App erstellen, haben Sie Zugriff auf folgende Familien von Steuerelementen:

• HTML5-Elemente: HTML5-Elemente gehören insofern zu den Steuerelementen, als dass es sich um Blöcke und Verhaltensweisen der Benutzeroberfläche handelt, die sich wiederverwenden lassen, zum Beispiel <progress /> und <a />.
• WinRT-Steuerelemente: Steuerelemente, die als Windows-Runtime-Klassen (WinRT) verfügbar gemacht und in JavaScript projiziert werden, zum Beispiel Windows.UI.Popups.PopupMenu.
• WinJS-Steuerelemente: Steuerelemente, die als JavaScript-Klassen implementiert werden, zum Beispiel WinJS.UI.ListView.
• CSS-Stile: CSS stellt mehrere Stile bereit, mit denen Sie Inhaltselemente so positionieren können, als handele es sich um Steuerelementcontainer, zum Beispiel column-count: 4.

In diesem ersten Artikel konzentrieren wir uns auf die ersten drei Kategorien von Steuerelementen.

HTML5-Elemente

Mit JavaScript erstellte Windows Store-Apps bauen auf der Webtechnologie auf; daher funktionieren, wie in Abbildung 1 zu sehen ist, alle HTML5-Element reibungslos.

Abbildung 1: HTML5-Steuerelemente, verfügbar in Windows Store-Apps, die mit JavaScript erstellt wurden

An dieser Stelle detailliert auf HTML-Elemente einzugehen würde den Rahmen des vorliegenden Artikels sprengen. Daher beschränken wir uns darauf, Ihnen die Dokumentation zu HTML5 ans Herz zu legen. Auch das zur Erstellung von Abbildung 1 verwendete Codebeispiel wird mit dem Download des zugehörigen Quellcodes bereitgestellt.

WinRT-Steuerelemente

Die Windows-Runtime stellt viele verschiedene Funktionen in unterschiedlichen Bereichen bereit, darunter aber nur zwei Funktionen im Bereich der Steuerelemente:

• Meldungsdialog: Eine Meldung mit einem optionalen Titel.
• Popupmenü: Ein Menü mit bis zu sechs Elementen.

Der Meldungsdialog wird über die MessageDialog-Funktion ausgerufen:

var popups = Windows.UI.Popups;
var mb = new popups.MessageDialog("and welcome to my message box!", "Hello!");
mb.showAsync();

Die MessageDialog-Klasse verfügt über eine showAsync-Methode, die, ebenso wie alle anderen asynchronen Operationen, die eine mit JavaScript erstellte Windows Store-App bereithält, eine Zusage zurückgibt. Im vorliegenden Fall ignorieren wir diese Zusage allerdings, weil es uns häufig egal ist, wann ein Meldungsdialog wieder ausgeblendet wird. Das Ergebnis wird in Abbildung 2 dargestellt (anstelle von "MessageDialog" wird hier der alte Begriff “MessageBox” verwendet).

Abbildung 2: Der WinRT-Meldungsdialog

Die PopupMenu-Klasse wird auf ähnliche Weise verwendet:

var popups = Windows.UI.Popups;
var menu = new popups.PopupMenu();
menu.commands.push(new popups.UICommand("one", null, 1));
menu.commands.push(new popups.UICommand("two", null, 2));
menu.showAsync({ x: 120, y: 360 }).done(function (e) {
  // Do something with e.label and/or e.id
  ...
});

In diesem Beispiel stellen wir nach der Erstellung eines PopupMenu-Objekts zwei UICommand-Objekte bereit, die jeweils mit einer Bezeichnung versehen sind und optionale Rückrufe und ID-Parameter enthalten. Der Rückruf wird hier nicht für beide Befehle verwendet, da wir den Ereignisparameter in der Abschlussmethode „done“ erfassen. Ein Popupmenu sieht erwartungsgemäß wie in Abbildung 3 dargestellt aus.

Abbildung 3: Das WinRT-Popupmenü

Wir erinnern daran, dass das Kontextmenü auf sechs Elemente begrenzt ist.

WinJS-Steuerelemente

Trotz der Vielfältigkeit und der Variierbarkeit von HTML5-Steuerelementen ist ihr Potenzial irgendwann erschöpft, wenn nicht das World Wide Web Consortium ein neues Elementtag in die Reihe aufnimmt und die Browseranbieter dieses implementieren. Dementsprechend sind trotz der Möglichkeit der Erstellung von Nicht-UI-Komponenten für Windows-Runtime auch die WinRT-Steuerelemente nicht beliebig erweiterbar. Den Ansatz für eine erweiterbare Gruppe von Steuerelementen, die speziell auf Windows Store-Apps ausgerichtet sind, bietet die Gruppe, die WinJS bereitstellt.

Bei einem WinJS-Steuerelement handelt es sich um ein Steuerelement, das in JavaScript implementiert ist und in der Konstruktorfunktion eine bestimmte Signatur bereitstellt:

function MyControl(element,
    options) {...}

Das Argument des Elements ist das Argument des HTML-Dokumentobjektmodells, das als Host für den Inhalt des Steuerelements fungiert. Hierbei handelt es sich häufig um das Element „div“. Das Argument der Optionen ist ein JavaScript-Objekt, das optionale Konfigurationsargumente wie die ListView itemDataSource-Eigenschaft bereitstellt.

Um ein WinJS-Steuerelement einmal in Aktion zu erleben, sehen wir uns ein div-Element an, das als Host für ein DatePicker-Steuerelement fungieren soll:

<div id="datePickerDiv"></div>

Anschließend können wir ein DatePicker-Element ganz einfach wie folgt erstellen:

var datePicker = new WinJS.UI.DatePicker(datePickerDiv);

Und das Ergebnis ist ein ganz neues DatePicker-Steuerelement, wie in Abbildung 4 gezeigt.

Abbildung 4: Ausgabe des DatePicker-Steuerelements

Wenn wir ein Steuerelement konfigurieren möchten, können wir eine Reihe von Optionen übergeben:

var datePicker = new WinJS.UI.DatePicker(datePickerDiv, { current: "6/2/1969" });

Im Falle des DatePicker-Elements lässt sich über die Option „current“ das aktuell angezeigte Datum einstellen, wie in Abbildung 5 dargestellt.

Abbildung 5: Einstellen des aktuell angezeigten Datums

Nachdem Sie dem HTML5-Element ein Steuerelement zugeordnet haben, können Sie es mit der winControl-Eigenschaft aufgreifen:

var datePicker = datePickerDiv.winControl; // Magical well-known property name
datePicker.current = "5/5/1995"; // Now we're talking to the control

Weiterhin können Sie, nachdem Sie das Steuerelement erfasst haben, mit der element-Eigenschaft erneut das zugehörige HTML5-Element aufrufen:

var datePickerDiv = datePicker.element;
datePickerDiv.style.display = "none";
// Now we're talking to the HTML element

Zusätzlich zur programmgesteuerten Erstellung ist, wie hier gezeigt, mit allen Steuerelementen über das data-win-control- und das data-win-options-Attribut auch eine deklarative Erstellung möglich:

<div id="datePicker2"
  data-win-control="WinJS.UI.DatePicker" data-win-options=
  "{current: '6/2/1969'}" ></div>

Bei dem data-win-control-Attribut handelt es sich um den Namen der aufzurufenden Konstruktorfunktion. Ähnlich wie in der Datenbindung, wo die Analyse der data-win-bind-Attribute den Aufruf der WinJS.Binding.processAll-Methode erfordert (siehe vorheriger Artikel), muss die data-win-control-Eigenschaft, um analysiert zu werden und die Erstellung der Steuerelemente zu veranlassen, die WinJS.UI.processAll-Methode aufrufen. Aus diesem Grund wird im gesamten generierten Projektvorlagencode die WinJS.UI.processAll-Methode aufgerufen.

Die data-win-options-Zeichenfolge wird als weniger leistungsfähige Syntax für die JavaScript-Objektinitialisierung analysiert. Sie sehen beispielsweise, dass die aktuelle Option für das DatePicker-Steuerelement nicht durch Erstellung eines Date-Objekts festgelegt, sondern die Zeichenfolge direkt übergeben wurde. Das liegt daran, dass der Optionsparser das „neue“ Schlüsselwort nicht versteht; er funktioniert nur mit statischen Daten. Da allerdings die DatePicker- und andere WinJS-Steuerelemente deklarativ erstellt werden müssen, lassen sie bestimmte Einschränkungen für den Optionsparser zu; in diesem Fall bedeutet dies für das DatePicker-Steuerelement, dass eine Zeichenfolge abgerufen und als Date-Objekt analysiert wird.

Jedes Steuerelement verfügt über einen anderen Satz von Optionen. Weitere Informationen hierzu finden Sie in der Dokumentation. Abbildung 6 zeigt eine Liste der integrierten WinJS-Steuerelemente.

Abbildung 6: Die WinJS-Steuerelemente

Name	Beschreibung	Klasse
App-Leiste	Zeigt die Befehle auf Anwendungsebene in einer Symbolleiste an	WinJS.UI.AppBar
Datumsauswahl	Zeigt eine Benutzeroberfläche zur Auswahl eines Datums an	WinJS.UI.DatePicker
Ansichtswechsel	Durchblättert eine Reihe von Inhalten und zeigt dabei jeweils ein Element an	WinJS.UI.FlipView
Flyout	Zeigt eine Überlagerung mit beliebigem Inhalt an	WinJS.UI.Flyout
Listenansicht	Zeigt eine Auflistung von Elementen in einer gruppierten oder ungruppierten Liste bzw. einem Raster an	WinJS.UI.ListView
Bewertung	Zeigt eine Benutzeroberfläche zur Bewertung eines Films o. ä. an	WinJS.UI.Rating
Semantischer Zoom	Stellt eine Benutzeroberfläche zum Zoomen zwischen Listenansichten, z. B. von einer gruppierten Listenansicht zu einer Liste von Gruppen, bereit	WinJS.UI.SemanticZoom
Flyout von Einstellungen	Stellt eine Benutzeroberfläche für die Konfiguration von Anwendungseinstellungen bereit	WinJS.UI.SettingsFlyout
Zeitauswahl	Zeigt eine Benutzeroberfläche zur Auswahl einer Uhrzeit an	WinJS.UI.TimePicker
Ein/Aus-Schalter	Zeigt eine Benutzeroberfläche zum Wechseln zwischen zwei Auswahlmöglichkeiten an	WinJS.UI.ToggleSwitch
QuickInfo (Umfangreich)	Zeigt eine QuickInfo mit beliebigem HTML-Inhalt an	WinJS.UI.Tooltip
Ansichtsfeld	Stellt einen Bereich mit logisch fester Größe bereit, der an den verfügbaren Platz angepasst ist	WinJS.UI.ViewBox

Abbildung 7 zeigt die WinJS-Steuerelemente in Aktion.

Abbildung 7: Die WinJS-Steuerelemente in Aktion

Sie können HTML5-, WinRT- und WinJS-Steuerelemente in Ihrer Windows Store-App nach Belieben mischen.

Falls Sie das gewünschte Steuerelement nicht in der von HTML5, Windows-Runtime oder WinJS bereitgestellten Liste finden, können Sie auch eigene Steuerelemente erstellen.

Benutzerdefinierte Steuerelemente

Wie bereits erwähnt, handelt es sich bei einem WinJS-Steuerelement um eine Funktion, die einen Konstruktor von folgendem Format bereitstellt:

function MyControl(element, options) {...}

Ein solches Steuerelement wird folgendermaßen erstellt: Es wird eine Funktion implementiert, die den HTML-Code unterhalb des übergeordneten Elements (welches als erstes Argument übergeben wird) erstellt. Als zweites Argument wird das übergebene options-Objekt verwendet. Stellen Sie sich zum Beispiel vor, dass Sie ein kleines Uhr-Steuerelement (siehe Abbildung 8) erstellen möchten.

Abbildung 8: Benutzerdefiniertes Uhr-Steuerelement

Und angenommen, dieses Steuerelement wäre in einem div-Element enthalten:

<div id="clockControl1"></div>

Weiterhin möchten wir, ähnlich wie dies mit integrierten WinJS-Steuerelementen möglich ist, eine Instanz eines benutzerdefinierten Steuerelements erstellen können, etwa so:

var clock = new Samples.UI.ClockControl(clockControl1, { color: 'red' });
clock.color = 'red'; // Can set options as part of construction or later

Der Name des benutzerdefinierten Steuerelements lautet „ClockControl“ und wurde aus dem Samples.UI-Namespace entnommen. Wie zuvor beschrieben, wird das Steuerelement durch Übergeben des enthaltenen Elements (clockControl1) und eines optionalen Satzes von Name/Wert-Paaren für die Optionen erstellt. Für den Fall, dass wir eine der Optionen des Steuerelements später ändern möchten, sollten wir dies durch Festlegen eines einzelnen Eigenschaftswerts tun können.

Außerdem möchten wir benutzerdefinierte Steuerelemente deklarativ erstellen können:

<script src="/js/clockControl.js"></script>
  ...
  <div id="clockControl2"
    style="width: 200px; height: 200px;"    
    data-win-control="Samples.UI.ClockControl"
    data-win-options="{color: 'red'}">  </div>

Im Rahmen unserer Implementierung möchten wir sicherstellen, dass die Eigenschaften von winControl und des Elements festgelegt werden, private Elemente als solche markiert sind und Ereignisse entsprechend behandelt werden. Wenn wir uns nun ausführlicher mit der Implementierung des ClockControl-Steuerelements beschäftigen, wird deutlich, wie WinJS zur Einrichtung dieser Features beiträgt.

Steuerelementklasse Als erstes müssen wir uns vergewissern, dass sich das ClockControl-Steuerelement im richtigen Namespace befindet. Die meisten modernen Sprachen enthalten das Konzept eines Namespace als Möglichkeit der Trennung von Typen, Funktionen und Werten in separaten benannten Bereichen zur Vermeidung von Konflikten. Microsoft stellt beispielsweise in WinJS 2.0 ein ClockControl-Steuerelement bereit, das sich im WinJS.UI-Namespace befindet und keine Konflikte mit dem Samples.UI-Namespace verursacht. Ein Namespace in JavaScript ist lediglich ein weiteres Objekt mit Konstruktoren, Funktionen und Werten, die wie folgt aufgefüllt werden können:

// clockControl.js
(function () {
  // The hard way
  window.Samples = window.Samples || {};
  window.Samples.UI = window.Samples.UI || {};
  window.Samples.UI.ClockControl = 
    function(element, options) { ... };
})();

Das funktioniert ganz problemlos. Da es sich bei der Definition von Namespaces (und verschachtelten Namespaces) um ein gängiges Phänomen handelt, stellt WinJS (ähnlich wie viele JavaScript-Bibliotheken) ein abgekürztes Verfahren dafür bereit:

// clockControl.js
(function () {
  // The easy way
  WinJS.Namespace.define("Samples.UI", {
    ClockControl: function (element, options) { ... };
  };
})();

Mit der Definitionsfunktion im WinJS.Namespace-Namespace können Sie einen neuen Namespace definieren, sodass durch Punkte getrennte Namen ordnungsgemäß analysiert werden. Das zweite Argument ist ein Objekt zur Definition der Konstruktoren, Funktionen und Werte, die von diesem Namespace verfügbar gemacht werden sollen, im vorliegenden Fall ganz einfach der Konstruktor des ClockControl-Steuerelements.

Steuerelementeigenschaften und -methoden Für unser ClockControl-Steuerelement möchten wir Methoden und Eigenschaften wie die Farbeigenschaft verfügbar machen. Dies können Instanzmethoden und -eigenschaften oder statische Methoden und Eigenschaften sein, und sie können entweder öffentlich oder privat sein (d. h. so „privat“ wie Mitglieder von Java­Script-Objekten eben sein können). Alle genannten Konzepte werden über die ordnungsgemäße Verwendung der Prototypeigenschaft des Konstruktors sowie über die neue JavaScript-Methode „Object.defineProperties“ unterstützt. Auch hierfür stellt WinJS über die define-Methode im WinJS.Class-Namespace ein abgekürztes Verfahren bereit:

WinJS.Namespace.define("Samples.UI", {
  ClockControl: WinJS.Class.define(
    function (element, options) {...}, // ctor
  { // Properties and methods
    color: "black",
    width: { get: function () { ... } },
    height: { get: function () { ... } },
    radius: { get: function () { ... } },
    _tick: function () { ... },
    _drawFace: function () { ... },
    _drawHand: function (radians, thickness, length) { ... },
  })
});

Die WinJS.Class.define-Methode verwendet zum einen die Funktion, die als Konstruktor dient, und zum anderen den Satz von Eigenschaften und Methoden. Die define-Methode weiß, wie sich aus den bereitgestellten get- und set-Funktionen eine Eigenschaft erstellen lässt. Des Weiteren weiß sie, dass es sich bei Eigenschaften oder Methoden mit einem Unterstrich als Präfix – z. B. _tick – um „private“ Eigenschaften und Methoden handelt. JavaScript unterstützt eigentlich keine private Methoden im herkömmlichen Sinne, d. h., wir können die _tick-Methode trotzdem aufrufen. Allerdings werden die Methoden in „for...in“-Schleifen in Visual Studio 2012 IntelliSense oder JavaScript nicht angezeigt. Damit wird auf praktische Art signalisiert, dass sie nicht für die öffentliche Nutzung bestimmt sind.

Der Konstruktor legt die für ein WinJS-Steuerelement erforderlichen Eigenschaften fest (siehe Abbildung 9).

Abbildung 9: Der Konstruktor legt die für ein WinJS-Steuerelement erforderlichen Eigenschaften fest

WinJS.Namespace.define("Samples.UI", {
  ClockControl: WinJS.Class.define(function (element, options) {
    // Set up well-known properties
    element.winControl = this;
    this.element = element;
    // Parse the options; that is, the color option
    WinJS.UI.setOptions(this, options);
    // Create the drawing surface
    var canvas = document.createElement("canvas");
    element.appendChild(canvas);
    this._ctx = canvas.getContext("2d");
    // Draw the clock now and every second
    setTimeout(this._tick.bind(this), 0);
    setInterval(this._tick.bind(this), 1000);
  },
  ...
});

Als erstes legt der Konstruktor die bekannten winControl- und element-Eigenschaften fest, sodass der Entwickler zwischen dem als Host dienenden HTML5-Element und dem JavaScript-Steuerelement hin- und herwechseln kann.

Als nächstes verarbeitet der Konstruktor die Optionen. Sie erinnern sich, dass die Optionen entweder als Satz von Name/Wert-Paaren oder über das data-win-options-Attribut aus HTML5 als Zeichenfolge angegeben werden können. WinJS verarbeitet die Analyse der options-Zeichenfolge in ein JavaScript-Objekt, sodass Sie es lediglich mit den Name/Wert-Paaren zu tun haben. Wenn Sie möchten, können Sie auch einzelne Eigenschaften, in unserem Fall beispielsweise die Farbeigenschaft, abrufen. Wenn die Listen von Optionen allerdings sehr umfangreich sind, umgeht die setOptions-Methode im WinJS.UI-Namespace alle Eigenschaften im options-Objekt und legt diese als Eigenschaften für Ihr Steuerelement fest. So entsprechen beispielsweise folgende Codeblöcke einander:

// Setting each property one at a time
myControl.one = "one";
myControl.two = 2;
// Setting all properties at once
WinJS.UI.setOptions(myControl, {
  one: "one",
  two: 2,
});

Nachdem die Optionen für das Steuerelement festgelegt wurden, muss der Konstruktor die untergeordneten Elemente erstellen, die das übergeordnete HTML5-Element zur Durchführung der Aufgabe benötigt. In diesem Fall verwenden wir das HTML5-Canvas-Element und einen Zeitgeber. Die Implementierung dieses Steuerelements erfolgt über reinen alten HTML- und JavaScript-Code, der daher hier nicht angezeigt wird, aber im dazugehörigen Codedownload enthalten ist.

Steuerereignisse Neben Methoden und Eigenschaften macht ein Steuerelement häufig auch Ereignisse verfügbar. Bei einem Ereignis handelt es sich um eine vom Steuerelement ausgegebene Benachrichtigung über einen wissenswerten Vorgang, etwa, dass der Benutzer auf das Steuerelement geklickt oder das Steuerelement einen bestimmten Zustand erreicht hat, der wiederum ein anderes Programmverhalten auslöst. Gemäß dem vom HTML-Dokumentobjektmodell festgelegten Beispiel möchten Sie, dass addEventListener, removeEventListener und andere Methoden es Entwicklern erlauben, alle von Ihrem Steuerelement verfügbar gemachten Ereignisse sowie onmyevent-Eigenschaften zu abonnieren.

Wenn wir etwa über unser Beispielsteuerelement „ClockControl“ alle fünf Sekunden ein Ereignis verfügbar machen möchten, würden wir erwarten, dass wir dieses programmgesteuert abonnieren können:

// Do something every 5 seconds
window.clockControl_fiveseconds = function (e) {
  ...
};
var clock = new Samples.UI.ClockControl(...);
// This style works
clock.onfiveseconds = clockControl_fiveseconds;
// This style works, too
clock.addEventListener("fiveseconds", clockControl_fiveseconds);
Declaratively, we’d like to be able to attach to custom events, too:
<!-- this style works, three -->
<div data-win-control="Samples.UI.ClockControl"
  data-win-options="{color: 'white',
    onfiveseconds: clockControl_fiveseconds}" ...>
</div>

Die Aktivierung aller drei Stile erfordert zwei Dinge: Die Methoden zur Verwaltung der Ereignisabonnements (und für die Verteilung der Ereignissen, wenn sie auftreten) sowie eine Eigenschaft für jedes Ereignis. Diese beiden Voraussetzungen liefert der WinJS.Class-Namespace:

// clockControl.js
...
WinJS.Namespace.define("Samples.UI", {
  ClockControl: WinJS.Class.define(...);
});
// Add event support to ClockControl
WinJS.Class.mix(Samples.UI.ClockControl, 
  WinJS.UI.DOMEventMixin);
WinJS.Class.mix(Samples.UI.ClockControl,  
  WinJS.Utilities.createEventProperties("fiveseconds"));

Die Kombinationsmethode von WinJS.Class ermöglicht es, Eigenschaften und Methoden, die von bestehenden Objekten bereitgestellt werden, zu mischen. In diesem Fall stellt DOMEventMixin aus dem WinJS.UI-Namespace drei Methoden bereit:

// base.js
var DOMEventMixin = {
  addEventListener: function (type, listener, useCapture) {...},
  dispatchEvent: function (type, eventProperties) {...},
  removeEventListener: function (type, listener, useCapture) {...},
};

Wenn wir die Methoden aus dem DOMEventMixin-Objekt untermischen, können wir die Eigenschaften für jedes der benutzerdefinierten Ereignisse erstellen, indem wir die Kombinationsmethode auf ein Objekt anwenden, das von der createEventProperties-Methode von WinJS.Utilities erstellt wurde. Diese Methode erzeugt den Satz an Ereignismethoden für die einzelnen kommagetrennten Ereignisnamen, die Sie übergeben, und stellt ihnen das Präfix „on“ voran. Mit diesem Satz von Eigenschaften und Methoden, der von den beiden Aufrufen der Kombinationsmethode bereitgestellt wird, haben wir unser benutzerdefiniertes Steuerelement dahingehend erweitert, dass es das fünfsekündige Ereignis unterstützt. Um ein Ereignis dieses Typs aus dem Steuerelement heraus zu verteilen, rufen wir die dispatchEvent-Methode auf:

// clockControl.js
...
_tick: function () {
  var now = new Date();
  var sec = now.getSeconds();
  ...
  // Fire the 5 second event
  if (sec % 5 == 0) {
    this.dispatchEvent("fiveseconds", { when: now });
  }
},
...

Der Aufruf der dispatchEvent-Methode akzeptiert zwei Parameter: Den Namen des Ereignisses und das optionale details-Objekt, das im Ereignis selbst verfügbar ist. Wir übergeben hier einen einfachen „when“-Wert. Da wir es aber mit JavaScript zu tun haben, könnten wir im Grunde einen beliebigen Wert übergeben. Der Zugriff auf die Ereignisdetails im Ereignishandler erfordert den Abruf des detail-Werts aus dem Ereignisobjekt selbst:

// Do something every 5 seconds
window.clockControl_fiveseconds = function (e) {
  var when = e.detail.when;
  ...
};

Die hier aufgezeigten Prinzipien für die Definition von WinJS-Steuerelementen – nämlich Definieren einer Klasse in einem Namespace, Einrichten der winControl- und der element-Eigenschaften, Verarbeiten des options-Objekt, Definieren der Eigenschaften und Methoden und Definieren und Verteilen von benutzerdefinierten Ereignissen – entsprechen genau den Techniken, die das WinJS-Team bei Microsoft für die Erstellung der WinJS-Steuerelemente verwendet hat. In der Datei „ui.js“, die mit WinJS bereitgestellt wird, erfahren Sie eine Menge über die Erstellung Ihrer bevorzugten Steuerelemente.

Chris Sells ist stellvertretender Leiter des Unternehmensbereichs Developer Tools bei Telerik. Er ist Co-Autor des Buches „Building Windows 8 Apps with JavaScript“ (Addison-Wesley Professional, 2012), auf dem der vorliegende Artikel basiert. Weitere Informationen zu Chris Sells und seinen verschiedenen Projekten finden Sie unter http://www.sellsbrothers.com/.

Brandon Satrom ist Programmanager im Unternehmensbereich Kendo UI bei Telerik. Er ist Co-Autor des Buches „Building Windows 8 Apps with JavaScript“ (Addison-Wesley Professional, 2012), auf dem der vorliegende Artikel basiert. Sie können ihn auf Twitter unter twitter.com/BrandonSatrom erreichen.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Chris Anderson, Jonathan Antoine, Michael Weinhardt, Shawn Wildermuth und Josh Williams