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


Running

Not Running

Suspended

Activating Suspending

Terminating

Resuming

Application Model | App Lifecycle

Activated Suspended Terminated


Application Model | State Management

Local State

Transient State Persistence

Temp

Folder

Local Folder / Settings

Cloud


// 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;

}

}


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


Collaboration between Apps

Sharing

Search

Activation Mechanisms


Collaboration | Sharing


Sharing | Manifest Declaration Target Application


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);

}


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 } }

}


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();

}


Collaboration| Search


Search | Manifest Declaration


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";

}

}


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);

}


Other Activation Kinds| Protocol Activation


Protocol Activation | Manifest Declaration


// 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


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());

}

}


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


Development and execution model

changes

Visual Studio

.Net Profile

Application Deployment & Execution Model


Development Changes | Visual Studio


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


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


Sharing Perspectives

Q&A session

Technology

Redefining Perspectives 4 - Metro ui Session 2 ver 3 5 (5)