MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

sample code in this chapter’s companion content. (Another example can be found in the
StorageDataSource and GetVirtualizedFilesVector sample.) Here we can use a shortcut to get a data
source for the Pictures library:
myFlipView.itemDataSource = new WinJS.UI.StorageDataSource("Pictures");
"Pictures" is a shortcut because the first argument to StorageDataSource is actually something
called a file query that comes from the Windows.Storage.Search API, a subject we’ll see in more detail
in Chapter 8, “State, Settings, Files, and Documents.” These queries, which feed into the powerful
Windows.Storage.StorageFolder.createFileQueryWithOptions function, are ways to enumerate
files in a folder along with metadata like album covers, track details, and thumbnails that are cropped to
maintain the aspect ratio. Shortcuts like "Pictures" (also "Music", "Documents", and "Videos" that all
require the associated capability in the manifest) just create typical queries for those document libraries.
The caveat with StorageDataSource is that it’s doesn’t directly support one-way binding, so you’ll get
an exception if you try to refer to item properties directly in a template. To work around this, you have
to explicitly use WinJS.Binding.oneTime as the initializer function for each property:
In the case of the img.src property, the file query gives us items of type Windows.Storage.-
BulkAccess.FileInformation (the source variable in the code below), which contains a thumbnail
image, not a URI. To convert that image data into a URI, we need to use our own binding initializer:
WinJS.Namespace.define("InitFunctions", {
thumbURL: WinJS.Binding.initializer(function (source, sourceProp, dest, destProp) {
if (source.thumbnail) {
dest.src = URL.createObjectURL(source.thumbnail, { oneTimeOnly: true });
}
})
});
In this initializer, the src : thumbnail part of data-win-bind is actually ignored because we’re just
setting the image’s src property directly to source.thumbnail. This is just a form of one-way binding.
Note that thumbnails aren’t always immediately available in the FileInformation object, which is
why we have to verify that we actually have one before creating a URI for it. This means that quickly
flipping through the images might show some blanks. To solve this particular issue, we can listen for the
FileInformation.onthumbnailupdated event and update the item at that time. The best way to
accomplish this is to use the StorageDataSource.loadThumbnail helper, which makes sure to call
removeEventListener for this WinRT event. (See “WinRT Events and removeEventListener” in Chapter 3.)
203