Dojo: Getting Started Today

Dojo: Getting Started Today Gabe Hamilton

Gabe Hamilton
Web Developer: C#, Java
Never really liked javascript.
But I like dojo.
Send your dojo questions to
[email_address]

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

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://www.sitepen.com/labs/code/dnd/intro/dnd/5-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
Cool stuff - dojox
Datastores & Dojo Grid
Resources

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

Where is the Dojo?
http://dojotoolkit.org
http://o.aolcdn.com/ dojo/1.3/dojo/dojo.xd.js
http://ajax.googleapis.com/ajax/libs/ dojo/1.3/dojo/dojo.xd.js

dojo.js
dojo.js, shrunk, 79KB
or gzipped, only 28K
Uncompressed for development
dojo.xd.js.uncompressed.js
or download the source
http://download.dojotoolkit.org/release-1.3.2/

Documentation
http://api.dojotoolkit.org
http://docs.dojocampus.org

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="Mojo">mojo here</div> <div dojoType="dijit.layout.ContentPane" title="Pojo"> get, set, is</div> <div dojoType="dijit.layout.ContentPane" title="dosug">presents</div> </div>

Javascript demo var tc = new dijit.layout.TabContainer({ style: "height: 500px; width: 80%;" }, "stuff"); var c = new dijit.layout.ContentPane({ title: "Food", content: "We offer amazing food" }); tc.addChild(c); var c2 = new dijit.layout.ContentPane({ title: "Drinks", content: "We have drinks." }); tc.addChild(c2); tc.startup();

About Dojo
Started in 2004 as a project at Informatica
Now is a 501(c)6, the Dojo Foundation
Download page gets ½ million visits per year
Open Source: Choice of BSD or AFL
Version 1.3.2

Who is Dojo Individuals: Anyone who signs a CLA can be a contributor. Including some who work for: Aol, IBM, Google, BEA, PIXAR, Redhat, Sun... Companies can sign a CLA and pay for their employees to work on dojo. Dojo contains several contributed code bases: nWidgets, Burstlib, f(m), TurboGrid. Commercial support available from SitePen.

When/How to use Dojo
Basic Self Defense
get rid of bugs from browser differences
Mixed Martial Arts
use it alongside jQuery, YUI, etc
Organize your javascript tangle with the dojo package system.

In toolkits Project Dojo version jMaki 1.2 GWT (Tatami) 1.2.3 Struts 2 Grails plugin 1.3.0

Organization
dojo (core)
dijit (widgits)
dojox (experimental & new)

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

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

Dojo core
Basic Browser self Defense
dojo.byId
array indexOf
DRY Lots of handy javascript functions
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
3 Themes:
Tundra white & blue
Nihilo most basic
Soria light yellow and orange
All are subtle, designed to drop in next to your existing work.
Want something flashier? Easy to override, custom themes available on internet.

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

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

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

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

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

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 } ]

dojox.grid.DataGrid Demo

Demo pages
http://www.sitepen.com/labs/code/grid/new_grid_features/column_hiding_context_markup.html
https://user.sitepen.com/~mwilcox/dojotoolkit/dojox/charting/tests/test_DataChart.html

Resources
http://dojotoolkit.org
http://api.dojotoolkit.org
Great Examples
http://docs.dojocampus.org
http://sitepen.com/blog/category/dojo
Amazon search has 94 book results of which the top 8 were books just on 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
[email_address]

Dojo: Getting Started Today

by gabehamilton on Nov 04, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 12

Statistics

Dojo: Getting Started Today — Presentation Transcript