Palestra Dojo Toolkit Consegi 2011
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Palestra Dojo Toolkit Consegi 2011

  • 1,891 views
Uploaded on

Palestra sobre o toolkit open source para Javascript Dojo.

Palestra sobre o toolkit open source para Javascript Dojo.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,891
On Slideshare
1,891
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
52
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Título da ApresentaçãoDojo Toolkit:JavascriptAcessívelPalestrante: Flávio Gomes da Silva Lisboa 00/00/0000
  • 2. PalestranteBacharel em Ciência da Computação com pós-graduação emAplicações Corporativas usando Orientação a Objetos e TecnologiaJava pela Universidade Tecnológica Federal do Paraná. Já atuoucomo programador em empresas privadas de informática efuncionário de carreira do Banco do Brasil, onde chegou a analista nadiretoria internacional. Atualmente é consultor tecnológico daCoordenação Estratégica de Tecnologia do Serviço Federal deProcessamento de Dados (Serpro). Foi professor na pós-graduação daUNICID e é instrutor de cursos técnicos na Tempo Real Eventos. Foimembro do time oficial de tradução do Zend Framework e autor detrês livros sobre o tema. Tem experiência na área de Ciência daComputação, com ênfase em Software Livre, atuando principalmentenos seguintes temas: Java, PHP, padrões, frameworks, MVC eobjetos.
  • 3. Vamos fazerO que é o uma Dojo introdução! Toolkit?
  • 4. IntroduçãoO que é o Dojo Toolkit?
  • 5. O que é o Dojo Toolkit?Não é, SÃO ferramentas Javascript Imbatíveis!
  • 6. O que é o Dojo Toolkit?Totalmente Open Source!
  • 7. O que o Dojo Toolkit faz?Economiza seu tempo! X √
  • 8. O que o Dojo Toolkit faz?Proporciona uma performance poderosa! The Flash, DC Comics
  • 9. O que o Dojo Toolkit faz?Escala com seu processo de desenvolvimento!
  • 10. O que o Dojo Toolkit suporta?
  • 11. Quem apoia o Dojo Toolkit?
  • 12. 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
  • 13. O que você pode fazer com Dojo Toolkit?Você pode animar elementos do documento HTML Bozo, Larry Larman sem precisar de Flash!
  • 14. O que você pode fazer com Dojo Toolkit?Você manipular o DOM,o Modelo de Objeto do Documento, incluindo, excluindo ealterando elementos HTML de forma dinâmica.
  • 15. O que você pode fazer com Dojo Toolkit? Você pode consultar com facilidade a sintaxe CSS sem sacrificar a performance do frontend.
  • 16. E tudo isso de forma simples!"Everything must be made as simple as possible. But not simpler." Albert
  • 17. O que você pode fazer com Dojo Toolkit? Será que faz tudo isso mesmo? The Simpsons, Fox
  • 18. Instalando DojoVocê pode fazer download...Existem 3 opções básicas:►Dojo Toolkit Release: Arquivo comprimido e otimizado, contendo osprojetos 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/
  • 19. Instalando DojoDojo está na nuvem...Não precisa instalar nada. Você pode utilizar os serviços do Dojo pormeio 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>
  • 20. Estrutura do DojoAo descompactar o Release, você tem trêspastas: dijit, dojo e dojox.Dojo é o módulo básico, que contém o scriptdojo.js, o núcleo do toolkit.Dijit é um framework para a interface com ousuário, com componentes visuais prontos parauso.DojoX é o módulo de extensão comcomponentes extras, como gráficos, cálculos evalidadores.
  • 21. 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.
  • 22. Estrutura do DojoOutros objetos de uso comum do Dojo Toolkit são:dojo.query: o mecanismo seletor de CSS.dojo.nodeList: armazena o retorno de qualquer chamada comdojo.query.dijit.form: provê acesso aos elementos de formulário do Dijit.dijit.layout: provê widgets de layout pra ajudar a desenhar ainterface com o usuário.dojox.charting.Chart: o principal objeto da biblioteca de gráficos.dojox.grid: provê acesso às classes que constroem grades paraapresentação de dados.
  • 23. Alô Mundo<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//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>
  • 24. Alô Mundo helloworld.js/** * Quando a estrutura DOM estiver pronta para sermanipulada e o Dojo estiver carregado, * será executada a função anônima passada comoargumento para ready(). */dojo.ready(function() {alert("A versão " + dojo.version + " do Dojo estácarregada!");});
  • 25. Alô Mundo
  • 26. Alô Mundo ! helloworld.js ão 2 Vers/** * Quando a estrutura DOM estiver pronta para sermanipulada e o Dojo estiver carregado, * será executada a função anônima passada comoargumento para ready(). */function init () {alert("A versão " + dojo.version + " do Dojo estácarregada!");}dojo.ready(init);
  • 27. Javascript Orientado a ObjetosCom Dojo Toolkit você usa orientação a objetospara escrever código Javascript. Isso permite <html>gerar código mais reutilizável. <head>O objeto dojo é a instância básica paramanipular 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 executadoantes dos elementos afetados por ele estaremdisponíveis. </body> </html>
  • 28. Javascript só no cabeçalhoCom Dojo Toolkit, seu código Javascript nãofica espalhado pelo documento HTML, <html>parecendo ervilha no macarrão. <head> </head> <body> </body> </html>
  • 29. Javascript só no cabeçalhoEmbora você possa jogar o código Javascriptdo 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="">
  • 30. Javascript só no cabeçalhoDojo permite ao programador centralizar todocódigo Javascript no cabeçalho (head) doarquivo HTML. <html> <html> <head> <head> JAVASCRIPT JAVASCRIPT </head> </head> <body> Dojo Toolkit <body> JAVASCRIPT JAVASCRIPT JAVASCRIPT JAVASCRIPT JAVASCRIPT JAVASCRIPT </body> </body> </html> </html>
  • 31. Javascript só no cabeçalhoO corpo do documento fica só com aapresentação dos elementos visuais, enquantoo comportamento deles fica centralizado nocabeçalho. <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çalhoIsso permite conhecer todo o comportamentoem 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>
  • 33. Javascript só no cabeçalho<button id="movefirst" onclick="moveFirst();">Três primeiro</button><button id="movebeforetwo" onclick="moveBeforeTwo();">Três antes dodois</button><button id="moveaftertwo" onclick="moveAfterFour();">Três depois doquatro</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); });
  • 34. E para que serve isso? No Noadvertisement advertisement
  • 35. Frontend em Camadas WH2 (What How How) O que vai aparecer Frontend Javascript Como vai aparecer CSS HTML Como vai se comportar Backend
  • 36. Frontend em Camadas Cada um no seu quadrado! CSS, CSS!HTML, HTML!Javascript,Javascript!
  • 37. Frontend em CamadasDivida o trabalho!
  • 38. Objeto dojo
  • 39. DOM
  • 40. Manipulação de DOMExercício: Acrescentar itens a uma lista não-ordenada comformatação. Um foi configurado ● Dois foi configurado também ● ● Um dois e meio ● ● Dois três ● quatro ●
  • 41. Manipulação de DOMSó com Javascript, temos de “contaminar” o documento com osnomes 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>
  • 42. Manipulação de DOMfunction setText(node, text) {node.innerHTML = text;} SEM DOJOfunction 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);}
  • 43. 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>
  • 44. Manipulação de DOMfunction setText(node, text) {node = dojo.byId(node);node.innerHTML = text;} Flexibilidadedojo.ready(function() {var one = dojo.byId("um");setText(one, "Um foi configurado"); COM DOJOsetText("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çãoclassName : "quatro",style : {fontWeight : "bold"}}, list); Alternativasdojo.create("li", {innerHTML : "dois e meio"}, two,"after");});
  • 45. Manipulação de DOMvar newChild4 = document.createElement("li");newChild4.innerHTML = "quatro"; 3 objetos solicitantesnewChild4.setAttribute("class", "quatro"); 5 métodosnewChild4.setAttribute("style", "font- 5 instruçõesweight:bold"); 1 variável criadalist.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);
  • 46. Manipulação de DOMfunction 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"); }
  • 47. Manipulação de DOMfunction 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
  • 48. Consultas por CSS
  • 49. Consultas por CSSgetElementById() 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.
  • 50. 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
  • 51. Consultas por CSS G A M B I A R R A ?farofadeovo.com.br
  • 52. 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"><aclass="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"><aclass="even">Par</a></li></ul>
  • 53. Consultas por CSSVocê 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");
  • 54. Alteração dinâmica de CSSDojo permite alterar os estilos dinamicamente...
  • 55. Alteração dinâmica de CSSDojo permite alterar os estilos dinamicamente...
  • 56. 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ósdojo.query(".even").removeClass(italic).addClass(batman); Você pode trocar os estilos de uma lista de nósdojo.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);});
  • 57. Controle de eventos
  • 58. Controle de eventosPotência não é nada sem controle!FATO: DOM provê um mecanismopara registrar manipuladores deeventos.OUTRO FATO: Nem todos os browsersseguem 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 deevento e para cada um deles duas implementações diferentes deobjetos de evento.Dojo Toolkit provê uma API única para registrar (e remover oregistro) de manipuladores de evento. E ISSO TAMBÉM É UMFATO!
  • 59. 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); });
  • 60. Controle de eventosVocê pode desconectar eventos de elementos a qualquer momentodojo.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); });
  • 61. Controle de eventosVocê pode registrar rotinas para serem ativadas por qualquerevento, com passagem de parâmetrosdojo.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); }});
  • 62. Efeitos e Animações Sony PicturesDreamworks Village Roadshow Pictures
  • 63. Efeitos e AnimaçõesDojo 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
  • 64. Efeitos e AnimaçõesOs efeitos sempre retornam um objeto dojo.Animation. O eventoonEnd desse objeto pode ser conectado a uma função, alterando aformatação de um elemento. SLIPING SLIPING TO LEFT TO LEFT animation animation animation
  • 65. Efeitos e AnimaçõesVocê pode encadear vários efeitos com o método chain() dedojo.fx, criando uma animação.
  • 66. Efeitos e AnimaçõesO método combine() de dojo.fx permite executar efeitossimultaneamente. FADING SLIDING FADING SLIDING FADING SLIDING FADING SLIDING FADING SLIDING FADING SLIDING FADING SLIDING FADING SLIDING FADING SLIDING FADING WIPING SLIPING
  • 67. Efeitos e AnimaçõesVocê pode animar propriedades de um elemento, individualmente,com o método animateProperty() do objeto dojo. FADING WIPING SLIPING
  • 68. E ainda tem maisVocê 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();
  • 69. Dojo Toolkit
  • 70. Dojo Toolkit Thor, art by Walter Simonson
  • 71. ArraysDojo provê métodos auxiliares para arrays que funcionamindependente 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; });
  • 72. Ajax http://www.w3schools.com/ajax/ajax_intro.asp
  • 73. AjaxEsqueç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"); }
  • 74. Ajax Envio da requisição xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); Recepção do resultadoxmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
  • 75. AjaxUse isto:// O método "xhrGet" executando uma requisiçãoHTTP GETdojo.xhrGet({ // URL requisitada url: "mensagem.com.br/futuro", // Método que manipula o resultado darequisição // Manipule a resposta como você quiser load: function(result) { alert("O futuro é este: " + result); }});
  • 76. AjaxArgumentos de xhrget():timeout: tempo de resposta em milissegundoscontent: argumentos na forma nome:valorhandleAs: como manipular a resposta, text, json,javascript e xml.error: função a ser executada em caso de erro
  • 77. AjaxSubmissão de formulários com xhrpost():Similar a xhrget()form: nó DOM do formulários
  • 78. GráficosConstrução de gráficos
  • 79. GráficosConstrução de gráficos
  • 80. GráficosGráficos podem ser animados
  • 81. RIAComponentes visuais prontos com Dijit
  • 82. RIAGrid de dados com DojoX
  • 83. HTML 5Versão 1.6: novo carregador de múltiplos arquivos
  • 84. E tem mais ainda...Podemos ficar aqui até a noite!
  • 85. Por isso...Contato: flavio.lisboa@serpro.gov.brReferência: http://dojotoolkit.org/documentation