Professional Documents
Culture Documents
Dojo Introduction
Dojo Introduction
Gabe Hamilton
Gabe Hamilton
What is Dojo?
A javascript toolkit
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
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
60 mins of Dojo
Live coding start using dojo today
How can you use dojo?
How dojo is organized.
Dojo core - dojo
Widgets
- dijit
dojo core
dijit
dojox
Touch of Death
http://dojotoolkit.org
dojo.js
dojo.js 47kb
or use async mode aka dojo nano 3.8kb
Documentation
Tutorials
http://dojotoolkit.org/documentation/
API docs
http://dojotoolkit.org/api/
Reference Guide
http://dojotoolkit.org/reference-guide/1.7/index.html
2 Paths
Markup
djConfig=parseOnLoad: true
<div dojoType=dijit.layout.TabContainer/>
Javascript
var tc = new dijit.layout.TabContainer();
tc.startup();
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>
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();
});
About Dojo
Version 1.7.2
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).
With JQuery
With Node.js
In toolkits
dojotoolkit.org
/features/integrations
Other projects
version
GWT (Tatami)
1.3.2
Grails plugin
1.7.2
For Minimalists
Async mode
Fully asynchronous, run code when your require
statement is done loading.
3.8kb
Just 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);
Dojo core
dojo.byId
array indexOf
isArray
trim
addClass
Dojo core
World spanning power. Itty bitty living space
effects
events
xhr (XmlHttpRequest)
json
dojo.query
Browser detection
Dijit
Widget library
Accessible, Internationalizable
High Contrast mode
Gracefully degrade in older browsers
Right to Left text
dijit.form
dijit.layout
Dijit: Themes
Themes:
Claro
blue
Tundra
white
Nihilo
most basic
Soria
Dojox
I know secret-kung-fu
Video / Graphics
Charting
RSS
dojox.grid.DataGrid
dojox.charting.DataChart
Datastores: dojo.data
Datastores: JSON
var myArray =
[ myObject, {firstName: 'Bob'}];
Datastores: dojo.data.api
Datastores: dojox.data
CSVStore
XMLStore
ServiceStore
QueryReadStore
JsonRestStore
AtomReadStore
dojox.data.JsonRestStore
var store = new dojox.data.JsonRestStore({
target: "/users/",
idAttribute: "id"
});
dojox.grid.DataGrid Demo
Other Resources
http://www.slideshare.net/sitepen/top-waysdojo-can-improve-your-mapping-app
https://www.ibm.com/developerworks/mydevel
operworks/bookmarks/html?
sort=date&tag=dojo&lang=en
Resources
http://dojotoolkit.org
http://dojotoolkit.org/documentation
Great Examples
http://livedocs.dojotoolkit.org/
http://sitepen.com/blog/category/dojo
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,_Henan.JPG
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
Questions
gabehamilton@gmail.com