- The Book of Dojo
- The Dojo Book, 0.4
- Part 1: "Introduction"
- Part 2: "Out of the Box" Dojo
- Part 3: "The Dojo Programming Model"
- Part 4: "More on Widgets"
- Part 5: "Connecting the pieces"
- Part 6: "Customizing Dojo Builds for Better Performance"
- Part 7: "Utilities"
- Part 8: "Internationalization and Accessiblity"
- Part 9: "Dojo Community"
- Part 10: "Fresh From The Shed" Dojo
- BookWriting
- Glossary
Form Widgets
Submitted by criecke on Sun, 01/07/2007 - 07:10.
There are many widgets used for forms:
- Button - just like HTML's button, except with a few advanced features
- Checkbox - like HTML's checkbox but in soria (blue) theme
- ComboBox - like a text input field, but w/suggested values
- DropDownDatePicker - for specifying a date by selecting a cell of a calendar
- DropDownTimePicker - for specifying a time (scheduled for 0.4 release)
- Editor2 (RichText) - like HTML's textarea, but allows editing of rich text
- HslColorPicker - pick a color
- Select - just like HTML [select] element, except w/autocompletion, and loading of possible values from a remote data source
- Slider - graphical slider control used to specify a number within a range
- Spinner - numeric input field that can be adjusted up/down by pressing arrow keys
- dojo.widget.*Validate - a bunch of widgets that check the user's input and correct it or print an error message if it doesn't conform to a certain format
The main principle of these widgets is that:
- each widget corresponds to a native HTML element.
- each widget (w/the exception of Button) represents a single input value
- each widget has a (possibly hidden) <input> element, to which it serializes its input value, so that form submission (either normal submission or via FormBind) works as expected
All these widgets should have these attributes just like native HTML input elements. You can set them during widget construction, but after that they are read only:
- disabled
- tabIndex
- name
- value
And they also share some common methods:
- disable()/enable()
- onValueChanged() - called with the new value of the widget whenever it's changed
- setValue() (note: you can get the value by accessing accessing value; exception: Editor)
(note: some widgets don't conform but we plan to convert them soon)
Author: Bill