Zend Framework e Dojo Toolkit

3.874 visualizações

Publicada em

Palestra proferida na PHP Conference 2009

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

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

×