Seamlessly interacting with web and l ocal data

1. PLAT-894T Seamlessly interacting with web and local data Manav Mishra Principal Group Program Manager Microsoft Corporation

2. Windows 8 allows seamless access to files wherever it lives – local, devices, network, web or contained within other apps

3. Files • We use and create files everyday • Files live in various places • Each place has unique restrictions and access models

4. Agenda • File access in Windows 8 • Compelling views of local files in your app, easily • Seamless interchange of web and local file representations • App-to-app file exchange with contracts You’ll leave with examples of how to Get started with file access in Windows 8

5. Files in Windows 8 Web (via manifest) 1 Drives & network (via Picker) Local files (via manifest) App data (free)

6. Windows 8 file access building blocks Metro style Apps ListView Control Windows 8 file access File data source File access API File picker App-to-app contracts 2 4 1 Trust broker 3 Type interchange Windows Core OS Services File system File system indexer

7. 1. Accessing the file system “It’s the PC reimagined”

8. File access • Declarative access to the most-used system places– music, videos, pictures and documents libraries, using the manifest • Enables programmatic access • File picker gets full-fidelity file system access for free, with user-consent • Enables programmatic access

9. File actions • Full enumeration of files and folders • Rich search and metadata pivots of user files • Access to thumbnails and properties of files • Core file actions like new, copy, delete, rename and move

10. demo File system access

11. Brokered file access • Declare access to the music library in the app manifest • <Capabilities> • <Capability Name= "musicLibrary" /> • </Capabilities>

12. Brokered file access Get all the music in the music library var picturesLibrary = Windows.Storage.KnownFolders.musicLibrary; musicLibrary.getFilesAsync().then(function (file) { …

13. Brokered file access Delete a file sampleFile.deleteAsync().then(function (file) { …

14. File pickerFull-fidelity file system access for free • System control optimized for rich browsing of file locations • Enables opening & saving files for all local and network locations • Offers photos and attachment views • Apps choose file types they want the picker to filter-by • Supports ‘basket’ for multiple selection scenarios

15. demo File picker

16. File picker • Show the file picker with filters • var openPicker = new Windows.Storage.Pickers.FileOpenPicker(); • openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]); • openPicker.pickSingleFileAsync().then(function (file) { …

17. File picker Show the file picker in multiselect mode openPicker.pickMultipleFilesAsync().then(function (file) { …

18. File picker Show the file picker in thumbnail mode openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

19. File broker and picker offer apps full access to the file system while keeping the user in control

20. 2. Building compelling views of local files, easily “Data-source adapter”

21. Building compelling views ListView data-source adapter • Communicates between the file system and the ListView control • Uses system indexer to populate metadata in the view • Automatic support for virtualized views for fast scrolling • Automatically loads thumbnails in reading order • Automatically handles change notifications

22. demo ListView data-source SDK sample

23. ListView data-source adapter • Define library to access • var pics = Windows.Storage.KnownFolders.picturesLibrary; • Configure data-source • var dsOptions = { • mode: Windows.Storage.FileProperties.ThumbnailMode.picturesView, • requestedThumbnailSize: 192, • synchronous: false • };

24. ListView data-source adapter • Configure ListView • var lvOptions = { • dataSource: new WinJS.UI.StorageDataSource(pics, dsOptions), • layout: new WinJS.UI.GridLayout(), • };

25. ListView data-source adapter Create ListView new WinJS.UI.ListView(document.getElementById("listviewDiv"), lvOptions);

26. Build compelling gallery views of local files, easily

27. 3. Type interchange makes interchange of file representations, seamless

28. Interchanging web and local file representations • Bring forward existing knowledge, expertise and scenarios for interacting with any content abstraction, be it web or local • Seamless interchange between local and web representations

29. Data typesInterchange http:// Playback a video… …that was transcoded on the fly … …after being uploaded to a service… …from a file which was picked from the file picker URL URI Stream Blob File Stream Blob File

30. demo File type interchange

31. url= URL.createObjectURL(file, false);

32. Seamless interchange between web and local file representation, for your scenarios

33. 4. App-to-app file exchange with contracts Experience gets better with more apps

34. App-to-app contractsBetter with more apps • Users think about their content in an app-centric way“My pictures are on my photo sharing service” • File picker contract enables • Seamlessly integration with the system file picking experience • Delight users with a rich view that only your app can produce

35. demo File picker contract

36. File Picker contractBetter with more apps Web files Socialite File picker contract Tweet@rama App data User files

37. File picker contract • Register in Manifest • <Extensions> • <Extension Category="windows.filePicker“ • StartPage="filePicker.html">

38. File picker contract • Connecting to the File Picker basket • function onActivated(e) { • if (e.kind === Windows.ApplicationModel.ActivationKind.FilePicker) { • var basket = e.basket; • basket.addEventListener("fileRemoved", onFileRemoved); • } • }

39. File picker contract • Add & remove files from the File Picker basket • function onItemIndicated(myItem) { • if (basket.containsFile(myItem.id)) { • basket.removeFile(myItem.id); • } else { • basket.addFile(myItem.id, myItem.storageFile); • } • }

40. App-app contracts make the experience better as more apps are installed

41. Recap

42. Recap • File broker and picker offer apps full access to the file system while keeping the user in control • Building compelling gallery views of local files very easy, with the data-source adapter • Seamless interchange between web and local file representations, for your scenarios • App-app contracts make the experience better as more apps are installed

43. Related sessions • [PLAT-891T] Using files: accessing, searching and acting on files • [PLAT-892T] Building great Metro style gallery apps today • [APP-398T] How to declare your app’s capabilities • [APP-405T] Share: your app powers the Windows 8 share experience • [PLAT-282T] File type associations and AutoPlay

44. Further reading and documentation • Accessing files and data • Adding file picker controls • Accessing files and data • Windows application contracts • Contact info – • Manav Mishra • http://forums.dev.windows.com (mention PLAT-894T) • Find me at the booth right after the talk

45. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

46. © 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.