So programmieren Sie Metro-Apps für Windows 8
Microsoft hat in Windows 8 mit der Metro-Umgebung den Schwerpunkt auf "Mobile first" gelegt. Wir zeigen, wie Sie Ihre HTML5-, CSS3- und Javascript-Kenntnisse für die Entwicklung von Metro-Apps nutzen können.
Die Windows 8 Developer Preview wurde Mitte September 2011 auf der Build-Konferenz im kalifornischen Anaheim vorgestellt. Ende Februar kartete Microsoft mit der Vorstellung der Windows 8 Consumer Preview auf dem Mobile World Congress 2012 in Barcelona nach. Die ersten Projekte sind bereits im Gan...
Die Windows 8 Developer Preview wurde Mitte September 2011 auf der Build-Konferenz im kalifornischen Anaheim vorgestellt. Ende Februar kartete Microsoft mit der Vorstellung der Windows 8 Consumer Preview auf dem Mobile World Congress 2012 in Barcelona nach.
Die ersten Projekte sind bereits im Gange. Angesichts des bisher stetigen Wachstums mobiler Plattformen arbeitet die Mozilla Foundation mit Hochdruck daran, das enorm umfangreiche Firefox-Projekt in der zweiten Jahreshälfte 2012 auf die Metro-Plattform von Windows 8 zu portieren.
Das Internet Magazin hat der Metro-Plattform unter die Haube geschaut und berichtet, welches Potenzial die neue Umgebung mit sich bringt und wie sich Webdesigner am besten darauf einstellen können.
Microsoft will den mobilen App-Markt erobern
Den Markt für mobile Applikationen und Websites dominieren Apple mit iOS und Google mit Android OS. Microsoft hatte jenseits des Desktops und des Wohnzimmers bisher kaum Erfolg gehabt, konnte aber das harte Schicksal von Windows Phone unter anderem mit Windows 7 und der Xbox 360 mehr als kompensieren, und möchte jetzt offenbar eine eigene mobile Plattform aus dem Boden stampfen.
Durch die Einführung der Metro-Umgebung in Windows 8 DP/CP hofft Microsoft, die Gemeinde der Webentwickler für einen Sprung in das potenziell sehr lukrative Windows- 8-Ökosystem zu gewinnen.
Schließlich könnte nichts einfacher sein als sein bestehendes Know-how der modernen Websprachen zur Entwicklung von Metro-Anwendungen einzusetzen, wenn sich damit Microsofts enorme installierte Basis mit vollwertigen Applikationen adressieren ließe.
Windows 8 besitzt dadurch einen ganz neuen Reiz, da Metro-Applikationen sowohl auf Desktops als auch auf mobilen Geräten wie Tablets und Smartphones laufen werden.
Windows als Zielplattform war für Webdesigner und -entwickler bisher kaum von Interesse, denn die Windows Runtime konnte man bisher nur in Sprachen wie C#, Visual Basic oder C++ ansprechen. Mit Metro in Windows 8 ergeben sich gerade für Webdesigner enorme Synergieeffekte, denn plötzlich kann man einfach in Javascript entwickeln.
Zur Entwicklung von Metro-Apps für die Windows 8 Consumer Preview benötigt man zwei derzeit kostenlose Softwarepakete: Windows 8 Consumer Preview [1] und Visual Studio 11 (Express Beta) für Windows 8 [2]. Zum Glück wurden die Voraussetzungen für Metro so angesetzt, dass sich nicht nur konventionelle Windows-Applikationsentwickler, sondern auch viele Webgestalter schnell zu Hause fühlen.
Zwar setzt Microsoft unter Windows 8 bereits auf HTML5, aber es genügen - neben den natürlich im Mittelpunkt stehenden Javascript-Kenntnissen - bereits solide Grundkenntnisse zu HTML4.01 oder HTML5 und zur DOM-API. Außerdem sollte man verstehen wie die Ereignisverwaltung funktioniert. HTML5-Kenntnisse sind also für die Metro-Entwicklung durchaus hilfreich, aber keine Voraussetzung.
Metro-Apps mit CSS erstellen: So gehts
Eine Metro-Applikation auf Basis von HTML, Javascript und CSS ist technisch wie eine Website aufgebaut. Im Verzeichnis References sind die benötigten Microsoft-Javascript- und CSS3-Dateien enthalten. Beim Start der Applikation wird als erstes standardmäßig die Datei default.html geladen.
Obwohl diese Einstellung durchaus sinnvoll ist, ist sie dennoch nicht in Stein gemeißelt. Um diese Grundeinstellung zu ändern, gilt es die Datei package.appxmanifest zu öffnen und die sogenannte Start Page entsprechend dem gewünschten Startdokument anzupassen. Danach folgen Dateien, die sich in den Verzeichnissen css, images und js befinden, darunter diese drei als unverzichtbar eingestuften Stylesheets: default.html, default.css und default.css.
Denn im Grunde genommen handelt es sich bei den HTML-Dokumenten einer Metro-Applikation um ganz gewöhnliche HTML-Dateien. Eine default.html-Datei könnte wie folgt aussehen:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>MetroInternetMagazin</title><!-- WinJS references --><link href="//Microsoft.
WinJS.0.6/css/ui-dark.css" rel="stylesheet"><script src="//Microsoft.
WinJS.0.6/js/base.js"></script><script src="//Microsoft.
WinJS.0.6/js/ui.js"></script><!-- MetroInternetMagazin
references --><link href="/css/default.css"
rel="stylesheet"><script src="/js/default.js"></script></head><body><div id="contentGrid"><div id="leftContainer" class=
"gridLeft"><h1 class="win-type-xx-large">
Left Container</h1></div><div id="topRightContainer"
class="gridRight"><h1 class="win-type-xx-large">
Top Right Container</h1></div><div id="bottomRightContainer" class=
"gridRight"><h1 class="win-type-xx-large">
Bottom Right Container</h1></div></div></body></html>Auf den ersten Blick erkennt man, dass es sich bei der Metro-Applikation um eine W3C-konforme HTML5-Datei handeln könnte. Doch bei genauerem Hinsehen bemerkt man recht schnell, dass sie dennoch ein paar herstellerspezifische Referenzen zu Javascript-Bibliotheken von Microsoft beinhaltet, nämlich zu der sogenannten WinJS-API:
<!-- WinJS references --><link href="//Microsoft.WinJS.0.6/
css/ui-dark.css" rel="stylesheet"><script src="//Microsoft.WinJS.0.6/
js/base.js"></script><script src="//Microsoft.WinJS.0.6/
js/ui.js"></script>Bei Bedarf kann man im Debugger übrigens Breakpoints im WinJS-Quelltext setzen, um leichter verstehen zu können wie der jeweilige Quelltextabschnitt funktioniert.
Metro-APIs im Detail
Bezüglich der Metro-APIs gab es auf der Build-Konferenz erste vorläufige Informationen und in der Zwischenzeit hat Microsoft weitere Details preisgegeben, sodass sich mittlerweile das Bild der verfügbaren Windows-8-APIs vervollständigt hat.
Der Hauptgedanke besteht darin, dass die meisten bestehenden APIs auch weiterhin verwendet werden dürfen. So wird beispielsweise die Windows-API von allen Metro-Applikationen gemeinsam genutzt und zwar unabhängig davon, ob man traditionell in C#, C++, Visual Basic programmiert oder eben den moderneren Ansatz mit HTML5, CSS3 und Javascript verfolgen möchte.
Und schließlich gibt es außerdem auch die DOM-API, die man dazu einsetzen kann, um innerhalb des HTML-Markups in einer jeweiligen Metro-Applikation zu navigieren.
Dunkle und helle UIs
Bei der Erstellung einer neuen Metro-Applikation stehen dem Entwickler fünf verschiedene Projekttypen zur Verfügung: Blank Application, Grid Application, Split Application, Fixed Layout Application und Navigation Application.
Wer seine HTML5-Kenntnisse voll zur Geltung bringen möchte und einen möglichst großen kreativen Freiraum wünscht, der ist mit ersterer Variante, der so genannten Blank Application, am besten bedient, weil sich hier am meisten ändern lässt. Wer hingegen mit minimalem Eigenaufwand ins Ziel gelangen will, für den sind die letzten vier Varianten gedacht.
Bei der Erstellung eines neuen Metro-Projektes referenziert Visual Studio die Dateien default.html, default.js, ui-light.css beziehungsweise dark-ui.css in der Datei default.html automatisch. Bei der Datei default.html handelt es sich um die Startseite der Applikation. Die Datei default.js legt das Verhalten der Applikation nach dem Start fest. Das Stylesheet default.css beinhaltet die Formatvorlagen.
Da die Standardvorlagen nicht unbedingt den Vorstellungen von Webdesignern entsprechen müssen, sind auch Photoshop-Vorlagen für Windows-8-Applikationen zum Download verfügbar, die sich sowohl unverändert als auch natürlich als Ausgangspunkt für eigene Kreationen nutzen lassen [5].
Dunkle UIs in Desktop- wie in mobilen Applikationen sind neuerdings stark in Mode gekommen. Ein prominentes Beispiel bietet unter anderem das aktuelle Photoshop CS6, eine Applikation, die erstmals in der aktuellen Version standardmäßig über eine dunkle Benutzeroberfläche verfügt.
Als Tipp sei erwähnt, dass auch Programmierer von Metro-Apps diesem Trend leicht Rechnung tragen können, indem sie die entsprechend angepassten CSS-Dateien verwenden (ui-dark.css beziehungsweise ui-light.css).
CSS 3-Grid-Layouts
CSS3-basierte Grid-Layouts sind besonders gefragt und diesem Trend trägt auch Windows 8 Rechnung. Anders als gewöhnliche Webdesigner und -entwickler müssen sich die Entwickler von Metro-Applikationen keine Gedanken machen, ob ein CSS3-Quelltext plattformübergreifend auf allen relevanten Browsern funktioniert.
Eigentlich wäre dies der richtige Weg, den Microsoft einschlagen sollte, doch ähnlich wie während der Browser-Kriege der 90er Jahre kocht heute auf der einen Seite Apple mit Google ein Webkit-basiertes Süppchen und Microsoft nutzt die hauseigene Trident Rendering Engine von Internet Explorer 10 unter Windows 8.
Zwar trägt es leider nicht zur W3C-konformen Standardisierung von CSS3-basierten Grids bei, aber zumindest ist das Verhalten für alle Entwickler von Metro-Applikationen vorhersehbar und funktioniert (meistens) zuverlässig. Im Quelltext könnte so ein CSS3-Grid einer Metro-Applikation wie folgt aussehen:
#contentGrid {
display: -ms-grid;
-ms-grid-rows: 1fr 1fr;
-ms-grid-columns: 66% 66%;
}Hierbei gilt es zu beachten, dass die display-Eigenschaft unbedingt auf ms-grid gesetzt sein muss, also
display: -ms-grid;Und mittels der Eigenschaften -ms-grid-rows und -ms-grid-columns gilt es, die Dimensionen des Rasters festzulegen. Hierbei besteht die Freiheit darin, entweder Einheitenbruchteile (also fr für fractional units), Prozenteinheiten oder weniger elegant - weil das resultierende UI starr und unflexibel ist - auch feste Einheiten zu nutzen.
Zudem hat es sich bei den bisher verfügbaren Metro-Applikationen als Konvention eingebürgert, dass der Arbeitsbereich der Applikation immer breiter ist als der jeweilige Bildschirm. Insofern verbietet sich damit praktisch der Einsatz absoluter Einheiten. Der Anwender kann dadurch immer von links nach rechts scrollen. Üblicherweise ist die verwendete Breite entsprechend größer als 100 Prozent, etwa 120 oder 140 Prozent.
Verhalten in Javascript
Zu den wichtigsten Dateien, die Visual Studio erzeugt, zählt die default.js-Datei, die unter anderem in der default.html-Datei referenziert wird. Im Quelltext könnte es dann beispielsweise wie folgt aussehen:
(function () {
"use strict";
var app = WinJS.Application;
app.onactivated = function
(eventObject) {
if (eventObject.detail.kind ===
Windows.ApplicationModel.Activation.
ActivationKind.launch) {
if (eventObject.detail.
previousExecutionState !==
Windows.ApplicationModel.Activation.
ApplicationExecutionState.terminated) {
// die neu gestartete Applikation
wird initialisiert
} else {
// Die Applikation wurde aus dem sog.
Suspension-Zustand heraus wieder aktiviert
// Nun gilt es den Applikationsstatus
wiederherzustellen
}
WinJS.UI.processAll();
}
};Entwicklung mit jQuery
Webdesigner können ihr bestehendes Javascript-Know-how meist direkt auf die Entwicklung von Metro-Applikationen anwenden. Es steht Ihnen auch frei, Ihre bevorzugte Javascript-Bibliothek wie jQuery zu verwenden. In der Regel funktioniert die Zusammenarbeit zwischen jQuery und Metro reibungslos, doch in einigen Ausnahmefällen verhält sich die Metro-Umgebung anders als gewöhnliche Browser.
Als Beispiel sei hier das ready-Event genannt. In Metro gilt es direkt auf die sogenannten Live-Cycle-Ereignisse zu reagieren und sich hierbei nicht auf jQuery zu verlassen.
Gleiches gilt für asynchrones Laden von Skripten. Auch auf diese jQuery-Funktion sollte man in Metro lieber verzichten und stattdessen das reguläre script-Element nutzen.
Doch es gibt auch noch weitere Stolperfallen, denen man aus dem Weg gehen sollte. So empfiehlt es sich unter anderem, auf jQuery UI und jQuery Mobile zu verzichten, um Probleme mit Metro zu vermeiden. Machen Sie sich zuerst mit der WinJS-API eingehend vertraut, bevor Sie auf externe Javascript-Bibliotheken vertrauen, die in Ausnahmefällen zu unerwarteten Nebeneffekten führen können.
Fazit
Webdesigner, deren Hauptschwerpunkt auf HTML5, CSS3 und Javascript liegt, können dank Metro ihr Know-how der Websprachen nutzen, um Applikationen zu entwerfen, die sowohl auf Smartphones und Tablets als auch auf dem Desktop laufen.
