Zend Framework e Dojo Toolkit

Zend Framework e Dojo Toolkit Flávio Gomes da Silva Lisboa flaviogomesdasilva@yahoo.com.br www.fgsl.eti.br 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 FGSL: É permitida a reprodução deste material desde que citada a fonte

Quem sou eu 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 FGSL: É permitida a reprodução deste material desde que citada a fonte

Dojo Toolkit http://www.dojotoolkit.org/ 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. 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. 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). 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. 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) 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> 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 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 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>  <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script> 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> <h1 id="testHeading">Dojo Skeleton Page</h1> <div id="contentNode"> <p>Some Content To Replace</p> </div> </body> </html> 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"> 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"); }); 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> 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> <a id="testHeading" href="#">Click here</a> </body> 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(); }); 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(); }); 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); FGSL: É permitida a reprodução deste material desde que citada a fonte

Dojo Toolkit: AJAX <body id="content"> 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> FGSL: É permitida a reprodução deste material desde que citada a fonte

Dojo Toolkit: Gráficos 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); FGSL: É permitida a reprodução deste material desde que citada a fonte

Dojo Toolkit: Gráficos FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend Framework FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend Framework http://pt.wikipedia.org/wiki/Changeman FGSL: É permitida a reprodução deste material desde que citada a fonte

E o Dojo? FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend Framework + Dojo Toolkit http://pt.wikipedia.org/wiki/Robin_(DC_Comics) FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend Framework + Dojo Toolkit http://pt.wikipedia.org/wiki/Mulher_gato 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> 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"); 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); FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend_Form $submit = new Zend_Form_Element("Search"); $form->addElement($submit); FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend_Form No controlador: $this->view-assign('form',$form); FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend_Form Na visão: <?=$this->form?> ou <?php echo $this->form;?> FGSL: É permitida a reprodução deste material desde que citada a fonte

E...? http://pt.wikipedia.org/wiki/Wolverine FGSL: É permitida a reprodução deste material desde que citada a fonte

Formulários RIA (Web 2.0) 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 FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend_Layout MVC View → Conteúdo Layout → Disposição FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend_Layout Zend_Layout::startMvc(array( 'layoutPath' => APPLICATION_PATH .'/layouts' )); 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); } 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, ) ); 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); } FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend_View <?php echo $this->form; 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> FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend_Layout <body class="tundra"> <?php echo $this->layout()->content ?> </body> FGSL: É permitida a reprodução deste material desde que citada a fonte

Até chegar aqui... 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é) FGSL: É permitida a reprodução deste material desde que citada a fonte

Referências Coming soon... FGSL: É permitida a reprodução deste material desde que citada a fonte

Obrigado Foi uma grande honra! 2011 coming soon.. http://pt.wikipedia.org/wiki/Lanterna_Verde FGSL: É permitida a reprodução deste material desde que citada a fonte

Zend Framework e Dojo Toolkit

by Flávio Lisboa on Oct 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Zend Framework e Dojo Toolkit — Presentation Transcript