You are previewing Dojo: Using the Dojo JavaScript Library to Build Ajax Applications.
O'Reilly logo
Dojo: Using the Dojo JavaScript Library to Build Ajax Applications

Book Description

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.

Table of Contents

  1. Copyright
    1. Dedication
  2. Foreword
  3. Acknowledgments
  4. About the Author
  5. I. A Dojo Tutorial
    1. 1. Understanding Dojo: A Tutorial
      1. 1.1. Introduction to the Tutorial
        1. 1.1.1. Goals for this Tutorial
        2. 1.1.2. Goals for Using Dojo
      2. 1.2. A Standard HTML Data Entry Form
        1. 1.2.1. First and Last Name
        2. 1.2.2. User Name
        3. 1.2.3. Email Address
        4. 1.2.4. Address
        5. 1.2.5. State
        6. 1.2.6. City
        7. 1.2.7. Zip Code
        8. 1.2.8. Service Date
        9. 1.2.9. Comments
      3. 1.3. The Plan for Enhancing the Form
        1. 1.3.1. Including Dojo in the Form
        2. 1.3.2. Adding Client-side Validation
        3. 1.3.3. Adding Server-side Features
        4. 1.3.4. Using Additional Specialized Dojo Widgets
        5. 1.3.5. Processing the Form
      4. 1.4. Getting and Running the Source Code
      5. 1.5. Tutorial Step 1—Including Dojo
        1. 1.5.1. Download or Create the Source Files
        2. 1.5.2. Include the Code for the Dojo Toolkit
        3. 1.5.3. Include Dojo Style Sheets
        4. 1.5.4. Review All the Code Changes
        5. 1.5.5. Run the New Page
    2. 2. Using Dojo for Client-side Validation
      1. 2.1. Validating Form Fields
      2. 2.2. Tutorial Step 2—Adding Client-side Validation
        1. 2.2.1. Validate the First Name Field
        2. 2.2.2. Validating the Last Name Field
        3. 2.2.3. Validating the User Name Field
        4. 2.2.4. Validating the Email Address Field
        5. 2.2.5. Validating the Address Field
        6. 2.2.6. Validating the City Field
        7. 2.2.7. Validating the Zip Code Field
    3. 3. Using Dojo to Work with the Server
      1. 3.1. Adding Server-side Features
      2. 3.2. Tutorial Step 3a—Adding Server-side Validation
        1. 3.2.1. Assign Event Handler Function
        2. 3.2.2. Make a Call to the Server
          1. 3.2.2.1. Get the Data Entered by the User
          2. 3.2.2.2. Send the Data to the Server
          3. 3.2.2.3. Handle the Response from the Server
      3. 3.3. Tutorial Step 3b—Retrieving Data from the Server
        1. 3.3.1. Select Appropriate Widget for the City Field
        2. 3.3.2. Get the Value of State and Send to the Server
          1. 3.3.2.1. Expose the Data Source
          2. 3.3.2.2. Define the Dojo Data Store
          3. 3.3.2.3. Bind the Data Store to the Widget
    4. 4. Using Dojo Widgets
      1. 4.1. Adding Dojo Widgets to the Page
        1. 4.1.1. Dijit—The Dojo Widget Module
      2. 4.2. Tutorial Step 4—Using Dojo Widgets
        1. 4.2.1. Use the Dojo DateTextBox Widget
        2. 4.2.2. Use the Dojo Rich Text Editor Widget
    5. 5. Processing Forms with Dojo
      1. 5.1. Using Dojo to Process Forms
      2. 5.2. Tutorial Step 5—Processing the Form
        1. 5.2.1. Creating a Dojo Form Widget
        2. 5.2.2. Intercept Form Submission
        3. 5.2.3. Check That All Form Elements Are Valid
        4. 5.2.4. Submitting the Form to the Server
  6. II. Dojo Widgets
    1. 6. Introduction to Dojo Widgets
      1. 6.1. What Are Widgets?
      2. 6.2. What Are Dojo Widgets?
      3. 6.3. Components of a Dojo Widget
        1. 6.3.1. Widget HTML
        2. 6.3.2. Widget Styles
        3. 6.3.3. JavaScript Component of a Widget
        4. 6.3.4. Dojo Widget Hierarchy
          1. 6.3.4.1. dijit._Widget
          2. 6.3.4.2. dijit._Templated
        5. 6.3.5. Visual Overview of Dojo Widgets
          1. 6.3.5.1. Form and Data Widgets
          2. 6.3.5.2. Layout Widgets
          3. 6.3.5.3. Other Specialized Widgets
        6. 6.3.6. Building Your Own Widgets
    2. 7. Dojo Form Widgets
      1. 7.1. Standard Forms and Dojo Form Widgets
        1. 7.1.1. The dijit.form._FormWidget Class
          1. 7.1.1.1. Properties in dijit.form._FormWidget
          2. 7.1.1.2. Methods in dijit.form._FormWidget
      2. 7.2. The Dojo Form Widget Explained
    3. 8. Dojo Layout Widgets
      1. 8.1. Understanding Page Layout
        1. 8.1.1. The dijit.layout._LayoutWidget Class
          1. 8.1.1.1. Properties in dijit.layout._LayoutWidget
          2. 8.1.1.2. Methods in dijit.layout._LayoutWidget
          3. 8.2. Explanation of Dojo Layout Widgets
    4. 9. Other Specialized Dojo Widgets
      1. 9.1. What Are Specialized Widgets?
      2. 9.2. Menu Widget
        1. 9.2.1. dijit.Menu
        2. 9.2.2. dijit.MenuItem
        3. 9.2.3. dijit.MenuSeparator
        4. 9.2.4. dijit.PopupMenuItem
  7. III. Dojo in Detail
    1. 10. What Is Dojo?
      1. 10.1. History of JavaScript and AJAX
      2. 10.2. History of Dojo
      3. 10.3. Purpose of Dojo
      4. 10.4. Description of Dojo
      5. 10.5. What Problems Does Dojo Solve?
      6. 10.6. Who Should Use Dojo?
      7. 10.7. Licensing
      8. 10.8. Competitors and Alternatives
      9. 10.9. The Future of Dojo
    2. 11. Technical Description of Dojo
      1. 11.1. What You Get in the Dojo Download
      2. 11.2. Organization of Dojo Source Code
        1. 11.2.1. First-level Directories
          1. dojo
          2. dijit
          3. dojox
          4. util
        2. 11.2.2. Digging Deeper into the Dojo Directory
      3. 11.3. Dojo Modules and Features
        1. 11.3.1. Naming Conventions and Name Space
        2. 11.3.2. Dojo Base Module
          1. 11.3.2.1. The dojo.lang Module
          2. 11.3.2.2. The dojo.declare Module
          3. 11.3.2.3. The dojo.connect Module
          4. 11.3.2.4. The dojo.Deferred Module
          5. 11.3.2.5. The dojo.json Module
          6. 11.3.2.6. The dojo.array Module
          7. 11.3.2.7. The dojo.Color Module
          8. 11.3.2.8. The dojo.event Module
          9. 11.3.2.9. The dojo._base.html Module
          10. 11.3.2.10. The dojo._base.NodeList Module
          11. 11.3.2.11. The dojo._base.query Module
          12. 11.3.2.12. The dojo._base.xhr Module
          13. 11.3.2.13. The dojo._base.fx Module
        3. 11.3.3. Dojo Core Modules
          1. 11.3.3.1. Dojo Modules
          2. 11.3.3.2. Dojo Core Features
    3. 12. Objects and Classes
      1. 12.1. Objects Explained
        1. 12.1.1. Creating Objects
        2. 12.1.2. Encapsulation
        3. 12.1.3. Object Templates
        4. 12.1.4. JavaScript Prototypes
      2. 12.2. Using Dojo to Work with Objects
        1. 12.2.1. Dojo Function: dojo.declare
      3. 12.3. Defining a Class
        1. 12.3.1. Superclasses and Inheritance
        2. 12.3.2. API for dojo.declare
        3. 12.3.3. Other Dojo Functions
          1. Dojo Function: dojo.mixin
          2. Dojo Function: dojo.extends
        4. 12.3.4. Object Graphs and Dot Notation
          1. Dojo Function: dojo.getObject
          2. Dojo Function: dojo.setObject
          3. Dojo Function: dojo.exists
          4. Dojo Function: dojo.isObject
    4. 13. Strings and JSON
      1. 13.1. Text Strings
        1. 13.1.1. Dojo Function: dojo.string.pad
        2. 13.1.2. Usage Example for dojo.string.pad
        3. 13.1.3. Dojo Function: dojo.string.substitute
        4. 13.1.4. Usage Example for dojo.string.substitute
      2. 13.2. JSON
        1. 13.2.1. Dojo Function: dojo.toJson
        2. 13.2.2. Usage Example for dojo.toJson
        3. 13.2.3. Dojo Function: dojo.fromJson
          1. Usage Example
    5. 14. Events and Event Handling
      1. 14.1. Description of the Event Model
        1. 14.1.1. What Are Events?
        2. 14.1.2. Additional Dojo Events
      2. 14.2. Defining and Assigning Event Handlers
        1. 14.2.1. Using dojo.connect to Assign Event Handlers
        2. 14.2.2. Usage Example for Assigning Event Handlers
      3. 14.3. Representing an Event as an Object
      4. 14.4. Using Aspect Oriented Programming in Dojo
    6. 15. Ajax Remoting
      1. 15.1. Remoting
      2. 15.2. Review of XMLHttpRequest (or XHR for Short)
      3. 15.3. The dojo.xhrGet Function
        1. 15.3.1. Parameters in Detail
          1. 15.3.1.1. handleAs Argument to XHR
      4. 15.4. dojo.xhrPost
        1. 15.4.1. Usage Example—Error Handling
      5. 15.5. Working with Forms
        1. 15.5.1. Dojo Function dojo.formToObject
          1. Usage Example
        2. 15.5.2. Dojo Function dojo.objectToQuery
        3. 15.5.3. Dojo Function dojo.formToQuery
        4. 15.5.4. Dojo Function dojo.formToJson
        5. 15.5.5. Dojo Function dojo.queryToObject
    7. 16. Working with the DOM
      1. 16.1. Finding Needles in the DOM Haystack
      2. 16.2. Dojo Query
        1. 16.2.1. CSS Selectors
          1. 16.2.1.1. Simple Selectors
          2. 16.2.1.2. Selector Grouping
          3. 16.2.1.3. Element ID Selectors
          4. 16.2.1.4. Class Attribute Selectors
          5. 16.2.1.5. Structural Selectors
          6. 16.2.1.6. Attribute Selectors
          7. 16.2.1.7. Other Selectors
        2. 16.2.2. Using Selectors in dojo.query
        3. 16.2.3. Using DOM Elements Found by dojo.query
      3. 16.3. Animation
        1. 16.3.1. Understanding Animation
        2. 16.3.2. Dojo Animation Function
        3. 16.3.3. Standard Animation Effects
          1. 16.3.3.1. dojo.fx.slideTo
          2. 16.3.3.2. dojo.fx.wipeOut
          3. 16.3.3.3. dojo.fx.wipeIn
          4. 16.3.3.4. dojo.fadeOut
          5. 16.3.3.5. dojo.fadeIn
          6. 16.3.3.6. dojo.fx.chain
          7. 16.3.3.7. dojo.fx.combine
          8. 16.3.3.8. dojo.fx.Toggler
    8. 17. Testing and Debugging
      1. 17.1. Testing
        1. 17.1.1. Unit Testing
        2. 17.1.2. DOH—The Dojo Unit Testing Framework
          1. 17.1.2.1. Create a New Unit Test
          2. 17.1.2.2. Register Unit Test
          3. 17.1.2.3. Run Unit Test
          4. 17.1.2.4. Review Results of Test
        3. 17.1.3. Other Types of Testing
      2. 17.2. Logging
        1. 17.2.1. Basic Logging
        2. 17.2.2. Advanced Logging
          1. 17.2.2.1. Timer
          2. 17.2.2.2. Logging Message Types