Input Control Architecture
Wijmo's input controls are composed of standard HTML elements. Many have an inner input element where the user can type, buttons used to show drop-down editors, or clickable/selectable areas.
All Wijmo input controls are designed to make data-entry easy and effective by providing early validation, whenever possible. For example, our input controls do not even allow to enter alphabets in a numeric input control instead of validating the same at a later stage. Similarly, user cannot clear the contents of control, if the isRequired property of that control is set to true.
Most of Wijmo's input controls have a set of common properties that reflect basic HTML attributes:
- isRequired: "required" attribute
- isDisabled: "disabled" attribute
The "is" prefix prevents conflicts in markup between the names of control properties and HTML attributes.
Input controls based on HTML input elements have more properties in common:
- inputElement: reference to the inner input element
- isReadOnly: "readonly" attribute
- text: formatted value
- value: parsed text
- format: format used to convert between text and value
And controls used to input numbers, dates, and times have the folowing properties in common:
- min: minimum value
- max: maximum value
- step: increment applied with mouse wheel or spinner buttons
The DropDown control is an abstract class, used as a base for several controls. It is composed of the following elements:
- input element (exposed by the inputElement property): An HTML input element used to display and edit the current value. In few cases, this element may be replaced with a non-editable element (e.g. Menu and MultiSelect controls).
- drop-down button: A button used to show or hide the drop-down element.
- drop-down element (exposed by the dropDown property): An HTML element shown when the user presses the drop-down button or the F4 key. The user interacts with the drop-down element to update the value of the input element and of the control.
All dropdown controls have the following properties and events:
- text: Gets or sets the current value of the inputElement.
- textChanged: Event that fires when the value of the text property changes..
- isDroppedDown: Gets or sets a value that determines whether the drop-down is currently visible.
- isDroppedDownChanging, isDroppedDownChanged: Events that fire when the value of the isDroppedDown property changes.
- isAnimated: Property that determines whether the control should use animations when showing the drop-down.
- dropDownCssClass: Class added to the drop-down element in order to allow CSS styling of the drop-down. This property is useful because when the drop-down is displayed, it is usually re-parented to become a direct child of the document's body, which prevents it from inheriting the styles of the control's host element.