1 / 23

Creating AJAX-Powered Forms with the Dojo Toolkit

Creating AJAX-Powered Forms with the Dojo Toolkit. Presented By: James Harmon Object Training Group, Inc. www.ObjectTrainingGroup.com JamesHarmon@gmail.com. Goal. Increase the usability of your existing web forms by using features of the dojo toolkit

sylvia
Download Presentation

Creating AJAX-Powered Forms with the Dojo Toolkit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. Review Sample Application • No client side validation • No JavaScript validation provided at all • Server side validation • Part of request / response cycle • Widgets • Limitations

  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. Steps • Install dojo • Improve client side validation • Use server side validation • Use specialized widgets • Use the dojo form widget

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

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

  8. First Name • Transformation features • First character upper case • Validation Requirements • Required field

  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. Validation Error Messages • Configurable properties • DOM view of error message tags • CSS style properties

  11. Common Box Types

  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. 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. 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. 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. 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. Specialized dojo Widgets • Date Picker • Rich Text Editor • Others

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

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

  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. Other Widgets – Tab Container

  22. Other Widgets – Sortable Table

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

More Related