MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Data Sources
In all the examples we’ve seen thus far, we’ve been using an in-memory data source built on WinJS.-
Binding.List. Clearly, there are other types of data sources and it certainly doesn’t make sense to load
everything into memory first. How, then, do we work with such sources?
WinJS provides some help in this area. First is the WinJS.UI.StorageDataSource object that works
with files in the file system, as the next section demonstrates with a FlipView and the Pictures Library.
The other is WinJS.UI.VirtualizedDataSource, which is meant for you to use as a base class for a
custom data source of your own, an advanced scenario that we’ll touch on only briefly.
A FlipView Using the Pictures Library
For everything we’ve seen in the FlipView sample already, it really begs for the ability to do something
completely obvious: flip through pictures files in a folder. Using what we’ve learned so far, how would
we implement something like that? We already have an item template containing an img tag, so
perhaps we just need some URIs for those files. Perhaps we could make an array of these using an API
like Windows.Storage.KnownFolders.picturesLibrary.getFilesAsync (declaring the Pictures Library
capability in the manifest, of course!). This would give us a bunch of StorageFile objects for which we
could call URL.createObjectURL. We could store those URIs in an array and then wrap it up with
WinJS.Binding.List:
var myFlipView = document.getElementById("pictures_FlipView").winControl;
Windows.Storage.KnownFolders.picturesLibrary.getFilesAsync()
.done(function (files) {
var pixURLs = [];
files.forEach(function (item) {
var url = URL.createObjectURL(item, {oneTimeOnly: true });
pixURLs.push({type: "item", title: item.name, picture: url });
});
var pixList = new WinJS.Binding.List(pixURLs);
myFlipView.itemDataSource = pixList.dataSource;
});
Although this approach works, it can consume quite a bit of memory with a larger number of
high-resolution pictures because each picture has to be fully loaded to be displayed in the FlipView. This
might be just fine for your scenario but in other cases would consume more resources than necessary. It
also has the drawback that the images are just stretched or compressed to fit into the FlipView without
any concern for aspect ratio, and this doesn’t produce the best results.
A better approach is to use the WinJS.UI.StorageDataSource that again works directly with the file
system instead of an in-memory array. I’ve implemented this as a Scenario 8 in the modified FlipView
202