This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Grid App Project
The final app project template is the Grid App project template. This template also utilizes the navigator.js with the PageControlNavigator. When we create a Grid App project, called GridApp, we see three page controls created for us, instead of the two in the SplitApp project. Inside the default.html file, the first page control loaded is /pages/groupedItems/groupedItems.html. At the bottom of the groupedItems.html page, we can see that it also uses the WinJS ListView control.
After running the project, the ListView displays as a grid. The ListView control is flexible and has a grid layout mode in addition to a list layout mode. The group titles also can be tapped to take us to a group detail page. Selecting an item from the main hub page or the group detail page takes us to the item detail page, which lists the content of the item.
This project template has a lot to it. The majority involves binding data to the ListView. We dig into this project in great detail during Hour 10. For now, we can look at the navigation code.
When we open the /pages/groupedItems/groupedItems.html file, we can see that a button in the headertemplate div has the following onclick event handler:
"Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)"
This handles clicking on the group name on the groupedItems (hub) page. We can open the /pages/groupedItems/groupedItems.js file and see the following navigateToGroup function:
navigateToGroup:function(key) {nav.navigate("/pages/groupDetail/groupDetail.html",{ groupKey:key});},
As expected, clicking the group name navigates to the groupDetail page. The nav variable is just an alias to the WinJS.Navigation class, to save on typing. Let’s also look at the _itemInvoked function. It has some conditional logic and either navigates to the groupDetail page control (by calling the navigateToGroup function) or the itemDetail page control. The condition checks to see if the app is in a snapped view state. We discuss the different view states during Hour 13.