Windows 8 Desenvolvimento de Metro Style Apps

1. Windows 8 Desenvolvimento de Metro Style Apps Deric Ferreira MCPD – Web Developer, Windows Azure Developer, SharePoint 2010

2. Objetivos Fornecer uma visão geral sobre a nova plataforma de desenvolvimento Demonstrar aplicações Metro Incentivar o Desenvolvimento de Apps Metro Style

3. Agenda Visãogeral da Plataforma • Demonstração – Navegação e Interface Particularidades das Metro Style Apps • Demonstração – Timer App (Ciclo de Vida de Processos) Navegação com Metro Style Apps • Demonstração– Navegação com Grid Template e Simulador de Dispositivos Desenvolvimento de Games • Demonstração – Platformer Game (HTML5) Futuro das Metro Apps

4. VisãoGeral da Plataforma

5. Disclaimer: Beta Bits Algumas coisas ainda podem mudar… RTM / GA Release Candidate 26 de Outubro de 2012 Consumer Preview Maio/2012 Developer Preview Fevereiro/2012 Setembro/2011

6. Windows 8 – Principais Novidades Nova experiência de utilização Windows Runtime (WinRT) Windows Store

7. Windows 8: Nova experiência

8. Windows 8: Novos Controles Button Hyperlink Ratings ListBox Checkbox Slider Combo Box Progress Bar Time Picker Progress Ring Toggle Switch Date Picker Radio Button

9. Navegação e Interface -

10. Dilema –Inovação x Padronização Suportar múltiplas plataformas? • W3C - HTML5, CSS3 • Demora para fabricantes se adequarem as especificações • TagVideo – “You must add a lot of tricks to make sure your video will play in all browsers.” Mundo comercial • Fabricantes se diferenciam pelas inovações (GPS, Acelerômetros, etc) • Inovações sempre ocorrem antes da padronização (Dãrt...)

11. Desafios dos desenvolvedores Diferenciar suas aplicações das concorrentes Adotar linguagem de programação/tecnologia para cada plataforma Utilizar framework de terceiros para compatibilizar as diferenças

12. Windows Runtime (WinRT) APIs Metro style Apps Desktop Apps HTML JavaScript XAML HTML / CSS C C++ C# VB JavaScript (Chakra) C# VB C C++ WinRT APIs Communication & Data Graphics & Media Devices & Printing Windows Core OS Services Internet Explorer Win32 .NET / SL Application Model

13. Windows Runtime (WinRT) Todas APIs WinRT são nativas WinRT APIs parecem naturais em C++, C#/VB, e JavaScript Métodos assíncronos (> performance) Reutilização de código portado em C++ (Games) WinRT APIs permite rico acesso a dispositivos, OS e serviços HTML5/CSS/JavaScript e XAML = Metro style apps > Riqueza de Controles e Funcionalidades < Curva de Aprendizado Metro style apps oferecem suporte nativo a DirectX (Games)

14. Códigoqueescrevemoshoje… [DllImport("avicap32.dll",EntryPoint="capCreateCaptureWindow")]static extern intcapCreateCaptureWindow(stringlpszWindowName, intdwStyle, intX, intY, intnWidth, intnHeight, inthwndParent, intnID); [DllImport("avicap32.dll")] static extern boolcapGetDriverDescription(intwDriverIndex, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszName, intcbName, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszVer, intcbVer); // (continua...)

15. Código equivalente no WinRT(C#) using Windows.Media.Capture;var ui = newCameraCaptureUI(); ui.PhotoSettings.CroppedAspectRatio = newSize(4, 3);var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);if (file != null) {var bitmap = newBitmapImage(); bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read)); Photo.Source = bitmap;}

16. Código equivalente no WinRT(JS) var dialog = newWindows.Media.Capture.CameraCaptureUI(); var aspectRatio = {width: 1, height: 1 }; dialog.photoSettings.croppedAspectRatio = aspectRatio; dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (file) { if (file) { var photoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true }); document.getElementById("capturedPhoto").src = photoBlobUrl; } });

17. Mais naturalidade, maior produtividade C# Javascript using Windows.Media.Capture;var ui = newCameraCaptureUI(); ui.PhotoSettings.CroppedAspectRatio = newSize(4, 3);var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);if (file != null) {var bitmap = newBitmapImage(); bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read)); Photo.Source = bitmap;} var dialog = newWindows.Media.Capture.CameraCaptureUI(); var aspectRatio = {width: 1, height: 1 }; dialog.photoSettings.croppedAspectRatio = aspectRatio; dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (file) { if (file) { var photoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true }); document.getElementById("capturedPhoto").src = photoBlobUrl; } });

18. Particularidades

19. AppManifest e Capabilities Aplicaçõesdeclaramosrecursosquenecessitam • Acesso a arquivos (Documentos, Fotos, etc) • Dispositivos (WebCam, Microfone, SMS, etc) • Rede (Internet, Intranet, etc) • Contratos (Search, Share, etc) Ondeestãotodasestasconfigurações? • Appxmanifest.xml

20. Processo de Instalação das Apps Windows Store backend install install SCCM

21. Ambiente de Execução das Apps Processo1 Processo2 Contracts Local context Local context Web context Web context AppData AppData Local Local Temp Temp Roaming Roaming Direct APIs Brokers SistemaOperacional User data Devices Communications Handlers Tiles …

22. Ciclo de vida das Aplicações Metro

23. Novo ciclo de vida – Por quê?

24. Gerenciamento de Estado • Nativamente StateFul • Armazenamento de Estado Local e Nuvem • Compartilhamento de Estado

25. Compartilhamento de Estado?

26. Modos de Visualização / Resolução

27. TimeApp -

28. Navegação com Metro Apps

29. Navegação nas Metro Apps • Navegação tradicional - Web • Script reloading • Parse de novo Documento HTML • Parse e “reestilização” de CSS • Dificuldade para compartilhar de variáveis • Interrupção Visual • Tela Branca • Falta de Fluidez

30. Navegação nas Metro Apps • Navegação com PageControlNavigator • Conteúdo carregados pelo DOM em “runtime” (similar ao AJAX) • Benefícios • Preservação do Contexto • Animações entre transição (WinJSanimationslibrary) • Maior fluidez • Melhor experiência de navegação

31. Nagevacao com GRID Template + Simulador de Dispositivos -

32. Desenvolvimento de Games

33. Windows 8 – Plataforma de Games Your Killer Game Graphics Movies & Cut Scenes Game Input Audio Local Services Connected Services Tools Direct3D DirectX Video Visual Studio Pointer Point Windows Live WASAPI PLM Sensor API Windows Store Direct2D Asset Viewers Media Foundation AppData XAudio2 XInput Xbox LIVE Contracts Asset Processors HTML XAML E nosso velho amigo XNA?

34. Platformer • Jogo de “aventura” baseado em HTML • Tecnologias exploradas • HTML5 • JAVASCRIPT • Acelerômetro • TouchScreen • Devices (Joystick)

35. Platformer Game -

36. Futuro das Metro Apps

37. Windows Store

38. O quedevenosinteressar…o Potencial “By 2020, analysts believe enterprise end-users will spend less than 10 percent of their time in Win32 applications. Most applications (including OS-neutral ones) and the browser will be run from Metro. Microsoft will continue to support Win32, but it will encourage developers to write more manageable and engaging applications using WinRT.” - Michael Silver, VP, Gartner.

39. Por onde começar... • Ferramentas e SDKs • Windows 8 • Visual Studio 2012 • Conta de desenvolvedor • R$ 80 – Licença Individual • R$ 160 – Licença Empresarial • Material de Apoio • http://msdn.microsoft.com/en-US/windows/apps

40. Perguntas

41. Obrigado! • Deric Ferreira • dericferreira@hotmail.com • http://dericferreira.wordpress.com