Zend Framework e Dojo Toolkit

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

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/

Dojo Toolkit
Dojo Toolkit é uma caixa de ferramentas
Javascript open-source útil para construir
ótimas aplicações web.

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.

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

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
diretório de Javascripts (por exemplo, js na
raiz do diretório 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,
NÃO
ACONTECEU
NADA!
http://pt.wikipedia.org/wiki/Homem_de_ferro

Dojo Toolkit
ENTÃO ESTÁ
TUDO CERTO,
PORQUE NÃO
FIZEMOS NADA
AINDA!
http://pt.wikipedia.org/wiki/Adam_strange

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>

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>

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

Dojo Toolkit: alterando o
conteúdo de tags HTML pelo id
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
dojo.byId("testHeading").innerHTML = "We're on our
way!";
console.log("onLoad fires after require() is done");
});

Dojo Toolkit: alterando o CSS
dojo.require("dojo.NodeList-fx");
// get each element with class="para"
dojo.query(".para")
.addClass("testClass")
.fadeOut({ delay: 1000 }).play();
});
</script>

Dojo Toolkit: eventos
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: animações
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: animações FX
dojo.require("dojo.fx");
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
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: Gráficos
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>

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

E o Dojo?

Zend Framework + Dojo Toolkit
http://pt.wikipedia.org/wiki/Robin_(DC_Comics)

Zend Framework + Dojo Toolkit
http://pt.wikipedia.org/wiki/Mulher_gato

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 visão:
<?=$this->form?>
ou
<?php echo $this->form;?>

E...?
http://pt.wikipedia.org/wiki/Wolverine

Formulários RIA (Web 2.0)

2 problemas 2 soluções
Formulários Dinâmicos => Zend_Form
RIA/Web 2.0 => Dojo Toolkit

Zend_Layout
MVC
View → Conteúdo
Layout → Disposição

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
<?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
● 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é)

Referências
Coming soon...

Foi
uma
grande
honra!
http://pt.wikipedia.org/wiki/Lanterna_Verde
2011 coming soon..
Obrigado

Zend Framework e Dojo Toolkit

Recommandé

Recommandé

Contenu connexe

Similaire à Zend Framework e Dojo Toolkit

Similaire à Zend Framework e Dojo Toolkit (20)

Plus de Flávio Lisboa

Plus de Flávio Lisboa (20)

Zend Framework e Dojo Toolkit