Desenvolvendo com Dojo Toolkit

4.214 visualizações

Publicada em

Palestra proferida no 6º SOLISC, em São José, SC.

0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.214
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
55
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolvendo com Dojo Toolkit

  1. 1. Desenvolvendocom Dojo ToolkitPalestrante: Flávio Gomes da Silva Lisboa
  2. 2. Desenvolvendo com Dojo ToolkitAgenda▶Situando-se no contexto Javascript▶Apresentação ampla do Dojo Toolkit▶Introdução a programação com alguns exemplos Desenvolvendo com Dojo Toolkit
  3. 3. Brevíssima Introdução ao Javascript Desenvolvendo com Dojo Toolkit
  4. 4. JavascriptDesenvolvendo com Dojo Toolkit
  5. 5. JavascriptProgramação Orientada a Aspectos em PHP
  6. 6. JavascriptDesenvolvendo com Dojo Toolkit
  7. 7. JavascriptProgramação Orientada a Aspectos em PHP
  8. 8. JAVASCRIPT<script type="text/javascript"></script> Programação Orientada a Aspectos em PHP
  9. 9. JAVASCRIPTJavascript é A linguagem de scriptingda Web.É utilizada em bilhões de páginas Webpara adicionar funcionalidades, validarformulários, estabelecer comunicaçãocom o servidor e muitas outras coisas. Programação Orientada a Aspectos em PHP
  10. 10. v JAVASCRIPTGraças ao Javascript, as páginasHTML puderam ganhar umcomportamento que ia além doredirecionamento baseado emhyperlinks. Era possível responder aeventos provocados pelo usuário, sema necessidade de enviar umarequisição ao servidor. Programação Orientada a Aspectos em PHP
  11. 11. JAVASCRIPTJavascript é baseada em umaespecificação aberta (ECMA-262).Embora outras linguagens tenhamsurgido, ela se firmou como padrão descripting para cliente Web. Programação Orientada a Aspectos em PHP
  12. 12. JAVASCRIPTFATO. Existe muito código Javascriptdisponível. Programação Orientada a Aspectos em PHP
  13. 13. JAVASCRIPTÉ fácil copiar e colar.E também é muito fácil perder ocontrole sobre o código. Programação Orientada a Aspectos em PHP
  14. 14. Programação Orientada a Aspectos em PHP INÍCIO COPIOU COLOU SIM FUNCIONOU? BELEZA!TENTA DE NOVO! NÃOPOTE:PROGRAMAÇÃO FERROU!ORIENTADA ATENTATIVA
  15. 15. JAVASCRIPTQuando você perde o controle sobre ocódigo, você perde tempo. E quandovocê perde tempo certamente nãoganha dinheiro. Programação Orientada a Aspectos em PHP
  16. 16. JAVASCRIPTE onde entra o Dojo Toolkit?O que é e por que deveríamos usá-lo? Programação Orientada a Aspectos em PHP
  17. 17. O que é?
  18. 18. O que é Dojo Toolkit?● É uma “caixa de ferramentas” livre e aberta para DHTML escrita em Javascript. ● Ou seja, é um conjunto de bibliotecas Javascript.● Pretende resolver problemas históricos com DHTML. ● Como a incompatibilidade entre browsers.● Permite que você atribua capacidades dinâmicas em páginas Web facilmente. ● Widgets ● Animações
  19. 19. Por que Dojo Toolkit?● Você pode usar Dojo para tornar suas aplicações Web mais usáveis, responsivas e funcionais. ● Ele suporta AJAX.● Dojo provê muitas facilidades ● Ele esconde o processamento de XMLHttpRequest ● Ele manipula as incompatibilidades entre browsers● Dojo tem uma comunidade de desenvolvedores forte
  20. 20. Arquitetura
  21. 21. Bibliotecas Dojo Toolkit Seusdijit dojox widgets core util base
  22. 22. Dojo Base<html><head><title>Hello, Dojo</title><!-- load Dojo from [webroot]/js: --><script type="text/javascript"src="/js/dojo/dojo.js"></script></head><body></body></html>
  23. 23. Dojo Base<html><head><title>Hello, Dojo</title><!-- load Dojo from Google --><scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script></head><body></body></html>
  24. 24. Dojo Base<html><head><title>Hello, Dojo</title><!-- load Dojo from Yandex --><scriptsrc="http://yandex.st/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script></head><body></body></html>
  25. 25. dojo.js: 31k de diversão● Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ...● Eventos: normalization, keys, Objects or Nodes● DOM/CSS: dojo.byId, dojo.style, dojo.place, dojo.attr● Animação: dojo.fadeIn/Out, dojo.animateProperty● Query/NodeList: Seletores CSS3 ou todas as anteriores.● Javascript Avançado: dojo.delegate (OMAC), .hitch (IoC?), .partial (mutant signature?), .exists ...● dojo.declare● Javascript Nativo: forEach, map, filter, some, every, indexOf ...● Browser Sniffing: dojo.isIE < 7, isFF, isWebKit ...
  26. 26. Padrões em Dojo// style and add class to a node:dojo.addClass(“someNode”, “someClass”);dojo.style(“someNode”, { opacity:0.5, lineHeight:”1.3em” });dojo.attr(“someNode”, { id:”newId” });// or chaineddojo.query(“#someNode”).addClass(“someClass”).attr({ id:”newId” }).style({ opacity:0.5, lineHeight:”1.3em” })// connect:dojo.connect(dojo.byId(“foo”), “onclick”, function(e){...});// or connect:dojo.query(“#foo”).connect(“onclick”, function(e){ ... });// or sugar:dojo.query(“#foo”).onclick(function(e){ ... });
  27. 27. OO Simples, Herança Simuladadojo.declare(“some.Person”, null, {name: ”default”,constructor: function(args){dojo.mixin(this, args);}});dojo.declare(“some.Employee”, some.Person, {employeeId: 0});var bob = new some.Person({ name:”Bob Bobson” });var joy = new some.Employee({ name:”Joy”, employeeId:24 });
  28. 28. E mais...●Localizado: ● dojo.require(“dojo.io.script”); ● dojo.require(“my.Widget”);●Robusto: ● dojo.registerModulePath(“external”, “/external/js”); ● dojo.require(“external.Thinger”);●Fácil: ● dojo.provide(“my.Widget”);●Pronto: dojo.ready, dojo.addOnLoad, .addOnUnLoad ... Sistema de pacotes == código modular Trabalhe com Dojo e customize seu código
  29. 29. Dojo Core●Use à vontate (self-service) – tudo é aditivo.●Sem rastreamento de dependências – apenasdojo.require(“algumacoisa”)●Poucas, se existem, “regras”●Escala: Cresça de acordo com suas necessidades
  30. 30. Viva uma vida mais feliz com require●dojo.data – API unificada de dados●dojo.dnd - API de Drag and Drop●dojo.fx / dojo.NodeList-fx – FX avançado adicional●dojo.i18n – Ferramentas de internacionalização●dojo.string, dojo.date, dojo.regexp – utilitários comuns●dojo.io.iframe, dojo.io.script, dojo.rpc - IO avançada●... mais: dojo.behavior, dojo.html, dojo.gears,●dojo.cookie, dojo.parser, dojo.jaxer ...
  31. 31. Dijit – The Dojo Widget Framework●Comportamento compartimentalizado utilizandomarcação existente (como <div></div>)●Totalmente dinâmico. Componentes reutilizáveisbaseados em templates●Estenda os existentes ou crie os seus ...
  32. 32. Inclui uma suíte de widgets●Layouts – Painéis, Caixas...●Formulário - Validação e mais ...●Editor WYSIWYG●Árvore, Sliders, Barra de progresso, ...
  33. 33. Inclui uma suíte de widgets●Layouts – Painéis, Caixas...●Formulário - Validação e mais ...●Editor WYSIWYG●Árvore, Sliders, Barra de progresso, ...
  34. 34. Configurar é fácil<html><head><title>index.html</title><!-- some css --><link rel="stylesheet"href="/fwks/js/dijit/themes/tundra/tundra.css"><script type="text/javascript"src="/fwks/js/dojo/dojo.js"></script></head><body class="tundra"></body></html>
  35. 35. A instanciação é flexível<script type="text/javascript">dojo.ready(function(){//load the resource:dojo.require("dijit.dijit"); // Base Dijitdojo.require("dijit.Dialog"); // Dialog Code// create programatically:var myDialog = new dijit.Dialog({title:"Login",}, "formArea");// access the instance:dijit.byId("formArea").show(); //myDialog.show();});</script>
  36. 36. CDS: CSS Driven SkinningTrês temas completos:●Tundra●Soria●NihiloComplementamente customizáveis
  37. 37. Suporte ainternacionalização
  38. 38. Suporte a acessibilidade● Suporte a leitor de tela● Suporte a modo de alto contraste● Navegação por teclado● … com qualquer Dijit
  39. 39. Mais informaçõeswww.dojotoolkit.org
  40. 40. Referências● Dojo: 0 to Production. Peter Higgins. SpringOne Americas. 2008● Introduction to Dojo Toolkit. Sun Microsystems. www.fgsl.eti.br @fgsl

×