MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

FIGURE 5-2 The HTML ListView essentials sample.
The ListView’s constructor, WinJS.UI.ListView, is, of course, called by the ubiquitous WinJS.-
UI.processAll when the page control is loaded. The data source for this list is set to myData.dataSource
where myData is again a WinJS.Binding.List (defined at the top of js/data.js over a simple array) and its
dataSource property provides the needed interface.
The control’s item template is defined earlier in default.html with the id of smallListIconTextTemplate
and is essentially the same sort of thing we saw with the FlipView (an img and some text elements), so I
won’t list it here.
In the control options we see three behavioral properties: selectionMode, tapBehavior, and
swipeBehavior. These are all set to 'none' in this sample to disable selection and click behaviors entirely,
making the ListView a passive display. It can still be panned, but the items don’t respond to input. (Also
see the “Item Hover Styling” sidebar.)
As for the layout property, this is an object of its own, whose type property indicates which layout to
use. WinJS.UI.GridLayout, as we’re using here, is a two-dimensional top-to-bottom then left-to-right
algorithm, suitable for horizontal panning. WinJS provides another layout type called WinJS.UI.-
ListLayout, a one-dimensional top-to-bottom organization that’s suitable for vertical panning,
especially in snapped view. (We’ll see this with the Grid App project template shortly; the ListView
essentials sample lacks a good snapped view.)
184