Blue Border

Dojo: Getting Started Today

Gabe Hamilton

Gabe Hamilton

Web Developer: C#, Java

Never really liked javascript.But I like dojo.

Send your dojo questions togabehamilton@gmail.com

What is Dojo?

A javascript toolkit

For doing things like this...

Demo sites

Stockerhttp://persevere.sitepen.com/stocker.html DataChart, data stores, eventshttp://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 paneshttp://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 developmentdojo.xd.js.uncompressed.jsor download the source http://download.dojotoolkit.org/release-1.3.2/

Documentation

http://api.dojotoolkit.org

http://docs.dojocampus.org

2 Paths

MarkupdjConfig=parseOnLoad: true

Javascriptvar tc = new dijit.layout.TabContainer();tc.startup();

Markup demo

mojo here get, set, ispresents

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 InformaticaNow 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 Defenseget rid of bugs from browser differences

Mixed Martial Artsuse 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.jsdojox/

Dojo core

Basic Browser self Defensedojo.byId

array indexOf

DRY Lots of handy javascript functionsisArray

trim

addClass

Dojo core

World spanning power. Itty bitty living spaceeffects

events

xhr (XmlHttpRequest)

json

dojo.query

Browser detection

Dijit

Widget library

Accessible, InternationalizableHigh Contrast modeGracefully degrade in older browsersRight 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-fuVideo / Graphics

Charting

RSS

Advanced Datastores and Offline storage

dojox.grid.DataGrid

dojox.charting.DataChart

Datastores: dojo.data

Client side object to hold dataBasically an array of items, with lots of functionality wrapped around it.

Support for many types of dataEasiest way to start is with JSON

Datastores: JSON

JavaScript Object Notationvar myObject = {firstName: 'Gabe',lastName: 'Hamilton',favorite-color: 'blue... no, red' };

var myArray = [ myObject, {firstName: 'Bob'}];

Datastores: dojo.data.api

dojo.data.api defines basic operationsReadWriteIdentityNotification

ItemFileReadStore implements Read and Identity

ServiceStore implements all 4

Datastores: dojox.data

CSVStore

XMLStore

ServiceStoreQueryReadStore

JsonRestStore

AtomReadStore

ServiceStores based on public APIFlickr, 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 Exampleshttp://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 pictureshttp://commons.wikimedia.org/wiki/File:Zen_Dojo_Sarbacana1.jpghttp://commons.wikimedia.org/wiki/File:Demonstrating_Kung_Fu_at_Daxiangguo_Monestary,_Kaifeng,_Henan.JPGhttp://commons.wikimedia.org/wiki/File:Shadow_Karate_Kick.jpghttp://commons.wikimedia.org/wiki/File:Reloading_tools.jpghttp://commons.wikimedia.org/wiki/File:Grue_migration_Lake_Agmon_Hula_Valley.JPG

Questions

gabehamilton@gmail.com