Zend Framework's Path to Dojo Enlightenment

Zend Framework's Path to Dojo Enlightenment Matthew Weier O'Phinney Project Lead Zend Framework

What is Dojo?

Dojo: Japanese: “ Place of the way” Michael Cornelius, 2008

How Dojo Works

DOM manipulation toolset and XHR library

You know, the standard stuff: dojo . query ( "#content a" ). forEach ( function ( node ){ dojo . toggleClass ( node , "decorated" , true ); }); dojo . xhrGet ({ url : "/foo/bar" , handleAs : "text" , load : function ( response , ioArgs ) { dojo . place ( response , "content" ); } });

UI Widgets

Create some content <form method = "post" > Email: <input type = "text" value = "" id = "email" /> <input type = "submit" value = "Send" /> </form>

Sprinkle in some HTML attributes <div class = "tundra" > <form method = "post" dojoType = "dijit.form.Form" > Email: <input type = "text" value = "" id = "email" dojoType = "dijit.form.TextBox" /> <input type = "submit" value = "Send" label = "Send" dojoType = "dijit.form.Button" /> </form> </div>

Inform your document about the Dojo dependencies <style> @import url(/js/dijit/themes/tundra/tundra.css); </style> <script type = "text/javascript" src = "/js/dojo/dojo.js" djConfig = "parseOnLoad:true" ></script> <script type = "text/javascript" > dojo.require( "dijit.form.Form" ); dojo.require( "dijit.form.TextBox" ); dojo.require( "dijit.form.Button" ); </script>

Voila!

Okay, let's look at something a bit more impressive:

What's going on under the hood

dojo.require

It's like PEAR or ZF: /* Load dijit/form/Button.js relative to dojo directory */ dojo . require ( "dijit.form.Button" ); // Load Zend/Form/Element/Button.php from // include_path Zend_Loader :: loadClass ( 'Zend_Form_Element_Button' );

Ruh-roh! We have a problem!

The Way: Dojo Builds

Define a layer script dojo . provide ( "foo.main" ); ( function (){ dojo . require ( "dijit.form.Button" ); dojo . require ( "dijit.form.Form" ); dojo . require ( "dijit.form.TextBox" ); })();

Create a build profile dependencies = { action : "release" , version : "1.0.0" , releaseName : "foo-1.0.0" , cssOptimize : "comments" , optimize : "shrinksafe" , layerOptimize : "shrinksafe" , copyTests : false , layers : [{ name : "../foo/main.js" , layerDependencies : [], dependencies :[ "foo.main" ] }], prefixes : [ [ "dijit" , "../dijit" ], [ "foo" , "../foo" ] ] };

Generate your build # from util/buildscripts/ . / build.sh profile = foo

Modify your HTML <style> @import url(/js/release/foo- 1.0.0 /foo/themes/foo/foo.css); </style> <script type = "text/javascript" src = "/js/release/foo-1.0.0/dojo/dojo.js" djConfig = "parseOnLoad:true" ></script> <script type = "text/javascript" > dojo.require( "foo.main" ); </script>

Voila!

Where does Zend Framework fit? "can3ro55o", 2007

Aggregate dojo.require statements

Add them manually to the dojo() view helper // dojo.require('dijit.form.TextBox') $this -> dojo () -> requireModule ( 'dijit.form.TextBox' );

Dijit view helpers add them implicitly // dojo.require('dijit.form.TextBox') $this -> textBox ( 'foo' , '' , array ( 'lowercase' => true ));

Form elements and decorators add them implicitly via view helpers // dojo.require('dijit.form.TextBox') // dojo.require('dijit.layout.ContentPane') $form -> createElement ( 'textBox' , 'foo' , array ( 'lowercase' => true , 'decorators' => array ( 'DijitElement' , array ( 'ContentPane' , array ( 'id' => 'fooWrapper' , 'title' => 'Foo' , )), ), ));

Define dojo.addOnLoad events

Add addOnLoad events in your view scripts, where they belong $this -> dojo ()-> addOnLoad ( 'function(){ dojo.query(".foo").forEach(function(node){ dojo.attr( node, "dojoType", "dijit.layout.ContentPane"); dojo.parser.parse(node); }); }' );

Define arbitrary javascript to run at page load

Add page-specific JavaScript in your view scripts, where it belongs $this -> dojo ()-> addJavascript ( ' // turn on dijit theme on body dojo.toggleClass( dojo.body(), "tundra", true); ' );

But I hate Dojo markup!

There are compelling reasons to use declarative markup:
XmlHttpRequests returning markup will need to use declarative markup to work correctly
The W3C specifications allow arbitrary attributes; the validators don't follow the specifications!

The Future Dimitris Agelakis, 2005

Automated builds (or close to it)

Pass your dojo() view helper to a build object, and generate your layer script and build profile $build = new Zend_Dojo_BuildLayer ( 'view' => $view , 'layerName' => 'foo.main' , ); $layerScript = $build -> generateLayerScript (); $profileScript = $build -> generateBuildProfile (); file_put_contents ( 'js/foo/main.js' , $layerScript ); file_put_contents ( 'js/util/buildscripts/profiles/foo.profile.js' , $profileScript );

More comprehensive Dijit support

In closing... knowing one gets the job done; knowing both leads to mastery "AikiDude", 2006

Thank you.

Zend Framework's Path to Dojo Enlightenment

by Matthew Weier O'Phinney

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 12

Statistics

Zend Framework’s Path to Dojo Enlightenment Presentation Transcript

http://www.slideshare.net	11
http://www.linkedin.com	1