Zend Framework's Path to Dojo Enlightenment
Upcoming SlideShare
Loading in...5
×
 

Zend Framework's Path to Dojo Enlightenment

on

  • 5,156 views

Webinar to promote php|tek 2009, showcasing Zend Framework/Dojo interaction.

Webinar to promote php|tek 2009, showcasing Zend Framework/Dojo interaction.

Statistics

Views

Total Views
5,156
Views on SlideShare
5,144
Embed Views
12

Actions

Likes
4
Downloads
105
Comments
0

2 Embeds 12

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

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Zend Framework's Path to Dojo Enlightenment Zend Framework's Path to Dojo Enlightenment Presentation Transcript

  • 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 = &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!
    • 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.