Page: 1 Creating AJAX-Powered Forms with the Dojo Toolkit Presented By: James Harmon Object Training Group, Inc.
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 TypeDescription ValidationTextBoxGeneric validations IntegerTextBoxInteger Fields CurrencyTextBoxVarious monetary values Date/TimeTextBoxDate and Time Fields TextBoxFor entering addresses RegexpTextBoxUse regular expressions for validation InlineEditBoxUser 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 ) 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 Download slides and code from –