A quick overview of dojo and some in depth things.

1. dojo.basix
Wolfram Kriesing
wolfram@uxebu.com

2. dojo.basics
• namespaced (dojo.lang, dojo.fx,
dijit.form)
• dojo, dijit, dojox, yournamespace
• package system
• build system (incl. your namespaces)
• i18n

3. out of the box
• dojo.*
• lang, string, array, dom, coords, data,
back, behaviour, date, dnd, i18n, io,
rpc, ...
• dijit.* - stable widgets
• form.*, Editor, Tree, Dialog,
ProgressBar, ...
• dojox.* - dojo extended (experimental)

4. dojo basics (system)
• dojo.require(), dojo.declare(),
dojo.provide()
• dojo.hitch(), dojo.mixin(), dojo.extend()
• dojo.[dis]connect(), dojo.publish/
subscribe()
• dojo.xhr(), dojo.xhrPost(), dojo.xhrGet()
• dojo.forEach(), dojo.map(), dojo.filter()

5. namespace, class
Create namespace and singleton
dojo.provide(quot;phprquot;);
// Register namespace relative to dojo.js
dojo.registerModulePath(quot;phprquot;, quot;../../phprquot;);
phpr.send = function(params) {};
Declare a class
dojo.provide(quot;phpr.Mainquot;);
dojo.declare(quot;phpr.Mainquot;, phpr.Component, {
constructor:function() {},
render:function() {}
});

6. dojo.hitch
dojo.connect(
domNode, quot;onclickquot;,
dojo.hitch(this, quot;handleClickquot;)
);
dojo.xhr({
load:
dojo.hitch(this, function() {
// handle onLoad stuff
})
})

7. dojo basics (dom)
• dojo.byId(), dojo.query(), dojo.attr()
• dojo.coords()
• dojo.addClass(), dojo.removeClass(),
dojo.hasClass()
• dojo.addOnLoad()

8. dijit

9. dijit - dojo widgets
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html

10. written vs. rendered
you write
<input id=“cb1“ name=“cb1“ type=“checkbox“
dojoType=“dijit.form.Checkbox“ />
you get
<div class=quot;dijitReset dijitInline dijitCheckBoxquot;
wairole=quot;presentationquot; role=quot;wairole:presentationquot;
widgetid=quot;cb1quot;>
<input id=quot;cb1quot; class=quot;dijitReset dijitCheckBoxInputquot;
type=quot;checkboxquot;
dojoattachevent=quot;onmouseover:_onMouse,
onmouseout:_onMouse,onclick:_onClickquot;
dojoattachpoint=quot;focusNodequot; name=quot;cb1quot; value=quot;fooquot;
tabindex=quot;0quot; style=quot;-moz-user-select: none;quot;/>
</div>

11. DOM to dijit and back
• dojo.byId(domNodeId) - node
• dojo.query(string) - [node, node, node]
• dijit.byId(widgetId) - widget
• dijit.byNode(node) - widget
• dijit.getEnclosingWidget(node) - widget

12. Events (DOM, dijit)
• dojo.connect(domNode, „onclick“, ...)
• dojo.connect(widget, „onClick“, ...)
• dojo.connect(widget,
„onCustomEvent“, ...)
DEMO
dojo.query, dojo.connect: onmouseover vs. onMouseOver,
dijit.byId/Node, dijit.getEnclosingWidget
closure

13. build
• svn co http://svn.dojotoolkit.org/dojo/util/
trunk
• cd util/buildscripts/profiles
• cp standard.profile.js phpr.profile.js
• adjust phpr.profile.js
> cd util/buildscripts
>./build.sh profile=quot;phprquot;
action=quot;clean,releasequot; localeList=quot;en,dequot;
optimize=quot;shrinksafequot;
releaseDir=quot;../../dojo-buildquot;
releaseName=quot;quot;

14. fx
• dojo.fadeIn(), dojo.fadeOut()
• dojo.fx.wipeIn(), dojo.fx.wipeOut()
• dojo.toggleClass()
• dojox.fx
• sizeTo(), slideBy(), crossFade(),
highlight(), wipeTo(), smoothScroll(),

15. grid
• various stores (dojo.data)
• sortable, filterable, dynamic paging
• editable

16. COPY with pride
• Examples archive.dojotoolkit.org/nightly
http://archive.dojotoolkit.org/nightly
• Search dojotoolkit.org (valueable forum)
• Dojo feature explorer
http://dojocampus.org/explorer/
• API browser (in progress)
http://api.dojotoolkit.org
• dojo book
http://docs.dojocampus.org

17. thx
http://blog.uxebu.com