1. Page: 1 Creating AJAX-Powered Forms with the Dojo Toolkit Presented By: James Harmon Object Training Group, Inc. www.ObjectTrainingGroup.com JamesHarmon@gmail.com

2. 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

3. 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

4. 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

5. Page: 5 Steps Install dojo Improve client side validation Use server side validation Use specialized widgets Use the dojo form widget

6. Page: 6 Install dojo Download from dojotoolkit.org Use AOL CDN (content distribution network)

7. Page: 7 Client Side Validation Mark widget as using dojo client side validation Specify the transformation and validation features

8. Page: 8 First Name Transformation features –First character upper case Validation Requirements –Required field

9. 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

10. Page: 10 Validation Error Messages Configurable properties DOM view of error message tags CSS style properties

11. Page: 11 Common Box Types Box TypeDescription ValidationTextBoxGeneric validations IntegerTextBoxInteger Fields CurrencyTextBoxVarious monetary values Date/TimeTextBoxDate and Time Fields EmailTextBoxFor entering email addresses RegexpTextBoxUse regular expressions for validation InlineEditBoxUser can edit field by clicking on it

12. 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)

13. 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

14. 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

15. 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

16. 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

17. Page: 17 Specialized dojo Widgets Date Picker Rich Text Editor Others

18. Page: 18 Date Picker Add the widget to the page Populate the widget with data Get data from the widget

19. Page: 19 Rich Text Editor Add the widget to the page Populate the widget with data Get data from the widget

20. 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

21. Page: 21 Other Widgets – Tab Container

22. Page: 22 Other Widgets – Sortable Table

23. Page: 23 Where To Go From Here www.dojotoolkit.org Download slides and code from –www.ObjectTrainingGroup.com/dojo