Dojo: Using the Dojo JavaScript Library to Build Ajax Applications

Product Author Bios

James E. Harmon is the President and Senior Instructor at Object Training Group in Chicago. He is an experienced developer who spent a majority of his career building large scale online applications at Accenture and for several other Web-centric consulting firms. He now specializes in training Java Developers to be more productive by using the latest technologies and frameworks.

The book’s web site is http://www.ObjectTrainingGroup.com/dojobook.

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.

Source Code

The source code is available at: http://www.objecttraininggroup.com/.

Online Sample Chapter

Using Dojo for Client-side Validation

Table of Contents

Foreword xiii

Acknowledgments xv

About the Author xvi

    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

    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

    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

Sample Pages

Download the sample pages