Was ist neu in Windows 8?

Windows-8-App-Entwicklung mit HTML5 und Blend für Visual Studio
Kommentare

Microsoft stellt den Entwicklern mit Windows 8 ein breites Spektrum an Technologien für die App-Entwicklung zur Verfügung. Neu ist die Möglichkeit, Apps mit HTML5 und JavaScript zu erschaffen. Wie einfach dies sein kann, zeigt der folgende Artikel anhand des praktischen Beispiels eines RSS Readers.

Um mit der Windows-8-App-Entwicklung beginnen zu können, muss zunächst ein neues Visual-Studio-2012-Projekt erstellt werden. Hierzu bietet die neue Visual-Studio-Version schon entsprechende Projektvorlagen für die App-Entwicklung. Für das in diesem Artikel vorgestellte Beispiel auf Grundlage von HTML und JavaScript wird die Projektvorlage BLANK APP unter dem Menüpunkt JAVASCRIPT und anschließend WINDOWS METRO STYLE gewählt. Die aus der Vorlage generierte Solution besteht im Wesentlichen aus den folgenden Elementen:

  • dem App-Manifest (package.appxmanifest), das Informationen über die App, wie zum Beispiel: Name, Titel, Startbildschirm usw. enthält
  • der App-Einstiegsseite (default.html)
  • einer Cascading-Style-Sheet-Datei (default.css)
Das Grundgerüst

Um eine klare Seitenstruktur zu schaffen, die später mit Blend effektiv bearbeitet werden kann, wird die Zeile

Content goes here

in der default.html durch den Code aus Listing 1 ersetzt. Dieser Code stellt das HTML-Grundgerüst der Anwendung dar. Der Titel sowie der ZURÜCK-Button befinden sich im Head-Bereich. Im Content-Bereich werden eine Liste zum Darstellen der einzelnen Elemente, eine Überschrift zum Anzeigen des RSS-Feed-Titels und ein div-Tag für den Feed-Inhalt benötigt. Das mit dem WinJS data-win-control-Attribut versehene div-Element wird durch die Methode WinJS.UI.processAll() während der Ausführung zu einer Liste transformiert. In den data-win-options der articlelist werden die Datenquelle sowie das Item Template festgelegt. Im Footer-Bereich befindet sich ein Input-Feld vom Typ URL und ein Button zum Starten des Ladevorgangs der RSS-Feed-Daten.

Listing 1
  

Erstellen eines Templates

Um die Daten optisch ansprechend anzeigen zu können, wird ein Template benötigt – es bestimmt die Darstellung jedes einzelnen Elementes in der Liste. Damit das Template verwendet werden kann, muss der Code aus Listing 2 oberhalb der Liste platziert werden. Dieses besteht aus HTML-Code und WinJS-Attributen. Das Data Binding erfolgt mittels des Attributes data-win-bind. Auf der linken Seite wird die HTML-Element-Eigenschaft und auf der rechten Seite der Bezeichner des Databind-Property angegeben.

Listing 2

Vom Request zum Data Binding

Um die Anwendung mit neuer Funktionalität in Form von JavaScript-Funktionen zu erweitern, empfiehlt es sich, separate JavaScript-Dateien unterhalb des Projektordners im Verzeichnis js anzulegen. Bei der Windows-8-App-Entwicklung sollte mit anonymen Funktionen und modernen Design Pattern, wie dem Module Pattern, gearbeitet werden, was zu übersichtlichen und sauberen Codeergebnissen führt. Mit der Methode WinJS.Namespace.define(„RSSData“, publicMembers) wird ein Namespace definiert, in dem die Daten für das Data Binding bereitgestellt werden. Mittels der von WinJS bereitgestellten Methode WinJS. xhr werden die Daten aus dem Feed abgerufen. Das Schlüsselwort then sorgt für einen asynchronen Aufruf der gekapselten Funktion, nachdem die Response des asynchronen Aufrufs erfolgt ist. Es ist möglich, beliebig viele Funktionen mit then zu verketten und hintereinander jeweils nach Beendigung der Vorgängerfunktion auszuführen. Anschließend wird durch die zurückgelieferten Feed Items durchiteriert. Bei jedem Iterationsdurchlauf wird ein neues article-Objekt erzeugt und zu der Datenquelle articleBindingList hinzugefügt. Der Methodenaufruf WinJS.UI.Animation.enterPage(articlelist) sorgt für ein animiertes Einblenden der Artikelliste. Die Methode WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentItem.content) befüllt das HTML-Element direkt und ohne jegliche Überprüfung auf schadhaften Code. Listing 3 zeigt den kompletten JavaScript-Quellcode der App, dieser wird in die Datei rssreader.js eingefügt.

Listing 3
 (function () {     "use strict";      var articleBindingList = new WinJS.Binding.List();      var publicMembers = { itemList: articleBindingList };     WinJS.Namespace.define("RSSData", publicMembers);      function loadButtonClickEventHandler(eventInfo) {         articleBindingList.splice(0, articleBindingList.length);         WinJS.xhr({ url: urlinput.value }).then(function (rss) {             var responseXML = rss.responseXML;              var items = responseXML.querySelectorAll("item");              subtitle.innerText = responseXML.querySelectorAll("title")[0].textContent;              for (var i = 0; i < items.length; i++) {                 var article = {};                 article.title = items[i].querySelector("title").textContent;                 var thumbnails = items[i].querySelectorAll("thumbnail");                 if (thumbnails.length > 1) {                     article.thumbnail = thumbnails[1].attributes.getNamedItem("url").textContent;                     article.content = items[i].textContent;                     articleBindingList.push(article);                 }             }         });     }      function backButtonClickEventHandler(eventInfo) {         articlelist.style.display = "";         subtitle.style.display = "";         urlinput.style.display = "";         loadButton.style.display = "";         articlecontent.style.display = "none";          WinJS.UI.Animation.enterPage(articlelist);     }      function itemInvokedEventHandler(eventInfo) {         articlelist.style.display = "none";         subtitle.style.display = "none";         urlinput.style.display = "none";         loadButton.style.display = "none";         articlecontent.style.display = "";          var currentItem = articleBindingList.getAt(eventInfo.detail.itemIndex);         WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentItem.content);          WinJS.UI.Animation.enterPage(articlecontent);     }      WinJS.UI.processAll().then(function () {         loadButton.addEventListener("click", loadButtonClickEventHandler, false);         backbutton.addEventListener("click", backButtonClickEventHandler, false);         articlelist.addEventListener("iteminvoked", itemInvokedEventHandler, false);     }); })();

[ header = Windows-8-App-Entwicklung mit HTML5 und Blend für Visual Studio – Teil 2 ]

Registrieren von Event Handlern

Der Zugriff auf DOM-Objekte mittels JavaScript wurde vereinfacht, indem Elemente direkt als Objekt unter der im HTML-Code vergebenen ID zur Verfügung stehen und von IntelliSense in Visual Studio angeboten werden. Diese Methode des Zugriffs ist komfortabler als der klassische Weg mittels der Methode getElementById. Mit dem Aufruf addEventListener wird die Methode buttonClickEventHandler am click Event Handler des Buttons registriert:

WinJS.UI.processAll().then(function() {   loadDataButton.addEventListener("click", buttonClickEventHandler, false); });

Zu beachten ist, dass der Zugriff auf das DOM erst nach Ausführung der Methode WinJS.UI.processAll() erfolgen kann, da erst zu diesem Zeitpunkt alle DOM-Objekte für JavaScript zur Verfügung stehen.

App-Design mit Blend

Das Designwerkzeug „Blend“ von Microsoft steht ab der Visual Studio 2012 RC Professional optional für die Installation zur Verfügung und kann als Hilfsmittel zur Gestaltung der Benutzeroberfläche von Apps dienen. Durch den Einsatz von Blend für Visual Studio lässt sich mit minimalem Aufwand ein gutes Designergebnis erzielen. Der Nachteil des Tools liegt darin, dass die Style-Informationen der UI-Steuerelemente nicht in einer gesonderten CSS-Datei ausgelagert werden, sondern direkt in den HTML-Code mit einfließen. Das bestehende Projekt wird durch Öffnen der Visual-Studio-Solution-Datei in Blend geladen.

Da das Design der App eine große Anzahl von Designschritten umfasst, wird im folgenden Abschnitt nur eine grobe Vorgehensweise beim Designen beschrieben und nicht jeder einzelne Designschritt des RSS Readers. Das komplette Design ist dem HTML-Code aus Listing 4 zu entnehmen. Wird der vorhandene Code der default.html-Datei durch diesen ersetzt, ist die App voll funktionsfähig. Im ersten Schritt muss die Größe der App festgelegt werden. Dazu wird im Live DOM, das die DOM-Objekte hierarchisch darstellt, das Element main ausgewählt (Abb. 1) und anschließend in den CSS-EIGENSCHAFTEN im Bereich GRÖßENANPASSUNG bei Höhe und Breite jeweils 100 Prozent eingetragen, wie in Abbildung 2 zu sehen ist.

Abb. 1: Live DOM

Abb. 2: Festlegen der Höhe und Breite

Als Nächstes wird das grobe Raster festgelegt, hierzu wird im Live DOM das main-Element ausgewählt, danach wird unter dem Punkt LAYOUT der Display Style zu -ms-grid geändert. Anschließend werden in den CSS-EIGENSCHAFTEN im Bereich RASTER die Eigenschaften des Grids festgelegt, wie Abbildung 3 zeigt. Danach werden nacheinander die drei Elemente header, content und footer im Live DOM ausgewählt und jeweils der Tabellenzeile eins, zwei und drei zugeordnet. Abbildung 4 zeigt die Zuordnung des Headers.

Abb. 3: Festlegen der Grid-Eigenschaften

Abb. 4: Zuordnung des Header-Elements

Damit der ZURÜCK-Button und der App-Titel sich nicht überlagern, wird der Head-Bereich in zwei Spalten aufgeteilt. Dazu wird das Element header aus dem Live DOM ausgewählt und das Attribut Display Style zu -ms-grid geändert. Anschließend wird der ZURÜCK-Button durch Setzen der Eigenschaft -ms-grid-column auf den Wert 1 der Spalte eins und der Titel nach dem selbigen Prinzip der Spalte zwei zugeordnet. Um die Darstellungsgröße der einzelnen Icons zu beeinflussen, müssen die Höhe und die Breite des Templates angepasst werden. Hierzu wird zunächst das Element

unterhalb des articlelisttemplate aus dem Live DOM ausgewählt. Anschließend wird in den CSS-EIGENSCHAFTEN im Bereich GRÖßENANPASSUNG bei Höhe und Breite jeweils 150 px eingetragen. Nach diesen Schritten ist das grundlegende Design der App festgelegt.

Listing 4
              RssReader                                                  

Endspurt

Die App lässt sich in alter Visual-Studio-Manier durch Drücken von F5 starten. Ein neues, nettes und vor allem praktisches Feature ist der Simulationsmodus, in dem sich das Verhalten der Anwendung mit verschiedenen Bildschirmauflösungen und Formaten testen lässt. Dieser kann durch Ändern des Modus von Lokaler Computer zu Simulator und anschließend durch Drücken der Taste F5 gestartet werden. Abbildung 5 zeigt die App im Simulationsmodus.

Abb. 5: App im Simulationsmodus

Eine kleine Designänderung

Wer das Design seiner App ändern möchte, dem bietet Windows 8 die Möglichkeit, zwischen zwei Designs zu wechseln, dem Light Theme und dem Dark Theme. Um die App-Theme zu wechseln, wird die bestehende CSS-Referenz (Microsoft.WinJS.1.0.RC/css/ui-dark.css) in der default.html durch den folgenden Code ersetzt:

Nach dieser kleinen Änderung erstrahlt die App in einem neuen Design. Abbildung 6 zeigt den Designunterschied.

Abb. 6: Windows-8-App-Themes (links Light Theme, rechts Dark Theme)

Festlegen des Begrüßungsbildschirms

Es macht es einen besseren Eindruck, wenn die App mit einem eigenen Begrüßungsbildschirm startet und ein eigenes Icon besitzt. Durch Doppelklicken der Datei package.appxmanifest öffnet sich das Eigenschaftsfenster des Bereitstellungspakets. In den Eigenschaften wird unter dem Punkt BEGRÜßUNGSBILDSCHIRM der Pfad zu dem gewünschten Begrüßungsbild angeben. Zu beachten ist dabei lediglich, dass das Bild zur optimalen Darstellung eine Größe von 620 x 300 Pixeln aufweist.

Zusammenfassung

Dieser Artikel hat anhand eines praxisnahen Beispiels gezeigt, wie einfach der Einstieg in die Windows-8-App-Entwicklung sein kann. Visual Studio bietet volle Unterstützung für die App-Entwicklung, beispielsweise mit dem Simulator im Visual Studio, der es zulässt die App unter anderem mit verschiedenen Bildschirmauflösungen zu testen. Durch den Einsatz von Designwerkzeugen wie Blend ist es möglich, mit geringem Aufwand Apps mit ansprechenden Benutzeroberflächen zu gestalten.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -