Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Zend Framework e Dojo Toolkit

3,895 views

Published on

Palestra proferida na PHP Conference 2009

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Zend Framework e Dojo Toolkit

  1. 1. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend Framework e Dojo Toolkit Flávio Gomes da Silva Lisboa flaviogomesdasilva@yahoo.com.br www.fgsl.eti.br
  2. 2. FGSL: É permitida a reprodução deste material desde que citada a fonte Agenda ● Quem sou eu (1 slide) ● Javascript, AJAX, RIA ● Dojo Toolkit ● Zend Framework ● Zend_Dojo
  3. 3. FGSL: É permitida a reprodução deste material desde que citada a fonte Quem sou eu
  4. 4. FGSL: É permitida a reprodução deste material desde que citada a fonte Ah, se a Web fosse Desktop... AJAX (Asynchronous Javascript And XML) RIA Web 2.0
  5. 5. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit http://www.dojotoolkit.org/
  6. 6. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit Dojo Toolkit é uma caixa de ferramentas Javascript open-source útil para construir ótimas aplicações web.
  7. 7. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit O objetivo é encurtar o tempo gasto entre a idéia e a implementação ao prover uma API excepcionalmente bem concebida e um conjunto de ferramentas para auxiliar e corrigir os problemas experimentados no dia-a-dia do desenvolvimento web.
  8. 8. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit Ele é leve, extremamente robusto, e fornece um sólido conjunto de ferramentas para manipulação DOM, animações, Ajax, eventos, internacionalização (i18n) e accessibilidade (a11y).
  9. 9. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit Dojo é completamente livre e desenvolvido de forma transparente por um grupo ativo de desenvolvedores com uma comunidade fortemente presente.
  10. 10. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit Alô Mundo: Baixe o Dojo Toolkit (dojo-release-1.x.y) Copie as pastas dojo, dojox e dijit para seu diretório de Javascripts (por exemplo, js na raiz do diretório Web)
  11. 11. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit <html> <head> <title>Installed!</title> <script src="js/dojo/dojo.js"></script> </head> <body> <h1>Hello, Dojo</h1> </body> </html>
  12. 12. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit MAS, CARAMBA, NÃO ACONTECEU NADA! http://pt.wikipedia.org/wiki/Homem_de_ferro
  13. 13. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit ENTÃO ESTÁ TUDO CERTO, PORQUE NÃO FIZEMOS NADA AINDA! http://pt.wikipedia.org/wiki/Adam_strange
  14. 14. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: debug de página <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Dojo Toolkit Test Page</title> <!-- load the dojo toolkit base --> <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
  15. 15. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: debug de página <script type="text/javascript"> /* our JavaScript will go here */ </script> <style type="text/css"> /* our CSS can go here */ </style> </head> <body><!-- this is a Typical WebPage starting point ... --> <h1 id="testHeading">Dojo Skeleton Page</h1> <div id="contentNode"> <p>Some Content To Replace</p> </div> </body> </html>
  16. 16. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: página carregada // a very common method of loading code onLoad var init = function(){ console.log("I run after the page is ready."); }; dojo.addOnLoad(init); // and/or pass an anonymous function dojo.addOnLoad(function(){ console.log("I also run, but second. "); }); NÃO PRECISA DE <body onLoad="someFunc">
  17. 17. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: alterando o conteúdo de tags HTML pelo id dojo.require("dijit.form.Button"); dojo.require("dijit.TitlePane"); dojo.addOnLoad(function(){ dojo.byId("testHeading").innerHTML = "We're on our way!"; console.log("onLoad fires after require() is done"); });
  18. 18. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: alterando o CSS <script type="text/javascript"> dojo.require("dojo.NodeList-fx"); dojo.addOnLoad(function(){ // get each element with class="para" dojo.query(".para") .addClass("testClass") .fadeOut({ delay: 1000 }).play(); }); </script>
  19. 19. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: eventos <script type="text/javascript"> dojo.addOnLoad(function(){ var node = dojo.byId("testHeading"); dojo.connect(node,"onclick",function(){ node.innerHTML = "I've been clicked"; }); }); ... <body><!-- this is a Typical WebPage starting point ... --> <a id="testHeading" href="#">Click here</a> </body>
  20. 20. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: animações <script type="text/javascript"> dojo.addOnLoad(function(){ dojo.style("testHeading","opacity","0"); // hide it var anim1 = dojo.fadeOut({ node: "testHeading", duration:700 }); var anim2 = dojo.animateProperty({ node: "testHeading", delay: 1000, properties:{ // fade back in and make text bigger opacity: { end: 1 }, fontSize: { end:19, unit:"pt"} } }); anim1.play(); anim2.play(); });
  21. 21. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: animações FX <script type="text/javascript"> dojo.require("dojo.fx"); dojo.addOnLoad(function(){ var anim = dojo.fadeOut({ node: "testHeading", delay: 1000 }); var anim2 = dojo.fx.slideTo({ node: "testHeading", top:75, left:75 }); var result = dojo.fx.combine([anim,anim2]); result.play(); });
  22. 22. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: AJAX <script type="text/javascript"> var init = function(){ var contentNode = dojo.byId("content"); dojo.xhrGet({ url: "js/sample.txt", handleAs: "text", load: function(data,args){ // fade out the node we're modifying dojo.fadeOut({ node: contentNode, onEnd: function(){ // set the data, fade it back in contentNode.innerHTML = data; dojo.fadeIn({ node: contentNode }).play(); } }).play(); }, // if any error occurs, it goes here: error: function(error,args){ console.warn("error!",error); } }); }; dojo.addOnLoad(init);
  23. 23. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: AJAX <body id="content"><!-- this is a Typical WebPage starting point ... -->
  24. 24. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: Gráficos <script type="text/javascript"> dojo.require("dojox.charting.Chart2D"); makeCharts = function(){ var chart1 = new dojox.charting.Chart2D("simplechart"); chart1.addPlot("default", {type: "Lines"}); chart1.addAxis("x"); chart1.addAxis("y", {vertical: true}); chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]); chart1.render(); }; dojo.addOnLoad(makeCharts); ... <div id="simplechart" style="width: 250px; height: 150px;"></div>
  25. 25. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: Gráficos
  26. 26. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: Gráficos <script type="text/javascript"> dojo.require("dojox.charting.Chart2D"); makeCharts = function(){ var chart1 = new dojox.charting.Chart2D("simplechart"); chart1.addPlot("default", {type: "Lines"}); chart1.addPlot("other", {type: "Areas", hAxis: "other x", vAxis: "other y"}); chart1.addAxis("x"); chart1.addAxis("y", {vertical: true}); chart1.addAxis("other x", {leftBottom: false}); chart1.addAxis("other y", {vertical: true, leftBottom: false}); chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]); chart1.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3], {plot: "other", stroke: {color:"blue"}, fill: "lightblue"} ); chart1.render(); }; dojo.addOnLoad(makeCharts);
  27. 27. FGSL: É permitida a reprodução deste material desde que citada a fonte Dojo Toolkit: Gráficos
  28. 28. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend Framework
  29. 29. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend Framework http://pt.wikipedia.org/wiki/Changeman
  30. 30. FGSL: É permitida a reprodução deste material desde que citada a fonte E o Dojo?
  31. 31. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend Framework + Dojo Toolkit http://pt.wikipedia.org/wiki/Robin_(DC_Comics)
  32. 32. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend Framework + Dojo Toolkit http://pt.wikipedia.org/wiki/Mulher_gato
  33. 33. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Form <html> <body> <form id="myform" action="myapp/mycontroller/myaction" method="post"> Name: <input type="text" id="name"/> <input type="submit" value="Search"/> </form> </body> </html>
  34. 34. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Form $form = new Zend_Form("myform"); $form- >setAction("myapp/mycontroller/myaction "); $form->setMethod("post");
  35. 35. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Form $text = new Zend_Form_Element("name"); $form->setLabel("Name"); $form->addElement($text);
  36. 36. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Form $submit = new Zend_Form_Element("Search"); $form->addElement($submit);
  37. 37. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Form No controlador: $this->view-assign('form',$form);
  38. 38. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Form Na visão: <?=$this->form?> ou <?php echo $this->form;?>
  39. 39. FGSL: É permitida a reprodução deste material desde que citada a fonte E...? http://pt.wikipedia.org/wiki/Wolverine
  40. 40. FGSL: É permitida a reprodução deste material desde que citada a fonte Formulários RIA (Web 2.0)
  41. 41. FGSL: É permitida a reprodução deste material desde que citada a fonte 2 problemas 2 soluções Formulários Dinâmicos => Zend_Form RIA/Web 2.0 => Dojo Toolkit
  42. 42. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Layout MVC View → Conteúdo Layout → Disposição
  43. 43. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Layout Zend_Layout::startMvc(array( 'layoutPath' => APPLICATION_PATH .'/layouts' ));
  44. 44. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Controller_Action public function init() { /* Initialize action controller here */ $this->view- >addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper'); Zend_Dojo::enableView($this->view); }
  45. 45. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Controller_Action public function indexAction() { $form = new Zend_Dojo_Form(); $form->addElement( 'TextBox', 'foo', array( 'value' => 'some text', 'label' => 'TextBox', 'trim' => true, 'propercase' => true, ) );
  46. 46. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Controller_Action $form->addElement( 'SubmitButton', 'foo', array( 'required' => false, 'ignore' => true, 'label' => 'Submit Button!', ) ); $this->view->assign('form',$form); }
  47. 47. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_View <?php echo $this->form;
  48. 48. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Layout <script type="text/javascript"> <?php $this->dojo()->enable(); if ($this->dojo()->isEnabled()) { $this->dojo(); } ?> </script>
  49. 49. FGSL: É permitida a reprodução deste material desde que citada a fonte Zend_Layout <body class="tundra"> <?php echo $this->layout()->content ?> </body>
  50. 50. FGSL: É permitida a reprodução deste material desde que citada a fonte Até chegar aqui...
  51. 51. FGSL: É permitida a reprodução deste material desde que citada a fonte Fontes de consulta ● Documentação on-line (en, fr, de, jp, cn...) ● Comunidade ● Fóruns, listas de discussão, IRC (#zftalk) www.zfbrasil.com ● Livros disponíveis em português (agora, né)
  52. 52. FGSL: É permitida a reprodução deste material desde que citada a fonte Referências Coming soon...
  53. 53. FGSL: É permitida a reprodução deste material desde que citada a fonte Foi uma grande honra! http://pt.wikipedia.org/wiki/Lanterna_Verde 2011 coming soon.. Obrigado

×