O documento apresenta um palestrante e seu currículo. O palestrante é Flávio Gomes da Silva Lisboa, 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á. Ele 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

2. Título da
Apresentação
Dojo Toolkit:
Javascript
Acessível
Palestrante: Flávio Gomes da Silva Lisboa 00/00/0000

3. 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.

4. Vamos fazer
O que é o
uma
Dojo
introdução!
Toolkit?

5. Introdução
O que é o Dojo Toolkit?

6. O que é o Dojo Toolkit?
Não é, SÃO ferramentas Javascript Imbatíveis!

7. O que é o Dojo Toolkit?
Totalmente Open Source!

8. O que o Dojo Toolkit faz?
Economiza seu tempo!
X √

9. O que o Dojo Toolkit faz?
Proporciona uma performance poderosa!
The Flash, DC Comics

10. O que o Dojo Toolkit faz?
Escala com seu processo de desenvolvimento!

11. O que o Dojo Toolkit suporta?

12. Quem apoia o Dojo Toolkit?

13. O que você pode fazer com Dojo Toolkit?
Dojo Toolkit possui APIs básicas poderosas.
Tarefas comuns ficam fáceis e rápidas.
Sonic, Sega

14. O que você pode fazer com Dojo Toolkit?
Você pode animar elementos
do documento HTML
Bozo, Larry Larman
sem precisar de Flash!

15. 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.

16. O que você pode fazer com Dojo Toolkit?
Você pode consultar com facilidade a sintaxe CSS sem sacrificar a
performance do frontend.

17. E tudo isso de forma simples!
"Everything must be made as simple as possible. But not simpler."
Albert

18. O que você pode fazer com Dojo Toolkit?
Será que faz tudo isso mesmo?
The Simpsons, Fox

19. Instalando Dojo
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/

20. 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>

21. Estrutura do 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.

22. 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.

23. 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.

24. 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>

25. 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().
*/
dojo.ready(function() {
alert("A versão " + dojo.version + " do Dojo está
carregada!");
});

26. Alô Mundo

27. Alô Mundo
!
helloworld.js ão 2
Vers
/**
* 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);

28. Javascript Orientado a Objetos
Com Dojo Toolkit você usa orientação a objetos
para escrever código Javascript. Isso permite <html>
gerar código mais reutilizável. <head>
O objeto dojo é a instância básica para
manipular as principais APIs do Toolkit.
O método ready() somente é executado depois </head>
que a estrutura DOM e o Dojo foi carregado. Isso <body>
impede que código Javascript seja executado
antes dos elementos afetados por ele estarem
disponíveis.
</body>
</html>

29. Javascript só no cabeçalho
Com Dojo Toolkit, seu código Javascript não
fica espalhado pelo documento HTML,
<html>
parecendo ervilha no macarrão. <head>
</head>
<body>
</body>
</html>

30. Javascript só no cabeçalho
Embora você possa jogar o código Javascript
do cabeçalho em um arquivo .js, ainda ficam
<html>
trechos de Javascript nos atributos de <head>
comportamento dos elementos HTML.
<input onblur="">
<input onchange="">
<input onclick="">
<input ondblclick=""> </head>
<input onfocus=""> <body>
<input onhelp="">
<input onkeydown="">
<input onkeypress="">
<input onkeyup="">
<input onmousedown=""> </body>
<input onmouseout=""> </html>
<input onmouseover="">
<input onmouseup="">
<input onselect="">

31. Javascript só no cabeçalho
Dojo permite ao programador centralizar todo
código Javascript no cabeçalho (head) do
arquivo HTML.
<html>
<html>
<head>
<head>
JAVASCRIPT
JAVASCRIPT
</head>
</head>
<body> Dojo Toolkit <body>
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
</body>
</body>
</html>
</html>

32. Javascript só no cabeçalho
O corpo do documento fica só com a
apresentação dos elementos visuais, enquanto
o comportamento deles fica centralizado no
cabeçalho.
<html>
<html>
<head>
<head>
JAVASCRIPT
JAVASCRIPT
</head>
</head>
<body> Dojo Toolkit <body>
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
</body>
</body>
</html>
</html>

33. Javascript só no cabeçalho
Isso permite conhecer todo o comportamento
em uma página HTML apenas pelo cabeçalho
(ou pelo arquivos importados nele).
<html>
<html>
<head>
<head>
JAVASCRIPT
JAVASCRIPT
</head>
</head>
<body> Dojo Toolkit <body>
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT
</body>
</body>
</html>
</html>

34. 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>
Do arquivo HTML... … para o arquivo Javascript!
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);
});

35. E para que serve isso?
No
No
advertisement
advertisement

36. Frontend em Camadas
WH2 (What How How)
O que vai aparecer
Frontend
Javascript
Como vai aparecer
CSS
HTML
Como vai se comportar
Backend

37. Frontend em Camadas
Cada um no seu quadrado!
CSS, CSS!
HTML, HTML!
Javascript,
Javascript!

38. Frontend em Camadas
Divida o trabalho!

39. Objeto dojo

40. DOM

41. Manipulação de DOM
Exercício: Acrescentar itens a uma lista não-ordenada com
formatação.
Um foi configurado
●
Dois foi configurado também
●
● Um
dois e meio
●
● Dois
três
●
quatro
●

42. Manipulação de DOM
Só com Javascript, temos de “contaminar” o documento com os
nomes das funções.
<html>
<head> SEM DOJO
<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>

43. Manipulação de DOM
function setText(node, text) {
node.innerHTML = text;
}
SEM DOJO
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);
}

44. Manipulação de DOM
Com Dojo, as funções Javascript ficam só no bloco do Javascript!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Exemplo com DOM</title> COM DOJO
<!-- 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>

45. Manipulação de DOM
function setText(node, text) {
node = dojo.byId(node);
node.innerHTML = text;
} Flexibilidade
dojo.ready(function() {
var one = dojo.byId("um");
setText(one, "Um foi configurado"); COM DOJO
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", Integração
className : "quatro",
style : {
fontWeight : "bold"
}
}, list); Alternativas
dojo.create("li", {innerHTML : "dois e meio"}, two,"after");
});

46. Manipulação de DOM
var newChild4 = document.createElement("li");
newChild4.innerHTML = "quatro"; 3 objetos solicitantes
newChild4.setAttribute("class", "quatro"); 5 métodos
newChild4.setAttribute("style", "font- 5 instruções
weight:bold"); 1 variável criada
list.appendChild(newChild4);
dojo.create("li",
1 objeto solicitante {
1 método innerHTML : "quatro",
1 instrução className : "quatro",
Nenhuma variável style : { fontWeight : "bold"}
},
list);

47. Manipulação de DOM
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);
} Mais simples e objetivo
function moveAfterFour() {
var four = dojo.byId("quatro"), three
= dojo.byId("tres");
dojo.place(three, four, "after");
}

48. 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]);
}
}
Direto ao ponto!
function destroyAll(){
dojo.empty("list");
}
By Jon Wilcox

49. Consultas por CSS

50. Consultas por CSS
getElementById() retorna sempre 1 id=”omac”
getElementByTagName() retorna todos os elementos de uma tag
<a></a><p></p><div></div>
Mas como recuperar vários elementos de diferentes tags?
Nada que
alguns braços a
mais não
resolvam!
Doctor Octopus, created by Stan Lee and Steve Ditko. Marvel, All rights reserved.

51. Consultas por CSS
<li>
<ul id="list">
<li class="odd"> <a>
<div class="bold">
<a class="odd">Ímpar</a>
</div></li>
<li class="even">
<div class="italic"> <li>
<a class="even">Par</a>
</div></li>
<li class="odd"><a <a>
class="odd">Ímpar</a></li>
<li class="even">
<div class="bold">
<a class="even">Par</a> hasChildNodes()
</div></li> childNodes
<li class="odd">
<div class="italic">
<a class="odd">Ímpar</a>
for(){}
</div></li>
<li class="even"><a getAttribute()
class="even">Par</a></li>
</ul>
Dexter, by Genndy Tartakovsky

52. Consultas por CSS
G
A
M
B
I
A
R
R
A
?
farofadeovo.com.br

53. 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"> DIGO-TE NÃO!
<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> By Jack Kirby
</div></li>
<li class="odd">
<div class="italic"> var odds = dojo.query(".odd");
<a class="odd">Ímpar</a>
</div></li>
var evens = dojo.query(".even");
<li class="even"><a
class="even">Par</a></li>
</ul>

54. Consultas por CSS
Você pode consultar elementos pelo atributo id
dojo.query("#list3");
Você pode consultar elementos pelo atributo class
odds = dojo.query(".odd");
Você pode consultar pela intersecção dos atributos id e class
dojo.query("#list .odd");
dojo.query(".odd", dojo.byId("list"));
Você pode consultar tags que tenham um ancestral
dojo.query("li a")
Você pode consultar tags que tenham um ancestral direto
dojo.query("li > a");

55. Alteração dinâmica de CSS
Dojo permite alterar os estilos dinamicamente...

56. Alteração dinâmica de CSS
Dojo permite alterar os estilos dinamicamente...

57. Alteração dinâmica de CSS
Você pode alterar a classe CSS de um nó
dojo.addClass("batman");
Você pode efetuar operações sobre uma lista de nós
dojo.query(".even").forEach(function(node, index, nodelist) {
node.innerHTML = node.innerHTML + index;
});
Você pode remover e adicionar classes de uma lista de nós
dojo.query(".even").removeClass('italic').addClass('batman');
Você pode trocar os estilos de uma lista de nós
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);
});

58. Controle de eventos

59. 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 Stephen Lang in Avatar (2009)
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!

60. 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);
});

61. Controle de eventos
Você pode desconectar eventos de elementos a qualquer momento
dojo.connect(dojo.byId("desativar"), "onclick", function() {
dojo.disconnect(handle);
});
Você pode conectar manipuladores eventos a uma lista de nós
dojo.connect(dojo.byId("ativar"), "onclick", function() {
handle = dojo.query(".mensagem").connect("onclick",
messageHandler.onClick);
});

62. 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);
}
});

63. Efeitos e Animações
Sony Pictures
Dreamworks
Village Roadshow Pictures

64. 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
SLIDING
SLIDING
SLIDING O método slideTo() de dojo.fx
permite configurar a posição
SLIDING inicial do elemento antes do
SLIDING deslocamento, por meio do
SLIDING atributo beforeBegin.
SLIDING
SLIDING

65. 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.
SLIPING
SLIPING TO LEFT
TO LEFT
animation
animation animation

66. Efeitos e Animações
Você pode encadear vários efeitos com o método chain() de
dojo.fx, criando uma animação.

67. Efeitos e Animações
O método combine() de dojo.fx permite executar efeitos
simultaneamente.
FADING SLIDING
FADING SLIDING
FADING SLIDING
FADING SLIDING
FADING SLIDING
FADING SLIDING
FADING SLIDING
FADING SLIDING
FADING SLIDING
FADING WIPING SLIPING

68. Efeitos e Animações
Você pode animar propriedades de um elemento, individualmente,
com o método animateProperty() do objeto dojo.
FADING WIPING SLIPING

69. 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();

70. Dojo Toolkit

71. Dojo Toolkit
Thor, art by Walter Simonson

72. 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; });

73. Ajax
http://www.w3schools.com/ajax/ajax_intro.asp

74. 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");
}

75. Ajax
Envio da requisição
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Recepção do resultado
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhtt
p.responseText;
}
}

76. Ajax
Use isto:
// O método "xhrGet" executando uma requisição
HTTP GET
dojo.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);
}
});

77. 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

78. Ajax
Submissão de formulários com xhrpost():
Similar a xhrget()
form: nó DOM do formulários

79. Gráficos
Construção de gráficos

80. Gráficos
Construção de gráficos

81. Gráficos
Gráficos podem ser animados

82. RIA
Componentes visuais prontos com Dijit

83. RIA
Grid de dados com DojoX

84. HTML 5
Versão 1.6: novo carregador de múltiplos arquivos

85. E tem mais ainda...
Podemos ficar
aqui até a
noite!

86. Por isso...
Contato: flavio.lisboa@serpro.gov.br
Referência: http://dojotoolkit.org/documentation