Successfully reported this slideshow.
Desenvolvendocom Dojo ToolkitPalestrante: Flávio Gomes da Silva Lisboa
Desenvolvendo com Dojo ToolkitAgenda▶Situando-se no contexto Javascript▶Apresentação ampla do Dojo Toolkit▶Introdução a pr...
Brevíssima Introdução ao Javascript  Desenvolvendo com Dojo Toolkit
JavascriptDesenvolvendo com Dojo Toolkit
JavascriptProgramação Orientada a Aspectos em PHP
JavascriptDesenvolvendo com Dojo Toolkit
JavascriptProgramação Orientada a Aspectos em PHP
JAVASCRIPT<script type="text/javascript"></script>      Programação Orientada a Aspectos em PHP
JAVASCRIPTJavascript é A linguagem de scriptingda Web.É utilizada em bilhões de páginas Webpara adicionar funcionalidades,...
v                 JAVASCRIPTGraças ao Javascript, as páginasHTML puderam ganhar umcomportamento que ia além doredirecionam...
JAVASCRIPTJavascript é baseada em umaespecificação aberta (ECMA-262).Embora outras linguagens tenhamsurgido, ela se firmou...
JAVASCRIPTFATO. Existe muito código Javascriptdisponível.     Programação Orientada a Aspectos em PHP
JAVASCRIPTÉ fácil copiar e colar.E também é muito fácil perder ocontrole sobre o código.     Programação Orientada a Aspec...
Programação Orientada a Aspectos em PHP INÍCIO         COPIOU                  COLOU                                      ...
JAVASCRIPTQuando você perde o controle sobre ocódigo, você perde tempo. E quandovocê perde tempo certamente nãoganha dinhe...
JAVASCRIPTE onde entra o Dojo Toolkit?O que é e por que deveríamos usá-lo?     Programação Orientada a Aspectos em PHP
O que é?
O que é Dojo Toolkit?●   É uma “caixa de ferramentas” livre e aberta para    DHTML escrita em Javascript.    ●   Ou seja, ...
Por que Dojo Toolkit?●   Você pode usar Dojo para tornar suas aplicações Web    mais usáveis, responsivas e funcionais.   ...
Arquitetura
Bibliotecas Dojo Toolkit                       Seusdijit      dojox                      widgets           core           ...
Dojo Base<html><head><title>Hello, Dojo</title><!-- load Dojo from [webroot]/js: --><script type="text/javascript"src="/js...
Dojo Base<html><head><title>Hello, Dojo</title><!-- load Dojo from Google --><scriptsrc="http://ajax.googleapis.com/ajax/l...
Dojo Base<html><head><title>Hello, Dojo</title><!-- load Dojo from Yandex --><scriptsrc="http://yandex.st/dojo/1.6.1/dojo/...
dojo.js: 31k de diversão●   Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ...●   Eventos: normalization, keys, Objects or Node...
Padrões em Dojo// style and add class to a node:dojo.addClass(“someNode”, “someClass”);dojo.style(“someNode”, { opacity:0....
OO Simples, Herança Simuladadojo.declare(“some.Person”, null, {name: ”default”,constructor: function(args){dojo.mixin(this...
E mais...●Localizado: ● dojo.require(“dojo.io.script”); ● dojo.require(“my.Widget”);●Robusto: ● dojo.registerModulePath(“e...
Dojo Core●Use à vontate (self-service) – tudo é aditivo.●Sem rastreamento de dependências – apenasdojo.require(“algumacois...
Viva uma vida mais feliz com              require●dojo.data – API unificada de dados●dojo.dnd - API de Drag and Drop●dojo....
Dijit – The Dojo Widget             Framework●Comportamento compartimentalizado utilizandomarcação existente (como <div></...
Inclui uma suíte de widgets●Layouts – Painéis, Caixas...●Formulário - Validação e mais ...●Editor WYSIWYG●Árvore, Sliders,...
Inclui uma suíte de widgets●Layouts – Painéis, Caixas...●Formulário - Validação e mais ...●Editor WYSIWYG●Árvore, Sliders,...
Configurar é fácil<html><head><title>index.html</title><!-- some css --><link rel="stylesheet"href="/fwks/js/dijit/themes/...
A instanciação é flexível<script type="text/javascript">dojo.ready(function(){//load the resource:dojo.require("dijit.diji...
CDS: CSS Driven SkinningTrês temas completos:●Tundra●Soria●NihiloComplementamente customizáveis
Suporte ainternacionalização
Suporte a acessibilidade● Suporte a leitor de tela● Suporte a modo de alto  contraste● Navegação por teclado● … com qualqu...
Mais informaçõeswww.dojotoolkit.org
Referências●   Dojo: 0 to Production. Peter Higgins. SpringOne Americas. 2008●   Introduction to Dojo Toolkit. Sun Microsy...
Desenvolvendo com Dojo Toolkit
Upcoming SlideShare
Loading in …5
×

Desenvolvendo com Dojo Toolkit

4,254 views

Published on

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

  • Be the first to comment

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

×