Änderungen für App-Entwickler seit der //build/ (Teil 1)

Entwicklerblog für Windows 8-Apps

Ein Einblick in die Entwicklung von Apps im Metro-Stil – präsentiert vom Windows 8-Entwicklerteam

Änderungen für App-Entwickler seit der //build/ (Teil 1)

  • Comments 0

Consumer Preview ist nun verfügbar, und ich hoffe, Sie stellen fest, was wir geleistet haben. Unser Entwicklerteam hat seit der //build/ hart gearbeitet. Wir haben Ihr Feedback berücksichtigt und damit unsere Entwicklungsplattform verbessert. Gleichzeitig haben wir vielen Plattformfunktionen den letzten Schliff verpasst, die Ihnen noch nicht bekannt sind.

Neben der eigentlichen Arbeit an Windows haben wird seit der //build/ auch die Visual Studio-Tools erheblich verbessert. Zudem wurden Verbesserungen für die Entwicklung von Apps im Metro-Stil und andere Szenarien umgesetzt. Thema dieses Beitrags ist das Entwickeln im Metro-Stil. Wenn Sie an anderen VS-Features interessiert sind, empfehle ich als Einstieg den Blog von Jason Zander.

Wir wissen, dass auch Sie beschäftigt waren. Sie haben mehr als 5000 verschiedene Threads in den MSDN Developer Preview-Foren gestartet und beinahe 30.000 Beiträge gepostet. Dank unserer Telemetrie wissen wir, dass Sie auch Visual Studio verwendet haben, um unsere Entwicklungsplattform zu testen. Sie haben seit September Tausende von App-Paketen erstellt.

Damit komme ich zum eigentlichen Thema. Welche Änderungen erwarten Sie beim Erstellen von Apps in der Consumer Preview? Eines unserer Hauptziele für die Consumer Preview bestand darin, Windows für Sie als Entwickler zu einer besseren Plattform zu machen. Wir haben die Nutzung der APIs vereinfacht und Standardsteuerelemente für die Benutzeroberfläche im Metro-Stil erstellt. Die Tools wurden verbessert, um Ihnen Produktivitätsvorteile zu verschaffen und die Entwicklung schneller und flüssiger Apps zu fördern. Zudem haben wir brandneue Features eingeführt, damit Sie den Funktionsumfang von Windows und die Leistung der Hardware noch besser ausschöpfen können.

In diesem zweiteiligen Beitrag möchte ich einige Aspekte der entscheidenden Arbeiten hervorheben, die zur weiteren Verbesserung der Plattform und Tools in der Consumer Preview beigetragen haben. Wir haben einige neue Funktionen hinzugefügt und vorhandene Features verbessert, um Sie bei der Entwicklung von Apps im Metro-Stil zu unterstützen. Wir hoffen, dass Ihnen die Änderungen gefallen.

DX-Unterstützung in XAML

„Wir müssen äußerst schnell mit DirectX rendern können ... Außerdem möchten wir die Benutzeroberfläche im Metro-Stil nutzen, sodass wir nicht die gesamte Benutzeroberfläche von Grund auf in DirectX schreiben müssen.“
– Entwickler von Apps im Metro-Stil

Dieser Aspekt kam nach der Veröffentlichung der Developer Preview immer wieder auf. Entwickler äußerten den Wunsch, das Hochleistungsrendering im unmittelbaren Modus für DirectX mit der umfangreichen Interaktivität, dem Steuerungsmodell und den Entwurfszeitoptionen von XAML zu kombinieren.

Wir haben zugehört. In der Consumer Preview können Sie nun XAML und DirectX 11 problemlos in dieselbe App im Metro-Stil integrieren, um eine schnelle und flüssige Oberfläche zu erstellen. So können Sie nun beispielsweise beim Entwickeln eines DirectX-Spiels für die Eingabeverarbeitung, den Aufbau von Grafiken für Heads-Up-Displays und -Menüs oder die Bindung an das Datenmodell Ihrer App XAML verwenden.

Hierfür haben wir drei neue XAML-Typen mit jeweils unterschiedlichen Funktionen hinzugefügt, um eine Vielzahl von DirectX-Interoperabilitätsszenarien zu unterstützen:

  • SurfaceImageSource ermöglicht das vollständige Einbinden von DirectX-Inhalten in eine XAML-App. Dadurch können DirectX-Inhalte in der visuellen Struktur von XAML dargestellt werden. Dies ist für komplexe Bildeffekte, Datenvisualisierungen und andere Zeichnungsszenarien im unmittelbaren Modus nützlich.
  • VirtualSurfaceImageSource wird für virtualisierte Inhalte in großem Maßstab verwendet. Hiermit zielen wir auf Apps ab, die das Verschieben und Vergrößern umfangreicher Inhalte erfordern, z. B. Karten und Dokument-Viewer.
  • SwapChainBackgroundPanel zielt auf den Vollbildmodus in DirectX-Szenarien ab. Dies eignet sich ideal für Spiele und andere DirectX-Apps mit Vollbildanzeige, geringer Latenz und XAML-Überlagerung.

Hierbei handelt es sich um wirklich leistungsstarke Funktionen. Nutzen Sie die volle Grafikleistung von DX zusammen mit der Einfachheit von XAML. Wenn Sie an diesen neuen Möglichkeiten ebenso interessiert sind, wie wir, sehen Sie sich unser DirectX- und XAML-Lernprogramm auf MSDN an.

Dort finden Sie auch einige Beispiel-Apps:

Blend und die Visual Studio-Designer

XAML

Wir haben noch mehr gute Neuigkeiten. Visual Studio Beta beinhaltet nicht nur Blend für HTML, sondern auch eine frühe Vorschau von Blend für XAML. Eine Blend-Version unterstützt nun sowohl Designs in HTML als auch in XAML – Sie müssen lediglich den gewünschten Projekttyp auswählen. Blend für XAML unterstützt neben Animationen auch die Bearbeitung visueller Zustände, um Ihnen bei Ihren Apps im Metro-Stil zu helfen.

Vollbildanzeige des Blend-Designers für XAML, in dem Sie Schaltflächeneigenschaften bearbeiten können

Der neue Blend-Designer für XAML, eine Komponente der Visual Studio-Tools

In Visual Studio unterstützt der XAML-Designer nun das Bearbeiten von Steuerelement- und Datenvorlagen. Zudem bietet er verbesserte Unterstützung für die Steuerelemente von Apps im Metro-Stil, z. B. SemanticZoom, GridView und AppBar.

Vorschau eines XAML-Layouts in Visual Studio.  Die Designeransicht befindet sich im Hauptansichtsbereich, und die entsprechenden XAML-Markups werden im Bereich darunter angezeigt.

Nutzen Sie den XAML-Designer direkt in Visual Studio

HTML

Blend für HTML verfügt über eine Vielzahl von Verbesserungen zum Erstellen von HTML-Apps.

Das HTML-Steuerelement ListView im Blend-Designer für HTML. Die ListView-Benutzeroberfläche wird im Hauptansichtsbereich angezeigt. Die für das Erstellen und das Layout der Steuerelemente verwendeten HTML- und CSS-Markups befinden sich in separaten Bereichen darunter.

Nutzen Sie die erweiterten Funktionen des Blend-Designers für HTML

Unter anderem haben wir die Änderungsmöglichkeiten für Steuerelemente von Apps im Metro-Stil um die interaktive Bearbeitung von Datenvorlagen für ListView erweitert. Zudem können Sie nun HTML-Fragmente an Ort und Stelle direkt auf der Seite bearbeiten, auf der sie verwendet werden, und zudem so umfassend verschachteln, wie erforderlich. Zudem bieten der CSS-Eigenschafteninspektor und der HTML-Attributbereich viele Produktivitätsverbesserungen, darunter das Hervorheben von Werten, die von JavaScript überschrieben wurden.

Starten Sie nach dem Herunterladen von Visual Studio die Designer, und testen Sie einige dieser Verbesserungen selbst.

Windows-Bibliothek für die JavaScript-Navigation

Auch der Windows-Bibliothek für JavaScript (WinJS) haben wir einige Aufmerksamkeit zukommen lassen. So haben wir (neben vielen anderen Verbesserungen) das Navigationsmodell vereinfacht. In den VS-Vorlagen auf der //build/ wurden die WinJS.UI.Fragments-APIs explizit aufgerufen, um neue HTML-Abschnitte (Fragmente) zur Laufzeit dynamisch in das DOM zu laden. Beim Fragmentladeprogramm handelte es sich jedoch um eine API auf sehr niedriger Ebene, für die die Vorlagen zudem eine Menge an ziemlich komplexen Codebausteinen enthalten mussten, damit das eigentliche Szenario fertig gestellt werden konnte.

Wenn Sie versucht haben, den mit den Developer Preview-Vorlagen generierten Code zu verwenden, wissen Sie, dass dies kompliziert werden kann.

  • Der Code war schwer zu lesen und zu verwenden.
  • Sie mussten den Code schreiben, mit dem die Fragmentinitialisierung gestartet wurde.
  • Sie mussten WinJS-Steuerelemente auf der neuen Seite initialisieren.
  • Der Zustand der einzelnen Seiten war nur schwer nachzuverfolgen.

Als Reaktion auf Ihr Feedback haben wir ein neues Feature entwickelt, das diese Aufgaben vereinfacht: Seitensteuerelemente.

Seitensteuerelemente sind dem Fragmentladeprogramm übergeordnet und fügen die Elemente auf höherer Ebene ein, die für eine einfache Einzelseitennavigation erforderlich sind:

  • Einen klar definierten Erstellungszyklus
  • Einen klar definierten Datenbereich
  • Die automatische Aktivierung von WinJS-Steuerelemente zum richtigen Zeitpunkt
  • Die automatische Überordnung von Inhalten im DOM
  • Eine einfacher les- und nutzbare API

Im Rahmen dieses Vorgangs generieren die VS-Projektvorlagen zudem die neue Datei „navigator.js“, in der die gesamte Navigation der oberen Ebene für Ihre App gekapselt wird. Diese wird als benutzerdefinierte WinJSControl mit dem Namen PageControlNavigator erstellt. Der Navigationscode in dieser Datei ist wesentlich einfacher als derjenige in den Developer Preview-Vorlagen.

Weitere Informationen zum neuen Navigationsmodell finden Sie unter:

DRM-Unterstützung

Bislang war das Entwickeln einer Windows-App mit einer Unterstützung für DRM-Inhalte eine ziemliche Herausforderung. Als Entwickler mussten Sie sich mit den DRM-Technologien für den Schutz Ihrer Inhalte bestens auskennen. Zudem bestehtein strenges Zertifizierungsprogramm, das Ihre App durchlaufen musste, um sicherzustellen, dass die Anforderungen für die DRM-Unterstützung erfüllt sind.

Mit der Veröffentlichung von Silverlight hat Microsoft den gesamten Vorgang wesentlich optimiert. Im Rahmen von Windows 8 übernehmen wir dieses vereinfachte Modell für Apps im Metro-Stil. Wenn Sie bereits über einen Lizenzdienst verfügen, der PlayReady-Lizenzen bereitstellt, können Sie Ihrer App die Unterstützung für PlayReady-DRM-Inhalte schneller und mit weniger Aufwand als bisher hinzufügen, und außerdem können Sie hierfür sowohl HTML, XAML, C++, C# als auch JavaScript verwenden. Damit ist es einfacher als je zuvor, unter Windows eine Umgebung mit vielfältigen geschützten Inhalten aufzubauen.

Um Ihnen dabei zu helfen, haben wir in der Consumer Preview eine neue Oberfläche mit PlayReady-Metro-APIs eingeführt. Mithilfe dieser APIs können Sie in Ihrer App die Wiedergabeunterstützung für PlayReady-DRM-Inhalte rasch implementieren. Anschließend können Sie Ihre Entwicklungsarbeiten anderen hervorragenden Funktionen und einer ansprechenden Benutzeroberfläche widmen. Das SDK für Apps im Metro-Stil ist kostenlos, und Sie müssen Ihre App nicht zwecks DRM-Konformitätstests an PlayReady übertragen. Sie können sich ganz auf beeindruckende Lösungen für Ihre Kunden konzentrieren.

Im folgenden Codeausschnitt wird ein Individualization Service Request (JS) dargestellt:

var indivSr = new Microsoft.Media.PlayReadyClient.PlayReadyIndividualizationServiceRequest();
indivSr.beginServiceRequest().then(indivSrOnComplete, indivSrOnError);

Weitere Informationen zur Unterstützung von PlayReady-DRM-Inhalten in Ihrer App finden Sie in diesem Beispiel auf MSDN.

Unabhängige Animationen

Mit der Developer Preview erhielten Sie Zugriff auf eine umfangreiche Palette an CSS-Animationen, die Sie zum Erstellen eigener großartiger Übergänge in Ihrer in HTML/CSS/JS geschriebenen App im Metro-Stil nutzen konnten. Für die Consumer Preview haben wir diese Animationen erheblich verbessert, indem wir unsere Erfahrungen mit der Hardwarebeschleunigung von IE einbrachten. Nun können die wichtigsten Animationen unabhängig vom Benutzeroberflächenthread vollständig über die GPU ausgeführt werden. Dank dieser unabhängigen Animationen ist das Erstellen schneller und flüssiger Metro-Designs einfacher denn je.

Die Animationsbibliothek von Windows 8 ist darauf ausgelegt, die Vorteile unabhängiger Animationen voll auszuschöpfen. Wenn Sie benutzerdefinierte Animationen erstellen, sollten Sie unabhängige Animationen nutzen, indem Sie nur CSS-Animationen sowie Übergänge von Transformationen und Deckkraft verwenden. 

Beim herkömmlichen Erstellen von Animationen mit JavaScript läuft die Verarbeitung über den Benutzeroberflächenthread. Sie ändern lediglich die Koordinaten des Objekts im DOM, und es wird neu gezeichnet. Dies ist zwar ein recht direkter Ansatz, der jedoch den Benutzeroberflächenthread blockiert und die Arbeitslast der CPU aufbürdet, was kostspielig sein kann. Dies sieht in etwa wie folgt aus:

<script type="text/javascript">
function doAnimation() {
foo.style.left = parseInt(foo.style.left) + 1 + 'px';
if (foo.style.left != '100px')
{ setTimeout(doMove, 20); }
}

function init() {
foo = document.getElementById('fooObject');
foo.style.left = '0px';
doAnimation();
}
</script>

Wenn Sie unabhängige Animationen verwenden, werden diese separat vom Benutzeroberflächenthread erstellt, und die gesamte Verarbeitung erfolgt systemeigen auf der Hardware.

<style>

.doAnimation{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 2s;
-ms-transform: translateX(100px);
}
</style>

Mithilfe dieser Animationen erhalten Sie flüssige, störungsfreie Benutzeroberflächen, da im Benutzeroberflächenthread ausgeführte Skripts keine Auswirkungen darauf haben. Sie müssen keinen zusätzlichen Aufwand investieren oder Markups hinzufügen. Sie verwenden einfach die geeigneten CSS-Animationen, und Windows erledigt den Rest.

Weitere Informationen zu diesen CSS-Animationen finden Sie unter:

Verbesserungen beim Debuggen

Wir sind uns der Bedeutung einer erstklassigen Debugging-Unterstützung für Apps im Metro-Stil bewusst. Daher haben wir eine Reihe von Verbesserungen vorgenommen, um diese Aufgabe zu vereinfachen.

Die Anzahl der C++-Objekte, die Sie in den Überwachungsfenstern prüfen können, wurde erheblich erhöht. Angezeigte COM-Objekte können erweitert werden, um viele erwünschte Eigenschaften und Felder darzustellen. (Um diese hervorragenden Debugging-Features für C++ zu erhalten, laden Sie die Debugsymbole vom Windows-Symbolserver herunter.) Außerdem wurden einige Änderungen für das Überprüfen von Visual Basic- und C#-Objekten vorgenommen.

Vergrößerte Abbildung des Überwachungsfensters für ein C++-Projekt mit einem COM-Beispielobjekt und erweiterten Feldern und Eigenschaften im Überwachungsfenster.

Prüfen von mehr Objekten in den Überwachungsfenstern

Auch das Debuggen der asynchronen Methoden in Visual Basic und C# wurde verbessert. Insbesondere verarbeitet der Debugger nun von asynchronen void-Methoden ausgelöste Ausnahmen als nicht vom Benutzer behandelt, sodass er direkt in die asynchrone void-Methode eingreifen kann. Weiterhin können Sie in C++ nun genauso wie in Visual Basic, C# und JavaScript ausführliche Fehlerinformationen zu WinRT-Ausnahmen anzeigen.

Ein weiterer Punkt, mit dem wir uns beschäftigt haben, ist die Benutzeroberfläche im Zusammenhang mit dem Auslösen von Anhalt-, Neustart- und Herunterfahrereignissen über die Debugspeicherort-Symbolleiste. Sie können nun einen bestimmten Prozess auswählen, durch den das Ereignis ausgelöst werden soll.

Vergrößerte Darstellung der Schaltflächen „Anhalten“, „Neustart“ und „Herunterfahren“ in Visual Studio. Links von den Schaltflächen finden Sie eine Dropdownliste, in der Sie einen Prozess auswählen können, an den Meldungen gesendet werden sollen.

Benutzeroberfläche für das Auslösen von Lebensdauerereignissen für Apps

Seit der //build/ haben wir auch im Simulator einige Features hinzugefügt, z. B.:

  • Verbesserte Grafik mit weniger Zierrat und geringerem Platzaufwand
  • Standortsimulation, sodass Sie Längen- und Breitengrade, Höhe sowie Fehlerbereich eingeben können, um Standortänderungen für das Gerät simulieren können
  • Schnellere Drehung und verbesserte Emulation für die Fingereingabe
  • Unterstützung für eine Auflösung von 1024 x 768
  • Die Möglichkeit, Screenshots der ausgeführten App zu erstellen und in der Zwischenablage oder einer Datei zu speichern


Simulator mit Startbildschirm von Windows 8 und einer schlanken Reihe von Schaltflächen auf der rechten Seite.

Aktualisierte Benutzeroberfläche des Simulators mit weniger Zierrat

In Kürze mehr

Wir haben auf Ihr Feedback gehört, und hoffen, dass Ihnen unsere Umsetzung gefällt. Allerdings haben wir weit mehr ausgearbeitet, als ich in einem Beitrag erläutern kann. Im zweiten Teil dieses Beitrags werde ich einige weitere Änderungen erörtern, darunter Neuigkeiten zum Arbeiten mit Kacheln und Benachrichtigungen, Updates der HTML-/JavaScript-Steuerelemente, Verbesserungen beim Erstellen von Hybrid-Apps und vieles mehr.

-- Jake Sabulsky, Program Manager, Windows

Dieser Beitrag ist in Teamarbeit entstanden. Vielen Dank an: Jesse Bishop, Jonathan Aneja, Chris Tavares, Eric Salerno, Angelina Gambo und Ian LeGrow

  • Loading...
Leave a Comment
  • Please add 2 and 8 and type the answer here:
  • Post