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 ( n...
UI Widgets
Create some content <form   method = &quot;post&quot; > Email:   <input   type = &quot;text&quot;   value = &quot;&quot;  ...
Sprinkle in some HTML attributes <div   class = &quot;tundra&quot; > <form   method = &quot;post&quot;   dojoType = &quot;...
Inform your document about the Dojo dependencies <style>     @import url(/js/dijit/themes/tundra/tundra.css); </style> <sc...
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.Butto...
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&quo...
Create a build profile dependencies   = { action :   &quot;release&quot; , version :   &quot;1.0.0&quot; , releaseName :  ...
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;te...
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 ( 'd...
Dijit view helpers add them implicitly // dojo.require('dijit.form.TextBox') $this -> textBox ( 'foo' ,   '' ,   array (  ...
Form elements and decorators add them implicitly via view helpers // dojo.require('dijit.form.TextBox') // dojo.require('d...
Define   dojo.addOnLoad events
Add addOnLoad events in your view scripts, where they belong $this -> dojo ()-> addOnLoad ( 'function(){ dojo.query(&quot;...
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 ...
But I hate Dojo markup!
<ul><li>There are compelling reasons to use declarative markup: </li></ul><ul><ul><li>XmlHttpRequests returning markup wil...
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_D...
More comprehensive  Dijit support
 
In closing... knowing one gets the job done; knowing both leads to mastery &quot;AikiDude&quot;, 2006
Thank you.
Upcoming SlideShare
Loading in...5
×

Zend Framework's Path to Dojo Enlightenment

2,773

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,773
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
109
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Zend Framework's Path to Dojo Enlightenment

  1. 1. Zend Framework's Path to Dojo Enlightenment Matthew Weier O'Phinney Project Lead Zend Framework
  2. 2. What is Dojo?
  3. 3. Dojo: Japanese: “ Place of the way” Michael Cornelius, 2008
  4. 4. How Dojo Works
  5. 5. DOM manipulation toolset and XHR library
  6. 6. You know, the standard stuff: dojo . query ( &quot;#content a&quot; ). forEach ( function ( node ){ dojo . toggleClass ( node , &quot;decorated&quot; , true ); }); dojo . xhrGet ({ url : &quot;/foo/bar&quot; , handleAs : &quot;text&quot; , load : function ( response , ioArgs ) { dojo . place ( response , &quot;content&quot; ); } });
  7. 7. UI Widgets
  8. 8. 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>
  9. 9. 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>
  10. 10. 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>
  11. 11. Voila!
  12. 12. Okay, let's look at something a bit more impressive:
  13. 13. What's going on under the hood
  14. 14. dojo.require
  15. 15. 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' );
  16. 16. Ruh-roh! We have a problem!
  17. 17. The Way: Dojo Builds
  18. 18. 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; ); })();
  19. 19. 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; ] ] };
  20. 20. Generate your build # from util/buildscripts/ . / build.sh profile = foo
  21. 21. 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>
  22. 22. Voila!
  23. 23. Where does Zend Framework fit? &quot;can3ro55o&quot;, 2007
  24. 24. Aggregate dojo.require statements
  25. 25. Add them manually to the dojo() view helper // dojo.require('dijit.form.TextBox') $this -> dojo () -> requireModule ( 'dijit.form.TextBox' );
  26. 26. Dijit view helpers add them implicitly // dojo.require('dijit.form.TextBox') $this -> textBox ( 'foo' , '' , array ( 'lowercase' => true ));
  27. 27. 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' , )), ), ));
  28. 28. Define dojo.addOnLoad events
  29. 29. 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); }); }' );
  30. 30. Define arbitrary javascript to run at page load
  31. 31. 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); ' );
  32. 32. But I hate Dojo markup!
  33. 33. <ul><li>There are compelling reasons to use declarative markup: </li></ul><ul><ul><li>XmlHttpRequests returning markup will need to use declarative markup to work correctly </li></ul></ul><ul><ul><li>The W3C specifications allow arbitrary attributes; the validators don't follow the specifications! </li></ul></ul>
  34. 34. The Future Dimitris Agelakis, 2005
  35. 35. Automated builds (or close to it)
  36. 36. 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 );
  37. 37. More comprehensive Dijit support
  38. 39. In closing... knowing one gets the job done; knowing both leads to mastery &quot;AikiDude&quot;, 2006
  39. 40. Thank you.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×