Practical Zend Framework Jutsu with Dojo

Matthew Weier O'PhinneySoftware 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');

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!

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.