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
="imageslogo.png"
Description
="Hello_World"
....
xCopy Deployment will not work
AppContainers - New security model
Capabilities - To access system resources

Sharing Perspectives
 Q&A session

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

Recommended

Recommended

More Related Content

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

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

Recently uploaded

Recently uploaded (20)

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