Palestra Dojo Toolkit Consegi 2011
-
Upload
flavio-lisboa -
Category
Technology
-
view
1.541 -
download
2
description
Transcript of Palestra Dojo Toolkit Consegi 2011
Título daApresentação
00/00/0000Palestrante: Flávio Gomes da Silva Lisboa
Dojo Toolkit:Javascript Acessível
Palestrante
Bacharel em Ciência da Computação com pós-graduação em Aplicações Corporativas usando Orientação a Objetos e Tecnologia Java pela Universidade Tecnológica Federal do Paraná. Já atuou como programador em empresas privadas de informática e funcionário de carreira do Banco do Brasil, onde chegou a analista na diretoria internacional. Atualmente é consultor tecnológico da Coordenação Estratégica de Tecnologia do Serviço Federal de Processamento de Dados (Serpro). Foi professor na pós-graduação da UNICID e é instrutor de cursos técnicos na Tempo Real Eventos. Foi membro do time oficial de tradução do Zend Framework e autor de três livros sobre o tema. Tem experiência na área de Ciência da Computação, com ênfase em Software Livre, atuando principalmente nos seguintes temas: Java, PHP, padrões, frameworks, MVC e objetos.
O que é o Dojo
Toolkit?
Vamos fazer uma
introdução!
O que é o Dojo Toolkit?
Introdução
Não é, SÃO ferramentas Javascript Imbatíveis!
O que é o Dojo Toolkit?
Totalmente Open Source!
O que é o Dojo Toolkit?
Economiza seu tempo!
O que o Dojo Toolkit faz?
X √
Proporciona uma performance poderosa!
O que o Dojo Toolkit faz?
The Flash, DC Comics
Escala com seu processo de desenvolvimento!
O que o Dojo Toolkit faz?
O que o Dojo Toolkit suporta?
Quem apoia o Dojo Toolkit?
Dojo Toolkit possui APIs básicas poderosas.
O que você pode fazer com Dojo Toolkit?
Tarefas comuns ficam fáceis e rápidas.
Sonic, Sega
Você pode animar elementos
O que você pode fazer com Dojo Toolkit?
do documento HTML
sem precisar de Flash!
Bozo, Larry Larman
O que você pode fazer com Dojo Toolkit?
Você manipular o DOM,
o Modelo de Objeto do Documento, incluindo, excluindo e alterando elementos HTML de forma dinâmica.
O que você pode fazer com Dojo Toolkit?
Você pode consultar com facilidade a sintaxe CSS sem sacrificar a performance do frontend.
E tudo isso de forma simples!
"Everything must be made as simple as possible. But not simpler."
Albert
Será que faz tudo isso mesmo?
O que você pode fazer com Dojo Toolkit?
The Simpsons, Fox
Você pode fazer download...
Existem 3 opções básicas:
►Dojo Toolkit Release: Arquivo comprimido e otimizado, contendo os projetos Dojo, Dijit e DojoX
►Dojo Base: Um único arquivo .js contendo somente as APIs básicas (Ajax, eventos, consulta por CSS, animações, JSON, empacotamento)
►Dojo Toolkit SDK: código-fonte, testes unitários e demonstrações.
Você também pode acessar o repositório Subversion: http://svn.dojotoolkit.org/src/
Instalando Dojo
Dojo está na nuvem...
Não precisa instalar nada. Você pode utilizar os serviços do Dojo por meio de provedores:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script src="http://o.aolcdn.com/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script src="http://yandex.st/dojo/1.6.0/dojo/dojo.xd.js" type="text/javascript"></script>
Instalando Dojo
Ao descompactar o Release, você tem três pastas: dijit, dojo e dojox.
Dojo é o módulo básico, que contém o script dojo.js, o núcleo do toolkit.
Dijit é um framework para a interface com o usuário, com componentes visuais prontos para uso.
DojoX é o módulo de extensão com componentes extras, como gráficos, cálculos e validadores.
Estrutura do Dojo
Estrutura do Dojo
Os principais objetos do Dojo Toolkit (correspondentes aos módulos) são:
dojo: o objeto básico, com os métodos mais genéricos e frequentemente utilizados.
dijit: o objeto que dá acesso ao framework de interface do usuário construído sobre o Dojo.
dojox: objeto que provê acesso aos projetos adicionais do Dojo Toolkit, incluindo criação de gráficos e grades de dados e API para aplicações mobile.
Estrutura do Dojo
Outros objetos de uso comum do Dojo Toolkit são:
dojo.query: o mecanismo seletor de CSS.
dojo.nodeList: armazena o retorno de qualquer chamada com dojo.query.
dijit.form: provê acesso aos elementos de formulário do Dijit.
dijit.layout: provê widgets de layout pra ajudar a desenhar a interface com o usuário.
dojox.charting.Chart: o principal objeto da biblioteca de gráficos.
dojox.grid: provê acesso às classes que constroem grades para apresentação de dados.
Alô Mundo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Alô Mundo em Dojo</title><!-- Esta linha carrega o Dojo --><script src="/js/dojo/dojo.js"></script><!-- Aqui nós mostramos uma mensagem assim que o Dojo é carregado --><script src="helloworld.js"></script></head><body></body></html>
Alô Mundo
/** * Quando a estrutura DOM estiver pronta para ser manipulada e o Dojo estiver carregado, * será executada a função anônima passada como argumento para ready(). */dojo.ready(function() {alert("A versão " + dojo.version + " do Dojo está carregada!");});
helloworld.js
Alô Mundo
Alô Mundo
helloworld.js
/** * Quando a estrutura DOM estiver pronta para ser manipulada e o Dojo estiver carregado, * será executada a função anônima passada como argumento para ready(). */function init () {alert("A versão " + dojo.version + " do Dojo está carregada!");}dojo.ready(init);
Versão 2!
Com Dojo Toolkit você usa orientação a objetos para escrever código Javascript. Isso permite gerar código mais reutilizável.
O objeto dojo é a instância básica para manipular as principais APIs do Toolkit.
O método ready() somente é executado depois que a estrutura DOM e o Dojo foi carregado. Isso impede que código Javascript seja executado antes dos elementos afetados por ele estarem disponíveis.
Javascript Orientado a Objetos
<html><head>
</head><body>
</body></html>
Com Dojo Toolkit, seu código Javascript não fica espalhado pelo documento HTML, parecendo ervilha no macarrão.
Javascript só no cabeçalho
<html><head>
</head><body>
</body></html>
Embora você possa jogar o código Javascript do cabeçalho em um arquivo .js, ainda ficam trechos de Javascript nos atributos de comportamento dos elementos HTML.
Javascript só no cabeçalho
<html><head>
</head><body>
</body></html>
<input onblur=""><input onchange=""><input onclick=""><input ondblclick=""><input onfocus=""><input onhelp=""><input onkeydown=""><input onkeypress=""><input onkeyup=""><input onmousedown=""><input onmouseout=""><input onmouseover=""><input onmouseup=""><input onselect="">
Dojo permite ao programador centralizar todo código Javascript no cabeçalho (head) do arquivo HTML.
Javascript só no cabeçalho
<html><head>JAVASCRIPT</head><body>JAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPT</body></html>
<html><head>JAVASCRIPT</head><body>
</body></html>
Dojo Toolkit
O corpo do documento fica só com a apresentação dos elementos visuais, enquanto o comportamento deles fica centralizado no cabeçalho.
Javascript só no cabeçalho
<html><head>JAVASCRIPT</head><body>JAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPT</body></html>
<html><head>JAVASCRIPT</head><body>
</body></html>
Dojo Toolkit
Isso permite conhecer todo o comportamento em uma página HTML apenas pelo cabeçalho (ou pelo arquivos importados nele).
Javascript só no cabeçalho
<html><head>JAVASCRIPT</head><body>JAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPTJAVASCRIPT</body></html>
<html><head>JAVASCRIPT</head><body>
</body></html>
Dojo Toolkit
Javascript só no cabeçalho
<button id="movefirst" onclick="moveFirst();">Três primeiro</button><button id="movebeforetwo" onclick="moveBeforeTwo();">Três antes do dois</button><button id="moveaftertwo" onclick="moveAfterFour();">Três depois do quatro</button><button id="movelast" onclick="moveLast();">Três por último</button></body>
dojo.ready(function() { dojo.connect(dojo.byId("movefirst"), "onclick", moveFirst); dojo.connect(dojo.byId("movebeforetwo"), "onclick", moveBeforeTwo); dojo.connect(dojo.byId("moveafterfour"), "onclick", moveAfterFour); dojo.connect(dojo.byId("movelast"), "onclick", moveLast);});
Do arquivo HTML...Do arquivo HTML... … para o arquivo Javascript!
E para que serve isso?
No advertisementNo
advertisement
Frontend
Frontend em Camadas
CSS
HTML
Javascript
O que vai aparecer
Como vai aparecer
Como vai se comportar
WH2 (What How How)
Backend
Frontend em Camadas
Cada um no seu quadrado!
HTML, HTML!
Javascript, Javascript!
HTML, HTML!
CSS, CSS!
Frontend em Camadas
Divida o trabalho!
Objeto dojo
DOM
Manipulação de DOM
Exercício: Acrescentar itens a uma lista não-ordenada com formatação.
●Um
●Dois
●Um foi configurado
●Dois foi configurado também
●dois e meio
●três
●quatro
Manipulação de DOM
Só com Javascript, temos de “contaminar” o documento com os nomes das funções.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Exemplo com DOM</title><script type="text/javascript" src="dom01semdojo.js"></script></head><body onLoad="config()"><ul id="list"> <li id="um">Um</li> <li id="dois">Um</li> </ul> </body></html>
SEM DOJO
Manipulação de DOM
SEM DOJO
function setText(node, text) {node.innerHTML = text;}
function config(){var one = document.getElementById('um');
setText(one, "Um foi configurado");setText(document.getElementById('dois'), "Dois foi configurado também");
var list = document.getElementById('list'), two = document.getElementById('dois');
var newChild3 = document.createElement("li");newChild3.innerHTML = "três";list.appendChild(newChild3);
var newChild4 = document.createElement("li");newChild4.innerHTML = "quatro";newChild4.setAttribute("class", "quatro");newChild4.setAttribute("style", "font-weight:bold");list.appendChild(newChild4);
newChild = document.createElement("li");newChild.innerHTML = "dois e meio";list.insertBefore(newChild,newChild3);
}
Manipulação de DOM
Com Dojo, as funções Javascript ficam só no bloco do Javascript!
COM DOJO
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Exemplo com DOM</title><!-- Esta linha carrega o Dojo --><script type="text/javascript" src="/js/dojo/dojo.js"></script><script type="text/javascript" src="dom01.js"></script></head><body><ul id="list"> <li id="um">Um</li> <li id="dois">Um</li> </ul> </body></html>
Manipulação de DOM
COM DOJO
function setText(node, text) {node = dojo.byId(node);node.innerHTML = text;}
dojo.ready(function() {var one = dojo.byId("um");
setText(one, "Um foi configurado");setText("dois", "Dois foi configurado também");
var list = dojo.byId("list"), two = dojo.byId("dois");
dojo.create("li", {innerHTML : "três"}, list);
dojo.create("li", {innerHTML : "quatro",className : "quatro",style : {fontWeight : "bold"}}, list);
dojo.create("li", {innerHTML : "dois e meio"}, two,"after");});
Flexibilidade
Integração
Alternativas
Manipulação de DOM
var newChild4 = document.createElement("li");newChild4.innerHTML = "quatro";newChild4.setAttribute("class", "quatro");newChild4.setAttribute("style", "font-weight:bold");list.appendChild(newChild4);
dojo.create("li", { innerHTML : "quatro", className : "quatro", style : { fontWeight : "bold"} },list);
3 objetos solicitantes5 métodos5 instruções1 variável criada
1 objeto solicitante1 método1 instruçãoNenhuma variável
Manipulação de DOM
Mais simples e objetivo
function moveAfterFour() { var list = document.getElementById("list"); var four = document.getElementById("quatro"), three = document.getElementById("tres");
list.removeChild(three); var five = four.nextSibling; list.insertBefore(three, five);
}
function moveAfterFour() { var four = dojo.byId("quatro"), three = dojo.byId("tres");
dojo.place(three, four, "after");
}
Manipulação de DOM
function destroyAll() { var list = document.getElementById("list"), items = list.getElementsByTagName("li"); for ( var i = items.length - 1; i >= 0; i--) { list.removeChild(items[i]); }
}
function destroyAll(){ dojo.empty("list");}
Direto ao ponto!
By Jon Wilcox
Consultas por CSS
Consultas por CSS
Mas como recuperar vários elementos de diferentes tags?
getElementById() retorna sempre 1
getElementByTagName() retorna todos os elementos de uma tag
id=”omac”
<a></a><p></p><div></div>
Nada que alguns braços a
mais não resolvam!
Doctor Octopus, created by Stan Lee and Steve Ditko. Marvel, All rights reserved.
Consultas por CSS
<ul id="list"><li class="odd"><div class="bold"><a class="odd">Ímpar</a></div></li><li class="even"><div class="italic"><a class="even">Par</a></div></li><li class="odd"><a class="odd">Ímpar</a></li><li class="even"><div class="bold"><a class="even">Par</a></div></li><li class="odd"><div class="italic"><a class="odd">Ímpar</a></div></li><li class="even"><a class="even">Par</a></li></ul>
<li>
<li>
<a>
<a>
hasChildNodes()childNodes
for(){}
getAttribute()
Dexter, by Genndy Tartakovsky
Consultas por CSS
farofadeovo.com.br
GAMBIARRA?
Consultas por CSS
<ul id="list"><li class="odd"><div class="bold"><a class="odd">Ímpar</a></div></li><li class="even"><div class="italic"><a class="even">Par</a></div></li><li class="odd"><a class="odd">Ímpar</a></li><li class="even"><div class="bold"><a class="even">Par</a></div></li><li class="odd"><div class="italic"><a class="odd">Ímpar</a></div></li><li class="even"><a class="even">Par</a></li></ul>
var odds = dojo.query(".odd");var evens = dojo.query(".even");
DIGO-TE NÃO!
By Jack Kirby
Consultas por CSS
Você pode consultar elementos pelo atributo id
dojo.query("#list3");
Você pode consultar elementos pelo atributo classodds = dojo.query(".odd");
dojo.query("#list .odd");
Você pode consultar pela intersecção dos atributos id e class
dojo.query(".odd", dojo.byId("list"));
dojo.query("li a")
dojo.query("li > a");
Você pode consultar tags que tenham um ancestral
Você pode consultar tags que tenham um ancestral direto
Alteração dinâmica de CSS
Dojo permite alterar os estilos dinamicamente...
Alteração dinâmica de CSS
Dojo permite alterar os estilos dinamicamente...
Alteração dinâmica de CSS
Você pode efetuar operações sobre uma lista de nós
dojo.addClass("batman");
Você pode alterar a classe CSS de um nó
Você pode remover e adicionar classes de uma lista de nós
Você pode trocar os estilos de uma lista de nós
dojo.query(".even").forEach(function(node, index, nodelist) { node.innerHTML = node.innerHTML + index;});
dojo.query(".even").removeClass('italic').addClass('batman');
dojo.query(".even").style('color','brown');var style = { font: "Verdana", color:"yellow", backgroundColor:"red" };dojo.query(".odd").forEach(function(node,index,nodeList){ dojo.style(node,style);});
Controle de eventos
Controle de eventos
Potência não é nada sem controle!
FATO: DOM provê um mecanismo para registrar manipuladores de eventos.
OUTRO FATO: Nem todos os browsers seguem as especificações DOM;
OUTRO FATO: Entre as implementações dos maiores browsers, há três modos de registrar manipuladores de evento e para cada um deles duas implementações diferentes de objetos de evento.
Dojo Toolkit provê uma API única para registrar (e remover o registro) de manipuladores de evento. E ISSO TAMBÉM É UM FATO!
Stephen Lang in Avatar (2009)
Controle de eventos
Você pode criar manipuladores de evento e conectá-los a elementos DOM.
var messageHandler = { id : "messageHandler", onClick : function() { window.alert("Você está vendo uma mensagem!"); }};
var handle;
dojo.ready(function() { dojo.connect(dojo.byId("ativar"), "onclick", function() { handle = dojo.connect(dojo.byId("exibir"), "onclick",messageHandler.onClick); });
Controle de eventos
Você pode desconectar eventos de elementos a qualquer momento
dojo.connect(dojo.byId("desativar"), "onclick", function() { dojo.disconnect(handle);
});
dojo.connect(dojo.byId("ativar"), "onclick", function() { handle = dojo.query(".mensagem").connect("onclick",messageHandler.onClick);});
Você pode conectar manipuladores eventos a uma lista de nós
Controle de eventos
Você pode registrar rotinas para serem ativadas por qualquer evento, com passagem de parâmetros
dojo.connect(dojo.byId("mensagem1"), "onclick", function() { dojo.publish("rotinaDeMensagem", [ "Um elefante incomoda muita gente", 1 ]);});dojo.connect(dojo.byId("mensagem2"), "onclick", function() { dojo.publish("rotinaDeMensagem", [ "Dois elefantes incomodam muita gente", 2 ]);});dojo.connect(dojo.byId("mensagem3"), "onclick", function() { dojo.publish("rotinaDeMensagem", [ "Três elefantes incomodam muita gente", 3 ]);});dojo.connect(dojo.byId("mensagem4"), "onclick", function() { dojo.publish("rotinaDeMensagem", [ "Quatro elefantes incomodam muita gente", 4 ]);});
dojo.subscribe("rotinaDeMensagem", function(text, loops) { for ( var int = 0; int < loops; int++) { window.alert(text); }});
Efeitos e Animações
DreamworksSony Pictures
Village Roadshow Pictures
Efeitos e Animações
Dojo permite implementar vários efeitos visuais, como fading, wiping e sliding.
FADING FADING FADING FADING FADING
WIPING WIPING WIPING WIPING WIPING
SLIDINGSLIDING
SLIDINGSLIDING
SLIDINGSLIDING
SLIDINGSLIDING
O método slideTo() de dojo.fx permite configurar a posição inicial do elemento antes do deslocamento, por meio do atributo beforeBegin.
Efeitos e Animações
Os efeitos sempre retornam um objeto dojo.Animation. O evento onEnd desse objeto pode ser conectado a uma função, alterando a formatação de um elemento.
animation
animationanimation
SLIPINGSLIPING TO LEFTTO LEFT
Efeitos e Animações
Você pode encadear vários efeitos com o método chain() de dojo.fx, criando uma animação.
Efeitos e Animações
O método combine() de dojo.fx permite executar efeitos simultaneamente.
FADING SLIDINGFADING SLIDING
FADING SLIDING
FADING SLIDINGFADING SLIDING
FADING SLIDINGFADING SLIDING
FADING SLIDINGFADING SLIDING
FADING WIPING SLIPING
Efeitos e Animações
Você pode animar propriedades de um elemento, individualmente, com o método animateProperty() do objeto dojo.
FADING WIPING SLIPING
E ainda tem mais
Você pode configurar a duração de um efeito em milissegundos, especificando os valores iniciais e finais de cada propriedade.
var anim8target = dojo.byId("anim8target");dojo.animateProperty({ node: anim8target, properties: { top: { start: 25, end: 150 }, borderWidth: { start: 0, end: 10}, left: 0, opacity: { start: 1, end: 0 } }, duration: 800 }).play();
Dojo Toolkit
Dojo Toolkit
Thor, art by Walter Simonson
Arrays
Dojo provê métodos auxiliares para arrays que funcionam independente do ambiente e tornam mais fácil manipular arrays.
dojo.indexOf(array,index);
dojo.forEach(array, function(item, index) {});
dojo.every(array, function(item){ return comparison; });
dojo.some(array, function(item){ return comparison; });
Ajax
http://www.w3schools.com/ajax/ajax_intro.asp
Ajax
Esqueça isto:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Ajax
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Envio da requisição
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Recepção do resultado
Ajax
Use isto:
// O método "xhrGet" executando uma requisição HTTP GETdojo.xhrGet({ // URL requisitada url: "mensagem.com.br/futuro", // Método que manipula o resultado da requisição // Manipule a resposta como você quiser load: function(result) { alert("O futuro é este: " + result); }});
Ajax
Argumentos de xhrget():
timeout: tempo de resposta em milissegundos
content: argumentos na forma nome:valor
handleAs: como manipular a resposta, text, json, javascript e xml.
error: função a ser executada em caso de erro
Ajax
Submissão de formulários com xhrpost():
Similar a xhrget()
form: nó DOM do formulários
Gráficos
Construção de gráficos
Gráficos
Construção de gráficos
Gráficos
Gráficos podem ser animados
RIA
Componentes visuais prontos com Dijit
RIA
Grid de dados com DojoX
HTML 5
Versão 1.6: novo carregador de múltiplos arquivos
E tem mais ainda...
Podemos ficar aqui até a
noite!