Desde que foi apresentado pela primeira vez, o Windows 8 introduziu um novo tipo de aplicações - as Metro style apps - que oferecem uma experiência bastante diferente das aplicações tradicionais Desktop, não apenas do ponto de vista de utilização, mas também do ponto de vista de desenvolvimentoç. Nesta apresentação, vamos explorar a possibilidade de desenvolver aplicativos inteiros usando apenas HTML5 e Javascript (Windows Runtime (WinRT).

1. CRIANDO APLICATIVOS PARA WINDOWS 8
USANDO APENAS HTML5 E JAVASCRIPT
André Paulovich | Ivan Paulovich

2. André Paulovich
@andrepaulovich
paulovich@100loop.com
www.100loop.com www.raptors.com.br

3. Ivan Paulovich
100loop.com
www.raptors.com.br
@ivanpaulovich ivan@100looop.com

4. Caminhos possíveis
HTML / CSS
JavaScript

5. Estrutura de uma APP
Biblioteca
WinJS
Estilos
Páginas
Scripts
Configurações

6. Tipos de arquivos

7. UI SURFACES, LAYOUT E
NAVEGAÇÃO

8. Novos Controles de UI suportados

9. Novos Controles de UI suportados

10. Novos Controles de UI suportados

11. Novos Controles de UI suportados

12. Novos Controles de UI suportados

13. Como definir layouts diferentes?
Full screen Fill
Snap

14. Como definir layouts diferentes?
Media Queries
Ahhh!

15. Questão de orientação

16. CONTROLES

17. Os controles são HTML mesmo?
Sim! As aplicações usam controles convencionais
de HTML.

18. Mas temos muito mais!
A biblioteca WinJS adiciona controles que não existem
nativamente no HTML5.
Você pode instanciar estes controles usando uma simples DIV e
adicionando um atributo:
data-win-control.
Também é possível alterar as configurações destes controles usando
data-win-options.

19. Eventos
Key events in HTML/Javascript Metro apps:
• DOMContentLoaded
• activated
• windows.load
• checkpoint
• resuming

20. Capturando eventos de controles WinJS
1. Encontre o objeto DOM usando:
getElementById() ou querySelector()
2. Acesse o controle WinJS através da propriedade winControl do
objeto DOM.
var clt = document.querySelector(‘#targetSelector’).winControl;
3. Adicione o “listener” do evento ao controle:
clt.addEventListener(‘eventName’, callbackFunction);

21. DEMO VAPT-VUPT

22. TRABALHANDO COM DADOS

23. Usando DataBinding em objetos HTML
Dados podem ser atribuídos aos controles usando o atributo:
data-win-bind.

24. Associando ItemTemplate para um ListView
Você pode associar um template de repetição num ListView
usando o atributo itemTemplate.

25. DEMO VAPT-VUPT

26. ANIMAÇÕES

27. Transições e Animações

28. DEMO VAPT-VUPT

29. Conhecendo o ASP.NET Web API

30. Conhecendo o ASP.NET Web API

31. Conhecendo o ASP.NET Web API

32. DEMO VAPT-VUPT

33. PERGUNTAS?