HAPPY BOOKSGIVING
Use code BOOKSGIVING during checkout to save 40%-55% on books and eBooks. Shop now.
Register your product to gain access to bonus material or receive a coupon.
Dojo offers Web developers and designers a powerful JavaScript toolkit for rapidly developing robust Ajax applications. Now, for the first time, there’s a complete, example-rich developer’s guide to Dojo and its growing library of prepackaged widgets. Reviewed and endorsed by the Dojo Foundation, the creators of Dojo, this book brings together all the hands-on guidance and tested code samples you need to succeed.
Expert Web developer James E. Harmon begins by demonstrating how to “Ajax-ify” existing applications and pages with Dojo, adding Ajax features such as client- and server-side validation as quickly and nondisruptively as possible. Next, he presents in-depth coverage of Dojo’s user interface, form, layout, and specialized Widgets, showing how they work and how to use them most effectively. Among the Widgets, he covers in detail: Date Pickers, Rich Text Editors, Combo Boxes, Expandable Outlines, and many others.
In conclusion, Harmon introduces the Dojo toolkit’s powerful capabilities for simplifying Ajax development. He thoroughly explains Dojo’s helper functions, shortcuts, and special methods, illuminating each feature with examples of the JavaScript problems it can solve. This section’s far-ranging coverage includes strings, JSON support, event handling, Ajax remoting, Dojo and the DOM, testing, debugging, and much more. All source code examples are provided on a companion Web site, including source code for a complete tutorial case study application.
Using Dojo for Client-side Validation
Foreword xiii
Acknowledgments xv
About the Author xvi
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
1.2.1 First and Last Name 6
1.2.2 User Name 7
1.2.3 Email Address 8
1.2.4 Address 8
1.2.5 State 8
1.2.6 City 10
1.2.7 Zip Code 10
1.2.8 Service Date 11
1.2.9 Comments 11
1.3 The Plan for Enhancing the Form 12
1.3.1 Including Dojo in the Form 12
1.3.2 Adding Client-side Validation 13
1.3.3 Adding Server-side Features 13
1.3.4 Using Additional Specialized Dojo Widgets 13
1.3.5 Processing the Form 14
1.4 Getting and Running the Source Code 14
1.5 Tutorial Step 1–Including Dojo 15
1.5.1 Download or Create the Source Files 15
1.5.2 Include the Code for the Dojo Toolkit 19
1.5.3 Include Dojo Style Sheets 20
1.5.4 Review All the Code Changes 21
1.5.5 Run the New Page 22
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
3.2.2 Make a Call to the Server 38
3.3 Tutorial Step 3b–Retrieving Data from the Server 43
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
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
6.1 What Are Widgets? 67
6.2 What Are Dojo Widgets? 68
6.3 Components of a Dojo Widget 70
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
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
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.3 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
Index 303