Practical Zend Framework Jutsu with Dojoconf.phpquebec.com › slides › 2009 ›...
Transcript of Practical Zend Framework Jutsu with Dojoconf.phpquebec.com › slides › 2009 ›...
-
Practical Zend Framework Jutsu
with DojoMatthew Weier O'Phinney
Software ArchitectZend 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 toolsetand 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
Email:
-
Sprinkle in some HTML attributes
Email:
-
Inform your document about the Dojo dependencies
@import url(/js/dijit/themes/tundra/tundra.css);
dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Button");
-
Voila!
-
Okay, let's look at something a bit more impressive:
-
What's going onunder the hood
-
dojo.require
-
It's like PEAR or ZF:
/* Load dijit/form/Button.js relative to dojo directory */dojo.require("dijit.form.Button");
// Load Zend/Form/Element/Button.php from// include_pathZend_Loader::loadClass('Zend_Form_Element_Button');
-
Ruhroh! We have a problem!
-
The Way: Dojo Builds
-
Define a layer script
dojo.provide("foo.main");
(function(){ dojo.require("dijit.form.Button"); dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox");})();
-
Create a build profiledependencies = { action: "release", version: "1.0.0", releaseName: "foo-1.0.0", cssOptimize: "comments", optimize: "shrinksafe", layerOptimize: "shrinksafe", copyTests: false, layers: [{ name: "../foo/main.js", layerDependencies: [], dependencies:[ "foo.main" ] }], prefixes: [ [ "dijit", "../dijit" ], [ "foo", "../foo" ] ]};
-
Generate your build
# from util/buildscripts/./build.sh profile=foo
-
Modify your HTML
@import url(/js/release/foo-1.0.0/foo/themes/foo/foo.css);
dojo.require("foo.main");
-
Voila!
-
Where does
Zend Framework fit?
"can3ro55o", 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(".foo").forEach(function(node){ dojo.attr( node, "dojoType", "dijit.layout.ContentPane"); dojo.parser.parse(node); });}');
-
Definearbitrary javascript to run at page load
-
Add pagespecific JavaScript in your view scripts, where it belongs
$this->dojo()->addJavascript(' // turn on dijit theme on body dojo.toggleClass( dojo.body(), "tundra", 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!
-
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
"AikiDude", 2006
-
Thank you.
Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9Slide 10Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Slide 24Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30Slide 31Slide 32Slide 33Slide 34Slide 35Slide 36Slide 37Slide 38Slide 39Slide 40Slide 41