1 / 38

1+1=3: Using app contracts to integrate with Windows 8 experiences

1+1=3: Using app contracts to integrate with Windows 8 experiences. Jaime Rodriguez Windows Evangelist 3-100 . Reimagine connected apps . Most apps have rich content that users want to.. . Find and act upon Share Save or enhance in other apps Print Send to devices ….

lysa
Download Presentation

1+1=3: Using app contracts to integrate with Windows 8 experiences

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 1+1=3: Using app contracts to integrate with Windows 8 experiences Jaime Rodriguez Windows Evangelist 3-100

  2. Reimagine connected apps

  3. Most apps have rich content that users want to.. • Find and act upon • Share • Save or enhance in other apps • Print • Send to devices • …

  4. Contracts are agreements between apps and the operating system to accomplish a common task in a manner. consistent, easily accessible

  5. Windows 8 contracts • Share • Search • Settings • Play To • File Picker • Cached file updater

  6. Contracts in action Demo

  7. Windows does the heavy lifting, you focus on the scenario

  8. Share contract

  9. Sharing Share target Share source

  10. Sharing from source to target Source app Operating system Share target app Registers with the DataTransfer Manager User selects “Share”, active app is sent event Filters list of Target Apps and Quicklinks Receives event and fills DataPackage Completes async calls and returns User selects Target App or Quicklink Activated for sharing Activate Target as kind shareTarget Processes DataPackage contents DataPackage lives in source application Reports Complete

  11. Implementing share source • //Step 1: Listen for DataTransferManager.datarequestedvardtmns= Windows.ApplicationModel.DataTransfer.DataTransferManager; vardataTransferManager = dtmns.getForCurrentView(); dataTransferManager.addEventListener("datarequested", dataRequestHandler); • /* Step2: In datarequested handler, add title, description, and data in supported formats.*/ • function dataRequestHandler ( e ) { varrequest = e.request; • request.data.properties.title = “Title is required” ; • request.data.properties.description= “Description is optional” ; • request.data.setText(“Hi mom!”); • }

  12. Implementing share source Demo

  13. Implementing share target • //Step 1: Declare contract in app manifest • //Step 2: Handle app activation • //Step 3: Handle share operation • //Step 4: Create a QuickLink to return (Optional) • //Step 5: Report extended status and completion

  14. Declaring share contract in app’s manifest • <Extensions><ExtensionCategory="windows.shareTarget"StartPage="target.html"> • <ShareTarget> • <DataFormat>text</DataFormat> • <DataFormat>uri</DataFormat> • <DataFormat>bitmap</DataFormat> <DataFormat>html</DataFormat> • </ShareTarget> • </Extension> • </Extensions>

  15. Implementing share target • //Step 2: Handle app activation • if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) { //Step 3: Handle share operation shareOperation= eventObject.detail.shareOperation; if (shareOperation.data.contains( • Windows.ApplicationModel.DataTransfer.StandardDataFormats.text)) { • shareOperation.data.getTextAsync().done(function (text) { • displayContent ("Text: ", text, false); }); } • //Step 4: Return a QuickLink object (Optional) varquickLink = new Windows.ApplicationModel.DataTransfer.ShareTarget.QuickLink();quickLink.id = “uniqueId”;quickLink.title = “Title for this link” ; quickLink.supportedDataFormats.replaceAll([dataFormats.text, dataFormats.uri]); • //Step 5: Report extended status and completion shareOperation.reportCompleted(quickLink); • }

  16. Implementing share target Code walk-through

  17. Sharing tips: Source Target Include as many data formats as appropriateLeverage app’s context Leverage the Visual Studio templateBuild a beautiful, lightweight share experienceReport completion & progress Return QuickLinksYou can use Visual Studio to debug Share operations

  18. Answers to share FAQs 1 2 3 You can’t control what apps you share with. You can control the formats. You can configure metadata from a website on share. No extra work required for long-running share operations Look into BackgroundUploader class if you want to transfer the file during share Quicklinks are not roamed and they are not preconfigured. QuickLink image can (and should) be different from your app icon

  19. Search contract

  20. Search contract makes your app searchable from anywhere in the system.

  21. Search anatomy 1 4 • Search box (scoped) • Apps that implement search contract • Query suggestions provided by foreground app • Result suggestions 3 2

  22. Implementing search • //Step 1: Declare search in the manifest • //Step 2: Check app activation and implement actual search • WinJS.Application.addEventListener("activated", function (args) { /*.. */ • if (args.detail.kind === appModel.Activation.ActivationKind.search) • return nav.navigate(searchPageURI, { queryText: args.detail.queryText}); } • // Step 3: Implement querysubmitted handler Windows.ApplicationModel;.Search.SearchPane.getForCurrentView().onquerysubmitted = function (args) { nav.navigate(searchPageURI, args); };//Step 4: [Recommended] Implement Suggestions Requested • appModel.Search.SearchPane.getForCurrentView().onsuggestionsrequested = function (eventObject) { • var text = eventObject.queryText.toLowerCase(); varterms = ["salt", "pepper", "water", "sugar", "oil"]; • terms.forEach(function (term) { • if (term.indexOf(text) == 0) • eventObject.request.searchSuggestionCollection.appendQuerySuggestion(term); • });};

  23. Implementing search Code walk-through

  24. Search tips: If your app implements search, use the charmImplement a great results page with filter, sort, etc.Avoid presenting results on the right edgeProvide suggestionsUse placeholder textSearch is not “Find”

  25. Answers to search FAQs 1 2 3 End-user is in control of the search pane.Most frequently used searchpane goes to the topUser can turn apps search off in some apps You can have separators within results and create headers with these Suggestions can be asynchronous There is a limit of five search suggestions

  26. File Picker contracts

  27. File picker contracts enable seamless integration between apps through the system’s file picking experience

  28. FileOpenPicker Providing app (implements contract) Calling app File Picker Calls FileOpenPicker Loads default (last) store Activated to provide files User selects app to provide files Loads app’s page to display provided files Navigates to a page that displays files User picks file (or save location) Completes async calls and captures picked file Returns picked file to calling app

  29. Implementing File Open Picker • //Step 1: Declare File Open Picker in manifest • //Step 2: Check app activation and implement file Open • app.onactivated = function activated(args) { • if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.fileOpenPicker) {// Step 3: Connect to the basket • pickerUI= args.detail.fileOpenPickerUI; pickerUI.onfileremoved = fileRemovedFromPickerUI; • //Step 3: Populate basket • args.setPromise(WinJS.UI.processAll() .then(function () { varlistView = document.querySelector(".pickerlist").winControl;listView.itemDataSource= getPickerDataSource();listView.onselectionchanged= updatePickerUI; • })); }} • // Step 4: Add/Remove from basket function updatePickerUI (args){ // .. get filename from listView selected items … Windows.ApplicationModel.Package.current.installedLocation.getFileAsync(fileName).then(function (file) {pickerUI.addFile(file.name, file); }); }

  30. Implementing file pickers Code walk-through

  31. File pickers tips Support as many file types as you canImplement only the right contract, you don’t have to do bothUse deferred when neededCreate dedicated, light, picker UI with app’s contextSet appropriate view mode (e.g., thumbnail or list)Have commit button on your task Ensure user gets a visual confirmation

  32. Answers to file picker FAQs 1 2 3 4 App selection is matched to supported file types Apps are not subject to PLM during picking There is no event or notification to the target about a successful file saving operation The color from the picker is your app’s color

  33. Contracts cheat-sheet

  34. Recap

  35. More integration points: extensions • Account picture provider • Background tasks • Camera settings • Contact picker • File activation • Game explorer • Print task • Protocol activation

  36. References • SamplesApp Settings Contract • File Picker • Search • Print • Share source • Share targetPlayTo • Design guidelinesSharing • File pickers • Search • AppSettings • PlayTo

  37. Resources • Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512 • Design: http://design.windows.com/ • Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples • Videos: http://channel9.msdn.com/Windows Please submit session evals by using the Build Windows 8 app or at http://aka.ms/BuildSessions

More Related