desarrollo de aplicaciones metro en windows 8
DESCRIPTION
Introducción al desarrollo de aplicaicones Metro en Windows 8TRANSCRIPT
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?
[email protected] @rodolfof
http://shockbyte.net
[email protected]@marianosz
hrrp://weblogs.asp.net/marianos
¡GRACIAS!