An overview of the dojo javascript toolkit showcasing several of the powerful widgets added in dojo 1.7.

1. Dojo: Beautiful Web Apps, Fast
Gabe Hamilton
Updated for dojo 1.7.2

2. Gabe Hamilton
Web Developer: Grails, Java, C#, others
For the past 10 years that has meant a lot of
javascript.
Send your dojo questions to
gabehamilton@gmail.com

3. What is Dojo?
A javascript toolkit
For doing things like this...

4. Demos
http://demos.dojotoolkit.org/demos/
Map data (in mobile)
http://demos.dojotoolkit.org/demos/mobileGeoCharting/demo.html
Images
http://demos.dojotoolkit.org/demos/cropper/demo.html
Widgets
http://demos.dojotoolkit.org/demos/mail

5. Demo sites
Stocker http://persevere.sitepen.com/stocker.html
DataChart, data stores, events
http://demos.dojotoolkit.org/demos/mail/
Widgets: “The sort of thing we tend to use dojo for”
http://demos.dojotoolkit.org/demos/castle/
With a different look, Accordion widget, FishEye widget, some content panes
http://demos.dojotoolkit.org/demos/flashCards/
Timers, svg,
http://sitepen.github.com/sp-dnd-demo/4-dnd.html
Drag & Drop, Title panes

6. Or if your name is Bruce Lee
What would be a real challenge?
How could we prove that Rich Web Apps have
arrived?
Well, you could build a desktop environment...
http://www.lucid-desktop.org/demo/
http://localhost/lucid

7. 60 mins of Dojo
Live coding – start using dojo today
How can you use dojo?
How dojo is organized.
Dojo core - dojo
Widgets - dijit
Cool stuff - dojox
Datastores & Dojo Grid
Resources

8. Not covered in this talk
Only summarizing what is in
dojo core
dijit
dojox
Won't go into detail
Dojo tools: builds, DOH (unit testing)
Dojo class structure and inheritance
Touch of Death

9. Where is the Dojo?
http://dojotoolkit.org
Or for your html page
<script src="
http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js
"></script>

10. dojo.js
dojo.js 47kb
or use async mode aka “dojo nano” 3.8kb
Uncompressed for development
dojo.js.uncompressed.js
or download the source
http://dojotoolkit.org/download/

11. Documentation
Tutorials
http://dojotoolkit.org/documentation/
API docs
http://dojotoolkit.org/api/
Reference Guide
http://dojotoolkit.org/reference-guide/1.7/index.html

12. Live Coding Demo

13. 2 Paths
Markup
djConfig=”parseOnLoad: true”
<div dojoType=”dijit.layout.TabContainer”/>
Javascript
var tc = new dijit.layout.TabContainer();
tc.startup();

14. Markup demo
<div dojoType="dijit.layout.TabContainer"
style="width:80%; height: 500px">
<div dojoType="dijit.layout.ContentPane"
title="dojo core">core here</div>
<div dojoType="dijit.layout.ContentPane"
title="dijit"> great widgets</div>
<div dojoType="dijit.layout.ContentPane"
title="dojox">#winning</div>
</div>

15. Javascript demo
require(["dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/domReady!"],
function(TabContainer, ContentPane) {
var tc = new TabContainer({
style: "height: 500px; width: 80%;"
}, "iWishIWereTabbed");
var c = new ContentPane({
title: "Food",
content: "We offer amazing food"
});
tc.addChild(c);
var c2 = new ContentPane({
title: "Drinks",
content: "We have drinks."
});
tc.addChild(c2);
tc.startup();
});

16. About Dojo
Started in 2004 as a project at Informatica
Now is a 501(c)6, the Dojo Foundation
Open Source: Choice of BSD or AFL
Version 1.7.2

17. Who is Dojo
Individuals: Anyone who signs a CLA can be a
contributor.
Including some who work for:
Mozilla, IBM, Google, Oracle, PIXAR, Redhat...
Companies can sign a company CLA for their employees who
contribute to dojo.
Dojo contains several contributed code bases: nWidgets,
Burstlib, f(m), TurboGrid, Sizzle (from jQuery).
Commercial support available from SitePen.

18. When / How to use Dojo
Rich Internet Applications
Desktop style and “One Page” apps
Mixed Martial Arts
use it alongside jQuery, YUI, etc
Organize your javascript tangle with the dojo
package system aka AMD aka require.js

19. With JQuery
They collaborate on CSS selector libraries that
can be swapped in and out.
Many jQuery projects are hosted by the Dojo
Foundation
JQuery compatiblity layer: run jQuery UI on dojo

20. With Node.js
Both use the same CommonsJS package
management and Asynchronous Module
Definitions (AMD) for loading.
Dojo can be run directly in node.js rather than in
a browser to provide GUI components.
Dojo build system now uses node.js

21. In toolkits
dojotoolkit.org
/features/integrations
Other projects version
GWT (Tatami) 1.3.2
Grails plugin 1.7.2

22. For Minimalists
Async mode
Fully asynchronous, run code when your require
statement is done loading.
3.8kb
Just require and define
Great for mobile or non dojo applications

23. Modules: Require and Define
Namespace system
require issues a request for the file. Files get
cached like any http request.
define(“dosug.examples.jackalope”);
dojo.declare(“dosug.examples.jackalope”, null, {
// body of new object
});
dojo.registerModulePath(“dosug”, “../dosug”);

24. Modules: file structure
File structure matches require statements
dojo/
dijit/
layout/
TabContainer.js
dojox/

25. Dojo core
Basic Browser self Defense
dojo.byId
array indexOf
DRY Lots of handy javascript functions
isArray
trim
addClass

26. Dojo core
World spanning power. Itty bitty living space
effects
events
xhr (XmlHttpRequest)
json
dojo.query
Browser detection

27. Dijit
Widget library
Accessible, Internationalizable
High Contrast mode
Gracefully degrade in older browsers
Right to Left text
dijit.form
dijit.layout

28. Dijit: Themes
Themes:
Claro blue
Tundra white
Nihilo most basic
Soria light yellow and orange?
All are subtle, designed to work with existing look.
Want something flashier? Easy to override, custom themes
available on internet.
No themeroller. jQuery wins this round.

29. Dojox
“I know secret-kung-fu”
Video / Graphics
Charting
RSS
Advanced Datastores and Offline storage
dojox.grid.DataGrid
dojox.charting.DataChart

30. Datastores: dojo.data
Client side object to hold data
Basically an array of items, with lots of functionality
wrapped around it.
Support for many types of data
Easiest way to start is with JSON

31. Datastores: JSON
JavaScript Object Notation
var myObject = {
firstName: 'Gabe',
lastName: 'Hamilton',
favorite-color: 'blue... no, red' };
var myArray =
[ myObject, {firstName: 'Bob'}];

32. Datastores: dojo.data.api
dojo.data.api defines basic operations
Read
Write
Identity
Notification
ItemFileReadStore implements Read and
Identity
ServiceStore implements all 4

33. Datastores: dojox.data
CSVStore
XMLStore
ServiceStore
QueryReadStore
JsonRestStore
AtomReadStore
ServiceStores based on public API
Flickr, S3, Wikipedia, Google, Persevere, etc...

34. dojox.data.JsonRestStore
var store = new dojox.data.JsonRestStore({
target: "/users/",
idAttribute: "id"
});
Put, Post, Delete, Get
[ user: { name: Gabe, id: 1 },
user: { name: Bob, id: 2 } ]

35. dojox.grid.DataGrid Demo

36. Other Resources
http://www.slideshare.net/sitepen/top-ways-
dojo-can-improve-your-mapping-app
https://www.ibm.com/developerworks/mydevelo
perworks/bookmarks/html?
sort=date&tag=dojo&lang=en

37. Resources
http://dojotoolkit.org
http://dojotoolkit.org/documentation
Great Examples
http://livedocs.dojotoolkit.org/
http://sitepen.com/blog/category/dojo
Amazon search has 94 book results for dojo
javascript of which the top 8 were books just
on dojo.

38. Acknowlegements
Thanks to the photographers of the following Creative Commons
pictures
http://commons.wikimedia.org/wiki/File:Zen_Dojo_Sarbacana1.jpg
http://commons.wikimedia.org/wiki/File:Demonstrating_Kung_Fu_at_Daxiangguo_Monestary,_Kaifeng,_
http://commons.wikimedia.org/wiki/File:Shadow_Karate_Kick.jpg
http://commons.wikimedia.org/wiki/File:Reloading_tools.jpg
http://commons.wikimedia.org/wiki/File:Grue_migration_Lake_Agmon_Hula_Valley.JPG

39. Questions
gabehamilton@gmail.com