take a ride on the metro
DESCRIPTION
More info on http://www.techdayTRANSCRIPT
![Page 1: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/1.jpg)
Take a Ride on the Metro Jeff
ProsiseCofounderWintellect
![Page 2: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/2.jpg)
What is Metro?A new shell for Windows 8Runs immersive apps ("Metro apps") distributed through Windows StoreRuns on Intel processors and ARM processorsTouch-first, but with support for mouse and stylusRich API for shell integration (tiles, toasts, etc.)
A new programming model for developersXAML + C#/C++/VB, orHTML5 + JavaScript
![Page 3: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/3.jpg)
Windows 8 Architecture
![Page 4: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/4.jpg)
The Windows Runtime (WinRT)New API for Metro-style appsWin32 is old, complicated, and built for C/C++WinRT is new, simpler, and language-agnostic
APIs for storage, networking, and much moreMore than 100 namespaces, thousands of types
I/O is asynchronous (> 50 ms)C# await keywordJavaScript promises (.then)
![Page 5: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/5.jpg)
Creating a File (.NET/C#)string path = Environment.GetFolderPath
(Environment.SpecialFolder.MyDocuments) + "\\Sample.txt";
using (StreamWriter writer = new StreamWriter(path))
{
writer.WriteLine("Hello, .NET");
}
![Page 6: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/6.jpg)
Creating a File (WinRT/C#)var folder = KnownFolders.DocumentsLibrary;
var file = await folder.CreateFileAsync("Sample.txt");
var ras = await file.OpenAsync(FileAccessMode.ReadWrite);
using (Stream stream = ras.OpenWrite())
{
using (StreamWriter writer = new StreamWriter(stream))
{
writer.WriteLine("Hello, Metro");
}
}
![Page 7: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/7.jpg)
Creating a File (WinRT/JavaScript)var folder = Windows.Storage.KnownFolders.documentsLibrary;
folder.createFileAsync("Sample.txt").then(function (file) {
file.OpenAsync(Windows.Storage.FileAccessMode.readWrite).then(function (ras) {
var stream = ras.openWrite();
var writer = new Windows.Storage.Streams.DataWriter(stream);
writer.writeString("Hello, Metro");
writer.storeAsync().then(function () {
stream.flushAsync().then(function () { });
});
});
});
![Page 8: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/8.jpg)
DemoYour First Metro Application
![Page 9: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/9.jpg)
Pointer InputWindows 8 is a "touch-first" operating systemWindows.UI.Xaml.UIElement defines events for processing pointer input (including touch input)Pointer events for low-level input (e.g., pressed)Tap events for taps and other simple gesturesManipulation events for dragging and pinchingInertia support built in
PointerDeviceType identifies pointer type (touch, stylus, or mouse) except on manipulation events
![Page 10: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/10.jpg)
Pointer EventsEvent Description
PointerCanceled Fired when the pointer loses contact "abnormally"
PointerCaptureLost Fired when a UI element loses pointer capture
PointerEntered Fired when the pointer enters a UI element
PointerExited Fired when the pointer exits a UI element
PointerMoved Fired when the pointer moves over a UI element
PointerPressed Fired when the pointer is pressed over a UI element
PointerReleased Fired when the pointer is released over a UI element
PointerWheelChanged
Fired when the mouse wheel is rolled
![Page 11: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/11.jpg)
Detecting Mouse Clicks// XAML
<Rectangle Width="100" Height="100" Fill="Red" PointerPressed="OnPressed" />
// C#
void OnPressed(Object sender, PointerEventArgs e)
{
PointerPoint point = e.GetCurrentPoint((UIElement) sender);
// Change Rectangle's fill color to yellow on mouse click
if (point.PointerDevice.PointerDeviceType == PointerDeviceType.Mouse)
((Rectangle) sender).Fill = new SolidColorBrush(Colors.Yellow);
// Get coordinates where event occurred
double x = point.Position.X;
double y = point.Position.Y;
}
![Page 12: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/12.jpg)
Tap EventsEvent Description
Tapped Fired when a UI element is tapped
DoubleTapped Fired when a UI element is double-tapped
RightTapped Fired when a UI element is right-tapped (mouse only)
Holding Fired when a UI element is tapped and held
![Page 13: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/13.jpg)
Detecting Tap Gestures// XAML
<Rectangle Width="100" Height="100" Fill="Red" Tapped="OnTapped" />
// C#
void OnTapped(Object sender, TappedEventArgs e)
{
// Change Rectangle's fill color to yellow when tapped
((Rectangle) sender).Fill = new SolidColorBrush(Colors.Yellow);
// Get tap coordinates
double x = e.GetPosition((UIElement) sender).X;
double y = e.GetPosition((UIElement) sender).Y;
}
![Page 14: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/14.jpg)
Manipulation EventsEvent Description
ManipulationStarting Fired when a manipulation is about to start
ManipulationStarted Fired when a manipulation begins
ManipulationDelta Fired when a manipulation continues
ManipulationCompleted Fired when a manipulation ends
ManipulationInertiaStarting
Fired when a manipulation ends and the finger was still moving when it broke contact with the screen
![Page 15: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/15.jpg)
Moving and Scaling a UI Element// XAML
<Rectangle ... ManipulationDelta="OnManipulationDelta" ManipulationMode="All">
<Rectangle.RenderTransform>
<CompositeTransform x:Name="RectTransform" />
</Rectangle.RenderTransform>
</Rectangle>
// C#
void OnManipulationDelta(Object sender, ManipulationDeltaEventArgs e)
{
RectTransform.TranslateX += e.DeltaManipulation.Translation.X;
RectTransform.TranslateY += e.DeltaManipulation.Translation.Y;
RectTransform.ScaleX *= e.DeltaManipulation.Scale;
RectTransform.ScaleY *= e.DeltaManipulation.Scale;
}
![Page 16: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/16.jpg)
DemoPointer Input
![Page 17: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/17.jpg)
Application LifecycleMetro apps run one at a timeApps not in the foreground are suspendedApplication.Suspending event precedes suspensionSuspended apps may be terminatedHandle Suspending event and save state in application data (Windows.Storage.ApplicationData)
Apps are resumed when (if) user switches backOverride Application.OnLaunched and restore state if app was suspended and terminated
![Page 18: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/18.jpg)
Saving State in SettingsApplication.Current.Suspending += (s, e) =>
{
// Persist the TextBox named "Input" in LocalSettings
ApplicationData.Current.LocalSettings.Values["Input"] = Input.Text;
// Or persist it in RoamingSettings
ApplicationData.Current.RoamingSettings.Values["Input"] = Input.Text;
};
![Page 19: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/19.jpg)
Restoring State from Settings// App.xaml.csprotected override void OnLaunched(LaunchActivatedEventArgs e){ Window.Current.Content = new MainPage(e.Kind == ActivationKind.Launch && e.PreviousExecutionState == ApplicationExecutionState.Terminated); Window.Current.Activate();}
// MainPage.xaml.cspublic MainPage(Boolean restore){ InitializeComponent(); if (restore) Input.Text = ApplicationData.Current.LocalSettings.Values["Input"] ?? String.Empty;}
![Page 20: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/20.jpg)
The Resuming Event
Fired when app is resumed following suspension• Fired after Application.OnLaunched is called• Fired regardless of whether app was terminated• Receives no information indicating whether app was
terminated; not a replacement for OnLaunchedUse Resuming events to update state that might have gotten stale while app was suspended
![Page 21: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/21.jpg)
Using Resuming EventsApplication.Current.Resuming += (s, e) =>
{
// TODO: Freshen stale state
}
![Page 22: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/22.jpg)
DemoProgram Lifecycle Management (PLM)
![Page 23: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/23.jpg)
ContractsContracts allow apps to integrate with charmsCharms provide unified and predictable way for users to access common features such as search and settings
Three types of contractsSharing – Share data using Share charmSearch – Search for data using Search charmSettings – Edit application settings and user preferences through Settings charm
Essential part of Metro UI
![Page 24: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/24.jpg)
SharingAllows sharing of data between appsSource app registers handler for DataRequested event fired when user taps share charmHandler receives DataPackage and writes data to itText, RTF, HTML, URI, Bitmap, and StorageItems
Target app selected by user is launched by OSPassed a ShareOperation containing a DataPackageTarget retrieves data from the DataPackage
Think of it as the "Metro clipboard"
![Page 25: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/25.jpg)
Sharing TextDataTransferManager.GetForCurrentView().DataRequested += (s, e) =>
{
DataPackage dp = e.Request.Data;
dp.Properties.Title = "This is my title";
dp.Properties.Description = "This is my description";
dp.RequestedOperation = DataPackageOperation.Copy;
dp.SetText("Hello, Metro");
}
![Page 26: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/26.jpg)
Sharing an ImageDataTransferManager.GetForCurrentView().DataRequested += (s, e) =>
{
DataPackage dp = e.Request.Data;
dp.Properties.Title = "This is my title";
dp.Properties.Description = "This is my description";
dp.RequestedOperation = DataPackageOperation.Copy;
DataRequestDeferral deferral = e.Request.GetDeferral();
StorageFile file = await KnownFolders.DocumentsLibrary.GetFileAsync("Image.jpg");
IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
dp.SetBitmap(stream);
deferral.Complete();
}
![Page 27: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/27.jpg)
Consuming a Shared Imagepublic void Activate(ShareTargetActivatedEventArgs args){ Window.Current.Content = this; Window.Current.Activate();
var op = args.ShareOperation; string title = op.Data.Properties.Title; string description = op.Data.Properties.Description; BitmapImage bi = new BitmapImage(); bi.SetSource(op.Data.GetBitmap()); XamlImage.Source = bi; // Display the image
ShareButton.Click += (s, e) => { op.ReportCompleted(); };}
![Page 28: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/28.jpg)
DemoSharing
![Page 29: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/29.jpg)
TilesEvery app has a primary tileCreated when app is installed; can be square or wide
App can also create secondary tilesAct as shortcuts into a Metro appActivate app in a predetermined state
Each secondary tile has an ID and argumentsSpecified when tile is createdArguments passed in LaunchActivatedEventArgs when app is launched (Application.OnLaunched)
![Page 30: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/30.jpg)
Tile UpdatesTiles can be updated with live contentTileUpdateManager factory class creates TileUpdatersTileUpdater.Update updates a tile's content
Tile updates can be queued or non-queuedTileUpdater.EnableNotificationQueue enables queuingUp to five notifications can be queued; system rotates queued updates
Tiles can also be updated by push notifications transmitted by Windows Push Notification Service
![Page 31: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/31.jpg)
Updating a Tilevar tu = TileUpdateManager.CreateTileUpdaterForApplication();
XmlDocument tileXml = ...; // XML for wide and small tiles
var tn = new TileNotification(tileXml) {
ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10), Tag = "MyTag"
};
tu.Update(tn);
![Page 32: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/32.jpg)
Secondary TilesEvery app has a primary tileCreated when app is installed
App can also create secondary tilesAct as shortcuts into a Metro appActivate app in a predetermined state
Each secondary tile has an ID and argumentsSpecified when tile is createdArguments passed in LaunchActivatedEventArgs when app is launched (Application.OnLaunched)
![Page 33: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/33.jpg)
Creating a Secondary Tilevar tile = new SecondaryTile(
"MSFT", // App-defined tile ID
"Microsoft", // Short name
"Microsoft", // Display name
"Args", // App-defined activation args
TileDisplayAttributes.ShowName, // Display attributes
new Uri("ms-resource:Images/Logo.png"), // Square (150x150) tile URI
new Uri("ms-resource:Images/Wide.png") // Wide (310x150) tile URI
);
bool approved = await tile.RequestCreateAsync();
![Page 34: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/34.jpg)
Retrieving Arguments at Launch// App.xaml.cs
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
Window.Current.Content = new MainPage(e.Arguments);
Window.Current.Activate();
}
// MainPage.xaml.cs
public MainPage(args)
{
InitializeComponent();
// TODO: Initialize app based on args parameter
}
![Page 35: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/35.jpg)
Updating a Secondary Tilevar tu = TileUpdateManager.CreateTileUpdaterForSecondaryTile();
XmlDocument xml = ...; // XML for wide and small tiles
var tn = new TileNotification(xml) {
ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10), Tag = "MyTag"
};
tu.Update(tn);
![Page 36: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/36.jpg)
DemoSecondary Tiles
![Page 37: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/37.jpg)
Download the Code
http://www.wintellect.com/downloads/metro.zip
![Page 38: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/38.jpg)
Be what’s next: Windows 8 Metro Apps• Find everything here
http://aka.ms/mbl-win8• Save the date! March 23: Windows 8 Developer Day
and “Nacht van Windows 8 / La Nuit de Windows 8 (app-a-thon coding night)
• Start today!• Building Windows 8 blog: http://aka.ms/mbl-win8/build• Learn with Windows 8 Dev Preview: http://aka.ms/mbl-win8/devprev • Learn about Windows Store and opportunities:
http://aka.ms/mbl-win8/store
![Page 39: Take a Ride on the Metro](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5560b4c4d8b42af93b8b497b/html5/thumbnails/39.jpg)
© 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.