Live Tiles für Windows 8 Apps mit JavaScript erstellen

Windows 8 bietet die Möglichkeit, Apps als Kacheln (engl. Tiles) auf dem Start-Bildschirm zu platzieren. Diese Kacheln können vergrößert und verkleinert werden und außerdem aktuelle Inhalte anzeigen. Wenn eine Kachel aktualisierte Inhalte anzeigt, wird sie als Live-Kachel (Live Tile) bezeichnet. Wie man eine solche Live-Kachel mit JavaScript erzeugt, möchte ich gerne vorstellen.

Zuerst muss man ein Tile Template auswählen. Dieses Template kann man dann an die persönlichen Wünsche anpassen und für die eigene Windows 8 Metro Style App verwenden. In meinem Beispiel verwende ich das Template tileWideImageAndText01. Dieses Template bietet Platz für ein Wide logo, ein Small logo, einen Notification Text und eine Anzeige für die Anzahl der Badge Notifications. Wer an all diesen Elementen interessiert ist und diese gerne mal in Aktion sehen möchte, dem empfehle ich das App tiles and badges sample aus dem Windows Dev Center.

In meinem Beispiel werde ich das „Wide logo“ anpassen, ein „Badge logo“ setzen, die Hintergrundfarbe der Notification Bar ändern, die Textfarbe für den Notification Text setzen und eine Notification auf der Kachel anzeigen. Das fertige Beispiel sieht dann so aus:

Der Trick dahinter ist, sich das tileWideImageAndText01-Template mit JavaScript als XML-Baum zu holen und dann ein Bild und einen Text zu setzen und danach den neuen Text als Update für die Kachel zu senden. Durch die update-Funktion wird der Text auf der Kachel geändert. Im Code sieht das wie folgt aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<script>
  // http://msdn.microsoft.com/library/windows/apps/Hh465439
  var Notifications = Windows.UI.Notifications;
  var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileWideImageAndText01);
 
  var tileImageAttributes = tileXml.getElementsByTagName("image");
  tileImageAttributes[0].setAttribute("src", "ms-appx:///images/widelogo.png");
 
  var tileAttributes = tileXml.getElementsByTagName("text");
  tileAttributes[0].appendChild(tileXml.createTextNode("Hello World!"));
 
  var tileNotification = new Notifications.TileNotification(tileXml);
  Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
</script>

Die Hintergrundfarbe der Notification wird in der Datei package.appxmanifest festgelegt, genau so wie das Badge Icon und die Farbe des Notification-Texts. Mit Microsoft Paint habe ich diesen Zusammenhang mal liebevoll dargestellt:

Wer weitere Infos benötigt, dem empfehle ich den Artikel „Quickstart: Sending a tile update (Metro style apps using JavaScript and HTML)„.

Zusammenfassung:

1. Tile-Template auswählen
2. Tile-Template bearbeiten:
   – Wide logo aus dem Manifest mit JavaScript benutzen
   – Small logo im Manifest setzen
   – Notification Bar Hintergrundfarbe im Manifest setzen
   – Notification Bar Textfarbe im Manifest setzen
3. Notification Text mit JavaScript setzen
4. Neuen Text als Update an den TileUpdateManager senden