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

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 2)

  • Comments 0

Wie versprochen, erhalten Sie heute weitere Informationen zu unseren Fortschritten seit der //build/. In Teil 1 dieses Beitrags, ging es um DirectX- und XAML-Integration, Verbesserungen an den Blend-Designern, unabhängige CSS-Animationen und mehr. Bestimmt sind Sie gespannt auf weitere Neuigkeiten – hier sind sie:

Kachel- und Popupbenachrichtigungen

Kacheln und Popups sind wesentliche Bestandteile der Entwurfsgrundlagen des Metro-Stils. Mit ihnen können Sie wichtige Informationen auf einen Blick erfassen, selbst wenn die App nicht ausgeführt wird. Wir haben von Ihnen umfassendes Feedback zur Entwicklung der Kachel- und Popupbenachrichtigung erhalten, wobei das Erstellen und Aktualisieren von Kacheln ein wesentlicher Aspekt war. Als Reaktion auf dieses Feedback haben wir die Verwendung von Kacheln in 3 Punkten verbessert:

  1. Wir haben Abruf-APIs zum Aktualisieren von Kacheln eingeführt. Mithilfe der neuen regelmäßigen Benachrichtigungs-API für Kacheln können Sie Windows veranlassen, Ihren Cloud-Dienst für Kachelinhalte entsprechend der App abzurufen. Das ist die einfachste Methode, die Kachel der App kontinuierlich mit Webinhalten zu aktualisieren. Im folgenden JavaScript-Codeausschnitt wird gezeigt, wie Sie den Abruf für die App-Kachel starten:

    // update the tile with a poll URL
    var polledUri = new Windows.Foundation.Uri("http://www.fabrikam.com/tile.xml");
    var recurrence = Windows.UI.Notifications.PeriodicUpdateRecurrence.halfHour;
    var tileUpdater = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication();
    tileUpdater.startPeriodicUpdate(polledUri, recurrence);

    Die von Ihrem Webdienst zurückgegebenen Inhalte müssen dem XML-Schema für Kacheln entsprechen. Beachten Sie, dass auch Kachel-Infoanzeiger durch Abrufen aktualisiert werden können.

    Weitere Informationen zum Aktualisieren von Kacheln erhalten Sie im Entwicklungscenter unter folgenden Links:
  2. Wir haben das Erstellen von ansprechenden Kachel- und Popupinhalten vereinfacht. Wir haben dem Feedback auch entnommen, dass die Arbeit mit XML über die Benachrichtigungs-APIs komplizierter war als notwendig. Um die Arbeit mit Kachel- und Popupbenachrichtigungen zu vereinfachen, haben wir ein Objektmodell für Benachrichtigungsvorlagen eingeführt, bei dem es sich um eine Bibliothek handelt, die als Teil von Windows SDK veröffentlicht wird. Die Bibliothek verfügt über Konstruktoren (und IntelliSense) für Kachel- und Popupbenachrichtigungsvorlagen. Hier ist ein kurzes Beispiel in JavaScript:

    // create the wide template
    var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWideText03();
    tileContent.textHeadingWrap.text = "Hello world! My very own tile notification";

    // create the square template and attach it to the wide template
    var squareTileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquareText04();
    squareTileContent.textBodyWrap.text = "Hello world!";
    tileContent.squareContent = squareTileContent;

    // send the notification
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());

    Zudem ist dieses Objektmodell so strukturiert, dass Sie es auch in serverseitigem Code verwenden können.

    Wenn Sie das neue Objektmodell anzeigen und für Ihr eigenes Projekt verwenden möchten, wechseln Sie zu Beispiel für App-Kacheln und -Infoanzeiger. Suchen Sie im Beispiel nach dem Projekt „NotificationsExtensions“.
  3. Wir haben den Katalog mit verfügbaren Kachelvorlagen aktualisiert und um die Möglichkeit erweitert, sowohl die rechteckige als auch die quadratische Darstellung von Kacheln zu aktualisieren. Sie können jetzt die kleinere und die größere Kachelansicht mit Text und Bildern aktualisieren. In dem eben gezeigten Bespiel wird die Verwendung einer der neuen Kachelvorlagen erläutert (TileSquareText04). Im Artikel Auswählen einer Kachelvorlage finden Sie die vollständige Liste der verfügbaren Vorlagen.

JavaScript-Tools

Seit der //build/ haben wir eine Menge Entwicklerfeedback zur Entwicklung von Apps im Metro-Stil mit JavaScript erhalten. JavaScript ist hervorragend für die Windows 8-Plattform geeignet, und wir möchten sicherstellen, dass das Gleiche auch für unsere Tools gilt. Wenn Sie mithilfe von HTML, CSS und JavaScript eine neue App im Metro-Stil für die Consumer Preview erstellen, werden Sie in Visual Studio und der Windows-Bibliothek für JavaScript (WinJS) zahlreiche Verbesserungen bemerken. Zum Beispiel sind die Vorlagen für JavaScript-basierte Apps im Metro-Stil besser lesbar, und sie verwenden die neuen APIs.

Zusätzlich haben wir die Leistung und die Genauigkeit von JavaScript IntelliSense in VS verbessert:

  • Verbesserte Ergebnisse in den Vervollständigungslisten, der Goto-Definition und den Parametern.
  • Verbesserte Genauigkeit von IntelliSense durch eine vollständigere Darstellung des DOM, wodurch die Anweisungsvervollständigung im DOM abgerufen werden kann.
  • Der JavaScript-Editor unterstützt jetzt den „intelligenten“ Einzugstil, wodurch die Caretstelle in neuen Zeilen auf Grundlage der Umgebung sinnvoller ausgewählt wird.
  • Schließlich haben wir die Erweiterbarkeit von JavaScript IntelliSense in VS verbessert, wodurch IntelliSense für JavaScript-Bibliotheken, wie z. B. jQuery, leichter erweitert werden kann.

Wir haben auch unsere JavaScript-Diagnosetools und das Debuggen deutlich verbessert:

  • Mit dem Stilfenster im DOM-Explorer können Sie neue Regeln und Regeleigenschaften kopieren und hinzufügen, um so die Auswirkungen von Stiländerungen auf ausgeführte Apps zu testen. Sie können die Regel auch direkt mit der CSS-Quelldatei verbinden.
  • Der DOM-Explorer verfügt zusätzlich über eine neue Registerkarte („Ereignisse“), mit der Sie nach dem Quellspeicherort von Ereignishandlern suchen können, die mit DOM-Elementen verknüpft sind.
  • In VS werden jetzt im Fenster „Überwachungen“ und im Fenster „Lokal“ Bereiche, Prototypen, Funktionsgruppierungen und Ausnahmen visuell dargestellt.
  • Sie erhalten zusätzlich Unterstützung bei Ausnahmen (erste Chance) für JavaScript.

C++-Datenbindung

Für netzbasierte Apps ist die Datenbindung wesentlich, und wir wurden gebeten, die Datenbindung in C++ zu erleichtern. Zur Implementierung waren eine Menge Schnittstellen erforderlich, was wiederum zu vielen Codebausteinen für C++/XAML führte. In der Consumer Preview haben wir dies berücksichtigt, und Sie müssen jetzt nur noch der Klasse, an die die Daten gebunden werden sollen, ein [Windows::UI::Xaml::Data::Bindable]-Attribut hinzufügen. Das Gleiche gilt für XAML. In diesem Beispiel wird die Veränderung deutlich:

C++-Header

namespace SimpleBlogReader
{
//To be bindable, a class must be defined within a namespace.
[Windows::UI::Xaml::Data::Bindable]
public ref class FeedItem sealed
{
public:
FeedItem(void){}
~FeedItem(void){}
property Platform::String^ Title;
property Platform::String^ Author;
property Platform::String^ Content;
property Windows::Foundation::DateTime PubDate;
};
}

XAML

<TextBlock x:Name="TitleText" Text="{Binding Path=Title}" 
VerticalAlignment="Center" FontSize="48" Margin="56,0,0,0"/>
    

HTML/JavaScript-Steuerelemente

In der Consumer Preview haben wir die Steuerelemente vereinfacht, die von fast allen Apps verwendet werden müssen. Diese Steuerelemente sind ein wesentlicher Teil des Metro-Stils. Durch sie ist die Konsistenz der App mit dem restlichen System gewährleistet, und Benutzer können nahtlos zwischen Apps und Windows wechseln. Bei den HTML/JS-Steuerelementen ListView und AppBar handelt es sich um zwei Steuerelemente, an denen wir wesentliche Verbesserungen vorgenommen haben.

Das Steuerelement ListView

Auf Grundlage des Feedbacks zur Developer Preview haben wir das WinJS-Steuerelement ListView erweitert, um das Laden von Elementen und die Vorlagenerstellung einfacher und flexibler zu gestalten.

  1. Wir haben mit Binding.List eine einfache und leistungsstarke Datenquelle erstellt und sie speziell für Speicherdaten entwickelt.

    Binding.List macht eine API verfügbar, die das JavaScript-Arrayobjekt fast genau spiegelt. Sie müssen zum Lesen und Schreiben von Elementen jedoch getAt und setAt aufrufen, da Operatoren zum Überschreiben von JavaScript nicht unterstützt werden. Mit Binding.List wird die Arbeit mit Speicherdaten ganz einfach, z. B.:    
    var data = [10, 20, 12, 7];
    var ds = new WinJS.Binding.List(data);
    ds.push(3);
    ds.splice(2, 1);

    var sorted = ds.createSorted(function (a, b) { return (a - b) });
    ds.push("1");
    console.log("original: " + ds.join(",") + "; sorted: " + sorted.join(","));

    Ausgabe: “original: 10,20,7,3,1; sorted: 1,3,7,10,20

  2. Wir haben die ListView erweitert, um die Vorlagenerstellung mit mehrstufigen Funktionen zu unterstützen. Jetzt können Sie eine Funktion zur Vorlagenerstellung schreiben, die Elementdaten in mehreren Phasen darstellt. Die schnellsten Daten (z. B. Text) werden sofort angezeigt, langsamere Daten (z. B. Bilder) werden dargestellt, sobald sie verfügbar sind. Diese Erweiterungen ermöglichen den Benutzern Ihrer Apps ein komfortableres Laden von Daten.

Das Steuerelement AppBar

Aus dem Feedback nach der //build/ ging hervor, dass die Arbeit mit AppBar eine Herausforderung darstellt. Auf der Grundlage dieses Feedbacks haben wir dann das HTML-Steuerelement AppBar neu gestaltet, um seine Verwendung zu vereinfachen. Das Ergebnis ist eine direktere Entwicklung. Dies wird an diesem Beispielcode deutlich:

<div class="win-left">
<button onclick="doClickPlay" class="win-command" role=’MenuItem>
<span class="win-commandicon win-large">&#xE112;</span>
<span class="win-label">Play</span>
</button>
</div>
<div class="win-right">
<button onclick="doClickAdd" class="win-command" role=’MenuItem>
<span class="win-commandicon win-large">&#xE112;</span>
<span class="win-label">Add</span>
</button>
</div>
         

Die HTML-Schaltflächen für AppBar in der Consumer Preview:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
play',label:'Play',icon:'play',onclick:doClickPlay,section:'selection',tooltip: 'Play'}"
>
/button>

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
id:'add',label:'Add',icon:'add',onclick:doClickAdd,tooltip: 'Add'}"
>
/button>

Wie Sie sehen, werden die Schaltflächen jetzt eher mir einer Reihe von Optionen als mit HTML-Elementen erstellt. Wie Sie die Schaltflächen erstellen (Stile, Symbole, Text usw.), bleibt Ihnen überlassen. Die AppBar wird im Andock- und im Hochformatmodus richtig skaliert, und die Schaltflächen werden automatisch an den richtigen Positionen dargestellt.

Wir haben viele weitere Verbesserungen am HTML/CSS/JS-AppBar-Steuerelement vorgenommen, für deren Erläuterung leider die Zeit fehlt. Im Entwicklungscenter ist der vollständige Beispielcode und die Dokumentation für AppBar verfügbar.

Mehrsprachige Interoperabilitätstools

Auf der //build/ haben wir eine Vorabversion der Funktion zum Erstellen von Hybrid-Apps im Metro-Stil mithilfe einer Kombination aus mehreren Sprachen, einschließlich JavaScript, C++, C# und Visual Basic, vorgestellt. Mit dieser Veröffentlichung können Sie diese Arten von Apps direkt in Visual Studio erstellen, beispielsweise eine JavaScript-App, die mit einer C#-Klassenbibliothek kommuniziert oder eine C#-App, die eine C++-Komponente nutzt. So können Sie von den jeweiligen Stärken jeder Sprache profitieren, vorhandene Objekte wiederverwenden und Teammitglieder mit unterschiedlichen Fähigkeiten am selben Projekt beteiligen.

JavaScript

var customers = new CSClassLib.CustomerRepository();
var filtered = customers.getCustomersByState("WA");

C#

public IEnumerable<Customer> GetCustomersByState(string state)
{
return from c in this.Customers
where c.State == state
select c;
}

Als C++-Entwickler werden Sie bemerkenswerte Verbesserungen erkennen, insbesondere in Bezug auf DirectX und XAML. DirectX eignet sich hervorragend zur direkten Änderung von Pixeln, und XAML bietet Vorteile beim Erstellen von Benutzeroberflächenelementen, z. B. Menüs und Informationsanzeigen. Wie in Teil 1 dieses Beitrags erläutert, kann DX jetzt von XAML-Apps verwendet werden. Zu dieser Funktion gehört auch ein umfassender Tool-Support. Als Reaktion auf Ihr Feedback enthält die Betaversion von Visual Studio jetzt Interoperabilitätssupport zwischen C++/XAML und DirectX.

Zusammenfassung

In den letzten beiden Beiträgen habe ich Ihnen anhand einiger Beispiele die Möglichkeiten erläutert, die die Consumer Preview bietet. Es gibt noch viel mehr Kniffe, Verbesserungen und neue Funktionen, die die Entwicklung von Apps im Metro-Stil unter Windows 8 im Vergleich zur Developer Preview weiter verbessern.

Weitere Informationen zu allen Verbesserungen finden Sie in unserem überarbeiteten Entwicklungscenter auf MSDN. Wenn Sie einen der von mir geposteten Links für die markierten Themen aufgerufen haben, haben Sie möglicherweise schon bemerkt, dass das Entwicklungscenter jetzt besser ist, als je zuvor.

An der Dokumentation wurden folgende Verbesserungen vorgenommen:

  • Der Referenzabschnitt für Windows Runtime wurde vervollständigt (alle APIs verfügen jetzt über Beschreibungen).
  • Mehr als 30 Beispiele wurden in verschiedenen unterstützten Sprachen hinzugefügt.
  • Die Dokumentation für Beispiele wurde verbessert.
  • Die Anzahl an WinRT-Seiten mit Codeausschnitten wurde erhöht.
  • Unsere Richtlinien für Benutzeroberflächen wurden deutlich verbessert, einschließlich zusätzlicher Redlines, Wireframes und anderer wiederverwendbarer Designobjekte.
  • Die Navigation wurde verbessert und die Suchrelevanz erhöht.
  • Wir haben auch ein zusätzliches neues Randleistenelement mit Links zu Schlüssel-APIs und eine zusammenfassende Anweisung für konzeptuelle Themen eingeführt.
  • Die Lernprogramme „Erste Schritte“ und „Schnellstart“ wurden für alle unterstützten Sprachen überarbeitet.

Detaillierte Informationen zu den neuen Tools finden Sie im Blogbeitrag von Jason Zander. Hier finden Sie auch eine Reihe neuer Sprachfunktionen in C# und Visual Basic zum Erstellen von Apps im Metro-Stil.

Wenn dies noch nicht geschehen ist, laden Sie die Consumer Preview herunter, installieren Sie die neue Betaversion von Visual Studio, wählen Sie einige Beispiele bzw. Dokumente aus dem Entwicklungscenter aus, und fangen Sie an, tolle Apps zu entwickeln. Mit unseren Blogbeiträgen unterstützen wir Sie auch weiterhin bei Ihrer Entwicklungsarbeit.

-- Jake Sabulsky, Program Manager, Windows

Dieser Beitrag ist in Teamarbeit entstanden. Vielen Dank an Kevin Woley, Jonathan Aneja, Jonathan Garrigues, Jon Gordner, Ryan Demopoulos, Keith Boyd und Ian LeGrow.

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