CRIANDO APLICATIVOS PARA WINDOWS 8 USANDO APENAS
HTML5 E JAVASCRIPTAndré Paulovich | Ivan Paulovich
www.100loop.com www.raptors.com.br
André Paulovich@andrepaulovich [email protected]
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?
Top Related