Adding Live tiles - Build Windows 8 Apps with HTML5 and JavaScript - page 328

As a user, when you right-click a tile you see a context menu with the options available. When Live
tiles are not active, no special option is made available. Windows 8 detects if the application supports
Live tiles and adds an extra button to the context menu to turn live updates on and off.
Identifying project files to edit
As you may have noted with the previous basic exercise, adding Live tiles support to an application
only requires a bit of code. Subsequently, the only project file you should focus on, as far as Live
tiles are concerned, is todolist.js . Live tiles, in fact, have no impact on the overall user interface of the
application, nor do they affect the application's manifest or require special permissions.
However, just because the Live tiles management code is sort of standalone code, it can be easily
isolated to a distinct file which is then called back from the main script file of the application. So in
the rest of the exercise, you'll be focusing on the creation of a new JavaScript file and, maybe more
importantly, on the most appropriate template and content to display.
Implementation of Live tiles
Live tiles exist as a way for developers to present useful information to users without requiring them
to even open up the application. Live tiles serve as a reminder about the features or content of the
application, and they also tend to make your application more frequently used. For Live tiles to be
successful, they should present useful information about the application in a timely and attractive
manner. For this reason, the choice of the tile template and the selection of data to display is key.
preparing the ground for Live tiles
You add a new JavaScript file to the project. Let's call it liveTiles.js . To start out, you also add the
following code to the newly created file:
var liveTilesManager = liveTilesManager || {};
liveTilesManager.enable = function (listOfTasks) {
// More code goes here
}
In addition, you should reference the liveTiles.js file from within default.html . Therefore, you open
default.html in the Visual Studio editor and add the following line:
<script src="/js/livetiles.js"></script>
Now you're ready to add some more significant code to the Live tiles manager.
Choosing the tile templates
Windows 8 comes with a long list of predefined templates for tiles. You find predefined templates for
both large and small tiles. Essentially, a tile template is a short piece of XML data that wraps up the
information to show. Typically, a Live tile consists of images and one or more lines of text. To learn