Package com.smartgwt.client.docs

# Interface FormItemStyling

public interface FormItemStyling

### FormItem Styling

Different FormItem types are rendered using different DOM structures. This is an overview explaining the various elements that may be produced and how they can be styled:

Form items written out by a DynamicForm with `itemLayout:"table"` are written into table cells. A formItem can govern the appearance of these cells using properties such as `FormItem.cellStyle`, `FormItem.cellHeight`. These properties have no effect for formItems rendered outside a form (for example the during `grid editing`), or if `itemLayout` is "absolute".

If a formItem is showing a `picker icon`, the picker icon and text box will be written into an element referred to as the control table. Styling applied to this element (via `FormItem.controlStyle`) will extend around both the text box and the picker (but not other icons, hints, etc). The control table is not written out if the pickerIcon is not visible except in the case where the `FormItem.showPickerIconOnFocus` is true, and the item does not have focus, or if a developer explicitly sets `FormItem.alwaysShowControlBox` to true.

The textBox of an item is the area containing its main textual content. This may natively be achieved as a data element (such as an <input ...>), or a static DOM element. See `FormItem.textBoxStyle`, and related `FormItem.readOnlyTextBoxStyle` and `FormItem.printTextBoxStyle` for styling options. See also `FormItem.shouldApplyHeightToTextBox()` for a discussion on sizing the text box.

Any visible `valueIcon` will be rendered inside the text box for static items, or adjacent to it for items where the text is editable (such as `TextItem`). Explicit styling for the valueIcon can be specified via the `FormItem.getValueIconStyle()` method.

FormItems can also show explicitly defined `FormItem.icons`. By default these show up next to the item, outside its text box and control table / after the `picker icon` (if present), though `inline positioning` is also supported for some cases. Their appearance and behavior are heavily customizable - see `FormItemIcon.baseStyle`, `FormItemIcon.src` and related properties.

`FormItem hints` may be written out as static text after any icons, and styled according to the `FormItem.hintStyle` - or where supported, written directly into the text box with styling derived from the textBoxStyle plus a suffix of `"Hint"`. (See `TextItem.showHintInField`).

In addition to this, form items may show validation error icons or text (see `DynamicForm.showInlineErrors`, `FormItem.showErrorIcon` and `FormItem.showErrorText`). The position of these error indicators is controlled by `DynamicForm.errorOrientation`.

Most formItem user-interface elements support stateful styling - showing a different appearance for `focused`, `over`, `disabled` and `error` states.

Default styling for items will vary by skin, and note that subclasses of FormItem may have additional styling properties not explicitly called out here.
Developers performing global styling modifications for formItems should also be aware of compound items (such as `DateItem`) which achieve their user interface by embedding simpler items in an outer structure. See `CompoundFormItem_skinning`.

See Also:
  - `FormItemBaseStyle`
  - `FormItem.getCellHeight()`
  - `FormItem.getIconBaseStyle()`
  - `FormItem.getShowFocused()`
  - `FormItem.getShowOver()`
  - `FormItem.getUpdateTextBoxOnOver()`
  - `FormItem.getUpdateControlOnOver()`
  - `FormItem.getUpdatePickerIconOnOver()`
  - `FormItem.getShowDisabled()`
  - `FormItem.getCellStyle()`
  - `FormItem.getHintStyle()`
  - `FormItem.getTitleStyle()`
  - `FormItem.getTextBoxStyle()`
  - `FormItem.getPrintTextBoxStyle()`
  - `FormItem.getPrintReadOnlyTextBoxStyle()`
  - `FormItem.getPickerIconStyle()`
  - `FormItem.getControlStyle()`
  - `SelectItem.getPickerIconStyle()`
  - `SelectItem.getShowFocused()`
  - `SelectItem.getShowOver()`
  - `SelectItem.getUpdateTextBoxOnOver()`
  - `SelectItem.getUpdateControlOnOver()`
  - `UploadItem.getTextBoxStyle()`
  - `MiniDateRangeItem.getTextBoxStyle()`