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]

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...

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

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

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

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/

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

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

djConfig=”parseOnLoad: true”

<div dojoType=”dijit.layout.TabContainer”/>

Javascript

var tc = new dijit.layout.TabContainer();

tc.startup();

Markup demo <div dojoType=&quot;dijit.layout.TabContainer&quot; style=&quot;width:80%; height: 500px&quot;> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Mojo&quot;>mojo here</div> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Pojo&quot;> get, set, is</div> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;dosug&quot;>presents</div> </div>

Javascript demo var tc = new dijit.layout.TabContainer({ style: &quot;height: 500px; width: 80%;&quot; }, &quot;stuff&quot;); var c = new dijit.layout.ContentPane({ title: &quot;Food&quot;, content: &quot;We offer amazing food&quot; }); tc.addChild(c); var c2 = new dijit.layout.ContentPane({ title: &quot;Drinks&quot;, content: &quot;We have drinks.&quot; }); 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

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.

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)

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”);

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/

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

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

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

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.

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

“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

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

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

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...

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: &quot;/users/&quot;, idAttribute: &quot;id&quot; }); Put, Post, Delete, Get [ user: { name: Gabe, id: 1 }, user: { name: Bob, id: 2 } ]

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

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.

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]