23.01.2018 Views

MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

16 or fewer characters that is used to manage the stack of updates that are cycled on the tile.<br />

More on this a little later.<br />

• Call TileUpdateManager.createTileUpdaterForApplication to obtain a TileUpdater object<br />

that’s linked to your app tile; call TileUpdateManager.createTileUpdater-ForSecondaryTile<br />

(chew on that name!) to obtain a TileUpdater object for a secondary tile with a given tileId.<br />

• Call TileUpdater.update with your TileNotification object. (The animation used to bring the<br />

update into view is similar to WinJS.UI.Animation.createPeekAnimation, as described in Chapter<br />

11.)<br />

Tip If you issue tile updates or other notifications when your app is running, think about whether it’s<br />

also appropriate to issue updates within a resuming event handler if you aren’t going to use other<br />

means like periodic updates or push notifications to refresh the tile. It may have been a while since you<br />

were suspended, so being resumed is a good opportunity to send updates.<br />

Let’s turn now to the App tiles and badges sample for how updates appear in code. Because the<br />

Visual Studio simulator doesn’t enable live tiles and toast notifications, remember to run the sample<br />

with the Local Machine or Remote Machine options.<br />

Assuming that we have our update XMLDocument in a variable named tileXml, sending the update<br />

just takes two lines of code (see js/sendTextTile.js):<br />

var tileNotification = new Windows.UI.Notifications.TileNotification(tileXml);<br />

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication()<br />

.update(tileNotification);<br />

and similarly for secondary tiles in Scenario 6 of the Secondary tiles sample<br />

(js/SecondaryTileNotification.js):<br />

var tileNotification = new Windows.UI.Notifications.TileNotification(tileXml);<br />

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForSecondaryTile(<br />

"SecondaryTile.LiveTile").update(tileNotification);<br />

The more interesting question is how we create that tileXml payload in the first place. This involves<br />

choosing one of the predefined visual tile templates and then choosing a method to create the<br />

XMLDocument. Then we’ll see how to use images with the updates along with considerations for branding.<br />

Localization and accessibility are additional concerns for tile updates, but we’ll return to that subject<br />

later in Chapter 17, “Apps for Everyone.”<br />

Choosing a Tile Template<br />

The first step in creating a tile update is to select an appropriate template from the Tile template<br />

catalog. Here you will find descriptions, images, and the exact XML for the 10 available square templates<br />

and the 36 available wide templates—yes, 46 different templates in all (so I hope you understand why<br />

I’m not showing them all here!). Some are text only, some are image only, some are text and image<br />

(wide tiles only), and then there are a number referred to as peek templates. These, if you look at them<br />

577

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!