If you can't read please download the document
Upload
matthew-weier-ophinney
View
3.089
Download
0
Embed Size (px)
Citation preview
Zend Framework's Path to
Dojo Enlightenment
Matthew Weier O'PhinneyProject LeadZend Framework
What is Dojo?
Dojo: Japanese:
Place of the way
Michael Cornelius, 2008
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');
Ruh-roh! 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 profile
dependencies = { 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 page-specific 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!
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.