Layouts and Tiles - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 67

UI.List.setupListEvents();
UI.AppBar.setupButtons();
UI.Flyouts.setupAddItemFlyout();
ViewModel.State.bind("selectedItemIndex", function (newValue) {
var targetElement = document.getElementById("itemDetailTarget");
WinJS.Utilities.empty(targetElement)
var url = newValue == -1 ? "/html/noSelection.html"
: "/pages/itemDetail/itemDetail.html"
WinJS.UI.Pages.render(url, targetElement);
});
WinJS.UI.Pages.render("/html/storeDetail.html",
document.getElementById("storeDetailTarget"));
Tiles.sendTileUpdate();
});
}
…
Of course, since I have created a new JavaScript file, I need to link it to default.html , as
shown in Listing 4-6.
Listing 4-6. Adding the tiles.js File to default.html
…
<!-- MetroGrocer references -->
<link href="/css/list.css" rel="stylesheet">
<link href="/css/flyouts.css" rel="stylesheet">
<link href="/css/default.css" rel="stylesheet">
<script src="/js/viewmodel.js"></script>
<script src="/js/ui.js"></script>
<script src="/js/pages.js"></script>
<script src="/js/tiles.js"></script>
<script src="/js/default.js"></script>
…
Testing the Tile Update
A couple of preparatory steps are required before I can test my updating tile. First, the Visual
Studio simulator doesn't support updating tiles, which means I am going to have to test directly
on my development machine. To do this, I need to change the Visual Studio deployment target
to Local Machine, as shown in Figure 4-3 .
The second step is to uninstall my example app from the Start menu (which you do by
selecting Uninstall from the AppBar). In the Consumer Preview, there seems to be some “sticki-
ness” where apps that have previously relied on static tiles don't process updates correctly.
With both of these steps completed, I can now start my application from Visual Studio by
selecting Start Debugging from the Debug menu. When the application has started, I can make
changes to the grocery list, and a pithy summary of the first three items will be shown on the
start tile, as shown in Figure 4-4 .