HTML and CSS Reference
In-Depth Information
Note
Application suspension hardly applies to applications running on a laptop or PC.
It is a scenario that applies to applications running on mobile devices. For example, the
application is suspended on a tablet when another application is run in the foreground or
when the screen gets engaged.
Let's see how to instruct the flip view to retrieve information from the
sessionState
and how to start
from a given item. You open
gallery.js
again and add the following lines at the end of the
GalleryApp.
init
function.
var startIndex = WinJS.Application.sessionState.currentPhotoIndex;
flipView.currentPage = startIndex;
If there's no information saved to the
sessionState,
the
startIndex
variable is set to
undefined.
.
However, the
FlipView
component is smart enough to start anyway from the first element if the value
set to its
currentPage
property is not a valid index.
Zooming the image in and out
To complete the exercise, you now need to add some template and behavior to the detail page. The
idea is to display the same image the user clicked in the flip view and enable some zoom capabilities.
Defining the template for the detail page
First, you write some additional markup for the detail page. Open
details.html
and fill up the
SECTION
element you find already in the body of the page with the following:
<section aria-label="Main content" role="main">
<img id="zoomable-image" src="#" alt=""
data-win-bind="src: GalleryApp.DetailsPageModel.currentPhoto.imageUrl" />
</section>
The same image you picked up in the flip view is now displayed in the detail page. As a user, how
would you like to zoom on the image? This is a point that deserves some attention.
On a classic PC application, a typical user would probably find it natural to click the image to zoom
in and click with the right button to zoom out. A Windows Store application, though, is designed
to be used on a PC as well as touch-enabled devices, such as a tablet. The ideal gesture to zoom
for the user of a tablet would be “pinch-and-zoom.” Implementing pinch-and-zoom is definitely
possible in WinJS but a lot is left to you. In addition, it wouldn't solve the problem of zooming where
a non-touch device is available. For the sake of simplicity, you can opt for yet another approach that
works great for both touch and non-touch devices.
Search WWH ::
Custom Search