Zendframeworkedojotoolkit 101022055731 Phpapp02

Zend Framework e Dojo Toolkit
Flvio Gomes da Silva Lisboa flaviogomesdasilva@yahoo.com.br www.fgsl.eti.br
FGSL: permitida a reproduo deste material desde que citada a fonte
Agenda
Quem sou eu (1 slide) Javascript, AJAX, RIA Dojo Toolkit Zend Framework Zend_Dojo
Quem sou eu
Ah, se a Web fosse Desktop...
AJAX (Asynchronous Javascript And XML) RIA Web 2.0
Dojo Toolkit
http://www.dojotoolkit.org/ FGSL: permitida a reproduo deste material desde que citada a fonte
Dojo Toolkit
Dojo Toolkit uma caixa de ferramentas Javascript open-source til para construir timas aplicaes web.
Dojo Toolkit
O objetivo encurtar o tempo gasto entre a idia e a implementao 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.
Dojo Toolkit
Ele leve, extremamente robusto, e fornece um slido conjunto de ferramentas para manipulao DOM, animaes, Ajax, eventos, internacionalizao (i18n) e accessibilidade (a11y).
Dojo Toolkit
Dojo completamente livre e desenvolvido de forma transparente por um grupo ativo de desenvolvedores com uma comunidade fortemente presente.
Dojo Toolkit
Al Mundo: Baixe o Dojo Toolkit (dojo-release-1.x.y) Copie as pastas dojo, dojox e dijit para seu diretrio de Javascripts (por exemplo, js na raiz do diretrio Web)
Dojo Toolkit
<html> <head> <title>Installed!</title> <script src="js/dojo/dojo.js"></script> </head> <body> <h1>Hello, Dojo</h1> </body> </html>
Dojo Toolkit
MAS, CARAMBA, NO ACONTECEU NADA!
http://pt.wikipedia.org/wiki/Homem_de_ferro FGSL: permitida a reproduo deste material desde que citada a fonte
Dojo Toolkit
ENTO EST TUDO CERTO, PORQUE NO FIZEMOS NADA AINDA!
http://pt.wikipedia.org/wiki/Adam_strange
Dojo Toolkit: debug de pgina
<!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>
Dojo Toolkit: debug de pgina

<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>
Dojo Toolkit: pgina 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. "); });
NO PRECISA DE <body onLoad="someFunc">
Dojo Toolkit: alterando o contedo 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"); });
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>
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>
Dojo Toolkit: animaes

<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(); });
Dojo Toolkit: animaes 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(); });
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);
Dojo Toolkit: AJAX
<body id="content">
Dojo Toolkit: Grficos

<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>

<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);
Zend Framework
Zend Framework
http://pt.wikipedia.org/wiki/Changeman FGSL: permitida a reproduo deste material desde que citada a fonte
E o Dojo?
Zend Framework + Dojo Toolkit

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

http://pt.wikipedia.org/wiki/Mulher_gato FGSL: permitida a reproduo 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>
Zend_Form
$form = new Zend_Form("myform"); $form>setAction("myapp/mycontroller/myaction "); $form->setMethod("post");
Zend_Form
$text = new Zend_Form_Element("name"); $form->setLabel("Name"); $form->addElement($text);
Zend_Form
$submit = new Zend_Form_Element("Search"); $form->addElement($submit);
Zend_Form
No controlador: $this->view-assign('form',$form);
Zend_Form
Na viso: <?=$this->form?> ou <?php echo $this->form;?>
E...?
http://pt.wikipedia.org/wiki/Wolverine FGSL: permitida a reproduo deste material desde que citada a fonte
Formulrios RIA (Web 2.0)
2 problemas 2 solues
Formulrios Dinmicos => Zend_Form RIA/Web 2.0 => Dojo Toolkit
Zend_Layout
MVC View Contedo Layout Disposio
Zend_Layout
Zend_Layout::startMvc(array( 'layoutPath' => APPLICATION_PATH .'/layouts' ));
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); }
public function indexAction() { $form = new Zend_Dojo_Form(); $form->addElement( 'TextBox', 'foo', array( 'value' => 'some text', 'label' => 'TextBox', 'trim' => true, 'propercase' => true, ) );
$form->addElement( 'SubmitButton', 'foo', array( 'required' => false, 'ignore' => true, 'label' => 'Submit Button!', ) ); $this->view->assign('form',$form); }
Zend_View
<?php echo $this->form;
Zend_Layout
<script type="text/javascript"> <?php $this->dojo()->enable(); if ($this->dojo()->isEnabled()) { $this->dojo(); } ?> </script>
Zend_Layout
<body class="tundra"> <?php echo $this->layout()->content ?> </body>
At chegar aqui...
Fontes de consulta
Documentao on-line (en, fr, de, jp, cn...) Comunidade Fruns, listas de discusso, IRC (#zftalk) www.zfbrasil.com Livros disponveis em portugus (agora, n)
Referncias
Coming soon...
Obrigado
Foi uma grande honra!
2011 coming soon..
http://pt.wikipedia.org/wiki/Lanterna_Verde

Zendframeworkedojotoolkit 101022055731 Phpapp02

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Zendframeworkedojotoolkit 101022055731 Phpapp02

Enviado por

Direitos autorais:

Formatos disponíveis

Zend Framework e Dojo Toolkit

Flvio Gomes da Silva Lisboa flaviogomesdasilva@yahoo.com.br www.fgsl.eti.br

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo 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 reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: debug de pgina

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: debug de pgina

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: pgina carregada

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: alterando o contedo de tags HTML pelo id

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: alterando o CSS

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: eventos

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: animaes

Dojo Toolkit: animaes FX

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: AJAX

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: AJAX

<body id="content">

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: Grficos

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: Grficos

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: Grficos

FGSL: permitida a reproduo deste material desde que citada a fonte

Dojo Toolkit: Grficos

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

Zend Framework + Dojo Toolkit

Zend Framework + Dojo Toolkit

$form = new Zend_Form("myform"); $form>setAction("myapp/mycontroller/myaction "); $form->setMethod("post");

FGSL: permitida a reproduo deste material desde que citada a fonte

$text = new Zend_Form_Element("name"); $form->setLabel("Name"); $form->addElement($text);

FGSL: permitida a reproduo deste material desde que citada a fonte

$submit = new Zend_Form_Element("Search"); $form->addElement($submit);

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

Na viso: <?=$this->form?> ou <?php echo $this->form;?>

FGSL: permitida a reproduo deste material desde que citada a fonte

Formulrios RIA (Web 2.0)

FGSL: permitida a reproduo deste material desde que citada a fonte

Formulrios Dinmicos => Zend_Form RIA/Web 2.0 => Dojo Toolkit

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte

Zend_Layout::startMvc(array( 'layoutPath' => APPLICATION_PATH .'/layouts' ));

FGSL: permitida a reproduo deste material desde que citada a fonte

FGSL: permitida a reproduo deste material desde que citada a fonte