Ein neuer Markt
Webentwickler können mit HTML5, CSS3 und JavaScript native, schöne und performante Anwendungen für Windows 8 schreiben. Genauer gesagt können Webentwickler Metro-Style-Apps für den Metro-Style-Desktop entwickeln und diese über den Windows Store vertreiben. Ein neuer riesiger Markt eröffnet sich und das mit den Mitteln, die man als Webentwickler schon auf dem Kasten hat.
HTML5 als native App
Wie man eine HTML5-App für Windows 8 entwickelt und wie diese eine bestehende JavaScript-Bibliothek nutzt, um zusätzliche Funktionalität anzubieten, lässt sich am einfachsten anhand einer Beispiel-App erklären.
Die App soll ein Foto mit der Webcam des Tablets oder Notebooks aufnehmen und dieses über Bildmanipulations-Algorithmen verändern und speichern. Für die Bildmanipulation kommt Caman.js zum Einsatz. Caman.js ist eine Canvas-Manipulations-Bibliothek mit netten Bildeffekten.
Da stellt sich direkt die Frage:Wie kann man aus JavaScript denn eigentlich eine Webcam ansprechen, geschweige denn andere Funktionen des Betriebssystems nutzen?
Die Windows Runtime
Das ist letztlich über die Windows Runtime möglich. Die Windows Runtime ist ein Satz von einheitlichen APIs die aus C++, C#, Visual Basic und eben auch aus JavaScript genutzt werden können. Das tolle ist, dass man so beide Welten verschmelzen kann: eine Standard-JavaScript-Bibliothek wie Caman.js und die Funktionalität des Betriebssystems.
Die Tools
Windows 8 existiert momentan in der Windows 8 Consumer Preview und kann kostenlos heruntergeladen werden. Zugleich gibt es die Visual Studio 11 Express und Expression Blend 5 Express als Entwicklungswerkzeuge dazu. Möchte man seine Maschine nicht mit Windows 8 bespielen, kann man das ganze auch in einer virtuellen Maschine wie VirualBox laufen lassen. Wer auf einem Mac arbeitet, kann beispielsweise Parallels 7 einsetzen.
Coding Time
Bevor wir anfangen noch ein Hinweis: Gezeigt werden hier nur essentielle Code-Stellen, mehr kann man auf den Windows 8 Camps erfahren. Zuerst benötigt man die Referenzen auf die JavaScript-Bibliotheken, die man verwenden möchte. Hier der Auszug für die externe JavaScript-Bibliothek Caman.js.
<link href="/css/default.css" rel="stylesheet">
<script src="/js/caman.full.js"></script>
<script src="/js/default.js"></script> Die Projektstruktur sieht in Visual Studio nun wie folgt aus:
Die Elemente auf der Seite sind ein Canvas, auf dem man das Foto der Webcam darstellen möchte und rechts eine Liste mit Canvas Elementen, die die einzelnen Bildeffekte als Preview darstellen. Die Definition sieht dann in HTML so aus:
<body>
<h1>Photoffects</h1>
<canvas id="picture" width="750" height="500"></canvas>
<div id="effects" data-win-control="WinJS.UI.ListView"
data-win-options="{ layout: { type: WinJS.UI.ListLayout, maxRows: 1 }}"
style="visibility: hidden;">
</div>Hier sieht man auch die Integration von nativen Controls in das HTML-Dokument. Über das Erweiterungsattribut data-* erkennt das System das in diesem <div> Element ein ListView Control gerendered werden soll.
Das Foto aufnehmen
Die Aufnahme des Fotos ist nun mit dem Zugriff auf die Windows Runtime möglich. Die Windows Runtime ist über Namensbereiche organisiert und bringt eine Vielzahl an Funktionalität mit, die man aus JavaScript heraus direkt ansprechen kann. So auch eine Kamera-API.
Hier nun der Code, um die Webcam anzusprechen und ein Foto zu machen:
function captureImage() {
var dialog = new Windows.Media.Capture.CameraCaptureUI();
var aspectRatio = { width: 3, height: 2 };
dialog.photoSettings.croppedAspectRatio = aspectRatio;
dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (file) {
if (file) {
document.getElementById("effects").style.visibility = "visible";
var takenPictureUrl = URL.createObjectURL(file);
var img = new Image();
img.width = 750;
img.height = 500;
img.onload = function () {
picture.drawImage(img, 0, 0, 750, 500);
currentSnapshot = img;
generatePreviewThumbnails();
};
img.src = takenPictureUrl;
}
});
}Bild mit Caman.js manipulieren
In dem Code wird die Funktion „generatePreviewThumbnails()“ aufgerufen, die über Caman.js die verschiedenen vordefinierten Effekte für die Effektvorschau nutzt. Die Funktion iteriert über eine Liste von Effekten und wendet diese auf den Preview Canvas an:
function generatePreviewThumbnails() {
var n = 0;
availableEffects.forEach(function (item) {
var itemElement = effects.elementFromIndex(n);
var canvas = itemElement.querySelector("canvas");
var surface = canvas.getContext("2d");
surface.drawImage(currentSnapshot, 0, 0, 240, 160);
item.effectFunction(canvas);
n++;
});
}Die Effekte sind in einem Array abgelegt, dort ist auch die jeweilige Funktion hinterlegt, die den Effekt anwendet. Hier Ein Auszug aus dem Array:
var availableEffects = [
{
name: "Grunge",
effectFunction: function (elementId) {
Caman(elementId, function () {
this.grungy();
this.render();
});
}
},
##
{
name: "Sin City",
effectFunction: function (elementId) {
Caman(elementId, function () {
this.sinCity();
this.render();
});
}
},Die laufende App
Mit all den nötigen Funktionen kann die Anwendung auch auf dem Desktop durch die Auswahl des grünen Tiles gestartet werden.
Die Foto-Funktion aus der Windows Runtime öffnet einen eigenen Dialog zum Aufnehmen des Bildes. Hier sind noch zusätzliche Funktionen wie Cropping oder zeitversetztes Aufnehmen enthalten.
Nach der Aufnahme rendert die Anwendung die Thumbnails mit den verfügbaren Effekten, und nach Auswahl des Effektes wird dieser auf das aufgenommene Bild angewendet. In diesem Fall der Sin-City-Effekt.
Bereit für Windows 8?
Als Webentwickler hat man alle notwendigen Grundlagen, um Metro-Style-Apps für Windows 8 zu schreiben. Microsoft bietet hier eine Reihe an kostenlosen Veranstaltungen an, um das notwendige Wissen über die Möglichkeiten von Windows 8, das Metro UI Design und dem Windows Store zu vertiefen. Hier stehen drei Stufen zur Verfügung: Erstens einführende Veranstaltungen, die Windows 8 Wissen aufbauen, zweitens vertiefende Trainings, in denen verstärkt auf die einzelnen Bereiche mit praktischen Coding-Beispielen eingegangen wird und zu guter Letzt die App Excelence Labs.
App Excelence Labs - was ist das eigentlich?
In den App Excellence Labs helfen Windows-8-Experten von Microsoft dabei, Apps in Bezug auf UI/UX, Performance-Optimierung sowie technischer Problemlösungen/Debugging den letzten Schliff zu verleihen. Nach Abschluss bekommt jeder Teilnehmer ein sogenanntes Token, das die Veröffentlichung der App im Windows 8 Beta Store ermöglicht. Die Labs finden ab Mitte April in verschiedenen Städten statt. Die Dauer schätzt Microsoft auf rund 3,5 Stunden pro Lab.
Die Vorteile einer Teilnahme am App Excellence Lab sind vielfältig: Zum einen natürlich der kostenlose persönliche Premium-Support während des Labs, dann die Möglichkeit sich kostenlos im Windows 8 Store zu registrieren, sich einen App-Namen vormerken und schließlich bereits während der Consumer-Preview-Phase von Windows-8-Apps veröffentlichen zu können. Nicht zu vernachlässigen ist dabei natürlich die einmalige Chance, einer der ersten App-Publisher für Windows 8 weltweit zu sein – größer kann die Sichtbarkeit für eine eigene App und ein Unternehmen nicht sein.
Um an einer Lab teilzunehmen, muss zum vereinbarten Termin eine erste Version der Anwendung vorliegen und man muss durch Microsoft nominiert werden. Wenn Sie Interesse an einer Nominierung haben oder vielleicht sogar schon eine erste Version Ihrer Metro-Style-App für Windows 8 vorweisen können, dann zögern Sie bitte nicht uns direkt unter win8de@microsoft.com zu kontaktieren.
Weitere Informationen zu diesem Lab und den Trainings findet man hier.
