Embed Size (px)
Citation preview
¯¯
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 LicensedAFL 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
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
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
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
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.map
• dojo.lang.declare
• dojo.lang.hitch
• dojo.lang.extend
• dojo.lang.mixin
• dojo.lang.setTimeout
• dojo.lang.delayThese
• dojo.lang.curry
• dojo.lang.assert
Event System
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
“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
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
Lots of Goodies!
dojo.io.*
dojo.html.*
dojo.style.*
dojo.dnd.*
dojo.lfx.*
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
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
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
ContentPane
SplitPanel
Tabs
Fisheye List
Sorting Table
Google/Yahoo Maps
Tree
Dialog/Wizard
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
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
Anatomy Of A Widget
src/
widget/
templates/
Foo.html
Foo.css
Foo.js
Foo.jsdojo.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?
¯¯
