Page: 1

Creating AJAX-Powered Forms with the Dojo ToolkitPresented By:

James HarmonObject Training Group, Inc.www.ObjectTrainingGroup.comJamesHarmon@gmail.com

Page: 2

Goal

• Increase the usability of your existing web forms by using features of the dojo toolkit

• Changes should be easy and quick to implement– Improve perceived performance– Increase functionality of existing

widgets– Improve data validation

Page: 3

Review Sample Application

• No client side validation– No JavaScript validation provided at

all

• Server side validation– Part of request / response cycle

• Widgets– Limitations

Page: 4

Approach

• Add client side validation

• Use server side validation on each widget instead of entire form

• Use specialized dojo widgets to improve functionality

Page: 5

Steps

• Install dojo• Improve client side validation• Use server side validation• Use specialized widgets• Use the dojo form widget

Page: 6

Install dojo

• Download from dojotoolkit.org

• Use AOL CDN (content distribution network)

Page: 7

Client Side Validation

• Mark widget as using dojo client side validation

• Specify the transformation and validation features

Page: 8

First Name

• Transformation features– First character upper case

• Validation Requirements– Required field

Page: 9

Review before/after DOM

• Review DOM view before using dojo

• Review DOM view after using dojo

• Discuss new event model for DOM element

Page: 10

Validation Error Messages

• Configurable properties

• DOM view of error message tags

• CSS style properties

Page: 11

Common Box Types

Box Type Description

ValidationTextBox Generic validations

IntegerTextBox Integer Fields

CurrencyTextBox Various monetary values

Date/TimeTextBox Date and Time Fields

EmailTextBox For entering email addresses

RegexpTextBox Use regular expressions for validation

InlineEditBox User can edit field by clicking on it

Page: 12

Transformations

• Attributes on field type boxes which change the values of the field– Uppercase– Lowercase– trim– Upper case first character– Digit (remove all non digit characters)

Page: 13

Validations

• Attributes on field type boxes which cause validations to be applied to field

• Error message must be provided• Style of error messages can be over-

ridden– Required– maxLength– Size

Page: 14

Server Side Validation

• Determine fields which can be validated on server side using Ajax

• Username (or email) already used• The server can do more than

provide validation– Any data or message can be sent

back to client

Page: 15

User Name

• Passing data to the server– Don’t wait until the entire form is

processed before letting using know if they’ve selected a good user name

• Handling the response from the server– Not only invalid data message, but

possible suggestions as well

Page: 16

City, State, ZipCode

• State data comes from the server– Could be preloaded– Watch the state selection as user

types• IL is Illinois not Idaho

• City and Zip data comes from server based on selected state – Too much data to preload into the

page

Page: 17

Specialized dojo Widgets

• Date Picker

• Rich Text Editor

• Others

Page: 18

Date Picker

• Add the widget to the page• Populate the widget with data• Get data from the widget

Page: 19

Rich Text Editor

• Add the widget to the page• Populate the widget with data• Get data from the widget

Page: 20

Dojo Form Widget

• Creating a dojo Form– Add widget to the page– Populate the widget with data

• Serializing Data• Passing Data to Server• Graceful Fallback

Page: 21

Other Widgets – Tab Container

Page: 22

Other Widgets – Sortable Table

Page: 23

Where To Go From Here

• www.dojotoolkit.org

• Download slides and code from– www.ObjectTrainingGroup.com/dojo