zend framework e dojo toolkit
Post on 22-Apr-2015
4.137 Views
Preview:
DESCRIPTION
TRANSCRIPT
FGSL: É permitida a reprodução deste material desde que citada a fonte
Zend Framework e Dojo Toolkit
Flávio Gomes da Silva Lisboaflaviogomesdasilva@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> <!-- load the dojo toolkit base --> <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><!-- 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>
FGSL: É permitida a reprodução deste material desde que citada a fonte
Dojo Toolkit: página carregada
// a very common method of loading code onLoadvar init = function(){ console.log("I run after the page is ready.");};dojo.addOnLoad(init);// and/or pass an anonymous functiondojo.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><!-- this is a Typical WebPage starting point ... -->
<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"><!-- this is a Typical WebPage starting point ... -->
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 Frameworkhttp://pt.w
ikipedia.org/wiki/C
hangeman
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 Toolkithttp://pt.w
ikipedia.org/wiki/R
obin_(DC
_Com
ics)
FGSL: É permitida a reprodução deste material desde que citada a fonte
Zend Framework + Dojo Toolkit
http://pt.wikipedia.org/w
iki/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
Foi uma
grande honra!
http://pt.wikipedia.org/wiki/Lanterna_Verde
2011 coming soon..
Obrigado
top related