Zend Framework's Path to Dojo Enlightenment

  • 2,609 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,609
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
106
Comments
0
Likes
4

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