Your SlideShare is downloading. ×
0
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Zend Framework Jutsu with Dojo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Zend Framework Jutsu with Dojo

3,268

Published on

Overview of Dojo widget creation and build system, and how to leverage Zend Framework to help generate Dojo artifacts.

Overview of Dojo widget creation and build system, and how to leverage Zend Framework to help generate Dojo artifacts.

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

No Downloads
Views
Total Views
3,268
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
92
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Practical Zend Framework Jutsu with Dojo Matthew Weier O'Phinney Software Architect Zend Framework
  2. What is Dojo?
  3. Dojo: Japanese: “ Place of the way” Michael Cornelius, 2008
  4. What does this have to do with JavaScript?
  5. How Dojo Works
  6. DOM manipulation toolset and XHR library
  7. 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" ); } });
  8. UI Widgets
  9. 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>
  10. 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>
  11. 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>
  12. Voila!
  13. Okay, let's look at something a bit more impressive:
  14. What's going on under the hood
  15. dojo.require
  16. 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' );
  17. Ruh-roh! We have a problem!
  18. The Way: Dojo Builds
  19. 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; ); })();
  20. 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; ] ] };
  21. Generate your build # from util/buildscripts/ . / build.sh profile = foo
  22. 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>
  23. Voila!
  24. Where does Zend Framework fit? &quot;can3ro55o&quot;, 2007
  25. Aggregate dojo.require statements
  26. Add them manually to the dojo() view helper // dojo.require('dijit.form.TextBox') $this -> dojo () -> requireModule ( 'dijit.form.TextBox' );
  27. Dijit view helpers add them implicitly // dojo.require('dijit.form.TextBox') $this -> textBox ( 'foo' , '' , array ( 'lowercase' => true ));
  28. 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' , )), ), ));
  29. Define dojo.addOnLoad events
  30. 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); }); }' );
  31. Define arbitrary javascript to run at page load
  32. 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); ' );
  33. But I hate Dojo markup!
  34. <ul><li>But 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>
  35. The Future Dimitris Agelakis, 2005
  36. Automated builds (or close to it)
  37. 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 );
  38. More comprehensive Dijit support
  39.  
  40. In closing... knowing one gets the job done; knowing both leads to mastery &quot;AikiDude&quot;, 2006
  41. Thank you.

×