A1. Getting Started: Hello Dojo

1. HelloDojo

Hello

Style: style.css body { padding:2em; } h1 { margin-bottom:2em; }

.add-borders ul, .add-borders li, .add-borders div, .add-borders a { padding: 2px; } .add-borders ul { border: 1px solid red; } .add-borders li { border: 1px solid blue; } .add-borders div { border: 1px solid green; 1

} .add-borders a { border: 1px solid black; }

.bold { font-weight: bold; } .italic { font-style: italic; } .highlight { background-color: yellow; }

.red { background-color: red; } .blue { background-color: blue; }

A2. Getting Started: Configuring Dojo with dojoConfig

1. dojoConfig Programmatic

Demo: dojo/_base/Config

2. dojoConfig Declarative

Demo: data-dojo-config

3. Loader Configuration

3

Demo: dojo/_base/config.baseUrl

4. CustomProperties

Demo: Application Config

B1. DOM Basics: Dojo DOM Functions

1. Retrieval

5

Demo: byId

• One
• Two
• Three
• Four
• Five

2. Creation

Demo: create

• One
• Two
• Three
• Four
• Five
6

3. Placement

Demo: place

Move "Three" to the following position

The first item Before Two After Four 7

The last item

• One
• Two
• Three
• Four
• Five

4. Destruction 8

Demo: empty and destroy

Destroy the first list item Destroy all list items

• One
• Two
• Three
• Four
• Five

B2. DOM Basics: Animation

1. Animating Properties part 1 9

Demo: Border Animation

Grow Borders Shrink Borders

A box

2. Animating Properties part 2

10

Demo: animateProperty with multiple style properties

Drop out block Return block

A box

3. Easing

11

Demo: Animation Easing

Drop block Return block

A box

4. Putting it Together

12

Demo: Combining and Chaining Animations

Swap

1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

B3. DOM Basics: Dojo Effects

1. Fading

Tutorial: fx.fadeIn and fx.fadeOut

14

Fade block out Fade block in

A red block

2. Wiping

Tutorial: fx.wipeIn and fx.wipeOut

Wipe block out Wipe block in

A red block

3. Sliding

Tutorial: fx.slideTo

Slide block away Slide block back

A red block

16

4. Animation Events

Tutorial: fx Events

Slide block away Slide block back

A red block

5. Chaining

Tutorial: fx.chain

Slide block away Slide block back

18

A red block

6. Combining

Tutorial: fx.combine

Slide block away Slide block back

A red block 19

B4. DOM Basics: Events with Dojo

1. DOM Events

Demo: dojo/on

Click me!

Hover over me!

Click me to see the scope of my handler ("myScopedButton1")
Click me to see the scope of my handler ("myObject")

21

2. NodeList events

Demo: NodeList.on via dojo/query

Click me Click me also Click me too Please click me

3. Event Delegation

Demo: Event Delegation with dojo/on

22

Click me Click me also Click me too Please click me

4. Publish and Subscribe

Demo: Publish and Subscribe with dojo/topic

Alert the user Create another alert button

B5. DOM Basics: Keyboard Events with Dojo

1. Keyboard Events

Press any key

keyCode value:

2. The KeyboardEvent object part 1

Press Up or Down Arrow Keys

3. The KeyboardEvent object part 2

Press Up/Down Arrow Or Enter Keys to traverse form.

Home/End will go to the beginning or end.

First Name: Last Name: Email Address: Phone Number:

4. Keyboard Navigation

Click on a cell below, then try navigating:

• up, down, left, right
• home, end
• Letters - "a" for "apple", "b" for "banana", etc

apple	banana	orange
pear	grapes	strawberry

B6. DOM Basics: Using dojo query

1. More advanced selections

Tutorial: Queries

Click the buttons below to see which nodes are selected by the corresponding queries.

#list .odd #list .odd a.odd li a li > a .italic > a

• Odd
• Even
31
• Odd
• Even
• Odd
• Even

• Odd

These lists are rendered from the following markup:

<ul id="list"> <li class="odd"> <div class="bold"> <a class="odd">Odd</a> </div> </li> <li class="even"> <div class="italic"> <a class="even">Even</a> </div> </li> <li class="odd"> <a class="odd">Odd</a> </li> <li class="even"> <div class="bold"> <a class="even">Even</a> </div> </li> <li class="odd"> <div class="italic"> <a class="odd">Odd</a> </div> </li> <li class="even"> <a class="even">Even</a> </li> </ul> 
32 
<ul id="list2"> <li class="odd">Odd</li> </ul>

2. NodeList

Tutorial: NodeList

Click the buttons below to execute the corresponding query and NodeList functions.

query(".odd").forEach(...)
query(".even").addClass("blue")
query(".odd").removeClass("red").addClass("blue")
query(".even").style("color", "white").addClass("italic")

One

Two

Three

33

Four

Five

Six

This list is rendered from the following markup:

<div id="list"> <div class="odd">One</div> <div class="even">Two</div> <div class="odd">Three</div> <div class="even">Four</div> <div class="odd">Five</div> <div class="even">Six</div> </div>

3. Events

Tutorial: NodeList Events

Click Me! Click Me! Click Me! Click Me!

B7. DOM Basics: NodeList Extensions

1. Getting Started

35

Demo: NodeList Extensions: dojo/query Recap

Pick out fresh fruits

Fresh Fruits

Fruits

• Apples
• Persimmons
• Grapes
• Fresh Figs
• Dates
• Raisins
• Prunes
• Apricots
• Peaches
• Bananas
• Cherries

36

2. Animating Elements

Demo: NodeList Extensions: dojo/NodeList-fx

Highlight fresh fruits

Fruits

• Apples
• Persimmons
• Grapes
• Fresh Figs
• Dates
• Raisins
• Prunes
• Apricots
• Peaches
• Bananas
• Cherries

3. Associating Data with Elements

Demo: NodeList Extensions: dojo/NodeList-data

Inspect Data

Fruits

Click the fruits you like!

• Apples
• Persimmons
• Grapes
• Fresh Figs
• Dates
• Raisins
• Prunes
• Apricots
• Peaches
• Bananas
• Cherries

4. Moving Around the DOM

Demo: NodeList Extensions: dojo/NodeList-traverse

All Fruit

• Alkaline Fruits

  • Apples
  • Persimmons
  • Thompson Grapes (Seedless)
  • Muscat Grapes
  • All Sweet Grapes
  • Fresh Figs
  • Dates
  • Figs
  • Raisins
  • Prunes
  • Apricots
  • Peaches
  • Bananas
  • Cherries
  • Bananas
  • Litchi "Nuts"
  39
  • Carob

• Subacidic Fruits

  • Sweet Apples (Delicious)
  • Sweet Peaches
  • Sweet Nectarines
  • Pears
  • Sweet Cherries
  • Some Grapes (Neither sweet nor sour)
  • Papayas
  • Mangos
  • Apricots
  • Fresh Litchi "Nuts"
  • Sweet Plums
  • Blueberries
  • Raspberries
  • Blackberries
  • Mulberries
  • Huckleberries
  • Cherimoyas

• Acid Fruits

  • Oranges
  • Grapefruit
  • Pineapples
  • Strawberries
  • Pomegranates
  • Lemons
  • Kiwi Fruit
  • Kumquats
  • Loquats
  • Carambolas
  • Loganberries
  • Gooseberries
  • Cranberries
  • Limes
  • Sour Apples
  • Sour Grapes
  • Sour Peaches
  • Sour Nectarines
  • Sour Plums
  • Sour Cherries

• Melons

  • Watermelon
  • Honeydew Melon

  40

  • Honey Balls
  • Cantaloupe
  • Muskmelon
  • Casaba Melon
  • Crenshaw Melon
  • Pie Melon
  • Banana Melon
  • Persian Melon
  • Christmas Melon
  • Nutmeg Melon

5. Manipulating Elements

Demo: NodeList Extensions: Manipulate

Likes

Don't Likes

All Fruit

• Alkaline Fruits
  • Apples
  41
  • Persimmons
  • Thompson Grapes (Seedless)
  • Muscat Grapes
  • All Sweet Grapes
  • Fresh Figs
  • Dates
  • Figs
  • Raisins
  • Prunes
  • Apricots
  • Peaches
  • Bananas
  • Cherries
  • Bananas
  • Lychees
  • Carob

• Subacidic Fruits
  • Sweet Apples (Delicious)
  • Sweet Peaches
  • Sweet Nectarines
  • Pears
  • Sweet Cherries
  • Some Grapes (Neither sweet nor sour)
  • Papayas
  • Mangos
  • Apricots
  • Fresh Lychees
  • Sweet Plums
  • Blueberries
  • Raspberries
  • Blackberries
  • Mulberries
  • Huckleberries
  • Cherimoyas
• Acid Fruits
  • Oranges
  • Grapefruit
  • Pineapples
  • Strawberries
  • Pomegranates
  • Lemons
  • Kiwi Fruit
  • Kumquats
  • Loquats
  • Carambolas
  • Loganberries

  42

  • Gooseberries
  • Cranberries
  • Limes
  • Sour Apples
  • Sour Grapes
  • Sour Peaches
  • Sour Nectarines
  • Sour Plums
  • Sour Cherries
• Melons
  • Watermelon
  • Honeydew Melon
  • Honey Balls
  • Cantaloupe
  • Muskmelon
  • Casaba Melon
  • Crenshaw Melon
  • Pie Melon
  • Banana Melon
  • Persian Melon
  • Christmas Melon
  • Nutmeg Melon

6. Advanced Content Injection

43

Demo: NodeList Extensions: .html()

Add Checkboxes

• Fruits
  • Apples
  • Persimmons
  • Thompson Grapes (Seedless)
  • Muscat Grapes
  • All Sweet Grapes
  • Fresh Figs
  • Dates
  • Figs
  • Raisins
  • Prunes
  • Apricots
  • Peaches
  • Bananas
  • Cherries
  • Bananas
  • Litchi "Nuts"
  • Carob

C1. Dojo Fundamentals: Ajax with dojo/request

1. Dojo request.get_

Demo: dojo/request/xhr

Click the button below to see dojo/request/xhr in action.

Request Text File

2. JSON (JavaScript Object Notation)

Demo: dojo/request/xhr JSON

Display JSON data received from the server

3. JSONP (Javascript Object Notation with Padding)

Demo: dojo/request/script

Click the button below to see dojo/request/script request recent pull requests for Dojo's GitHub repo.

dojo pull requests

C2. Dojo Fundamentals: Dojo Arrays

1. Searching

Demo: Array Searching

The following list represents an array; the element whose index is found by calling dojo/_base/array.indexOf(array, 2); is highlighted.

• 1
• 2
• 3
• 4
• 3
• 2
• 1
• 2
48
• 3
• 4
• 3
• 2
• 1

The following list represents an array; the element whose index is found by calling dojo/_base/array.indexOf(array, 2, 2); is highlighted.

• 1
• 2
• 3
• 4
• 3
• 2
• 1
• 2
• 3
• 4
• 3
• 2
• 1

The following list represents an array; the element whose index is found by calling dojo/_base/array.lastIndexOf(array, 2); is highlighted.

• 1
• 2
• 3
• 4
• 3
• 2
• 1
• 2
• 3
• 4
• 3
• 2
• 1

The following list represents an array; the element whose index is found by calling dojo/_base/array.indexOf(array, object); is highlighted.

• { id: 0 }
• { id: 1 }
• { id: 2 }
• { id: 3 }

2. Looping

Demo: Array Looping

The following lists' items are created by looping through an array of strings.

3. Looping Again

Demo: Array Manipulation

The following list is a representation of an array.

• one
• two
• three
• four
• five

51

The next list is a representation of the previous array being transformed by the following code:

 arrayUtil.map(original, function(item, index){ return { id: index * 100, text: item }; }); 

The final list is a representation of the mapped array being filtered by the following code:

 arrayUtil.filter(mapped, function(item, index){ return item.id > 50 && item.id < 350; }); 

4. Matching

Demo: Array Matching

The following are results from running every and some on the lists represented. A result of true is represented by the function name being highlighted.

Condition:

 function(item){ return item == 1; } 

Array:

• 1
• 2
• 3
• 4
• 5

Results:

every some

Condition:

 function(item){ return item == 1; } 

Array:

• 1
• 1
• 1
• 1
• 1
53

Results:

every some

Condition:

 function(item){ return item == 2; } 

Array:

• 1
• 1
• 1
• 1
• 1

Results:

every some

C3. Dojo Fundamentals: Augmenting Objects

1. lang.mixin_

54

Demo: lang.mixin

View source. The result is in the console.

2. lang.extend

55

Demo: lang.extend

View source. The result is in the console.

Swing

3. lang.clone_

Demo: lang.clone

View source. The result is in the console.

C4. Dojo Fundamentals: Creating Classes

C5. Dojo Fundamentals: Getting started with Deferreds

1. Deferred

58

Demo: dojo/Deferred

2. Deferred Rejected

59

Demo: dojo/Deferred with dojo/request

3. Chaining part 1

Demo: Chaining Deferreds

Result from chaining from original deferred

60

Result from chaining from original.then()

Result from chaining from original deferred after previous calls

4. Chaining part 2

Demo: Chaining Deferreds

C6. Dojo Fundamentals: Dojo Deferreds and Promises

1. Deferred as a Promise

Demo: Chaining Promises

Result from chaining from original deferred

Result from chaining from resulting promise

Result from chaining from original deferred after previous calls

2. Dojo When part 1

64

Demo: Deferred.when

3. Dojo When part 2

Demo: dojo/when for creation

List 1 (from server)

List 2 (from static array)

4. Dojo Promise All

67

Demo: dojo/promise/all

68

D1. Dojo Widgets: Charting

1. Creating a basic chart declaratively

Demo: Basic Declarative Chart

2. Creating a basic chart programmatically

Demo: Basic Programmatic Chart

3. Examples Line Chart

Demo: Monthly Sales

71

4. Examples Stacked Areas Chart

Demo: Stacked Monthly Sales

5. Examples Columns Chart

Demo: Columns - Monthly Sales

6. Charting plugins

75

Demo: Monthly Sales with Legend, Tooltips, and Magnify

7. Pie Chart with MoveSlice

Monthly Sales Pie Chart with MoveSlice

77

8. Monthly Sales with Highlights

Demo: Columns - Monthly Sales with Highlights

D2. Dojo Widgets: Checkboxes

1. Declare a checkbox

80

dijit.form.CheckBox

Declarative Checkboxes

Want

Need

Disabled option

Programmatic Checkboxes

Want

Need

Disabled option

2. Checkbox Values

dijit/form/CheckBox value setters

Pizza Toppings

• Anchovies
• Olives

82

Go Deluxe?

Which Toppings?

3. Radio Buttons

dijit/form/RadioButton value setters

Pizza Toppings

83
• Anchovies
• Olives
• Pineapple

Which Toppings?

4. Events

84

Using onChange

Pizza Toppings

• Anchovies
• Pineapple

Likes the salty!

Crust

Thick Crust

5. ToggleButton

dijit/form/ToggleButton

Declaration Using Markup

Programmatic Declaration

D3. Dojo Widgets: Dialogs & Tooltips

1. Declarative (HTML) Tooltip Creation

Demo: Mixed Tooltip Usages

Tooltip on a dijit/form/Button (Declarative)

Tooltip Above

I am above the button

Tooltip Below

I am below the button

Tooltip After

I am after the button

Tooltip Before

I am before the button

Tooltip on Text in Paragraph (Programmatic)

Roderick David "Rod" Stewart, CBE (born 10 January 1945) is a British singer-songwriter and musician, born and raised in North London, England and currently residing in Epping. He is of Scottish and English lineage. 87

With his career in its fifth decade, Stewart has sold over 100 million records worldwide, making him one of the best selling artists of all time. In the UK, he has garnered six consecutive number one albums, and his tally of 62 hit singles include 31 that reached the top 10, six of which gained the number one position. He has had 16 top ten singles in the U.S, with four of these reaching number one on the Billboard Hot 100. In 2008, Billboard magazine ranked him the 17th most successful artist on the "The Billboard Hot 100 Top All-Time Artists". He was voted at #33 in Q Magazine's list of the top 100 Greatest Singers of all time. In 1994, Stewart was inducted into the Rock and Roll Hall of Fame.

2. Programatic Tooltip Creation

88

Demo: Mixed Tooltip Usages

Tooltip on a dijit/form/Button (Declarative)

Tooltip Above

I am above the button

Tooltip Below

I am below the button

Tooltip After

I am after the button

Tooltip Before

I am before the button

Tooltip on Text in Paragraph (Programmatic)

Roderick David "Rod" Stewart, CBE (born 10 January 1945) is a British singer-songwriter and musician, born and raised in North London, England and currently residing in Epping. He is of Scottish and English lineage.

With his career in its fifth decade, Stewart has sold over 100 million records worldwide, making him one of the best selling artists of all time. In the UK, he has garnered six consecutive number one albums, and his tally of 62 hit singles include 31 that reached the top 10, six of which gained the number one position. He has had 16 top ten singles in the U.S, with four of these reaching number one on the Billboard Hot 100. In 2008, Billboard magazine ranked him the 17th most successful artist on the "The Billboard Hot 100 Top All-Time Artists". He was voted at #33 in Q Magazine's list of the top 100 Greatest Singers of all time. In 1994, Stewart was inducted into the Rock and Roll Hall of Fame.

3. Product Details

Demo: Product Details

My Favorite Movies

• Braveheart
• Brotherhood of the Wolf
• The Count of Monte Cristo

90

Braveheart
Braveheart is the partly historical, partly mythological, story of William Wallace, a Scottish common man who fights for his country's freedom from English rule around the end of the 13th century...

Brotherhood of the Wolf
In 1765 something was stalking the mountains of central France. A 'beast' that pounced on humans and animals with terrible ferocity...

The Count of Monte Cristo
'The Count of Monte Cristo' is a remake of the Alexander Dumas tale by the same name. Dantes, a sailor who is falsely accused of treason by his best friend Fernand, who wants Dantes' girlfriend Mercedes for himself...

4. Dialog Examples, Terms and Conditions

91

Demo: Terms and Conditions

View Terms and Conditions

Please agree to the following terms and conditions:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed suscipit massa. Aenean vel turpis tincidunt velit gravida venenatis. In iaculis urna non quam tincidunt elementum. Nunc pellentesque aliquam dui, ac facilisis massa sollicitudin et. Donec tincidunt vulputate ultrices. Duis eu risus ut ipsum auctor scelerisque non quis ante. Nam tempor lobortis justo, et rhoncus mauris cursus et. Mauris auctor congue lectus auctor ultrices. Aenean quis feugiat purus. Cras ornare vehicula tempus. Nunc placerat, lorem adipiscing condimentum sagittis, augue velit ornare odio, eget semper risus est et erat.

Donec odio enim, aliquam eu facilisis eu, venenatis sit amet felis. Etiam pharetra arcu ut augue tincidunt convallis. Fusce malesuada mauris massa, a porttitor lorem. Nullam risus erat, bibendum ut sodales at, scelerisque ut odio. Mauris viverra ultricies mi, eu congue risus hendrerit id. Praesent magna leo, egestas eget ullamcorper a, auctor nec nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nec nisl eget enim bibendum gravida sed ac est. Aliquam volutpat elementum urna ut malesuada. Mauris faucibus tincidunt odio ac venenatis. Quisque eleifend sem nec dui gravida nec feugiat libero interdum. Quisque ultricies nisi non arcu lobortis fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porttitor, justo vel suscipit lobortis, enim odio tincidunt nunc, non pharetra lacus dolor a nisl. Vivamus porta venenatis libero vitae commodo.

Cras lacinia imperdiet mi, pretium interdum ante pellentesque et. Quisque commodo metus at velit feugiat fringilla interdum eros ornare. Praesent varius libero quis quam vehicula dapibus. Nam commodo tristique ipsum quis sagittis. In hac habitasse platea dictumst. Morbi eget leo sit amet erat placerat fermentum eu a nunc. Ut scelerisque justo eu odio placerat lobortis. In ultrices sapien ut mauris pharetra varius. Fusce tempus accumsan orci, ac gravida libero venenatis sit amet. Curabitur malesuada vulputate iaculis.

Nullam metus nulla, viverra sit amet aliquet a, dignissim a eros. Nunc cursus, sapien vel vestibulum aliquet, magna nibh rutrum nulla, sed condimentum nunc mauris at ante. Cras ornare turpis adipiscing massa ultricies a tempus lorem hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet ipsum tincidunt mi pellentesque sit amet mollis tortor tempus. Maecenas at purus ac odio sollicitudin congue a non augue. Aliquam eleifend porttitor fermentum. Curabitur non justo ipsum. Duis lectus felis, fermentum sed aliquet interdum, eleifend sit amet leo. Vivamus magna diam, suscipit nec fringilla sit amet, ultrices vitae dui. Cras ut justo non velit mollis blandit.

Pellentesque molestie consequat nisi ac interdum. Pellentesque augue quam, viverra sodales vestibulum eget, aliquam id quam. Suspendisse sed mauris augue, at tempus tortor. Quisque tincidunt metus eu turpis condimentum a fringilla leo sagittis. Integer ac felis nunc. Vivamus eu dictum sem. Vestibulum quis ligula sed elit semper hendrerit id ac enim. Curabitur convallis cursus mauris nec pulvinar. Fusce semper risus a ante pretium elementum. Donec tellus metus, iaculis in suscipit at, venenatis non mauris. Sed nec justo sed nulla ornare hendrerit vitae pharetra magna. Quisque eu felis felis, et venenatis odio.

I Agree I Don't Agree

92

5. Dialog Examples, Stacked Dialogs

Demo: Stacked Dialogs

Create New Dialog

6. Dialog Examples, Ajax Dialogs with Black Underlay

Demo: Ajax Dialog with Black Underlay

Click the button below to show a dialog which loads its content via Ajax.

Load Ajax Dialog

7. TooltipDialog Example, Button Dropdown

Demo: Button Dropdown

Please log into your account.

Login

Email:

Password:

Submit

D4. Dojo Widgets: Layout with Dijit

1. Getting Started

Demo: NodeList Extensions: dojo/query Recap

Pick out fresh fruits

Fresh Fruits

Fruits

• Apples
• Persimmons
• Grapes
• Fresh Figs
• Dates
• Raisins
• Prunes
• Apricots
• Peaches
• Bananas
• Cherries

2. Adding Widgets

Group 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Group 2 Content

Group 3 Content

Header content (top)

Sidebar content (left)

97

3. BorderContainer

center

center

bottom

left

center

left

bottom

98

4. Making the Tabs

Group 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Group 2 Content

Group 3 Content

Header content (top)

Sidebar content (left)

5. Startup and Resize part 1

99

6. Startup and Resize part 2

Group 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Group 2 Content

Group 3 Content

Header content (top)

Sidebar content (left)

D5. Dojo Widgets: Dijit Editor

1. Implementing dijit part 1

Demo: Basic Editor

The following is the default editor, no special settings or plugins.

2. Implementing dijit part 2

Demo: Custom Editor

The following Editor instance allows only a select few tools:

102

3. Implementing dijit part 3

Demo: Programmatic Editor

The following Editor instance allows only a select few tools, and is created programmatically:

4. Using Plugins

103

Demo: Additional Dijit Plugins

This is the default content.

5. Using Plugins part 2

Demo: Additional DojoX Plugins

104

This is the default content.

D6. Dojo Widgets: Form Management with dojox/form/Manager

1. Helper methods of the Form Manager

105

Name	Value

 enable the form elements
 add/remove background
 show form elements
 show form widgets

Demo: dojox/form/Manager

Make sure you open the script console to see all of the form values change!

HTML form elements

 e01 input/checkbox

 e02-1 input/radio    e02-2 input/radio

 e03 input/text

 e04 input/password

 e05 input/hidden

106

e06-1 first e06-2 second  e06 select

e07 textarea
e07

e08 button     

Dijit form widgets

 w01 input/checkbox dijit/form/CheckBox

 w02-1 input/radio dijit/form/RadioButton    w02-2 input/radio dijit/form/RadioButton

 w03 input/text dijit/form/TextBox with intermediateChanges set to true

 w04 input/password dijit/form/TextBox with intermediateChanges set to false

w06-1 first w06-2 second  w06 select dijit/form/Select

w07 textarea dijit/form/SimpleTextarea with intermediateChanges set to true

107

w07

w08 button  w09 type=button  w10 type=reset  w11 type=submit

D7. Dojo Widgets: Vector Graphics with Dojo’s GFX

1. Creating the Surface

Demo: GFX Surface

110

2. Creating Shapes

Demo: Basic Shapes

3. Filling a Shape

Demo: GFX Fills

4. Setting a Stroke on a Shape

Demo: GFX Strokes

113

5. Grouping Shapes Together

Demo: Moveable Group

Click and drag any of the shapes to see the entire group move!

6. Fill, Stroke, and Font Animations

115

Demo: Animating Fills, Fonts, and Strokes

Start Animations

7. Rotating a Shape

Demo: Rotate a Group of Shapes

Start Animations

8. Scaling and Skewing

119

Demo: Scaling and Skewing Shapes

Shrink Grow Skew -20 Skew 20

9. Events group.on_

Demo: GFX Events

121

Click any element of the group to see its event object in the Javascript console.

10. Create the Dojo Logo with GFX

122

Demo: Dojo Logo

Rotate Logo

Enlarge Logo

Shrink Logo

Skew Up

Skew Down

Animate Strokes

Animate Fill

Beautify Fill - Red

Random Chaos!

126

11. Create the London Ajax Logo with GFX

Demo: London Ajax Logo

Animations and Transformations

Rotate 360 Degrees

Half Size Double Size

Make Movable Stop Movable

Down-Right Up-Left

Skew Skew Back

Rotate w/ Color Animation

Animate Text Animate Fill

Animate Stroke

Note: some animations will reset the group to its original shape to best illustrate an effect.

Events

Double-click anywhere on the logo to rotate it 360 degrees.

E1. Dojo Widgets Contd.. : Dijit Menus

1. Getting Started Declarative Demo

Menu Demo

131

Edit

View

Task

Last selected: none

2. Getting Started Programmatic Demo

Menu Demo

Last selected: none

3. Menu Structure Declarative Demo

133

Nested Menu Demo

Edit

View

Task

Mark as Complete

Cancel

Begin

Last selected: none

4. Menu Structure Programmatic Demo

134

Menu Demo

Last selected: none

5. Menu Icons 135

Declarative Menu using iconClass

Edit

View

Task

Programmatic Menu using iconClass

Last selected: none

6. Menu Variations

Menu Demo

Tasks

• Code review
• Build tests
• Prototype UI

	Begin			+
	Mark as Complete			141 +
	Cancel			+

142

	About			+
	Task			+

7. MenuBars and More Declarative Demo

MenuBar Demo

Edit

View

Task

Mark as Complete

Cancel

Begin

Last selected: none

8. MenuBars and More Programmatic Demo

MenuBar Demo

Last selected: none

9. Menus in Widgets

145

This page demonstrates declarative and programmatic usage of dijit/Menu inside dijit/form/ComboButton and dijit/form/DropDownButton.

Declarative Demo

Do Something

Edit

View

Task

Select Action

Edit

View

Task

Programmatic Demo

Last selected: none

E2. Dojo Widgets Contd.. : Getting Selective with Dijit

1. Select

147

dijit/form/Select

State: Select a state Alabama Alaska Arizona Arkansas California

Values:

value:

displayedValue:

*Note how the submitted value will be the internal option value

2. FilteringSelect

148

dijit/form/FilteringSelect

State: Alabama Alaska Arizona Arkansas California

Values:

value:

displayedValue:

*Note how the submitted value will be the internal option value

3. ComboBox

dijit/form/ComboBox

149

State: Alabama Alaska Arizona Arkansas California

Submitted Value:

*Note how the submitted value will be the displayed value

E3. Dojo Widgets Contd.. : Advanced Dijit Selects using Stores

1. Select Widgets

Programmatic Example

dijit/form/Select

State:

Values:

value:

displayedValue:

150

*Note how the submitted value will be the identity of the store item

2. FilteringSelect

151

dijit/form/FilteringSelect

State: Alabama Alaska Arizona Arkansas California

Values:

value:

displayedValue:

*Note how the submitted value will be the internal option value

3. ComboBox

dijit/form/ComboBox

State: Alabama Alaska Arizona Arkansas California

Submitted Value:

*Note how the submitted value will be the displayed value

4. Select without a Store

Programmatic Example

dijit/form/Select

State:

Values:

value:

displayedValue:

*Note how the submitted value will be the internal option value

E4. Dojo Widgets Contd.. : Sliders with Dijit

154

1. CreatingSliders Declarative

Demo: Simple Horizontal and Vertical Sliders

Horizontal Slider

This horizontal slider ranges in value from 0-10, incrementing by 1.

Value:

Disable Slider

 

Vertical Slider

This vertical slider ranges in value from 0-100 with no discrete values, so the widget is freely draggable.

Value:

2. CreatingSliders Programmatically

156

Demo: Simple Horizontal and Vertical Sliders

Horizontal Slider

This horizontal slider ranges in value from 0-10, incrementing by 1.

Value:

Disable Slider

 

Vertical Slider

This vertical slider ranges in value from 0-100 with no discrete values, so the widget is freely draggable.

Value:

3. Adding Rules and Rule Labels

158

Demo: Simple Horizontal and Vertical Sliders

Horizontal Slider

This horizontal slider ranges in value from 0-10, incrementing by 1.

1. lowest
2. normal
3. highest

Value:

Disable Slider

159

 

Vertical Slider

This vertical slider ranges in value from 0-100 with no discrete values, so the widget is freely draggable.

Value:

4. Augment Rules and Rule Labels

Demo: Simple Horizontal and Vertical Sliders

161

Horizontal Slider

This horizontal slider ranges in value from 0-10, incrementing by 1.

1. lowest
2. normal
3. highest

Value:

Disable Slider

 

Vertical Slider

162

This vertical slider ranges in value from 0-100 with no discrete values, so the widget is freely draggable.

Value:

E5. Dojo Widgets Contd.. : Dijit Themes, Buttons, and Textboxes

1. Buttons in Dijit Declarative

Demo: dijit/form/Button

164

Below, we see dijit/form/Button in two forms: as a standard button, and using an icon with no label. Be sure to open the console to see messages when clicking the buttons!

Click Me! Click Me!

2. Buttons in Dijit Programmatic

Demo: dijit/form/Button

Below, we see dijit/form/Button in two forms: as a standard button, and using an icon with no label. Be sure to open the console to see messages when clicking the buttons!

165

3. More Buttons in Dijit Declarative

Demo: More dijit/form/Button(s)!

In this demo, we see three other types of buttons included in the dijit/form namespace.

Toggle

166

Combo

Save

Save As

DropDown

This is a TooltipDialog. You could even put a form in here!

4. More Buttons in Dijit Programmatic

Demo: More dijit/form/Button(s)!

In this demo, we see three other types of buttons included in the dijit/form namespace.

5. Dijit TextBox Family Declarative

dijit/form/TextBox and dijit/form/SimpleTextarea

Name:

Description: This is a sample SimpleTextarea.

169

6. Dijit TextBox Family Programmatic

dijit/form/TextBox and dijit/form/SimpleTextarea

Name:

Description:

170

7. Functionality of Dijit TextBox Declarative

dijit/form/NumberTextBox, dijit/form/CurrencyTextBox, dijit/form/TimeTextBox, dijit/form/DateTextBox

Age:

Annual Salary:

Start Time:

Start Date:

171

8. Functionality of Dijit textBox Programmatic

dijit/form/NumberTextBox, dijit/form/CurrencyTextBox, dijit/form/TimeTextBox, dijit/form/DateTextBox

Age:

Annual Salary:

Start Time:

Start Date:

E6. Dojo Widgets Contd.. : Forms and Validation

1. Using dojox with HTML-based forms

Demo: DojoX Validate and HTML Forms

What follows is a simple HTML form that is checked using validate.check, as well as common validate functions. Give it a shot! 173

* denotes required fields. Results will not be posted anywhere.

First Name*

Last Name*

Email Address*

Confirm Email*

Password*

Confirm Password*

Phone

Form validation results

175

2. Using dojox with Dijit-based Forms

Demo: DojoX Validation with Dijit Forms

* denotes required fields. Page will simply reload on a successful form submission.

176

First Name*:
Website*:
Email*:
Date of Birth*:
Favorite Color:	Select a Color Red Green Blue
Favorite Toolkits:	Dojo Toolkit MooTools Prototype YUI jQuery
Send Emails?
Email Format:	HTML     Text

E7. Dojo Widgets Contd.. : Working with the Grid

1. The Grid’s Event System

Demo: DataGrid events

The following shows how to connect to and handle the onRowClick event in a DataGrid.

2. Getting selections from the Grid

Demo: Selections in a Grid

The following grids demonstrate how selections work in a dojox/grid/DataGrid.

Grid with rowSelector

In the following Grid, no special selector view is used, but rowSelector is specified in the arguments to the constructor.

The row selector behaves according to the rules of the grid's selectionMode.

Grid with dojox/grid/_CheckBoxSelector

In the following Grid, the leftmost column is actually a separate view of type dojox/grid/_CheckBoxSelector. 180

Notice how using the checkbox selectors follows its own behavior—in this case, although the Grid is in extended selection mode, which is still in effect when selecting rows via other data cells, clicking on the checkboxes does not follow that behavior. (In fact, it's closer to the behavior of the multiple selection mode.)

3. Editing data with the Grid

182

Demo: Editing in a Grid

The following grid shows the multiple editing capabilities built into dojox/grid/DataGrid.

F1. Working with Data: Data Modeling for MVC Applications

1. Collection Data Binding part 1

184

Demo: MVC

Store Contents

Click any item above to load it into the editor below.

Name:

Quantity:

Category:

Sell OneSave

Other Actions

Add Shoes Put Negative Quantity (should cause validation error)

2. Collection Data Binding part 2

Demo: MVC

Store Contents

Click any item above to load it into the editor below.

Name:

Quantity: 188

Category:

Sell OneSave

Other Actions

Add Shoes Put Negative Quantity (should cause validation error)

3. Richer Data Models

Demo: MVC

Store Contents

Click any item above to load it into the editor below.

Name:

Quantity:

Category:

Sell OneSave

Other Actions

Add Shoes Put Negative Quantity (should cause validation error)

4. Object Data Binding part 1

Demo: MVC

Store Contents

Click any item above to load it into the editor below.

Name:

Quantity:

Category:

Sell OneSave

Other Actions

Add Shoes Put Negative Quantity (should cause validation error)

5. Object Data Binding part 2

Demo: MVC

Store Contents

Click any item above to load it into the editor below.

Name:

Quantity:

Category: 199

Sell OneSave

Other Actions

Add Shoes Put Negative Quantity (should cause validation error)

202

F2. Working with Data: Introduction to Datagrid

1. Data Grid Cells part 1

Demo: dojox/grid/DataGrid Simple Structure

2. Data Grid Cells part 2

Demo: dojox/grid/DataGrid Cell Styles

3. Data Grid Sub-rows

205

Demo: dojox/grid/DataGrid Sub-rows

4. Data Grid Views part 1

Demo: dojox/grid/DataGrid Locking Columns

5. Data Grid Views part 2

Demo: dojox/grid/DataGrid View's defaultCell

208

F3. Working with Data: Dojo Object Store and Tree

1. Getting Started

Object Store Demonstration

2. Tree with a Static Store

210

Demo: Dijit Tree

Tree

Image

F4. Working with Data: Internationalization with the Dojo Toolkit

1. Consuming resource bundles

Demo: Internationalization

Change locale

• en-us
• de-de
• fr-ca
• pt-pt
• es-es
• zh-cn

Leave your cursor over the various editor buttons in order to see the internationalized tooltips

F5. Working with Data: Real-time Stores

212

1. Getting Started

Demo: Real-Time Stores

put() Dow Jones index Start Timed Notifications

2. Remotely-Initiated Notifications

Demo: Real-Time Stores

put() Dow Jones index Start Timed Notifications 214

216