April 25, 2012
Auf der letztjährigen //build Konferenz in Anaheim wurde Windows 8 das erste Mal der Entwicklergemeinde offiziell vorgestellt und in Form der Windows 8 Developer Preview konnte man gleich praktische Entwicklererfahrung sammeln. Das war letzten September und in der Zwischenzeit hat sich einiges getan. Die Consumer Preview von Windows 8 ist verfügbar und die Windows 8 Release Preview für Anfang Juni bereits angekündigt. Mit der Consumer Preview von Windows 8 stehen dem Entwickler Visual Studio 11 Express Beta und Blend für Visual Studio 11 Beta zur Verfügung. Mit diesen Tools lassen sich Windows 8 Metro Style Apps entwickeln und in den Windows Store publizieren.
WinRT als Grundlage
Die WinRT APIs sind die Basis und zentrale Schnittstelle zum Betriebssystem für die Entwicklung einer Metro Style App. Ob Dateizugriff, Zugriff auf XML Dokumente, Sensoren, Netzwerkzugriff, etc…, die WinRT bietet Anwendungsentwicklern die entsprechende Funktion in einer einheitlichen API. Einheitlich in der Form, das es die gleiche API für C++, C#, Visual Basic oder JavaScript ist.
Ein Beispiel soll hier den Zugriff auf die WinRT verdeutlichen. Die Webcam lässt sich über die WinRT Klasse Windows.Media.MediaCapture.CameraCaptureUI ansprechen. Der folgende C++ Code spricht die Kamera genauso an
using namespace Windows::Media::Capture;
...
auto cam = ref new CameraCaptureUI();
task<StorageFile^>( cam->CaptureFileAsync( CameraCaptureUIMode::Photo )).then([this](StorageFile^ file)
{
task<IRandomAccessStream^>( file->OpenAsync(Windows::Storage::FileAccessMode::Read)).then([this](IRandomAccessStream^ stream)
{
BitmapImage^ image = ref new BitmapImage();
image->SetSource(stream);
photo->Source = image;
});
});
wie der nachfolgende JavaScript Code
var capture = Windows.Media.Capture;
...
var dialog = new capture.CameraCaptureUI();
dialog.captureFileAsync( camera.CameraCaptureUIMode.photo ).then( function( file ) {
imageElement.src = URL.createObjectUrl(file);
});
Bestehendes Know-How nutzen
Richtig! Es ist vollkommen egal ob man Windows 8 Metro Style Apps mit C++ oder mit JavaScript schreibt. Mit beiden Sprachen hat man die Möglichkeit eine Metro Style App zu schreiben die in Funktion der anderen in nichts nachsteht. Nun, ganz so ist es nicht, da man mit der Oberflächenvisualisierung die ein oder andere Möglichkeit mehr hat. Denn aufbauend auf der WinRT kommt nun die Visualisierungstechnologie zum Zuge. Das ist im Falle von C++ zum Beispiel DirectX oder auch XAML, das ebenso die verwendete Technologie für C# und Visual Basic ist. Nutzt man JavaScript hingegen kann man mit HTML5 und CSS3 bestehendes Webentwickler Know-how anwenden.
Metro Style Apps mit XAML
Hat man Beispielsweise C# und Silverlight oder WPF Know How so liegt es nahe eine Metro Style App mit XAML und C# zu bauen. Es sind die gleichen Techniken und Entwurfsmuster die hier zum Einsatz kommen.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
Das ist die Defintion der Überschrift samt Back-Buttons aus dem Visual Studio Default Grid Projekt Template. Das ist XAML, das XAML das WPF und Silverlight Entwickler kennen und lieben. Und liebgewonnene Entwurfsmuster wie das populäre MVVM (Model-View-ViewModel) können auch weiter verwendet werden. Unter Umständen lassen sich auch bestehende View Modelle aus Projekten übernehmen.
Metro Style Apps mit HTML5
Webentwicklern steht eine neue Welt offen. Mit den bisherigen Kenntnissen zu HTML5, CSS3 und JavaScript lassen sich nun Windows 8 Metro Style Apps schreiben. Auch populäre Frameworks wie z.B. jQuery lassen sich nutzen und weiterverwenden. Ein weiterer Satz an Funktionalitäten kommt in Form der WinJS. Die WinJS ist eine JavaScript Bibliothek die hilfreiche Funktionalität anbietet und auch visuelle Animationen und Controls und weiteres beherbergt. Mit der WinJS verwandeln sich Standard div Elemente in Windows 8 konforme Steuerelemente.
<div id="template" data-win-control="WinJS.Binding.Template">
<div class="item">
<h2 data-win-bind="textContent: title"></h2>
</div>
</div>
<div class="myList" data-win-control="WinJS.UI.ListView"></div>
Das obige HTML Fragment definiert zuerst ein Template und ein weiteres div Element das ein ListView Control gefüllt mit Daten wird wenn der folgende JavaScript Code ausgeführt wird
onready: function( element, options ) {
var list = new WinJS.Binding.List([
{ title: "Artikel 1" },
{ title: "Artikel 2" },
{ title: "Artikel 3" }
]);
var template = document.getElementById("template");
var listView = document.querySelector(".myList").winControl;
WinJS.UI.setOptions(listView, {
itemDataSource: list.dataSource,
itemTemplate: template
});
}
Ein paar Zeilen HTML und JavaScript lassen eine Liste mit Daten auf dem Bildschirm erscheinen.
Am Horizont: Der Windows Store
Egal in welcher Sprache man seine eigene Metro Style App entwickelt aus Visual Studio heraus hat man direkt die Möglichkeit die Anwendung in den Windows Store zu publizieren. Man benötigt dazu einen Developer Account der für den Windows Store freigeschalten ist. Wie man an einen solchen Account in der momentanen pre-release Phase kommt ist hier im Detail beschrieben.
Eine Reise beginnt
Selbst wenn man noch nicht mit dem Gedanken gespielt hat Windows 8 Metro Style Apps zu entwickeln, mit den heutigen Know-how rund um Silverlight / WPF oder HTML5 / CSS3 besitzt Ihr bereits die Grundlage technisch für die Windows 8 Platform Metro Style Apps zu schreiben. Es fehlen nur noch die letzten 20%, das kennen lernen der Plattform, der Möglichkeiten, um diese in eine gute App Idee umzusetzen.
