I: A Dojo Tutorial

1 Understanding Dojo: A Tutorial 3

1.1 Introduction to the Tutorial 3

1.1.1 Goals for this Tutorial 4

1.1.2 Goals for Using Dojo 4

让页面更好看

1.2 A Standard HTML Data Entry Form 5

纯粹的HTML用户注册页面无法提供数据校验功能，必须提交到服务器，再由服务器返回信息

1.3 The Plan for Enhancing the Form 12

如何增强一个简单的注册页面：

在表单中引入Dojo

方法一：直接从网上引用资源

<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js"
djConfig="parSEOnLoad: true"></script>
@H_502_104@

@H_502_104@

方法二：下载源代码到项目中 @H_502_104@

下载地址：http://www.dojotoolkit.org @H_502_104@

@H_502_104@
页面中引入源代码:

@H_502_104@
<script type="text/javascript"
src="dojo-release-1.1.0/dojo/dojo.js"
djConfig="parSEOnLoad: true"></script>
@H_502_104@

@H_502_104@
<script type="text/javascript">
dojo.require("dojo.parser");
</script> @H_502_104@

@H_502_104@
页面中引入样式：

<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.1.0/dojo/resources/dojo.css";
@import"http://o.aolcdn.com/dojo/1.1.0/dijit/themes/tundra/tundra.css";
</style>

使用样式：

<body class="tundra">

@H_502_104@

增加客户端验证
传统的办法是增加javascript 但dojo可以让你少写不少代码

增加服务端确认

使用Dojo widgets

处理表单

@H_502_104@
登录表单示例代码; @H_502_104@

@H_502_104@

@H_502_104@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!— Dojo Tutorial - Step 1 (form.html) —>
<Meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Customer Entry Form</title>
<!— CSS —>
<link rel="stylesheet" href="form.css" type="text/css" />

<style type="text/css">
@import "../js/dijit/themes/tundra/tundra.css";
@import "../js/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="../js/dojo/dojo.js"
djConfig="parSEOnLoad: true"></script>

<script>
dojo.require("dojo.parser");
// dojo.require("dijit.layout.ContentPane");
// dojo.require("dijit.layout.TabContainer");

dojo.require("dijit.form.ValidationTextBox");
// dojo.require("dijit.form.DateTextBox");

</script>

</head>

<body class="tundra">
<div class="formContainer">
<form action="submit.PHP" method="get" name="custForm">
<div class="formTitle">Customer Entry Form</div>

<div class="formRow">
<label for="firstName">First / Last Name: </label>
<input type="text" name="first_name" id="first_name" size="20"
dojoType="dijit.form.ValidationTextBox"
trim="true"
propercase="true"
required="true"
invalidMessage="You must enter your first name"/>
<input type="text" id="lastName" name="lastName"
dojoType="dijit.form.ValidationTextBox"
required="true"
propercase="true"
promptMessage = "Enter last name"
invalidMessage = "Last name must be required"
trim="true"
/>
</div>

<div class="formRow">
<label for="userName">User Name: </label>
<input type="text" id="userName" name="userName"
dojoType="dijit.form.ValidationTextBox"
required="true"
promptMessage="Enter user name."
trim="true"
lowercase="true"
/>
</div>
<div class="formRow">
<label for="email">Email: </label>
<input type="text" id="email" name="email" size="30"
dojoType="dijit.form.ValidationTextBox"
required="true"
regExp="\b[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}\b"
promptMessage="Enter email address."
invalidMessage="Invalid Email Address."
trim="true"
/>
</div>
<div class="formRow">
<label for="address">Address: </label>
<input type="text" id="address" name="address"
dojoType="dijit.form.ValidationTextBox"
required="true"
promptMessage="输入地址"
invalidMessage="地址必须输入"
trim="true"
/>
</div>
<div class="formRow">
<label for="state">State:</label>
<select name="state" >
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" selected="selected">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>

<div class="formRow">
<label for="city">City: </label>
<input id="city" name="city"/>
</div>
<div class="formRow">
<label for="zipCode">Zip Code: </label>
<input type="text" id="zipCode" name="address" size="30"
dojoType="dijit.form.ValidationTextBox"
trim="true"
required="true"
regExp="\d{5}([\-]\d{4})?$"
maxlength="10"
promptMessage="Enter zip code."
invalidMessage="Invalid zip code (NNNNN) or (NNNNN-NNNN)."
/>
</div>
<div class="formRow">
<label for="serviceDate">Start Service:</label>
<input type="text" id="serviceDate" name="serviceDate" size="10"/>
</div>
<div class="formRow">
<label for="comments">Comments:</label>
<textarea name="comments" rows="3" cols="30" id="comments">
</textarea>
</div>

<input type="submit" value="Submit" id="submit" />
<input type="reset" id="reset" value="Cancel" />
</form>
</div>
</body>
</html>

@H_502_104@

@H_502_104@

2 Using Dojo for Client-side Validation 25

2.1 Validating Form Fields 25

2.2 Tutorial Step 2—Adding Client-side Validation 26

2.2.1 Validate the First Name Field 27

2.2.2 Validating the Last Name Field 30

2.2.3 Validating the User Name Field 31

2.2.4 Validating the Email Address Field 31

2.2.5 Validating the Address Field 32

2.2.6 Validating the City Field 33

2.2.7 Validating the Zip Code Field 33

3 Using Dojo to Work with the Server 35

3.1 Adding Server-side Features 35

3.2 Tutorial Step 3a—Adding Server-side Validation 36

3.2.1 Assign Event Handler Function 36

实例：检查用户名是否可用：

在用户填写结束填写用户名后提交，

onblur 事件失去焦点

onchange 事件数据改变

如果使用onblur 哪怕是数据没有改变都会重复提交，所以建议使用onchange事件

使用javascript

<input
type="text"
id="userName"
name="userName"
size="20"
dojoType="dijit.form.ValidationTextBox"
onchange="userNameOnChange()"
/>

The same technique using Dojo appears in the following code.
<input
type="text"
id="userName"
name="userName"
size="20"
dojoType="dijit.form.ValidationTextBox"
onChange="userNameOnChange"
/>

3.2.2 Make a Call to the Server 38

取得页面元素：

var userName = document.form.custForm.userName.value

var username = document.getElementById("userName").value

var username = dojo.byId("username").value

var userName = dijit.byId("userName").getValue()

发送异步请求到服务端，服务端处理完成后返回json格式的响应

// define function to be called when username is entered
function userNameOnChange() {
var userName = dijit.byId("userName").getValue();
if (userName == "") {
console.log("userName is empty");
return;
}
dojo.xhrGet( {
url: "validateUserName.jsp?userName=" + userName,
handleAs: "json",
handle: userNameValidationHandler
});
}

var xhr = new XMLHttpRequest();
xhr.open("GET","validateUserName.jsp?userName=" + userName);
xhr.onreadystatechange = function() {userNameValidationHandler;}

3.3 Tutorial Step 3b—Retrieving Data fromthe Server 43

<input type="text" id="city" name="city" title="city"
dojoType="dijit.form.ComboBox"
autoComplete="true"
forceValidOption="false"
/>

forceValidOption 可以让选择框里边填写非备选框里边的值

3.3.1 Select Appropriate Widget forthe City Field 43

3.3.2 Get the Value of State and Sendto the Server 45

4 Using Dojo Widgets 51

4.1 Adding Dojo Widgets to the Page 51

4.1.1 Dijit—The Dojo Widget Module 52

4.2 Tutorial Step 4—Using Dojo Widgets 52

4.2.1 Use the Dojo DateTextBox Widget 53

时间控件：

<input type="text" id="serviceDate" name="serviceDate" size="10"
dojoType="dijit.form.DateTextBox"
required="true"
promptMessage="Enter service date."
invalidMessage="Invalid date."
constraints="{min:'2007-10-24'}"
/>

4.2.2 Use the Dojo Rich Text Editor Widget 55

5 Processing Forms with Dojo 59

5.1 Using Dojo to Process Forms 59

5.2 Tutorial Step 5—Processing the Form 60

5.2.1 Creating a Dojo Form Widget 60

5.2.2 Intercept Form Submission 61

5.2.3 Check That All Form Elements Are Valid 62

5.2.4 Submitting the Form to the Server 63

II: Dojo Widgets

6 Introduction to Dojo Widgets 67

dojo widgets 运行机制 @H_502_104@

@H_502_104@

6.1 What Are Widgets? 67
6.2 What Are Dojo Widgets? 68

6.3 Components of a Dojo Widget 70

使用一个widgets

<script type="text/javascript"
src="../dojo-release-1.0.2/dojo/dojo.js"
djConfig="parSEOnLoad: true"></script>

<script type="text/javascript">
dojo.require("dijit.form.TextBox");
</script>

<br><br>(Plain HTML ) Address:
<input type="text" name="address" />
<br><br>(Dojo Widget) Address:
<input type="text" name="address" dojoType="dijit.form.TextBox"/>

6.3.1 Widget HTML 70
6.3.2 Widget Styles 74
6.3.3 JavaScript Component of a Widget 76
6.3.4 Dojo Widget Hierarchy 78
6.3.5 Visual Overview of Dojo Widgets 83
6.3.6 Building Your Own Widgets 90

7 Dojo Form Widgets 91

7.1 Standard Forms and Dojo Form Widgets 91
7.1.1 The dijit.form._FormWidget Class 92

7.2 The Dojo Form Widget Explained 94

控件手册

8 Dojo Layout Widgets 137

P155 @H_502_104@

8.1 Understanding Page Layout 137
8.1.1 The dijit.layout._LayoutWidget Class 138
8.2 Explanation of Dojo Layout Widgets 139

9 Other Specialized Dojo Widgets 155

9.1 What Are Specialized Widgets? 155
9.2 Menu Widget 156
9.2.1 dijit.Menu 157
9.2.2 dijit.MenuItem 157
9.2.3 dijit.MenuSeparator 157
9.2.4 dijit.PopupMenuItem 158

III: Dojo in Detail

10 What Is Dojo? 189
10.1 History of JavaScript and AJAX 189
10.2 History of Dojo 191
10.3 Purpose of Dojo 191

10.4 Description of Dojo 192
10.5 What Problems Does Dojo Solve? 193
10.6 Who Should Use Dojo? 194
10.7 Licensing 195
10.8 Competitors and Alternatives 195
10.9 The Future of Dojo 197
11 Technical Description of Dojo 199
11.1 What You Get in the Dojo Download 199
11.2 Organization of Dojo Source Code 201
11.2.1 First-level Directories 201
11.2.2 Digging Deeper into the Dojo Directory 202
11.3 Dojo Modules and Features 203
11.3.1 Naming Conventions and Name Space 204
11.3.2 Dojo Base Module 205
11.3.3 Dojo Core Modules 217
12 Objects and Classes 223
12.1 Objects Explained 223
12.1.1 Creating Objects 224
12.1.2 Encapsulation 224
12.1.3 Object Templates 225
12.1.4 JavaScript Prototypes 227
12.2 Using Dojo to Work with Objects 228
12.2.1 Dojo Function: dojo.declare 229
12.3 Defining a Class 229
12.3.1 Superclasses and Inheritance 231
12.3.2 API for dojo.declare 231
12.3.3 Other Dojo Functions 233
12.3.4 Object Graphs and Dot Notation 234

13 Strings and JSON 239
13.1 Text Strings 239
13.1.1 Dojo Function: dojo.string.pad 240
13.1.2 Usage Example for dojo.string.pad 241
13.1.3 Dojo Function: dojo.string.substitute 241
13.1.4 Usage Example for dojo.string.substitute 243
@H_502_104@

13.2 JSON 244
13.2.1 Dojo Function: dojo.toJson 246
13.2.2 Usage Example for dojo.toJson 246
13.2.3 Dojo Function: dojo.fromJson 247
14 Events and Event Handling 249
14.1 Description of the Event Model 249
14.1.1 What Are Events? 250
14.1.2 Additional Dojo Events 251
14.2 Defining and Assigning Event Handlers 252
14.2.1 Using dojo.connect to Assign
Event Handlers 252
14.2.2 Usage Example for AssigningEvent Handlers 253 @H_502_104@

<button id="button1">
Click Me!
</button>
@H_502_104@

@H_502_104@
function handle(event) {
console.log("Running event handler for event type:",event.type);
}
@H_502_104@

@H_502_104@
dojo.connect(dijit.byId('button1'),"onclick",handler);
@H_502_104@

@H_502_104@

@H_502_104@
This code should only be executed after the DOM is fully loaded,Dojo has been
@H_502_104@
installed,and the DOM has been parsed by Dojo.This is easy to do by using the
dojo.addOnLoad function and calling dojo.connect with an anonymous function
containing the following code:
@H_502_104@

@H_502_104@
dojo.addOnLoad(function() {
dojo.connect(dijit.byId('button1'),handler);
});
@H_502_104@

@H_502_104@
There are a couple of comments I’d like to make concerning this code. First,when
assigning handlers to DOM events,always use dijit.byId,not dojo.byId.The reason
for this is that the Dojo parser might add additional DOM elements to the base DOM
element defined in the HTML. It might be one of those child elements that the event is
triggered on. Don’t try to figure this out; just let Dojo pick the right one by using
dijit.byId.
@H_502_104@

@H_502_104@
To add additional event handlers,just run additional dojo.connect functions.You
can attach an unlimited number of handlers to an event.
dojo.connect(dijit.byId('button1'),handler2);
@H_502_104@

@H_502_104@
To remove the event handlers,use dojo.disconnect with the same parameters.
Each handler must be removed separately.
@H_502_104@

@H_502_104@

@H_502_104@

@H_502_104@

@H_502_104@

14.3 Representing an Event as an Object 254
14.4 Using Aspect Oriented Programming in Dojo 256
15 Ajax Remoting 259
15.1 Remoting 259
15.2 Review of XMLHttpRequest (or XHR for Short) 260
15.2 The dojo.xhrGet Function 261
15.3.1 Parameters in Detail 264
15.4 dojo.xhrPost 264
15.4.1 Usage Example—Error Handling 268
15.5 Working with Forms 269
15.5.1 Dojo Function dojo.formToObject 270
15.5.2 Dojo Function dojo.objectToQuery 271
15.5.3 Dojo Function dojo.formToQuery 272
15.5.4 Dojo Function dojo.formToJson 274
15.5.5 Dojo Function dojo.queryToObject 274
@H_502_104@

16 Working with the DOM 277
16.1 Finding Needles in the DOM Haystack 277
16.2 Dojo Query 278
16.2.1 CSS Selectors 279
16.2.2 Using Selectors in dojo.query 282
16.2.3 Using DOM Elements Found
by dojo.query 283
@H_502_104@

16.3 Animation 283
16.3.1 Understanding Animation 283
16.3.2 Dojo Animation Function 285
16.3.3 Standard Animation Effects 286
17 Testing and Debugging 293
17.1 Testing 293
17.1.1 Unit Testing 294
17.1.2 DOH—The Dojo Unit Testing Framework 294
17.1.3 Other Types of Testing 298
17.2 Logging 298
17.2.1 Basic Logging 299
17.2.2 Advanced Logging 300
@H_502_104@

传统的办法是增加javascript 但dojo可以让你少写不少代码 @H_502_104@