MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

It’s important to understand that semantic zoom is intended to switch between two views of the
same data and not to switch between completely different data sets (see Guidelines and checklist for the
Semantic Zoom control). Also, the control does not support nesting (that is, zooming out multiple times
to different levels). Yet this doesn’t mean you have to use the same kind of control for both views: the
zoomed-in view might be a list, and the zoomed-out view could be a chart, a calendar, or any other
visualization that makes sense. The zoomed-out view, in other words, is a great place to show summary
data that would be otherwise difficult to derive from the zoomed-in view. For example, using the same
changes we made to include the item count with the group data for Scenario 1 (see “Quickstart #2b”
above), we can just add a little more to the zoomed-out item template (as done in the modified sample
in this chapter’s companion content):
The other thing you need to know is that the semantic zoom control does not work with arbitrary
child elements. An exception about a missing zoomableView property will tell you this! Each child control
must provide an implementation of the WinJS.UI.IZoomableView interface through a property called
zoomableView. Of all built-in HTML and WinJS controls, only ListView does this, which is why you
typically see semantic zoom in that context. However, you can certainly provide this interface on a
custom control, where the object returned by the constructor should contain a zoomableView property,
which is an object containing the methods of the interface. Among these methods are beginZoom and
endZoom for obvious purposes, and getCurrentItem and setCurrentItem that enable the semantic zoom
control to zoom in to the right group when it’s tapped in the zoomed-out view.
For more details, check out the HTML SemanticZoom for custom controls sample, which also serves
as another example of a custom control.
FlipView Features and Styling
For all the glory that ListView merits as the richest and most sophisticated control in all of WinJS, we
don’t want to forget the humble FlipView! Thus before we delve wholly into ListView, let’s spend a few
pages covering FlipView and its features through the other scenarios in the FlipView control sample. It’s
worth mentioning too that although this sample demonstrates the control’s capabilities in a relatively
small area, a FlipView can be any size, even occupying most of the screen. A common use for the
control, in fact, is to let users flip through full-sized images in a photo gallery. Of course, the control can
198