TabbedPane

The TabbedPane widget can contain other widgets and the pages of a TabbedPane widget is manipulated through public APIs.

The TabbedPane container is complex container that has multiple panes (a ContentPane per each tab) and can be directly dragged into XUI as the root container, but shows only one pane at a time. It can be different from other containers in that it can be separated into two widgets

Implementation base

The TabbedPane widget is a Dojo-based widget:
  • com.ibm.btt.dijit.layout.TabContainer

Properties

The following properties can be configured for the TabbedPane widget.
Table 1. Properties that can be configured for the TabbedPane widget.
Property Description
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.
id The id is the identifier for the widget.
hint The hint is a description of the widget that is displayed as a tooltip for a user. The hint property has multilingual support.
visibility The visibility property specifies how a widget is displayed on a GUI. Only the following values can be specified for the visibility property of the TabbedPane widget:
visible
The widget is displayed on a GUI and users are able to interact with the widget.
gone
The widget is not displayed on a GUI, and it does not occupy space on the GUI.
tabPosition The tabPosition property specifies the location of the tabs on the TabbedPane widget. The following values are available to be specified for the tabPosition property:
  • top
  • bottom
  • left
  • right
The default value is top.
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.
Note: For disabled TabbedPane, user cannot switch to another tab by clicking the tab button, but the contents have no effect.
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.

ECA editor support

- The TabbedPane does not have events. The events are associated to the containers (ContentPane) that are inside the TabbedPane. The following properties and functions can be configured for the TabbedPane widget with the ECA editor.
Table 2. Properties that can be configured for the TabbedPane widget by using the ECA editor.
Property Description
id The id is the identifier for the widget.
Note: This property can be used in the Condition part of ECA rule.
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.
Note: This property can be used in the Actions part of ECA rule.
visibility The visibility property specifies how a widget is displayed on a GUI. Only the following values can be specified for the visibility property of the TabbedPane widget:
visible
The widget is displayed on a GUI and users are able to interact with the widget.
gone
The widget is not displayed on a GUI, and it does not occupy space on the GUI.
Note: The visibility 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.
Note: This property can be used in the 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.
Note: This property can be used in the Condition and Actions part of ECA rule.
Table 3. Functions that can be configured for the TabbedPane widget by using the ECA editor.
Function Description
closeChildByIndex The closeChildByIndex function closes a tab page. An index is used to specify the tab page that closes.
Note: This function can be used in the Actions part of ECA rule.
closeChildById The closeChildById function closes a tab page. An identifier is used to specify the tab page that closes.
Note: This function can be used in the Actions part of ECA rule.
selectChildByIndex The selectChildByIndex function displays a tab page. An index is used to specify the tab page that is displayed.
Note: This function can be used in the Actions part of ECA rule.
selectChildById The selectChildById function displays a tab page. An identifier is used to specify the tab page that is displayed.
Note: This function can be used in the Actions part of ECA rule.
hideTabByIndex The hideTabByIndex function hides a tab page. An index is used to specify the tab page that is going to be hidden.
Note: This function can be used in the Actions part of ECA rule.
showTabByIndex The showTabByIndex function shows a tab page. An index is used to specify the tab page that is going to be shown.
Note: This function can be used in the Actions part of ECA rule.
hideTabById The hideTabById function hides a tab page. An identifier of contained ContentPane is used to specify the tab page that is going to be hidden.
Note: This function can be used in the Actions part of ECA rule.
showTabById The showTabById function shows a tab page. An identifier of contained ContentPane is used to specify the tab page that is going to be shown.
Note: This function can be used in the Actions part of ECA rule.