53
FGSL: É permitida a reprodução deste material desde que citada a fonte Zend Framework e Dojo Toolkit Flávio Gomes da Silva Lisboa [email protected] www.fgsl.eti.br

Zend Framework e Dojo Toolkit

Embed Size (px)

DESCRIPTION

Palestra proferida na PHP Conference 2009

Citation preview

Page 1: 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 [email protected]

www.fgsl.eti.br

Page 2: Zend Framework e Dojo Toolkit

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

Page 3: Zend Framework e Dojo Toolkit

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

Quem sou eu

Page 4: Zend Framework e Dojo Toolkit

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

Page 5: Zend Framework e Dojo Toolkit

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

Dojo Toolkit

http://www.dojotoolkit.org/

Page 6: Zend Framework e Dojo Toolkit

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.

Page 7: Zend Framework e Dojo Toolkit

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.

Page 8: Zend Framework e Dojo Toolkit

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

Page 9: Zend Framework e Dojo Toolkit

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.

Page 10: Zend Framework e Dojo Toolkit

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)

Page 11: Zend Framework e Dojo Toolkit

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>

Page 12: Zend Framework e Dojo Toolkit

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

Page 13: Zend Framework e Dojo Toolkit

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

Page 14: Zend Framework e Dojo Toolkit

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>

Page 15: Zend Framework e Dojo Toolkit

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>

Page 16: Zend Framework e Dojo Toolkit

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

Page 17: Zend Framework e Dojo Toolkit

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");});

Page 18: Zend Framework e Dojo Toolkit

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>

Page 19: Zend Framework e Dojo Toolkit

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>

Page 20: Zend Framework e Dojo Toolkit

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();});

Page 21: Zend Framework e Dojo Toolkit

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(); });

Page 22: Zend Framework e Dojo Toolkit

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

Page 23: Zend Framework e Dojo Toolkit

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

Page 24: Zend Framework e Dojo Toolkit

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>

Page 25: Zend Framework e Dojo Toolkit

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

Dojo Toolkit: Gráficos

Page 26: Zend Framework e Dojo Toolkit

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

Page 27: Zend Framework e Dojo Toolkit

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

Dojo Toolkit: Gráficos

Page 28: Zend Framework e Dojo Toolkit

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

Zend Framework

Page 29: Zend Framework e Dojo Toolkit

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

Zend Frameworkhttp://pt.w

ikipedia.org/wiki/C

hangeman

Page 30: Zend Framework e Dojo Toolkit

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

E o Dojo?

Page 31: Zend Framework e Dojo Toolkit

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)

Page 32: Zend Framework e Dojo Toolkit

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

Zend Framework + Dojo Toolkit

http://pt.wikipedia.org/w

iki/Mulher_gato

Page 33: Zend Framework e Dojo Toolkit

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>

Page 34: Zend Framework e Dojo Toolkit

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

Page 35: Zend Framework e Dojo Toolkit

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

Page 36: Zend Framework e Dojo Toolkit

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

Zend_Form

$submit = new Zend_Form_Element("Search");

$form->addElement($submit);

Page 37: Zend Framework e Dojo Toolkit

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

Zend_Form

No controlador:

$this->view-assign('form',$form);

Page 38: Zend Framework e Dojo Toolkit

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

Zend_Form

Na visão:

<?=$this->form?>

ou

<?php echo $this->form;?>

Page 39: Zend Framework e Dojo Toolkit

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

E...?

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

Page 40: Zend Framework e Dojo Toolkit

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

Formulários RIA (Web 2.0)

Page 41: Zend Framework e Dojo Toolkit

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

Page 42: Zend Framework e Dojo Toolkit

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

Zend_Layout

MVC

View → Conteúdo

Layout → Disposição

Page 43: Zend Framework e Dojo Toolkit

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

Zend_Layout

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

Page 44: Zend Framework e Dojo Toolkit

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); }

Page 45: Zend Framework e Dojo Toolkit

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,

));

Page 46: Zend Framework e Dojo Toolkit

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);}

Page 47: Zend Framework e Dojo Toolkit

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

Zend_View

<?php echo $this->form;

Page 48: Zend Framework e Dojo Toolkit

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>

Page 49: Zend Framework e Dojo Toolkit

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

Zend_Layout

<body class="tundra"> <?php echo $this->layout()->content ?></body>

Page 50: Zend Framework e Dojo Toolkit

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

Até chegar aqui...

Page 51: Zend Framework e Dojo Toolkit

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

Page 52: Zend Framework e Dojo Toolkit

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

Referências

Coming soon...

Page 53: Zend Framework e Dojo Toolkit

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