Metro UI Session 2

7/29/2019 Metro UI Session 2

1/26

Metro UI: A deep dive

Session 2


2/26

2 COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

What well cover:

ApplicationModel

Collaborationbetween apps

Developmentand executionmodel changes

Deep-Dive into developing real world capital market apps

using WinRT & Metro UI


3/26


Running

Not RunningSuspended

Activating Suspending

Terminating

Resuming

Application Model |App Lifecycle

Activated Suspended Terminated


4/26


Application Model | State Management

LocalState

Transient State Persistence

Temp

Folder

Local Folder / Settings

Cloud


5/26


// 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 eventvoid OnSuspending(object sender, SuspendingEventArgs e){

foreach (var item in AppSettings.Instance.Settings){

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

}


6/26


Things to remember

Save application data when the app isbeing suspended

Release exclusive resources and filehandles when the app is beingsuspended

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


7/267 COPYRIGHT 2012 SAPIENT CORPORATION | CONFIDENTIAL

Collaboration between Apps

Sharing

Search Activation Mechanisms



Collaboration | Sharing



Sharing | Manifest DeclarationTarget Application



Sharing | Prepare Data inSource 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(this.DataRequested);}



Sharing | Consume Data inTarget 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 dataif(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 inTarget Application

// Call report completed on click of close button to report thecompleteness of share operation.

function reportCompleted(){

shareOperation.reportCompleted();}



Collaboration| Search



Search | Manifest Declaration


15/26


Search | In Application Context

// In OrderPage.xaml.cs add handler for QuerySubmitted event of CurrentViews 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/26


Search | Handle Activation Kind

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

// application class. This gets invoked by system.

protected override voidOnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgs args){

// Navigate user to Search result page with search context.PMWorkbench.SearchResultsPage1.Activate(args.Query Text);}


17/26


Other Activation Kinds| Protocol Activation


18/26


Protocol Activation | Manifest Declaration


19/26


// 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 URIWindows.System.Launcher.LaunchUriAsync(uri);

}

Protocol Activation | Prepare URI inSource App


20/26


Protocol Activation |Activation inTarget 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 asProtocolActivatedEventArgs;

if (protocolActivatedEventArgs != null)OnProtocolActivated(protocolActivatedEventArgs.Uri.

ToString());}

}


21/26


Things to remember

Use the standard charms and contracts acrossapps to provide consistent user experience

Provide contextual information while usingSearch and Share charms

Use various application activation mechanisms

to create powerful mash-ups


22/26


Development and execution modelchanges

Visual Studio

.Net Profile Application Deployment & Execution Model


23/26


Development Changes | Visual Studio


24/26


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 Metroapps

Silverlight 5


25/26


Deployment & Execution Model Changes

Class

Catalog

Extension

Catalog

Deployment

Engine


26/26


Sharing Perspectives

Q&A session

Metro UI Session 2

Documents