criando aplicativos para windows 8 com html5 e javascript - infotech 2012

CRIANDO APLICATIVOS PARA WINDOWS 8 USANDO APENAS

HTML5 E JAVASCRIPTAndré Paulovich | Ivan Paulovich

www.100loop.com www.raptors.com.br

André Paulovich@andrepaulovich paulovich@100loop.com

Ivan Paulovich

www.raptors.com.br

@ivanpaulovich ivan@100looop.com

100loop.com

Caminhos possíveis

HTML / CSS

JavaScript

Estrutura de uma APP

Páginas

Biblioteca WinJS

Configurações

Estilos

Scripts

Tipos de arquivos

UI SURFACES, LAYOUT E NAVEGAÇÃO

Novos Controles de UI suportados

Novos Controles de UI suportados

Novos Controles de UI suportados

Novos Controles de UI suportados

Novos Controles de UI suportados

Como definir layouts diferentes?

Full screen FillSnap

Como definir layouts diferentes?

Ahhh!

Media Queries

Questão de orientação

CONTROLES

Os controles são HTML mesmo?

Sim! As aplicações usam controles convencionais de HTML.

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.

Eventos

Key events in HTML/Javascript Metro apps:

• DOMContentLoaded• activated

• windows.load• checkpoint• resuming

Capturando eventos de controles WinJS

1. Encontre o objeto DOM usando:getElementById() ou querySelector()

2. Acesse o controle WinJS através da propriedade winControl doobjeto DOM.

var clt = document.querySelector(‘#targetSelector’).winControl;

3. Adicione o “listener” do evento ao controle:clt.addEventListener(‘eventName’, callbackFunction);

DEMO VAPT-VUPT

TRABALHANDO COM DADOS

Usando DataBinding em objetos HTML

Dados podem ser atribuídos aos controles usando o atributo:data-win-bind.

Associando ItemTemplate para um ListView

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

DEMO VAPT-VUPT

ANIMAÇÕES

Transições e Animações

DEMO VAPT-VUPT

Conhecendo o ASP.NET Web API

Conhecendo o ASP.NET Web API

Conhecendo o ASP.NET Web API

DEMO VAPT-VUPT

PERGUNTAS?