redefining perspectives 4 - metro ui session 2 ver 3 5 (5)

Metro UI: A deep dive

Session 2

2 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

What we’ll cover:

Application Model

Collaboration between apps

Development and execution model changes

Deep-Dive into developing real world capital market apps

using WinRT & Metro UI

3 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Running

Not Running

Suspended

Activating Suspending

Terminating

Resuming

Application Model | App Lifecycle

Activated Suspended Terminated

4 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Application Model | State Management

Local State

Transient State Persistence

Temp

Folder

Local Folder / Settings

Cloud

5 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

// Handle OnLaunched handler of application class and check for previous execution state

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

if(args.PreviousExecutionState == ApplicationExecutionState.Terminated) {

foreach (var item in ApplicationData.Current.LocalSettings.Values)

{

AppSettings.Instance.Settings[item.Key] = item.Value;

} }

}

State Management | Implementation

public App()

{

//Add application suspending handler.

this.Suspending += OnSuspending;

}

// Handler for suspending event

void OnSuspending(object sender, SuspendingEventArgs e)

{

foreach (var item in AppSettings.Instance.Settings)

{

ApplicationData.Current.LocalSettings.Values[item.Key] = item.Value;

}

}

6 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Things to remember…

Save application data when the app is being suspended

Release exclusive resources and file handles when the app is being suspended

Save less data (only as much as you require) and save as you go

7 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Collaboration between Apps

Sharing

Search

Activation Mechanisms

8 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Collaboration | Sharing

9 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Sharing | Manifest Declaration Target Application

10 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Sharing | Prepare Data in Source Application

// Prepare data to share in DataRequested handler

void DataRequested(DataTransferManager sender, DataRequestedEventArgs e)

{

// Set context information about sharing.

e.Request.Data.Properties.Title = "Orders Manager";

e.Request.Data.Properties.Description = "Order Details for " + orderCount.ToString() + "

order(s)";

// Specify the format and set actual data to be shared with another application.

e.Request.Data.SetData(StandardDataFormats.Html,

OrderItemCollection.ToHTML(_data));

}

// Add handler to Data Requested event of DataTransferManager class.

public OrdersPage()

{

DataTransferManager datatransferManager = DataTransferManager.GetForCurrentView();

// Add handler that gets invoked when sharing starts.

datatransferManager.DataRequested += new TypedEventHandler<DataTransferManager,

DataRequestedEventArgs>(this.DataRequested);

}

11 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Sharing | Consume Data in Target Application

// Add handler for activated event in javascript file.

WinJS.Application.addEventListener("activated",

activatedHandler, false);

// Handle share activation kind, extract data and draw graphs.

function activatedHandler(args) {

if (args.detail.kind ==

Windows.ApplicationModel.Activation.ActivationKind.shareTarget)

{

// Check for Html data format and extract data

if(args.detail.data.contains(Windows.ApplicationMo

del.DataTransfer.StandardDataFormats.html)) {

eventArgs.detail.data.getHtmlFormatAsync().then

(function (htmlFormat)

{ //Draw the charts using the collection } }

}

12 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Sharing | Report Complete in Target Application

// Call report completed on click of close button to report the

completeness of share operation.

function reportCompleted()

{

shareOperation.reportCompleted();

}

13 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Collaboration| Search

14 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Search | Manifest Declaration

15 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Search | In Application Context

// In OrderPage.xaml.cs add handler for QuerySubmitted event of CurrentView’s SearchPane.

public void OrderPage ()

{

// In QuerySubmitted handler navigate user to search result page.

Windows.ApplicationModel.Search.SearchPane.GetCurrentView().QuerySubmitted +=

(sender, queryArgs) =>

PMWorkbench.SearchResultsPage1.Activate(queryArgs.QueryText);

}

// Handle visibility change of search page and add context information about search criteria.

public OrdersPage()

{

// Get search pane for current view and add handler to visibility change.

var searchPane = SearchPane.GetForCurrentView();

searchPane.VisibilityChanged += (sender, args) =>

{

if (args.Visible)

sender.PlaceholderText = "Deal ID /Symbol /Counterparty";

}

}

16 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Search | Handle Activation Kind

// In App.xaml.cs handle OnSearchActivated method of

// application class. This gets invoked by system.

protected override void

OnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEvent

Args args)

{

// Navigate user to Search result page with search context.

PMWorkbench.SearchResultsPage1.Activate(args.Query Text);

}

17 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Other Activation Kinds| Protocol Activation

18 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Protocol Activation | Manifest Declaration

19 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

// Prepare a URI with the name of the protocol and the data to

// be passed to the app to be launched

Order Manager

private async void btnAddToWatch_Click(object sender,

RoutedEventArgs e)

{

Uri uri = new Uri(@"watch://" + orderItem.Security);

// Launch the URI

Windows.System.Launcher.LaunchUriAsync(uri);

}

Protocol Activation | Prepare URI in Source App

20 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Protocol Activation | Activation in Target App

// Handle activated event and check for kind = protocol

// Parse data passed along with the protocol

Watch list

protected override void OnActivated(IActivatedEventArgs args)

{

if (args.Kind == ActivationKind.Protocol)

{

var protocolActivatedEventArgs = args as

ProtocolActivatedEventArgs;

if (protocolActivatedEventArgs != null)

OnProtocolActivated(protocolActivatedEventArgs.Uri.

ToString());

}

}

21 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Things to remember…

Use the standard charms and contracts across apps to provide consistent user experience

Provide contextual information while using Search and Share charms

Use various application activation mechanisms to create powerful mash-ups

22 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Development and execution model

changes

Visual Studio

.Net Profile

Application Deployment & Execution Model

23 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Development Changes | Visual Studio

24 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Development Changes | .NET Profile

UI stack moved to WinRT

WCF changes

XML

HTTP

WCF

Serialization

BCL

.NET for Metro Apps

.Net Framework

4.5

Windows

Phone 7.1

.Net for Metro

apps

Silverlight 5

25 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Deployment & Execution Model Changes

Class Catalog

Extension Catalog

Deployment

Engine

<Applications> <Application Id="App" StartPage ="default.html"> <VisualElements DisplayName ="Hello World" Logo ="images\logo.png" Description ="Hello_World" ....

xCopy Deployment will not work

AppContainers - New security model

Capabilities - To access system resources

26 © COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Sharing Perspectives

Q&A session