This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Split App Project
The next app project template is the Split App project template. When we create this new Windows Store JavaScript project, called SplitApp, we see a few more files created than we have seen so far. This template provides some great boilerplate code for us to get up and running with a good-looking app pretty quickly.
When we open the default.html file, the first page control loaded is /pages/items/items.html.
When we open items.html, we have some new HTML markup to look at. At the bottom of the file is the same section element that we saw in the Navigation App project template. Instead of having only a static paragraph element, this code has a WinJS ListView control. This is set with the !data-win-control attribute. The code also sets selectionMode to 'none' in the data-win-options property. We discuss the ListView control in detail during Hour 10.
The next piece to examine is inside the items.js file. Under the _itemInvoked function, we see where it navigates to the /pages/split/split.html file. In the ready function, the _itemInvoked function is hooked up to ListView’s oniteminvoked event. This event is kicked off when an item is tapped in ListView.
Let’s open the split.html file. Inside the splitpage fragment div, right after the header element, are two div elements. Inside the first div is another WinJS ListView control. The second div contains an article with associated content.
Running the SplitApp project brings up the items.html page. Tapping on an item handles the iteminvoked event. This causes the page to navigate to the split.html page. On the split.html page is a group of items on the left side of the split, along with the selected article content on the right of the split.
The code obtains the data from the /js/data.js file. We postpone talking about the ListView control in detail and exploring how the data.js data is actually bound to it until Hour 10. Figure 2.15 shows the details of the SplitApp app.
)
Figure 2.15. The SplitApp app enables us to select an item on the left and see the details on the right.