Why Use DOJO ?
Most of us use javascript for validations and js functions for
a variety of taks . Also if you are using AJAX using Xmlhttprequest
you have added a lot of dynamic capabilities in the page . But how
to make it even better ? Do you have to be a great JS expert
to implement single page applications like Gmail ,
Google Reader , Yahoo Mail etc . Answer is NO .
Javascript is complex and cumbersome when it comes to complex applications.
Implementation is different in different browsers and developer has
to worry about memory leakes , browser events etc.
DOJO is a great toolkit that allows the developers to focus on their
needs for the application rather than worry about the complex java script.
Also eliminate the need to write browser specific code . DOJO Toolkit has
taken that burden off developers for the most part .
Following are notes from Alex Russel's ( project lead of dojotool kit )presentation of DOJO.
What does DOJO Provide .
1. Package System / Bootstrap
2. Language Utilities
3. Event System
4. UI utilities
5. Widget System
6. Custom Widgets
7. Utilities
1. Package System - there is no package system in javascript .
No hirearcial way of categorizing js . DOJO solves it by bringing
a package system .
Packages can be included only if required . Lets the developer think about dependencies
Packages can be included dynamically
Once package is included its functions are guranteed work on the next line
code
dojo.require("package.*");
dojo.requireIf(Condition,"package.*");
dojo.kwCompoundRequire
(
{
browser:["foo.bar","baz.*"],
common:("thad.*"]
}
);
2. Language Utilites - Define your own modules using dojo.provide().
Ability to do builds transparently and replace source version.
Example
<script src="path/to/dojo.js">
becomes
<script src="path/to/release/dojo.js">
Normalize javascript acorss browsers with dependable API
dojo.lang.*
* is wrappter for common idioms
has functional programming API
FOWARD - COMPATIBILITY
DOJO.LANG.IS.*
Usual ones
dojo.lang.forEach
dojo.lang.map
dojo.lang.declare
dojo.lang.hitch - scope issues solved
dojo.lang.extend
3.UI Utilities
dojo.io.*
dojo.html.*
dojo.style.*
dojo.dnd.*
dojo.ifx.*
dojo.io.bind - Amazing Library!
handles text encoding
auto-encodes URL
Submits forms
Sync of Async communication
Co-exces return data
Pluggable back-ends
dojo.require("dojo.io.ScriptSrcIo");
- cross-domain and JSON
dojo.require("dojo.io.IframeIO");
background uploads plays right into bind()
dojo.io.UpdateNode()
dojo.io.encodeForm()
Dojo also has ability to Track back button and perform a underlying code before going to previous page.
dojo.ifx.*
includes many effects -fadeIn,fadeOut, fadeShow , fadeHide, wipeIn , wipeOut
slideout, explode,implode , highlight , unhighlight
Example of animation - one play after other
var anim1 = dojo.ifx.wipeOut("foo",300);
var anim2 = dojo.ifx.wipeOut("bar",500);
var composed =dojo.ifx.chain("anim1,anim2);
composed.play(300);
dojo.ifx.fadeOut(
["foo","bar","baz"],
300,
dojo.ifx.easeInOut
).play
4.Event System
Event system is runtime AOP ( aspect oriented programming in script ! )
can use before , after and around advice
Any function can be notified when any other function fires
Code
dojo.event.connect(obj1,"func1",
obj2,"func2");
obj1.func1();
5.Widget system
encapsulated , reusable ,rendering and behavour
most common dojo.widget.HtmlWidget
Other powerful widgets
RichTextEditor
ContentPanel
SplitPanel
Tabs
Fisheye List
Code
<script>
dojo.require("dojo.widget.Editor2");
</script>
<textarea dojoType="Editor2"></textarea>
can include more feauters
<textarea dojoType="Editor2" minHeight="400em" ...></textarea>
6.Custom Widgets
Very easy to create custom widgets
dojo.provide("dojo.widget.Foo");
dojo.require("dojo.widget.*");
dojo.widget.defineWidget(
"dojo.widget.Foo",
dojo.widget.HtmlWidth,
{
"widgetProp
templatesPath:"src/widget/templates/Foo.html
templatesCssPath:"src/widget/css/Foo.css"
}
);
HTML
<div dojoAttachpoint="domNode"
class="DojoFoo">
<em dojoOnClick="hide">Foo!<em>
</div>
CSS
.DojoFoo {
font-weight:bold;
}
7.Utilities ( advanced dojo )
dojo.event.topic
Acts as event bus for client side
decouple components
No worry initialization order
better contracts
ability to use funciton like connect()
arguments are passed as curbs to listener
Code
dojo.event.topic.publish("/name",Foo,Bar);
dojo.event.topic.subscribe(obj , "methodName");
dojo.event.topic.registerPublish(obj,"methodName");
dojo.gfx.Native2D
for native vector graphis
dojo.gfx
Drawing is done on "surfaces"
No declarative markup
shapes are added to surfaces - eclipse, group, image line , polyline, Rect
Matrix and colorspace utilities
x-domain i/0
dojo.io.ScriptSrcIO
support yahoo style JSON callbacks
support JSON-P
always async
plays directly to dojo.io.bind()
dojo.require("dojo.io.*");
dojo.require("dojo.io.ScriptSrcIO");
dojo.io.bind(
{
URI:"http://example.com/json.php"
transport:"scriptsrctransport"
jsonParamName:"callback"
Mimetype:"text/json"
content:{....}
});
dojo.rpc.YahooService
dojo.io.Xhrmlframeproxy
create your own service
doesnt rely on eval()
requires 2 files for cooperativing with external site - Data and Policy
request based enforcement
cross domain dojo
bust 2 connection limit on http
Improve cache-hit rates
load dojo entity asnc
Put dojo in context distributed environment
no copy locally - means less bandwith
Code
<script>
var djconfig ={
use xDomain:true;
baseLoaderUri:"http://foo.com/dojo",
xdWaitSeconds:10
};
</script>
<script src="http://foo.com/dojo/dojo.css"/>
<script>
dojo.setModulePrevix
("dojo","http://foo.com/dojo/src");
dojo.require("dojo.lang.*");
dojo.addonLoad(function1{....});
</script>
can be done by
<script href="download.dojotoolkit.org/dojo-0.4.1.js">
</script>
widget system internal
Event System
Non-browser bootstrap
