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!

Por isso...

Contato: flavio.lisboa@serpro.gov.br

Referência: http://dojotoolkit.org/documentation