Windows 8 Camp Montreal - 2012-04-10 - Integrating the Windows 8 experience with contracts

Post on 07-Nov-2014

1.348 views 1 download

Tags:

description

 

Transcript of Windows 8 Camp Montreal - 2012-04-10 - Integrating the Windows 8 experience with contracts

Integrating the Windows 8 Experience with ContractsFrédéric HarperDeveloper Evangelist @ Microsoft Canada

@fharper | outofcomfortzone.net

AgendaSearch

Share

Settings

You’ll leave with examples of how to:Create great Windows 8 experiences in your

apps

Windows Application Contracts provide a consistent

programming model for integrating with the Windows 8

experience

Share SettingsSearch

App to App Picking

Play To

Search

Search contract makes your app searchable from anywhere in the system

Search is universally accessible, contextual to your app and

always just a single swipe away

demoSearch in Windows 8

Search Anatomy

1. Search box is scoped to the main app on screen

2. Query suggestions provided by the main app on screen• Autocompletes to terms for which the app has search results

3. List of installed Metro style apps that have implemented the search contract

1

2

3

4. Result suggestions provided by the main app on screen• Must include a thumbnail and title• Indicates a strong or exact match result• Takes users directly to the details of the result

Search Anatomy4

Implementing the Search Contract

Search Settings & Events

Search Registration

Search Pane Events

Search Activation

Query Submitted

Suggestions Requested

Manifest Declaration

File Access Capability

Search Pane Settings

Search History (on by default)

Local Content Suggestions

Set placeholder text

Search Activation

User selects a Search location

Search App

Show Search results view

User Search Pane

Activate App for Search

Search Activation

Query text?

Yes

Load previous state

No

Query SubmittedSearch App

Show Search results view

Search Pane

Activate App for Search

Query Submitted Event

Query changed?

Yes

Show previous search results view

No

User enters a query and hits Search

User

User selects a query suggestion

Suggestions RequestedSearch App

Add suggestions to Search Suggestion

Collection

Search Pane

Show search history that matches

Query Submitted Event

HandleAsync?

No

Request Deferral

Yes

User types in Search box

User

Request suggestions from App

Show suggestions from App

Add suggestions to Search Suggestion

Collection

Complete Deferral

demoSearch

Share

Users often come across information they’re excited to

share with someone or utilize in another app

Share provides a lightweight, in context experience for accomplishing this sharing

Windows 8 does the heavy lifting to allow sharing between

apps.

Source apps should include as many representations of the data as possible to

maximize the set of target apps

demoShare

Sharing From Source to TargetShare Target AppShare Broker

User selects “Share”, active app is sent

event

Activated for sharing

Registers with the DataTransfer

Manager

Source App

Filters list of Target Apps and Quicklinks

User selects Target App or Quicklink

Processes DataPackage contents

Reports Complete

Completes Async calls and returns

Receives event and fills DataPackage

DataPackage lives in source

application

Activate Target as kind shareTarget

The Data Package

Data Package – Share Currency

Standard formats: Text, URI, HTML, images…

Extensible formats

Share data in a number of formats

Data Package APIs and PropertiesdataTransferManager.addEventListener("datarequested", function (e) {

…// Common propertiesvar request = e.request;request.data.properties.title = "Title for data"; request.data.properties.description = "Description of the data"; request.data.properties.thumbnail = thumbnail; // of type StreamReference

// Common methods request.data.setText("Text to share");request.data.setHtml("<HTML …>");request.data.setUri(uri /* of type Uri */);request.data.setBitmap(stream /* RandomAccessStream */);

// Custom data request.data.setText("FormatID", "Text to share");request.data.setData("FormatID", datastream /* RandomAccessStream */);

Share Source

Things to Consider as a Share Source App Listen for and handles a Share event to participate

Content can be shared in two ways: Implicit – user selects Share without making a selection Explicit – user selects content in an app and then selects

Share

Build your data package for best results

Setting Up a Share Source App// set up data transfer managervar dataTransferManager =

Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();

// create event listener to be called on to fill out data packagedataTransferManager.addEventListener("datarequested", function (e) {

// fill in data package with what to sharevar request = e.request;request.data.properties.title = "Title for data"; request.data.properties.description = "Description of the data"; request.data.setText("Text to share");...});

demoShare Source

Share Target

Being a Share target will increase usage of your app or service and keeps your service fresh with content that matters

to users

Things to Consider as a Share Target App Register as a Share target and specify the formats you

accept

Build your app UI to look best as part of the Share experience Selection of people or places to Share within your app Quick, lightweight experience

Use the DataPackage to tailor the user experience

Report completion

Return a Quicklink

Setting Up a Share Target App<!– extension needs to be added to package.appxmanifest --><Extensions>

<Extension Category="windows.shareTarget" StartPage="shareTarget.html">

<ShareTarget><SupportedFileTypes><FileType>.jpg</FileType>

</SupportedFileTypes><DataFormat>text</DataFormat>

</ShareTarget></Extension>

</Extensions>...// activation function in shareTarget.jsfunction activated(e) {

if (e.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {

share = e.shareOperation;document.querySelector('.metadata h1').textContent = share.data.properties.title;document.querySelector('.metadata p').textContent = share.data.properties.description;

Recap: Sharing from Source to Target Share Target AppShare Broker

User selects “Share”, active app is sent

event

Activated for sharing

Registers with the DataTransfer

Manager

Source App

Filters list of Target Apps and Quicklinks

User selects Target App or Quicklink

Processes DataPackage contents

Reports Complete

Completes Async calls and returns

Receives event and fills DataPackage

DataPackage lives in source

application

Activate Target as kind shareTarget

demoShare Target

Settings

Settings contract provides quick,

in-context access to settings in the current immersive app

experience

Adding Settings Flyout to Settings Charm

function scenario2AddSettingsFlyout() {

WinJS.Application.onsettings = function (e) {

e.detail.applicationcommands = { "helpDiv": { title: "Help",

href: "/html/2-SettingsFlyout-Help.html" } };

WinJS.UI.SettingsFlyout.populateSettings(e);

};

}

demoSettings

Recap

Integrating with Contracts Search contract makes your app searchable from anywhere

in the system, results in more app launches

Share allows you to easily share data from your app to other apps

Share allows you to connect your app with other apps, results I more app launches

Settings provides a contextual way to provide settings information

Invest in other contracts to integrate more Windows 8 experiences

Related Sessions

[APP-210T]Build data-driven collection and list apps using ListView in HTML5

[APP-405T]Share: Your app powers the Windows 8 share experience

[APP-741T]Metro style apps using XAML: Make your app shine

[APP-398T]How to declare your app’s capabilities

[APP-408T]Integrating with the Windows device experience

Further Reading and Documentation SDK Samples: Adding Search

Example of how to implement the search contract JavaScript, C# and C++ code samples

Windows Application contracts

Search API Reference

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