Practical Zend Framework Jutsu with Dojo Matthew Weier O'Phinney Software Architect Zend Framework

What is Dojo?

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

What does this have to do with JavaScript?

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 = &quot;post&quot; > Email: <input type = &quot;text&quot; value = &quot;&quot; id = &quot;email&quot; /> <input type = &quot;submit&quot; value = &quot;Send&quot; /> </form>

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

Inform your document about the Dojo dependencies <style> @import url(/js/dijit/themes/tundra/tundra.css); </style> <script type = &quot;text/javascript&quot; src = &quot;/js/dojo/dojo.js&quot; djConfig = &quot;parseOnLoad:true&quot; ></script> <script type = &quot;text/javascript&quot; > dojo.require( &quot;dijit.form.Form&quot; ); dojo.require( &quot;dijit.form.TextBox&quot; ); dojo.require( &quot;dijit.form.Button&quot; ); </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 ( &quot;dijit.form.Button&quot; ); // 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 ( &quot;foo.main&quot; ); ( function (){ dojo . require ( &quot;dijit.form.Button&quot; ); dojo . require ( &quot;dijit.form.Form&quot; ); dojo . require ( &quot;dijit.form.TextBox&quot; ); })();

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

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 = &quot;text/javascript&quot; src = &quot;/js/release/foo-1.0.0/dojo/dojo.js&quot; djConfig = &quot;parseOnLoad:true&quot; ></script> <script type = &quot;text/javascript&quot; > dojo.require( &quot;foo.main&quot; ); </script>

Voila!

Where does Zend Framework fit? &quot;can3ro55o&quot;, 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(&quot;.foo&quot;).forEach(function(node){ dojo.attr( node, &quot;dojoType&quot;, &quot;dijit.layout.ContentPane&quot;); 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(), &quot;tundra&quot;, true); ' );

But I hate Dojo markup!

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

But 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 &quot;AikiDude&quot;, 2006

Thank you.