Desarrollo de aplicaciones Metro

Mariano SanchezGuillermo MontielRodolfo Finochietti

Windows reimaginado

New fast and fluid Start screen

Everything great about Windows 7 we made even better

Touch, mouse, keyboard

La misma experiencia en todos los dispositivos

Tablets to laptops to all-in-ones

Highest power to the most efficient chipset

Touch, mouse, keyboard

Demo

Windows 8

Plataforma

• Windows Runtime (WinRT)• Metro UI• App Execution Environment• Windows Store

Plataforma Windows 8

Ventajas de WinRT

• Es Asincronico• Acceso unico y rico a todos los dispositivos,

SO, y servicios• Sintaxis inspirada en .NET• Codigo nativo para dar la mejor experiencia

Lenguajes

WindowsRuntime

Object(or Component)

Writtenin C++, C#, VB

Windows Metadata

C++ App

Projection

CLR

C#/VB AppProjection

HTML AppChakra

Projection

Instalacion de aplicaciones

Componentes de un paquete

• App Manifest Contiene toda la informacion necesaria para isntalar al aplicacion

• Blockmap contiene hashes de todos los archivos de la aplicacion

• Signature valida la integridad del paquete

Process Isolation

Process state transitions

App data vs. User data

User data

Documents Photos Music Videos

App data

Settings Files Session State

Local Cache

Roaming

La aplicacion utiliza los datos normalmente

La informacion para el usuario se sincroniza en la cuenta de Microsoft

Contracts

The Windows Store

Metro UI

8 rasgos de las aplicaciones Metro

Metro style designFast and fluidSnap and scale beautifullyUse the right contractsInvest in a great TileFeel connected & aliveRoam to the cloudEmbrace Metro principles

Windows Runtime desde .NET

Windows Runtime desde .NET

• Windows siempre ha proporcionado features que los desarrolladores pueden utilziar construir software sobre ellas.

• Pero nunca fue algo facil de usar desde C# or VB

[DllImport("avicap32.dll", EntryPoint="capCreateCaptureWindow")]static extern int capCreateCaptureWindow( string lpszWindowName, int dwStyle, int X, int Y, int nWidth, int nHeight, int hwndParent, int nID);

[DllImport("avicap32.dll")] static extern bool capGetDriverDescription( int wDriverIndex, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszName, int cbName, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszVer, int cbVer);

// more and more of the same

El código de C# que hoy escribimos

Managed Code

Traditional Windows API

Manually Generated Interop Code

El código que vamos a escribir en Windows 8

using Windows.Media.Capture;

var ui = new CameraCaptureUI();ui.PhotoSettings.CroppedAspectRatio = new Size(4, 3);

var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);

if (file != null) { var bitmap = new BitmapImage() ; bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read)); Photo.Source = bitmap;}

Managed Code

Windows 8 API

Windows Runtime

Demo

Utilizando WinRT desde C#

Windows Runtime Architecture

Metro style appLanguage Support (CLR, WinJS, CRT)

Language Projection

Windows Metadata & Namespace

Web Host (HTML, CSS, JavaScript)

Windows Core

Runtime Broker Windows Runtime Core

UI Pickers Controls Media

XAML Storage Network …

Windows Runtime desde .NET

• Usar Windows Runtime desde C# y Visual Basic se siente natural y familiar.

• La mayoria de las diferencias entre Windows Runtime y.NET estan ocultas

• El uso de Extension methods nos permite cerrar el gap entre Windows Runtime y el código manejado.

Casi todo se mapea directamente entre Windows Runtime y .NET

Primitives(strings,

numbers, etc)

Interfaces Enums Structs Delegates Classes

ConstructorsStatic

Members Methods Properties Events

Mapeos de Colleciones entre .Net y Windows Runtime

IReadOnlyDictionary<K,V>IMapView<K,V>

IEnumerable<T>IIterable<T>

IList<T>IVector<T>

IReadOnlyList<T>IVectorView<T>

IDictionary<K,V>IMap<K,V>

Usando Extension MethodsFileOpenPicker picker = new FileOpenPicker();picker.FileTypeFilter.Add("*");

StorageFile file = await picker.PickSingleFileAsync();

Windows.Storage.Streams.IInputStream inputStream = await file.OpenForReadAsync();

System.IO.Stream stream = inputStream.AsStream();System.IO.StreamReader reader = new StreamReader(stream);

string contents = reader.ReadToEnd();

Componentes de Windows Runtime desde .Net

• Se pueden construir componentes manejados de WinRT components que se proyecten a C++ o JavaScript bsiguiendo las siguientes reglas que aplican a los tipos y miembros publicos:– Firmas de la API solo pueden utilizar tipos de

Windows Runtime.– Structs solo pueden contener campos publicos.– Todos los tipos deben ser sealed (excepto los

controles XAML)

Demo

Creando componentes de Windows Runtime desde .Net

Async

Synchronous vs. asynchronousvar data = DownloadData(...);ProcessData(data);

var future = DownloadDataAsync(...); future.ContinueWith(data => ProcessData(data));

DownloadDataAsyncProcessDat

a

STOP

ProcessDataDownloadData

Asynchronous programming models

• Windows Runtime: IAsyncOperation<T>• .NET Framework: Task<T>• Javascript: Promises• Todos estos objectos representan “ongoing

operations”• Todos invocan callbacks al completar la

operacion.

Asynchronous Methods

• Los “Asynchronous methods” transforman automaticamente “codigo normal” en un callback.

• Se marcan con el nuevo modificador “async”• Devuelven void o Task<T>• El operador “await” permite “yield control”– Continua cuando la operación se completa.

• Permite utilizar construcciones de código regulares

• Feel just like good old synchronous code!

Demo

Extensions & Async

Visual Studio 2012 XAML Designer

Visual Studio 2012 XAML Designer

• El mismo designer para todos los lenguajes soportados: C#, C++ and VB

• Incluidas las mejoras de Expression Blend

• Templates

Recap

Como .Net developers ya poseemos los skills necesarios

para construir Metro style apps con C# and VB

Influenciado por C# and VB

Se siente natural y familiar desde C#

y VB.

Podes construir tus componentes manejados de Windows Runtime

Async == Adiós callbacks!

Editor Visual XAML desde el IDE => Mayor productividad

Los Templates proveen una estructura base para

construir Metro style apps

HTML 5 y CSS

Popular CSS3 features in Windows 8

2D & 3D transforms

Transforms Animations

Transitions

MotionGrid

Flexbox

Layout

Gradients

Filter Effects

Text-shadow

GraphicsMulti-column, hyphenation

Pagination

Position float

Content flow

Windows hardware acceleration makes these beautiful and fast

Web Sockets

Web Workers

IndexedDB

Ecmascript 5

File API & Blobs

Geolocation

Audio tag

Video tag

Touch-first

Pointer events

Zoom regions

Snap Points

Forms

Validation

Input types

Spell checking

Popular HTML5 features in Windows 8

WinJs

WinJS

Helpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

Controles

Demo

Grid Template

Data Binding

Template Binding.

Programmatic Binding

Declarative binding

Template Binding

Declarative binding

Programmatic Binding

Demo

Data Binding

Promise Es un object que es una promesa de un valor

en el futuro.

El procesamiento se implementa en l método then()

then(completion, error, progress)

then() devuelve otra promesa

Se implementa en base.js: WinJS.Promise

¿A qué estamos acostumbrados?

Promises – Then escalonado

Promises - Join

Demo

Promises

¿Preguntas?

rodolfof@lagash.com @rodolfof

http://shockbyte.net

marianos@lagash.com@marianosz

hrrp://weblogs.asp.net/marianos

guillermom@lagash.com

¡GRACIAS!