Erschaffe eine neue Welt!

Erste Schritte mit WinRT (Teil 2)
Kommentare

Windows Developer

Der Artikel „Erschaffe eine neue Welt“ von Gregor Biswanger ist erstmalig erschienen im Windows Developer 4.2012
Get started
Microsoft veröffentlichte eine kostenfreie Vorabversion

Windows Developer

Der Artikel „Erschaffe eine neue Welt“ von Gregor Biswanger ist erstmalig erschienen im Windows Developer 4.2012

Get started

Microsoft veröffentlichte eine kostenfreie Vorabversion für Entwickler (Windows 8 Developer Preview) [1]. Sie gibt es in unterschiedlichen Varianten zum Download. Einmal eine komplette ISO-File, in der Windows 8 mit Microsoft Visual Studio 11 Express Beta und Microsoft Expression Blend 5 (Beta) installiert ist. Dasselbe gibt es auch einzeln zum Herunterladen. Jedoch lassen sich bei einer einzelnen Installation der jeweiligen Produkte keine Metro-Style-Apps-Projekte anlegen. Dieser Bug sollte jedoch mit der im Februar erwarteten Betaversion nicht mehr existieren.

Um einmal zu verdeutlichen, wie einfach die Entwicklung für Windows 8 ist, wird im folgenden Beispiel eine Twitter App programmiert. Dazu muss die bereits erwähnte ISO-Datei Windows 8 Developer Preview with developer tools (English, 64 Bit) unter [1] heruntergeladen und mit einer virtuellen Maschine (z. B. VMWare Player) eingerichtet werden. Wenn Windows 8 mit seinem neuen Startbildschirm geladen wurde, klicken Sie einfach auf VISUAL STUDIO. Die MetroUI wird sofort mit der Suche beginnen und das Icon zu Visual Studio 11 Express Beta anbieten.

Nach dem Start von Visual Studio klicken Sie auf NEW PROJECT, dann wird nach der Entwicklungssprache C# die neue Projektvorlage WINDOWS METRO STYLE ausgewählt. Nun stehen einige Vorlagen zur Auswahl bereit. Die Erste mit Application steht für eine einfache, auf Standard definierte Metro Style App. Bei der nächsten Vorlage Grid Application handelt es sich um ein fertiges Projektbeispiel, in dem Kacheln mit Beispieldaten hinterlegt sind. Diese Kacheln sind zu Detailseiten verlinkt. Es dient als Projektbeispiel mit integrierter Navigation. Bei der dritten Vorlage Splitt Application wird ebenfalls ein Projektbeispiel mit Kacheln und parallel die passende Detailseite auf einem Bildschirm angeboten. Bei der vierten Projektvorlage Class Library handelt es sich lediglich um ein Assembly-Projekt, das zur komponentenorientierten Entwicklung dient. Die letzte Vorlage Unit Test Library bietet ein Assembly-Projekt mit integriertem MSTest Framework zuzüglich TestPlatform.

Für das folgende Beispiel wird eine Standard Windows Metro App mit dem Projektnamen WinRTTwitterExample angelegt (Abb. 2 und 3). Anschließend wird in der Designansicht eine leere, schwarze Oberfläche dargestellt. Interessant ist auch die angelegte Projektstruktur im Solution Explorer. Die Beschreibung der einzelnen Elemente finden Sie in Tabelle 1. Der nächste Schritt wäre jetzt das Schmücken der Oberfläche. Es soll möglich sein, dass ein Twitter-Username eingegeben wird und dessen Tweets mittels OK-Button in einer ListBox geladen werden. Dazu wird die Oberfläche um eine TextBox, einen Button und eine ListBox erweitert. Diese Steuerelemente sind wie gewohnt unter der Toolbox in Visual Studio zu finden. In der TextBox wird der Standardtext entfernt und der Button bekommt den Content „OK“. Dann werden die Namen der einzelnen Elemente wie folgt abgeändert: Die TextBox erhält den Namen „Username“ und die ListBox „TweetsBox“. Die Oberfläche der App sollte nun wie unter Abbildung 4 aussehen.

Abb. 2: Ein neues Metro-Style-App-Projekt anlegen
Abb. 2: Ein neues Metro-Style-App-Projekt anlegen
Abb. 3: Neues Metro-Style-Projekt unter Visual Studio 11 Express CTP
Abb. 3: Neues Metro-Style-Projekt unter Visual Studio 11 Express CTP
Tabelle 1: Projektstruktur einer Metro Style App

Element Beschreibung
AssemblyInfo (.vb oder .cs) Die Datei enthält Metadaten wie den Namen und die Version, die anschließend in die Assembly generiert werden. Diese Datei gibt es nur für C#- oder Visual-Basic-.NET-Projekte.
Package.appxmanifest Hier werden ebenfalls Informationen wie Name, Beschreibung, Logos und benötigte Systemfunktionen beschrieben (Metadaten). Die MetroUI kann somit die wichtigsten Informationen zur Metro Style App entnehmen.
Images Dieses Verzeichnis enthält ein Standardlogo, Splashscreen und ein Covericon. Sie können durch eigene Dateien mit dem gleichen Namen ersetzt werden.
App.xaml/App.xaml.* (.vb, .cs, .cpp) Definieren den Einstiegspunkt der Anwendung, initialisieren die Hauptseite und stellen anwendungsweite Ressourcen bereit.
MainPage.xaml/MainPage.xaml.* (.vb, .cs, .cpp) Die als Standard definierte Hauptstartseite.
Abb. 4: Die Oberfläche mit neuen Elementen
Abb. 4: Die Oberfläche mit neuen Elementen

Um beim Betätigen des Buttons eine Logik ausführen zu können, muss nun ein Click-Event abonniert werden. Allerdings bietet WinRT auch ein Tapped-Event. Das Besondere am Tapped-Event unter WinRT ist, dass er nicht nur auf die Fingereingabe, sondern auch auf den normalen Mauszeiger reagiert. Für eine bessere Kompatibilität wird hierbei das Tapped-Event vom XAML aus abonniert (Listing 1). Beim Deklarieren im XAML wird durch bestätigen der Tab-Taste eine neue Methode in der Code-Behind-Datei erzeugt. Zu beachten ist, dass im Normalfall bei der Entwicklung von XAML keine Logik in der Code-Behind-Datei hinterlassen wird. Dazu wird ein Entwurfsmuster MVVM (ModelView ViewModel) empfohlen. Jedoch wird in diesem Beispiel für eine bessere Übersicht beim Einstieg der neuen Technologie auf das MVVM verzichtet.

Listing 1


  
    
    
      
      

Jetzt muss beim Klick des Buttons eine Datenabfrage bei Twitter erfolgen. Twitter ist für Entwickler angenehm offen und bietet dafür einen öffentlichen Web Service an. Für einen Web-Service-Aufruf wird unter .NET ein Proxy benötigt. Für die einfache Abfrage reicht ein leichtgewichtiger Proxy, der von der Klasse HttpClient bereitgestellt wird. Die Kommunikation zum Web Service folgt, wie gewohnt, immer asynchron. Dennoch gibt es ab WinRT einen Unterschied: Die asynchronen Methoden bieten kein zusätzliches Event an, wenn die Serverantwort erfolgt. Denn WinRT setzt auf das neue C#-5.0-Async-Feature, in dem jede Async-Methode genau an ihrer Aufrufstelle fortgesetzt wird. Ein asynchroner Aufruf wird somit verschleiert und die Logik fühlt sich synchron an. Damit das neue Feature verwendet werden kann, sind ein paar Regeln zu beachten: Die Methode, die innerhalb einen asynchronen Aufruf tätigt, muss das neue async-Schlüsselwort enthalten. Dann erkennt man eine von Async unterstützte Methode daran, dass sie Task als Rückgabetyp gibt. Diese ruft man wie gewohnt auf, bis auf eine zusätzliche Deklaration vom Schlüsselwort await. Den Sourcecode zum Aufruf finden Sie in Listing 2.

Listing 2

partial class MainPage
{
  public MainPage()
  {
    InitializeComponent();
  }
  private async void Button_Tapped(object sender, Windows.UI.Xaml.Input.TappedEventArgs e)
  {
    HttpClient proxy = new HttpClient();
    var result = await proxy.GetAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + Username.Text));
  }
}  
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -