Introducción al desarrollo de aplicaicones Metro en Windows 8

1. Desarrollo de aplicaciones Metro
Mariano Sanchez
Guillermo Montiel
Rodolfo Finochietti

2. Windows reimaginado

3. La misma experiencia en todos los
dispositivos

4. Demo
Windows 8

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

6. Plataforma Windows 8

7. 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

8. Lenguajes

9. Instalacion de aplicaciones

10. 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

11. Process Isolation

12. Process state transitions

13. App data vs. User data

14. Roaming

15. Contracts

16. The Windows Store

17. Metro UI

20. 8 rasgos de las aplicaciones Metro
Metro style design
Fast and fluid
Snap and scale beautifully
Use the right contracts
Invest in a great Tile
Feel connected & alive
Roam to the cloud
Embrace Metro principles

21. Windows Runtime desde .NET

22. 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

23. El código de C# que hoy escribimos
DllImport "avicap32.dll" "capCreateCaptureWindow"
static extern int
string int
int int int int
int int
DllImport "avicap32.dll"
static extern bool
int
MarshalAs UnmanagedType ref string
int
MarshalAs UnmanagedType ref string
int
// more and more of the same

25. El código que vamos a escribir en
Windows 8
using Windows.Media.Capture;
var new CameraCaptureUI
new Size
var await CameraCaptureUIMode
if
var new BitmapImage
await FileAccessMode

27. Demo
Utilizando WinRT desde C#

28. Windows Runtime Architecture

29. 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.

30. Casi todo se mapea directamente entre
Windows Runtime y .NET

31. Mapeos de Colleciones entre .Net y
Windows Runtime

32. Usando Extension Methods
FileOpenPicker 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();

33. 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)

34. Demo
Creando componentes de Windows
Runtime desde .Net

35. Async

36. var data = DownloadData(...);
ProcessData(data);
var

37. Asynchronous programming models

38. 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!

39. Demo
Extensions & Async

40. Visual Studio 2012 XAML Designer

41. Visual Studio 2012 XAML Designer

42. Recap

47. HTML 5 y CSS

49. Web Sockets Touch-first
Web Workers Pointer events
Zoom regions
IndexedDB
Snap Points
Ecmascript 5
File API & Blobs Forms
Geolocation Validation
Input types
Audio tag
Video tag Spell checking

50. WinJs

51. WinJS

52. Controles

53. Demo
Grid Template

54. Data Binding
 Template Binding.
 Programmatic Binding
 Declarative binding

55. Template Binding

56. Declarative binding

57. Programmatic Binding

58. Demo
Data Binding

59. 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

60. ¿A qué estamos acostumbrados?

61. Promises – Then escalonado

62. Promises - Join

63. Demo
Promises

64. ¿Preguntas?

65. rodolfof@lagash.com
@rodolfof
http://shockbyte.net
marianos@lagash.com
@marianosz
hrrp://weblogs.asp.net/marianos
guillermom@lagash.com
¡GRACIAS!