datasourc e + itemrenderer + layout storag e data source

www.buildwindows.com

Building great Metro style gallery apps today

Ed AverettLead Program ManagerMicrosoft Corporation

PLAT-892T


Gallery experiences are collection views of files you care about…..


….. typically music and pictures


Agenda

• Features

• Getting started

• Metro style with minimal code

You’ll leave with examples of how to• Build a great gallery experience with local files


• Views – sorting, grouping and mass operations

• Content – rich thumbnail and property displays

• Fast Scrolling – large sets of files

• Mirroring – shows up-to-date view of file system

• Search – search or pivot over properties

Features of gallery experiences


• File API – enumerate files using queries

• Storage Data Source – connect collections, thumbnails, and properties into ListView

• ListView – get Metro style views

Building your gallery experience


ListView gives you Metro style

ListView control=

datasource

+ itemRenderer

+ layout

Storage Data Sourc

e

WinJS.UI.GridLayout

CSS


Windows 8 file access

Windows 8 gallery experiences

FileInformationFactory

Storage Data Source Adapter

File API

Trust Broker

File System

File picker

ListView Control

File System Indexer \ Thumbnail Cache \ Property System

Custom Data Source Adapter

Custom Control


Where to start

• Capability – choose the Library

• File API – create query scoped to a library

• Data source – tie thumbnail mode to query

• ListView – choose layout, properties, and tie to data source

File API gives query based collections

//Create a scope to work overvar library = Windows.Storage.KnownFolders.picturesLibrary; //set sort options to enumerate all items and orderByNamevar queryOptions = new Windows.Storage.Search.QueryOptions( Windows.Storage.Search.CommonFileQuery.orderByName, ["*"]);

//create query that is over the library with optionsvar fileQuery = library.createItemQueryWithOptions(queryOptions);

Data source loads collections with thumbnails

//Set Data source optionsvar dataSourceOptions = {Windows.Storage.FileProperties.ThumbnailMode.picturesView,requestedThumbnailSize: 192,thumbnailOptions: Windows.Storage.FileProperties.ThumbnailOptions.none,synchronous: false };

//create collection to combine query of files and thumbnail infovar dataSource = new WinJS.UI.StorageDataSource(fileQuery, dataSourceOptions);

Data source loads collections with thumbnails

//bind ListView element to data sourcevar listViewControl = WinJS.UI.getControl(lvElement);listViewControl.dataSource = dataSource;


Thumbnails mode for pictures and videos

• PicturesView and VideosView • Optimized thumbnail view for each content type• Adornment for video• .7 height to width cropped for Metro style• Portrait thumbnails cropped 1/3 from top


Thumbnails mode for music and documents• MusicView, DocumentsView, and ListView• Optimized for square layouts• Square cropped from center• Documents get background from system personality


Thumbnails mode for originals

• SingleItem • Original aspect ratio• No adornments or backgrounds


Building system like gallery experiences

ListView & Storage Data Source Adapter:• Code – Up and running in ~5 lines of code• Defaults – designed for gallery scenarios and Metro style



File Access API

Trust Broker

File System

ListView Control

File System Indexer

Storage Data Source


Building system like gallery experiences

Features:• Views – define layout and queries• Content – define thumbnail mode & props• Fast Scrolling – 0 code required• Mirroring – 0 code required• Search – register for event & activation


ListView and Storage Data Source Adapter

demo


Recap for building system like experiences• ~5 lines of code to build a

great experience

• Enables all core features of gallery experience

• Built-in support for all core content types



File Access API

Trust Broker

File System

ListView Control

File System Indexer

Storage Data Source


Building highly custom Metro style apps

Custom View & Data Source Adapter:• Code – enables control and

complexity



Custom Data Source

File Access APITrust Broker

File System

Custom Control

File System Indexer



• View control • Build logic to tie collection to control

• Data source • Build bulk loading and unloading through queries• Build eventing using queries


Recap

• Gallery experiences are easy to create

• ListView and Storage adapter cover most common scenarios with minimal code

• Custom view and adapter allows more control of experience with more code


Related sessions

• APP-398T – How to declare your app’s capabilities

• PLAT-894T – Seamlessly interacting with web and local data

• APP-211T – Create Metro style apps quickly with built-in controls

• PLAT-891T – Using files: accessing, searching, and acting on files

• APP-209T – Build polished collection and list apps in HTML5

• APP-210T– Build data-driven collection and list apps using ListView in HTML5

• APP-846T – Create reusable custom Metro style controls


Further reading and documentation

• Sample: Storage data source adapter• Quickstart: add a ListView• Quickstart: Adding search• Building great Metro style gallery apps today! • Using Files: Accessing, Searching, and Acting on

Files

• Contact info – • Ed Averett • http://forums.dev.windows.com (mention PLAT-894T)• Find me at booth 4 right after the talk

http://go.microsoft.com/fwlink/?LinkId=228621


http://go.microsoft.com/fwlink/?LinkId=227670&clcid=0x409










http://forums.dev.windows.com/


• Feedback and questions http://forums.dev.windows.com

• Session feedbackhttp://bldw.in/SessionFeedback

thank you



http://bldw.in/SessionFeedback

http://bldw.in/SessionFeedback

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to

be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.



Features:• Views – build logic to tie collection to view• Content – bulk load file, property, & thumbnail

collections via query• Fast Scrolling – build virtualization• Mirroring – build event listening solution• Search – build logic append to base query


Custom Data Source

demo


Recap for highly custom views

Light up your app:• View – build logic to tie collection to

control

• Data source – Build eventing, bulk loading through queries

• Fast Scrolling – build virtualization into control & data source

• Search – build logic append to base query

• Capability – choose the Library



Custom Adapter

File Access APITrust Broker

File System

Custom Control

File system indexer