Editing the properties of the XUI widgets

This topic provides a description of the Properties view of the IBM® WebSphere® Multichannel Bank Transformation Toolkit Dojo widgets and containers.

As shown in figure 1, the Properties view of the WebSphere Multichannel Bank Transformation Toolkit Dojo widgets and containers have five common tabs. Some other tabs not commonly used, such as Columns, Pagination and xValidations would be covered in specific tasks.
Figure 1. The Properties view of the Label widget.

Properties

The Properties tab of the Properties view enables you to edit the basic properties of the widgets and containers. For detailed properties of each widget and container, refer to Widget Descriptions.
Ordering status
There are three ordering status, and users could switch from one to another in sequence by clicking on the Column Header.
Table 1. Ordering status of Widget Properties
Status Ordering Decoration (icon)
Default ordered as the widget XML configuration file
Alphabetical ordered alphabetically by property name (A to Z)
Reverse Alphabetical ordered reverse alphabetically by property name (Z to A)
Sub-tasks include:

Rules

The Rules tab of the Properties view enables you to configure ECA rules for the widgets.

All rules defined in a view will be executed sequentially, following the order in which they appear in the Rules List. Rules reordering (single or multiple selection) can be done using either the arrow buttons or drag and drop. The same reordering capability is available for the list of Actions that may be associated to the rule.

Reordering done with drag and drop can be undone or redone using the standard keys ctrl+z and ctrl+y.

For more information on how to configure the events, conditions, and actions for widgets, refer to the Setting ECA rules to widgets section.

Style

The Style tab of the Properties view enables you to edit the style of the widgets. Before you apply CSS styles to a widget, you must first import CSS files to the XUI editor.

The following CSS styles are supported:
  • Font size
  • Font style
  • Font weight
  • Text align
  • Color
  • Font family
  • Background color
For information on how to import CSS files to the XUI editor, refer to the Setting CSS style to widgets topic.

Appearance

The Appearance tab of the Properties view enables you to edit the alignment, indentation, size, and span of a widget.
Alignment
The Alignment property is used to position a widget within its parent container, the cell, not the form. If you want to position the widget on the left of the form, you can expand the cell as wide as the form.
Size
The Size property is used to set theheight and width of a widget.
Note: You can also edit the size by dragging the boundaries of the widget in the XUI editor area. The Auto Size checkbox is automatically cleared when the resizing handle is grabbed.
Fixed
check fixed and set the value by px.
Relative
check relative and set the percent value. There are some widgets not supported and it is relative to its parent container, the cell, not the form. Please see Setting relative width and height of a widget for detailed information.
Auto-sized
check Auto-sized.
It is used to display single line of text.
TextWrap (width)
For widgets with text, such as label, link, checkbox, radio, button, and message, width has another property, TextWrap.
It is used to display multiple lines in a fixed block.

Action

The Action tab is available in the Properties view for the Link, Button, and Form widgets.

The following options can be selected in the Action tab for a widget:
No Action
No action is initiated after events have been fired and conditions have been evaluated.
Change Flow Event
This option will allow you to change the flow processor, and select a new event.
Launch New Flow
A new flow is launched if the conditions that you configure have been satisfied.
Launch Operation
A new operation is launched if the conditions that you configure have been satisfied.
Launch URL
A URL is launched if the conditions that you configure have been satisfied.
Note: The Launch URL option is available only for the Link widget.