Development tools : XUI editor : XUI widgets and containers : Widget descriptions
  
Widget descriptions
This section provides a description of the widgets that are provided by UNICOM® Digital Transformation Toolkit (UDTT™).
Implementation base
The implementation base of a widget is the technology or widget library on which a widget is implemented. All the widgets described in this section consist of the following components unless it is specifically stated.
Widget properties
All the widgets provided by UDTT have the properties listed in the table unless otherwise stated.
 
Property
Property description
id
The id is the identifier for the widget.
dataName
The dataName property is the name of the data element to which the widget is bound. This property is not mandatory. When there is no data need to be sent to the server, this property can be left blank.
visibility
The visibility property defines how a widget is displayed on a GUI. The following values can be specified for this property:
visible
The widget is displayed on a GUI and users are able to interact with the widget.
hidden
The widget is not displayed on a GUI, but it occupies space on the GUI.
gone
The widget is not displayed on a GUI, and it does not occupy space on the GUI.
disabled
Disabled elements cannot have focus, do not receive or fire mouse events, cannot receive user input. If you select a value of true for the disabled property, the widget is displayed on a GUI but a user cannot interact with it. Data contained in a disabled widget is not processed when the form is submitted. The default value for the disabled property is false.
readOnly
The readOnly property can be set to keep a user from changing the value. The default value for the readOnly property is false.
hint
The hint is a description of the widget that is displayed as a tooltip for a user. The hint property has multilingual support.
styleClass
The styleClass property specifies the name of the CSS style ( also known as CSS style class) associated with the widget. This property is set by selecting a style from the CSS styles table in the Style tab of the Properties view. If you do not configure the styleClass property, the default style is used instead. For more detailed information, refer to Setting CSS style to widgets.
width
The width property specifies the width of the widget. This property is set in the Appearance tab of the Properties view.
height
The height property specifies the height of the widget. This property is set in the Appearance tab of the Properties view.
Data binding
The data binding of a widget describes how a widget binds with data from the UDTT data model.
ECA tool support
The following events, properties, and functions can be configured with the ECA tool.
Events that can be added to a widget by using the ECA tool
 
Event
Description
onClick
Is fired when the left mouse button is clicked.
onFocus
Is fired when the widget receives focus because the user moves the mouse pointer over the widget.
onBlur
Is fired when the widget does not receive focus, or when the user clicks outside the widget, or when the widget is hidden.
onKeyDown
Is fired when a keyboard key is pressed.
onKeyPress
Is fired when a keyboard key is pressed or held down.
onKeyUp
Is fired when a keyboard key is released.
onMouseDown
Is fired when a mouse button is clicked.
onMouseUp
Is fired when a mouse button is released
onMouseEnter
Is fired when the mouse pointer moves over the widget.
onMouseLeave
Is fired when the mouse pointer moves out of the widget.
onMouseMove
Is fired when the mouse pointer moves over nodes that are contained in the widget.
Properties that can be configured for a widget by using the ECA tool
 
Property
Property description
visibility
The visibility property defines how a widget is displayed on a GUI. The following values can be specified for this property:
visible
The widget is displayed on a GUI and users are able to interact with the widget.
hidden
The widget is not displayed on a GUI, but it occupies space on the GUI.
gone
The widget is not displayed on a GUI, and it does not occupy space on the GUI.
This property can be used in the Condition and Actions part of ECA rule.
disabled
Disabled elements cannot have focus, do not receive or fire mouse events, cannot receive user input. If you select a value of true for the disabled property, the widget is displayed on a GUI but a user cannot interact with it. Data contained in a disabled widget is not processed when the form is submitted. The default value for the disabled property is false.
This property can be used in the Condition and Actions part of ECA rule.
hint
The hint is a description of the widget that is displayed as a tooltip for a user. The hint property has multilingual support.
This property can be used in the Actions part of ECA rule.
styleClass
This property can be used in the Actions part of ECA rule.
Functions that can be configured for a widget by using the ECA tool
 
Function
Function description
isFocusable
Returns a value of true if a widget can be focused and a value of false if it cannot be focused.
This function can be used in the Condition part of ECA rule.
focus
Specifies that the widget should be focused.
This function can be used in the Actions part of ECA rule.
For detailed information on the properties, functions, and events of each widget and container, refer to the following topics.
See
ECA tool support
Label
Text
Button
Combo
Radio
CheckBox
SelectList
MultiSelect
RichText
TextArea
Image
Link
Table
Tree
Message
FileUpload
HiddenField
Java Script
Dynamic Keyboard
BTT store widget
See also
XUI widgets and containers