You are on page 1of 50

¯¯

An Introduction

Alex Russell <alex@dojotoolkit.org>


Project Lead, The Dojo Toolkit
http://alex.dojotoolkit.org/06/
AjaxExperience/IntroToDojo.pdf
Great Apps Need
Great Tools

(C) 2005 Flickr user ndrwfgg


What Is Dojo?
Dojo Is...
The Standard Library
JavaScript Never Had
A Set Of
Layered
Libraries
Liberally Licensed
AFL or BSD
The BSD License

• You don’t owe us anything


• You can use it in commercial apps
• You must include our copyright notice
• You can’t claim copyright on it
The AFL License
• You don’t owe us anything
• You can use it in commercial apps
• You can sub-license the code
• You don’t have to give us credit
• You can’t sue us for patent infringement
• You can’t claim copyright on it
Layers of Dojo
Custom Widgets
Widget System
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
Dojo
Overview
• Bootstrap is mostly platform independent
• “host environment” files fill in cracks
• dojo.js includes things in the right order
• Attempts to auto-detect correct hostenv
• Package system will always be ready to run
after bootstraps are loaded
Pulling In Other Code
dojo.require(”package.*”);
dojo.requireIf(condition, “package.*”);
dojo.requireAfterIf(condition, “package.*”);
dojo.kwCompoundRequire({
browser: [”foo.bar”, “baz.*”],
common: [”thud.*”]
});
Defining Modules
• Need to include a dojo.provide()
statement
• “.*” is special

• All lookups are relative to the Dojo root


• You can define your own namespaces
dojo.setModulePrefix(”name”,
“../relative/path/”);
dojo.require(”name.foo.*”);
The Lookup Order
dojo.require(”dojo.foo.*”);

http://.../dojo/src/foo/__package__.js
http://.../dojo/src/foo.js
http://.../dojo/src/__package__.js
http://.../dojo/src.js
http://.../dojo/__package__.js
Builds
• Builds transparently replace your source
version of Dojo
<script src=”path/to/dojo.js”>

becomes
<script src=”path/to/release/dojo.js”>

• Builds combine required files in the right


order
Walkthrough:
Builds and Profiles
Language Utilities
Custom Widgets
Widget System
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
Dojo
dojo.lang.*
• Wrappers for common idioms
• Not replacements for language
constructs!
• Functional programming APIs
• Forward-compatibility shims
• dojo.lang.is*
The Handiest Ones
• dojo.lang.forEach • dojo.lang.mixin

• dojo.lang.map • dojo.lang.setTimeout

• dojo.lang.declare • dojo.lang.delayThese

• dojo.lang.hitch • dojo.lang.curry

• dojo.lang.extend • dojo.lang.assert
Event System
Custom Widgets
Widget System
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
Dojo
“Like crack for web
developers”
Eavesdropping
• Dojo’s event system is runtime AOP
• before, after, and around advice
• Any function can be notified when any other
function fires
dojo.event.connect(obj1, “func”,
obj2, “func”);
obj1.func(); // now calls obj2.func()
Sources And Targets
Can Be DOM Nodes...
...Or Arrays Of Nodes

dojo.event.connect(
[”id1, “id2”, “id3”], “onclick”,
listenerObj, “handleOnClick”);
• We fix the event object!
• dojo.event.connect() prevents leaks
• Alternate advice types via same API
• kwConnect for complex cases
UI Utilities
Custom Widgets
Widget System
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
Dojo
Lots of Goodies!

dojo.io.* dojo.dnd.*
dojo.html.* dojo.lfx.*
dojo.style.* dojo.dom.*
Obligatory Ajax Slide
• dojo.io.bind() packs a big punch
• Handles text encodings
• Auto-encodes URL components
• Submits forms
• Sync or async
• Coerces return data
• Pluggable back-ends
Other I/O Goodies
• dojo.require(”dojo.io.ScriptSrcIO”);
• Cross-domain and JSON-P
• dojo.require(”dojo.io.IframeIO”)
• Background uploads, plugs right into bind()!
• dojo.io.updateNode()
• dojo.io.encodeForm()
Drag and Drop
• Every drag operation involves three parties
• DragSource
• DragObject
• DropTarget
• DragSources and DropTargets have types
• The drag manager handles all low-level
events
Drag And Drop Demo
Animations and Effects
dojo.lfx.*
• New in 0.3.0
• Replaces dojo.fx.* and dojo.animation.*
• Includes many “canned” effects:
• fadeIn, fadeShow, fadeOut, fadeHide,
wipeIn, wipeOut, slideTo, explode,
implode, highlight, unhighlight
Powerful Primitives
// wipe two elements out, one after
// the other, following a 300ms delay

var anim1 = dojo.lfx.wipeOut(”foo”, 300);


var anim2 = dojo.lfx.wipeOut(”bar”, 500);
var composed = dojo.lfx.chain(anim1, anim2);
composed.play(300);
Contd.
// fade out three nodes together, using
// acceleration
dojo.lfx.fadeOut(
[”foo”, “bar”, “baz”],
300,
dojo.lfx.easeInOut
).play();
The Widget System
Custom Widgets
Widget System
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
Dojo
What’s A Widget?
• Encapsulated, reusable rendering and
behavior
• HTML+CSS bound by JavaScript
• Can be built from markup
• Subclass of dojo.widget.Widget
• Usually derives from dojo.widet.HtmlWidget
Dojo Already Has Lots
of Useful Widgets!
Rich Text Editor Sorting Table
ContentPane Google/Yahoo
Maps
SplitPanel
Tree
Tabs
Dialog/Wizard
Fisheye List
Using Widgets
<script>
dojo.require(”dojo.widget.Editor2”);
</script>
<!-- ... -->
<textarea dojoType=”Editor2”>
...
</textarea>
Passing Parameters
<textarea dojoType=”Editor2”
minHeight=”40em”
relativeImageUrls=”true”
toolbarAlwaysVisible=”true”
htmlEditing=”true”>
...
</textarea>
Custom Widgets
Custom Widgets
Widget System
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
Dojo
Anatomy Of A Widget
src/
widget/
templates/
Foo.html
Foo.css
Foo.js
Foo.js
dojo.provide(”dojo.widget.Foo”);
dojo.require(”dojo.widget.*”);
dojo.widget.defineWidget(
”dojo.widget.Foo”,
dojo.widget.HtmlWidget,
{ // widget properties
templatePath: “src/widget/templates/Foo.html”,
templateCssPath: “src/widget/templates/Foo.css”
}
);
Foo.html
<div dojoAttachPoint=”domNode”
class=”DojoFoo”>
<em dojoOnClick=”hide”>Foo!!!!</em>
</div>

Foo.css
.DojoFoo em {
font-weight: bold;
}
Using it!

<script>
dojo.require(”dojo.widget.Foo”);
</script>
<!-- ... -->
<span dojoType=”Foo”>Bar</span>
Questions?
¯¯

You might also like