HTML and CSS Reference
In-Depth Information
<h1>Simple Tiles Demo (CH13)</h1>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/footer.html'}"></div>
</body>
</html>
So far, so good, but nothing in the application yet adds life to the default static tile.
The notification object
To add live capabilities to tiles, you need to create a notiication . In this context, a notification is an
instance of the Windows.UI.Notifications.TileNotification object. When you instantiate the notifica-
tion object you pass some data that identifies the layout you want for the content within the tile. You
should create the notification object only once in the application's lifecycle. However, you can subse-
quently update the tile's content as many times as needed depending on the logic of the application.
The notification object acts as a bridge between the application and the system; once created, the
notification remains in place for some time even if the application is terminated or offline.
Creating an application notification
To add Live tiles to an application, you go through three steps. First, you choose the layout of the tile
text. Next, you add application-specific data to the layout. Finally, you create a notification object
from the template and add it to the system's list.
Windows 8 comes with a long list of tile templates. You find them in the Windows.UI.Notiications.
TileTemplateType enumeration. Each member of the enumeration refers to a different layout with a
few placeholders for text and/or images. A frequently used tile template is the following:
Windows.UI.Notifications.TileTemplateType.tileSquareText02
The template consists of two rows of text that are automatically styled to look like the title and
subtitle of some item. The first line of text is aligned at the top of the tile and displays with a larger
font. The second line wraps to the bottom and is rendered with a smaller font.
A tile template is ultimately an XML string; as a developer, however, you don't have much exposure
to the details of the XML. All you need to do is get the content of the template and work on it to
replace some elements. Here's the code you need to add to the startup code of your application. You
open up the tilesDemoApp.js file and add the following code:
tilesDemoApp.init = function () {
var template = Windows.UI.Notifications.TileTemplateType.tileSquareText02;
var xml = Windows.UI.Notifications.TileUpdateManager.
getTemplateContent(template);
// More code goes here
}
Search WWH ::




Custom Search