Page: 1
Creating AJAX-Powered Forms with the Dojo ToolkitPresented By:
James HarmonObject Training Group, [email protected]
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
Top Related