您的位置：首页 > 移动开发

Dojo入门——《Dojo_.Using.the.Dojo.JavaScript.Library.to.Build.Ajax.Applications》读书笔记

2011-09-16 11:48 393 查看

书名：Dojo_.Using.the.Dojo.JavaScript.Library.to.Build.Ajax.Applications

作者：James E. Harmon

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

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

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 from the 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 for the City Field 43

3.3.2 Get the Value of State and Send to 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 运行机制

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

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

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 Assigning Event Handlers 253

<button id="button1">

Click Me!

</button>

function handle(event) {

console.log("Running event handler for event type:", event.type);

}

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

This code should only be executed after the DOM is fully loaded, Dojo has been

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:

dojo.addOnLoad(function() {

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

});

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.

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'), "onclick", handler2);

To remove the event handlers, use dojo.disconnect with the same parameters.

Each handler must be removed separately.

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

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dojo function animation xmlhttprequest class javascript

相关文章推荐

新的分享

章节导航