Professional Documents
Culture Documents
An Introduction
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”>
• 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
Foo.css
.DojoFoo em {
font-weight: bold;
}
Using it!
<script>
dojo.require(”dojo.widget.Foo”);
</script>
<!-- ... -->
<span dojoType=”Foo”>Bar</span>
Questions?
¯¯