Erstellen einer benutzerfreundlichen Kachel (Teil 1)

Entwicklerblog für Windows 8-Apps

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

Erstellen einer benutzerfreundlichen Kachel (Teil 1)

Rate This
  • Comments 0

Mit einer Live-Kachel können Sie Benutzer ganz einfach für Ihre App begeistern. In diesem Beitrag wird erläutert, wie Sie die Live-Kachel mithilfe von Abrufen und lokalen APIs aktualisieren, um so alle Vorteile Ihrer App direkt auf der Windows 8-Startseite zeigen zu können. Mit der Kachel können Sie die Abläufe im Inneren der App besonders gut und ansprechend darstellen. Die Kachel ist ein Kernstück der App und wahrscheinlich der Teil, der die größte Beachtung findet: Machen Sie Gebrauch davon, um die Benutzer in Ihre App einzuladen.

Wie Sie dabei vorgehen, werde ich in diesem Beitrag an einem Beispiel erläutern:

  1. Entwurf für Kachelupdates
  2. Auswahl von Vorlagen, die zu den Kachelinhalten passen
  3. Verwenden von Abrufbenachrichtigungen aus der Cloud zum Aktualisieren der Kachel, während die App nicht ausgeführt wird
  4. Aktualisieren Sie die Kachel mithilfe der im SDK enthaltenen Bibliothek NotificationsExtensions, während die App ausgeführt wird (Beispiel für Windows 8-SDK-App-Kacheln und -Infoanzeiger).

Die Contoso Food Trucks-App

Sehen wir uns eine Beispiel-App genauer an: Contoso Food Trucks. Mithilfe dieser App erhalten Benutzer Informationen über Imbisswagen mit wechselndem Standort. Diese App haben wir auch schon auf der Website Fallbeispiel einer App im Metro-Stil präsentiert. In diesem Blogbeitrag erfahren Sie, wie man der App Live-Kacheln hinzufügen kann.

Die Kachel für die Food Trucks-App ist eine von vielen auf der Startseite

Was sind die Stärken Ihrer App?

Wenn Sie die Stärken der App kennen, fällt es Ihnen leichter, den Inhalt der Kachel und die Häufigkeit der Aktualisierung festzulegen.

Mit der Contoso Food Trucks-App können Benutzer nach ihren Lieblingsimbisswagen suchen, deren Standorte verfolgen und neue Imbisswagen in der Nähe entdecken. Daher sollte die Food Trucks-Kachel folgende Funktionen bieten:

  • Anzeigen der Imbisswagen im Umkreis eines Standorts
  • Verfolgen der bevorzugten Imbisswagen des Benutzers

Verwenden Sie die App-Kachel nicht als Werbefläche. Gemäß den Nutzungsbedingungen des Windows App Stores ist die Verwendung der Kachel für Werbung in den meisten Fällen unzulässig.

Standardkachel und Kachelgröße

Jede App verfügt über eine Standardkachel. Hierbei handelt es sich um die Kachel, die dem Benutzer bei der erstmaligen Installation der App angezeigt wird. Das Logobild der Standardkachel dient als Logo der App oder als Markenzeichen, durch das Benutzer die App eindeutig identifizieren können.

Das Logobild der Standardkachel wird im App-Manifest definiert und von Windows angezeigt, bis die Kachel durch die erste Benachrichtigung aktualisiert wird. Wenn keine Benachrichtigungen vorhanden sind, kann das Standardbild wiederhergestellt werden. Dies ist beispielsweise der Fall, wenn die aktuelle Kachelbenachrichtigung abgelaufen ist oder der Benutzer die Aktualisierung von Live-Kacheln für die App deaktiviert.

Mit den Bildern der Standardkachel werden auch die Größen festgelegt. Kacheln stehen in zwei Größen zur Verfügung: Quadratisch oder breit. Alle Apps müssen eine quadratische Kachel, können jedoch auch eine breite Kachel unterstützen. Wenn die Standardkachel einer App nicht über ein breites Logobild verfügt, kann die App-Kachel nicht auf das breite Format erweitert werden und daher auch keine breiten Kachelbenachrichtigungen empfangen. Wenn die App ein breites Logobild beinhaltet, wird die Kachel von Windows standardmäßig im breiten Format angezeigt.

Für die Contoso Food Trucks-App sollen breite Kacheln zu unterstützt werden, da ich die Kachel mindestens einmal täglich aktualisiere und die Inhalte der App den zusätzlichen Platz benötigen. Diese Abbildungen werden für die Logos der Standardkachel verwendet:

Eine rechteckige Kachel mit der Überschrift Contoso Food Trucks und eine kleinere quadratische Kachel mit der Überschrift Food Trucks mit großem Logo, das einen Lastwagen zeigt

Quadratische und breite Kacheln können gleichermaßen Benachrichtigungen empfangen. Beim Senden von Benachrichtigungen sende ich immer sowohl eine quadratische als auch eine breite Version. So kann ein Benutzer auch dann aktualisierte Daten anzeigen, wenn er die Kachel verkleinert.

Weitere Informationen zum Erstellen eines Standardbilds für eine App finden Sie in diesem Schnellstart: Erstellen einer Standardkachel mithilfe des Manifest-Editors von Microsoft Visual Studio 11. Weitere Informationen zu Konzepten für Kachelgrößen finden Sie im Überblick über Kacheln und Benachrichtigungen.

Entwerfen von Kachelupdates

Anzeigen der Imbisswagen im Umkreis

Ein Vorzug unserer App ist, dass sie Benutzer bei der Auswahl des Imbisswagens unterstützt. Also müssen wir wissen, welche Imbisswagen sich in der Nähe befinden. Um dies herauszufinden, können Benutzer in unserer App einen standardmäßigen Standort für Ihre Mittagspause festlegen. Wenn der Benutzer seinen Standort angibt, wird ihm angezeigt, welche Imbisswagen sich derzeit in der Nähe dieses Standorts befinden. Für dieses Kachelupdate habe ich eine Vorlage ohne Bild ausgewählt.

Da für das Aktualisieren von Kacheln die Inhalte der App in systemdefinierte Vorlagen eingepasst werden, müssen wir zunächst eine Vorlage auswählen, die für unsere Inhalte geeignet ist. Für die breite Kachel habe ich aus dem Vorlagenkatalog im Entwicklungscenter (Auswählen einer Kachelvorlage) die Vorlage TileWideText01 ausgewählt. Für die quadratische Kachel habe ich mich für die Vorlage TileSquareText03 entschieden. Ich habe diese beiden Textvorlagen ausgewählt, da auf der Kachel nur Textzeichenfolgen aktualisiert werden.

Bevor ich die endgültige Entscheidung getroffen habe, habe ich mit dem Beispiel für Windows 8-SDK-App-Kacheln und -Infoanzeiger verschiedene Vorlagenoptionen ausprobiert. Mithilfe des Beispiels können vor dem Festlegen eines endgültigen Kacheldesigns verschiedene Zeichenfolgen und Bilder einfach ausgetauscht werden. Durch das Testen der Vorlagen hat sich beispielsweise herausgestellt, dass ich für die quadratische Vorlage den Kurznamen des Imbisswagens verwenden muss, damit der Text ordnungsgemäß angezeigt wird.

Auf der breiten rechteckigen Kachel wird Folgendes angezeigt: Imbisswagen in Ihrer Nähe / Nom Nom Barbecue Truck / Sushi Truck / Macaroni Makin' Wagon    Auf der quadratischen Kachel wird Folgendes angezeigt: In Ihrer Nähe / Nom Nom / Sushi Truck

Die Updates werden durch das Senden einer Benachrichtigung erstellt. Eine Benachrichtigung ist einfach ein XML-Ausschnitt, der das Kachelschema ausfüllt. Sie können XML in Code mithilfe der Funktion TileUpdateManager.getTemplateContent() oder der Bibliothek NotificationsExtension erstellen, über die ich im zweiten Teil dieses Beitrags sprechen werde. Die Benachrichtigung gibt an, welche Kachelvorlage beim Erzeugen der Benachrichtigung verwendet wird, sowie den Text und die Bilder, die dem Kachellayout entsprechend auf der Kachel angezeigt werden.

Zum Erstellen des oben beschriebenen Kachelupdates für die Imbisswagen-App habe ich für die Kachel diesen XML-Code verwendet:

XML-Code für Kachel

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideText01">
<text id="1">Food Trucks Near You</text>
<text id="2">Nom Nom Barbecue Truck</text>
<text id="3">Sushi Truck</text>
<text id="4">Macaroni Makin' Wagon</text>
</binding>
<binding template="TileSquareText03">
<text id="1">Near You</text>
<text id="2">Nom Nom</text>
<text id="3">Sushi Truck</text>
</binding>
</visual>
</tile>

In diesem XML-Code gibt es zwei Bindungselemente, je eines für die breite und die quadratische Kachel. Da die App breite Kacheln unterstützt, stelle ich in jeder Kachelbenachrichtigung Bindungen für die breite und die quadratische Kachelvorlage bereit. So kann die Kachel stets die aktualisierten Benachrichtigungsinhalte anzeigen, unabhängig davon, auf welche Größe der Nutzer die Kachel festlegt. Die quadratische Kachel zeigt nur zwei Imbisswagennamen an, weil ein dritter in der kleineren quadratischen Vorlage keinen Platz findet.

Lieblingsimbisswagen

Mithilfe dieser App können Benutzer bestimmen, wo sich ihre bevorzugten Imbisswagen gerade befinden. Auf der Kachel sollen sie dasselbe erfahren. In diesem Fall passen die Informationen in ein paar kurze Textzeilen. Ich verwende auch Bilder, die die einzelnen Imbisswagen darstellen, um die Kachel interessanter zu gestalten.

Da Kacheln aktualisiert werden, indem die App-Inhalte in eine systemdefinierte Vorlage eingepasst werden, müssen wir zunächst die richtige Vorlage auswählen. Für die breite Kachel habe ich aus dem Vorlagenkatalog im Entwicklungscenter (Auswählen einer Kachelvorlage) die Kachelvorlage TileWideImageAndText02</ ausgewählt, die ein Bild und zwei kurze Textzeichenfolgen unterstützt. Für die quadratische Kachel habe ich mich für die Vorlage TileSquarePeekImageAndText04 entschieden, damit die Kachel sowohl das Bild als auch den Text anzeigen kann. Mit den Popupvorlagen können mehr Inhalte bereitgestellt werden, als in einem normalen Kachelbereich zulässig. In Windows werden Popupvorlagen animiert, um sowohl das Bild als auch den Text anzuzeigen, den ich in die Vorlage innerhalb der quadratischen Kachel eingefügt habe. Daher werden auf der Kachel abwechselnd der obere und der untere Rahmen angezeigt. Innerhalb einer Popupkachel kann der Inhalt mithilfe eines Bildlaufs vollständig angezeigt werden.

Bild mit Fleisch auf dem Grill, Lastwagenlogo und aktualisierter Text: Nom Nom Barbecue Truck Washer Ave und 3rd bis 3    Bild mit Fleisch auf dem Grill, Lastwagenlogo und aktualisierter Text: Nom Nom @ Washer Ave und 3rd bis 3

XML-Code für Kachel

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideImageAndText02">
<image id="1" src="http://www.contoso.com/foodtrucks/nomnombbq.png"/>
<text id="1">Nom Nom Barbecue Truck</text>
<text id="1">Washer Ave and 3rd until 3</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src=" http://www.contoso.com/foodtrucks/nomnombbq-square.png"/>
<text id="1">Nom Nom @ Washer Ave and 3rd until 3</text>
</binding>
</visual>
</tile>

Wie zuvor habe ich festgelegt, wonach die Kachel suchen wird, indem ich eine Benachrichtigung verwende, die als XML-Nutzlast definiert ist. Der Unterschied zwischen der ersten Kachel und dieser besteht darin, dass ich in dieser Benachrichtigung Bilder verwende. Die Bilder in Benachrichtigungen sind nicht Teil der XML-Nutzlast. Von der Nutzlast wird auf andere Standorte verwiesen. Die Bilder können sich entweder, wie in diesem Fall, bei einem Webdienst oder auf dem lokalen Computer befinden. Nachdem Windows die Benachrichtigung empfangen hat, werden die Bilder zu dem Zeitpunkt vom Webdienst heruntergeladen, in dem sie dem Benutzer angezeigt werden. Weitere Informationen zum Einbinden von Bildern in eine Kachel finden Sie im Entwicklungscenter unter Hinzufügen von Abbildungen zu einer Kachelvorlage.

Die Größe der Bilder unterliegt Beschränkungen, die in KB- und Pixelgrößen angegeben sind. Kachelbenachrichtigungen werden nicht angezeigt, wenn die Bilder zu groß sind, verwenden Sie daher nur Bilder in zulässiger Größe. Beachten Sie auch, dass Kacheln nur Bilder im JPG- und PNG-Format unterstützen. Weitere Informationen zum Einbinden von Bildern in eine Kachel finden Sie im Entwicklungscenter unter Größen für Kachelbilder.

In Kürze mehr

Da wir nun wissen, wie die Kacheln aussehen sollen, besteht der nächste Schritt darin, festzulegen, wann sie aktualisiert werden sollen. Im zweiten Teil dieses Beitrags wird erläutert, wie der Contoso Food Trucks-App Abrufe und lokale Kachelupdates hinzugefügt werden. Ich erkläre Ihnen, wie das Abrufen von Kachelupdates aus der App gestartet wird, erläutere ASP.NET- und PHP-Beispiele, die verwendet werden können, um einen Webdienst zum Abrufen einzurichten und spreche darüber, wie der App eine sekundäre Kachel hinzugefügt und mithilfe der NotificationsExtension-Bibliothek aktualisiert wird. Ich hoffe, dass Sie durch diesen Beitrag Anregungen erhalten und darüber nachdenken, wie Sie Ihre App mit einer Live-Kachel verbessern können.

-- Kevin Michael Woley, Programmmanager, Windows

Vielen Dank an Tyler Donahue und Nazia Zaman für ihre Hilfe beim Erstellen dieses Blogbeitrags.

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