datasourc e + itemrenderer + layout storag e data source
TRANSCRIPT
![Page 1: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/1.jpg)
www.buildwindows.com
Building great Metro style gallery apps today
Ed AverettLead Program ManagerMicrosoft Corporation
PLAT-892T
![Page 2: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/2.jpg)
www.buildwindows.com
Gallery experiences are collection views of files you care about…..
![Page 3: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/3.jpg)
www.buildwindows.com
….. typically music and pictures
![Page 4: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/4.jpg)
![Page 5: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/5.jpg)
![Page 6: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/6.jpg)
![Page 7: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/7.jpg)
![Page 8: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/8.jpg)
![Page 9: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/9.jpg)
![Page 10: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/10.jpg)
![Page 11: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/11.jpg)
![Page 12: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/12.jpg)
www.buildwindows.com
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
![Page 13: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/13.jpg)
www.buildwindows.com
• 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
![Page 14: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/14.jpg)
www.buildwindows.com
• 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
![Page 15: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/15.jpg)
www.buildwindows.com
ListView gives you Metro style
ListView control=
datasource
+ itemRenderer
+ layout
Storage Data Sourc
e
WinJS.UI.GridLayout
CSS
![Page 16: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/16.jpg)
www.buildwindows.com
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
![Page 17: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/17.jpg)
www.buildwindows.com
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
![Page 18: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/18.jpg)
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);
![Page 19: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/19.jpg)
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);
![Page 20: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/20.jpg)
Data source loads collections with thumbnails
//bind ListView element to data sourcevar listViewControl = WinJS.UI.getControl(lvElement);listViewControl.dataSource = dataSource;
![Page 21: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/21.jpg)
www.buildwindows.com
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
![Page 22: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/22.jpg)
www.buildwindows.com
Thumbnails mode for music and documents• MusicView, DocumentsView, and ListView• Optimized for square layouts• Square cropped from center• Documents get background from system personality
![Page 23: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/23.jpg)
www.buildwindows.com
Thumbnails mode for originals
• SingleItem • Original aspect ratio• No adornments or backgrounds
![Page 24: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/24.jpg)
www.buildwindows.com
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
Windows 8 file access
FileInformationFactory
File Access API
Trust Broker
File System
ListView Control
File System Indexer
Storage Data Source
![Page 25: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/25.jpg)
www.buildwindows.com
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
![Page 26: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/26.jpg)
www.buildwindows.com
ListView and Storage Data Source Adapter
demo
![Page 27: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/27.jpg)
www.buildwindows.com
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
Windows 8 file access
FileInformationFactory
File Access API
Trust Broker
File System
ListView Control
File System Indexer
Storage Data Source
![Page 28: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/28.jpg)
www.buildwindows.com
Building highly custom Metro style apps
Custom View & Data Source Adapter:• Code – enables control and
complexity
Windows 8 file access
FileInformationFactory
Custom Data Source
File Access APITrust Broker
File System
Custom Control
File System Indexer
![Page 29: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/29.jpg)
www.buildwindows.com
Building highly custom Metro style apps
• View control • Build logic to tie collection to control
• Data source • Build bulk loading and unloading through queries• Build eventing using queries
![Page 30: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/30.jpg)
www.buildwindows.com
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
![Page 31: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/31.jpg)
www.buildwindows.com
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
![Page 32: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/32.jpg)
www.buildwindows.com
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
![Page 33: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/33.jpg)
www.buildwindows.com
• Feedback and questions http://forums.dev.windows.com
• Session feedbackhttp://bldw.in/SessionFeedback
thank you
![Page 34: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/34.jpg)
© 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.
![Page 35: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/35.jpg)
www.buildwindows.com
Building highly custom Metro style apps
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
![Page 36: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/36.jpg)
www.buildwindows.com
Custom Data Source
demo
![Page 37: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/37.jpg)
www.buildwindows.com
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
Windows 8 file access
FileInformationFactory
Custom Adapter
File Access APITrust Broker
File System
Custom Control
File system indexer
![Page 38: datasourc e + itemRenderer + layout Storag e Data Source](https://reader036.vdocuments.us/reader036/viewer/2022062309/5697c0041a28abf838cc4140/html5/thumbnails/38.jpg)