desarrollo de aplicaciones metro en windows 8
DESCRIPTION
Introducción al desarrollo de aplicaicones Metro en Windows 8TRANSCRIPT
![Page 1: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/1.jpg)
Desarrollo de aplicaciones Metro
Mariano SanchezGuillermo MontielRodolfo Finochietti
![Page 2: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/2.jpg)
Windows reimaginado
New fast and fluid Start screen
Everything great about Windows 7 we made even better
Touch, mouse, keyboard
![Page 3: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/3.jpg)
La misma experiencia en todos los dispositivos
Tablets to laptops to all-in-ones
Highest power to the most efficient chipset
Touch, mouse, keyboard
![Page 4: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/4.jpg)
Demo
Windows 8
![Page 5: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/5.jpg)
Plataforma
• Windows Runtime (WinRT)• Metro UI• App Execution Environment• Windows Store
![Page 6: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/6.jpg)
Plataforma Windows 8
![Page 7: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/7.jpg)
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
![Page 8: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/8.jpg)
Lenguajes
WindowsRuntime
Object(or Component)
Writtenin C++, C#, VB
Windows Metadata
C++ App
Projection
CLR
C#/VB AppProjection
HTML AppChakra
Projection
![Page 9: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/9.jpg)
Instalacion de aplicaciones
![Page 10: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/10.jpg)
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
![Page 11: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/11.jpg)
Process Isolation
![Page 12: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/12.jpg)
Process state transitions
![Page 13: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/13.jpg)
App data vs. User data
User data
Documents Photos Music Videos
App data
Settings Files Session State
Local Cache
![Page 14: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/14.jpg)
Roaming
La aplicacion utiliza los datos normalmente
La informacion para el usuario se sincroniza en la cuenta de Microsoft
![Page 15: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/15.jpg)
Contracts
![Page 16: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/16.jpg)
The Windows Store
![Page 17: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/17.jpg)
Metro UI
![Page 18: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/18.jpg)
![Page 19: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/19.jpg)
![Page 20: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/20.jpg)
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
![Page 21: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/21.jpg)
Windows Runtime desde .NET
![Page 22: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/22.jpg)
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
![Page 23: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/23.jpg)
[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
![Page 24: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/24.jpg)
Managed Code
Traditional Windows API
Manually Generated Interop Code
![Page 25: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/25.jpg)
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;}
![Page 26: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/26.jpg)
Managed Code
Windows 8 API
Windows Runtime
![Page 27: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/27.jpg)
Demo
Utilizando WinRT desde C#
![Page 28: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/28.jpg)
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 …
![Page 29: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/29.jpg)
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.
![Page 30: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/30.jpg)
Casi todo se mapea directamente entre Windows Runtime y .NET
Primitives(strings,
numbers, etc)
Interfaces Enums Structs Delegates Classes
ConstructorsStatic
Members Methods Properties Events
![Page 31: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/31.jpg)
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>
![Page 32: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/32.jpg)
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();
![Page 33: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/33.jpg)
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)
![Page 34: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/34.jpg)
Demo
Creando componentes de Windows Runtime desde .Net
![Page 35: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/35.jpg)
Async
![Page 36: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/36.jpg)
Synchronous vs. asynchronousvar data = DownloadData(...);ProcessData(data);
var future = DownloadDataAsync(...); future.ContinueWith(data => ProcessData(data));
DownloadDataAsyncProcessDat
a
STOP
ProcessDataDownloadData
![Page 37: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/37.jpg)
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.
![Page 38: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/38.jpg)
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!
![Page 39: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/39.jpg)
Demo
Extensions & Async
![Page 40: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/40.jpg)
Visual Studio 2012 XAML Designer
![Page 41: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/41.jpg)
Visual Studio 2012 XAML Designer
• El mismo designer para todos los lenguajes soportados: C#, C++ and VB
• Incluidas las mejoras de Expression Blend
• Templates
![Page 42: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/42.jpg)
Recap
![Page 43: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/43.jpg)
Como .Net developers ya poseemos los skills necesarios
para construir Metro style apps con C# and VB
![Page 44: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/44.jpg)
Influenciado por C# and VB
Se siente natural y familiar desde C#
y VB.
Podes construir tus componentes manejados de Windows Runtime
![Page 45: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/45.jpg)
Async == Adiós callbacks!
![Page 46: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/46.jpg)
Editor Visual XAML desde el IDE => Mayor productividad
Los Templates proveen una estructura base para
construir Metro style apps
![Page 47: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/47.jpg)
HTML 5 y CSS
![Page 48: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/48.jpg)
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
![Page 49: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/49.jpg)
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
![Page 50: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/50.jpg)
WinJs
![Page 51: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/51.jpg)
WinJS
Helpers for Namespaces, Constructor Definition
Promises
App Model
Navigation
Page & User controls
Data binding
Controls
Animations
Templates
Utilities
Default CSS Styles
![Page 52: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/52.jpg)
Controles
![Page 53: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/53.jpg)
Demo
Grid Template
![Page 54: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/54.jpg)
Data Binding
Template Binding.
Programmatic Binding
Declarative binding
![Page 55: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/55.jpg)
Template Binding
![Page 56: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/56.jpg)
Declarative binding
![Page 57: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/57.jpg)
Programmatic Binding
![Page 58: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/58.jpg)
Demo
Data Binding
![Page 59: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/59.jpg)
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
![Page 60: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/60.jpg)
¿A qué estamos acostumbrados?
![Page 61: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/61.jpg)
Promises – Then escalonado
![Page 62: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/62.jpg)
Promises - Join
![Page 63: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/63.jpg)
Demo
Promises
![Page 64: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/64.jpg)
¿Preguntas?
![Page 65: Desarrollo de Aplicaciones Metro en Windows 8](https://reader036.vdocuments.mx/reader036/viewer/2022062513/5560b722d8b42aef3b8b4a66/html5/thumbnails/65.jpg)
[email protected] @rodolfof
http://shockbyte.net
[email protected]@marianosz
hrrp://weblogs.asp.net/marianos
¡GRACIAS!