criando aplicativos para windows 8 com html5 e javascript - infotech 2012
DESCRIPTION
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).TRANSCRIPT
CRIANDO APLICATIVOS PARA WINDOWS 8 USANDO APENAS
HTML5 E JAVASCRIPTAndré Paulovich | Ivan Paulovich
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?
