8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 1/40

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 2/40

Gabe Hamilton

Web Developer: Grails, Java, C#, ot ers

!or t e past 1" ears t at as meant a lot of javas$ript.

%end o&r dojo '&estions to(abe amilton)(mail.$om

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 3/40

What is Dojo?

* javas$ript tool+it

!or doin( t in(s li+e t is...

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 4/40

Demos

ttp: demos.dojotool+it.or( demos

-ap data in mobile/ttp: demos.dojotool+it.or( demos mobileGeoC artin( demo. tml

0ma(esttp: demos.dojotool+it.or( demos $ropper demo. tml

Wid(etsttp: demos.dojotool+it.or( demos mail

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 5/40

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 se dojo for!

http://demos.dojotoolkit.org/demos/castle/

With a different look, "ccordion widget, #ish$%e widget, some content panes

http://demos.dojotoolkit.org/demos/flashCards/

Timers, svg,

http://sitepen.gith &.com/sp'dnd'demo/('dnd.html

Drag ) Drop, Title panes

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 6/40

Or if your name is Bruce Lee

W at o&ld be a real $ allen(e

Ho $o&ld e prove t at 3i$ Web *pps avearrived

Well, o& $o&ld b&ild a des+top environment...

ttp: .l&$id4des+top.or( demo

ttp: lo$al ost l&$id

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 7/40

! 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 - dojoxDatastores & Dojo rid

!esources

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 8/40

"ot co#ere$ in this tal%

5nl s&mmari6in( at is indojo $ore

dijit

dojo

Won8t (o into detail

Dojo tools: b&ilds, D5H &nit testin(/

Dojo $lass str&$t&re and in eritan$e

9o&$ of Deat

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 9/40

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 10/40

$ojo&js

dojo.js >7+b

or &se as n$ mode a+a ?dojo nano@ A.B+b

Un$ompressed for development

$ojo&js&uncompresse$&jsor do nload t e so&r$e

ttp: dojotool+it.or( do nload

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 11/40

Documentation

9&torials

ttp: dojotool+it.or( do$&mentation

* 0 do$s

ttp: dojotool+it.or( api

3eferen$e G&idettp: dojotool+it.or( referen$e4(&ide 1.7 inde . tml

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 12/40

Li#e 'o$in( Demo

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 13/40

) *aths

-ar+&pdjConfi(;@parse5n oad: tr&e@

div dojo9 pe;@dijit.la o&t.9abContainer@ =

Javas$ript

var t$ ; ne dijit.la o&t.9abContainer /Et$.start&p /E

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 14/40

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 15/40

a#ascript $emore'&ire <dijit la o&t 9abContainer<,<dijit la o&t Content ane<, <dojo dom3ead I< ,

f&n$tion 9abContainer, Content ane/ Kvar t$ ; ne 9abContainer K

st le: < ei( t: ""p E idt : B"FE<L, <iWis 0Were9abbed</E

var $ ; ne Content ane Ktitle: <!ood<,$ontent: <We offer ama6in( food<L/E

t$.addC ild $/E

var $2 ; ne Content ane Ktitle: <Drin+s<,$ontent: <We ave drin+s.<L/E

t$.addC ild $2/E

t$.start&p /EL/E

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 16/40

About Dojo

%tarted in 2""> as a proje$t at 0nformati$a

Mo is a "1 $/N, t e Dojo !o&ndation

5pen %o&r$e: C oi$e of O%D or *!

Persion 1.7.2

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 17/40

Who is Dojo

0ndivid&als: *n one o si(ns a C * $an be a$ontrib&tor.

0n$l&din( some o or+ for:

-o6illa, 0O-, Goo(le, 5ra$le, 0Q*3, 3ed at... Companies $an si(n a $ompan C * for t eir emplo ees o$ontrib&te to dojo.

Dojo $ontains several $ontrib&ted $ode bases: nWid(ets,O&rstlib, f m/, 9&rboGrid, %i66le from jR&er /.

Commer$ial s&pport available from %ite en.

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 18/40

When - Ho. to use Dojo

3i$ 0nternet *ppli$ationsDes+top st le and ?5ne a(e@ apps

-i ed -artial *rts&se it alon(side jR&er , SU0, et$

5r(ani6e o&r javas$ript tan(le it t e dojopa$+a(e s stem a+a *-D a+a re'&ire.js

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 19/40

With /uery

9 e $ollaborate on C%% sele$tor libraries t at$an be s apped in and o&t.

-an jR&er proje$ts are osted b t e Dojo!o&ndation

JR&er $ompatiblit la er: r&n jR&er U0 ondojo

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 20/40

With "o$e&js

Oot &se t e same CommonsJ% pa$+a(emana(ement and *s n$ rono&s -od&leDefinitions *-D/ for loadin(.

Dojo $an be r&n dire$tl in node.js rat er t anin a bro ser to provide GU0 $omponents.

Dojo b&ild s stem no &ses node.js

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 21/40

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 22/40

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 23/40

+o$ules: 1e2uire an$ Define

Mamespa$e s stem

re'&ire iss&es a re'&est for t e file. !iles (et$a$ ed li+e an ttp re'&est.

define ?dos&(.e amples.ja$+alope@/E

dojo.de$lare ?dos&(.e amples.ja$+alope@, n&ll,K

bod of ne obje$t

L/E

dojo.re(ister-od&le at ?dos&(@, ?.. dos&(@/E

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 24/40

+o$ules: file structure

!ile str&$t&re mat$ es re'&ire statements

dojodijit

la o&t

9abContainer.jsdojo

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 25/40

Dojo core

Oasi$ Oro ser self Defensedojo.b 0d

arra inde 5f

D3S ots of and javas$ript f&n$tionsis*rra

trim

addClass

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 26/40

Dojo core

World spannin( po er. 0tt bitt livin( spa$e

effe$ts

eventsr QmlHttp3e'&est/

json

dojo.'&erOro ser dete$tion

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 27/40

Dijit

Wid(et librar

*$$essible, 0nternationali6ableHi( Contrast mode

Gra$ef&ll de(rade in older bro sers

3i( t to eft te t

dijit.form

dijit.la o&t

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 28/40

Dijit: 3hemes

9 emes:Claro bl&e

9&ndra ite

Mi ilo most basi$

%oria li( t ello and oran(e

*ll are s&btle, desi(ned to or+ it e istin( loo+.

Want somet in( flas ier Tas to override, $&stomt emes available on internet.

Mo t emeroller. jR&er ins t is ro&nd.

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 29/40

Dojo4

?0 +no se$ret4+&n(4f&@Pideo Grap i$s

C artin(

3%%

*dvan$ed Datastores and 5ffline stora(e

dojo .(rid.DataGriddojo .$ artin(.DataC art

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 30/40

Datastores: $ojo&$ata

Client side obje$t to old dataOasi$all an arra of items, it lots of f&n$tionalitrapped aro&nd it.

%&pport for man t pes of dataTasiest a to start is it J%5M

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 31/40

Datastores: 5O"

Java%$ript 5bje$t Motation

var m 5bje$t ; KfirstMame: 8Gabe8,

lastMame: 8Hamilton8,

favorite4$olor: 8bl&e... no, red8 LE

var m *rra ; m 5bje$t, KfirstMame: 8Oob8L E

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 32/40

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 33/40

Datastores: $ojo4&$ata

C%P%tore

Q- %tore

%ervi$e%toreR&er 3ead%tore

Json3est%tore

*tom3ead%tore

%ervi$e%tores based on p&bli$ * 0!li$+r, %A, Wi+ipedia, Goo(le, ersevere, et$...

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 34/40

$ojo4&$ata& son1est5tore

var store ; ne dojo .data.Json3est%tore Ktar(et: < &sers <,

id*ttrib&te: <id<

L/E

&t, ost, Delete, Get

&ser: K name: Gabe, id: 1 L,

&ser: K name: Oob, id: 2 L

$ojo4&(ri$&DataGri$ Demo

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 35/40

$ojo4&(ri$&DataGri$ Demo

Other 1esources

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 36/40

Other 1esources

ttp: .slides are.net sitepen top4 a s4dojo4$an4improve4 o&r4mappin(4app

ttps: .ibm.$om developer or+s m developer or+s boo+mar+s tmlsort;date ta(;dojo lan(;en

1esources

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 37/40

1esources

ttp: dojotool+it.or(

ttp: dojotool+it.or( do$&mentation

Great T amplesttp: livedo$s.dojotool+it.or(

ttp: sitepen.$om blo( $ate(or dojo

*ma6on sear$ as V> boo+ res&lts for dojo javas$ript of i$ t e top B ere boo+s j&ston dojo.

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 38/40

Ac%no.le(ements

9 an+s to t e p oto(rap ers of t e follo in( CreativeCommons pi$t&resttp: $ommons. i+imedia.or( i+i !ile: enXDojoX%arba$ana1.jp(

ttp: $ommons. i+imedia.or( i+i !ile:Demonstratin(XY&n(X!&XatXDa ian((&oX-onestar

,XYaifen(,XHenan.J Gttp: $ommons. i+imedia.or( i+i !ile:% ado XYarateXYi$+.jp(

ttp: $ommons. i+imedia.or( i+i !ile:3eloadin(Xtools.jp(

ttp: $ommons. i+imedia.or( i+i !ile:Gr&eXmi(rationX a+eX*(monXH&laXPalle .J G

/uestions

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 39/40

/uestions

(abe amilton)(mail.$om

8/9/2019 Dojo Introduction

http://slidepdf.com/reader/full/dojo-introduction 40/40