Development tools : XUI editor : XUI widgets and containers : Containers Description : TabbedPane
  
TabbedPane
The TabbedPane has multiple panes and shows only one pane at a time.
The TabbedPane container contains a ContentPane in a TabbedPane on each tab.
See
Implementation base
Properties for the TabbedPane widget
ContentPane in a TabbedPane
Implementation base
Properties for the ContentPane widget
See also
Containers Description
Implementation base
The TabbedPane widget is a Dojo-based widget:
▪ com.ibm.btt.dijit.layout.TabContainer
See also
TabbedPane
Properties 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 identifier for the widget.
hint
A description of the widget that is displayed as a tooltip for a user. This 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
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.
generateLayout
The generateLayout property specifies whether to generate the HTML layout. The default value is true.
generateInlineStyle
The generateInlineStyle property specifies whether to generate the inline styles. The default value is true.
lazyLoading
The lazyLoading property specifies whether to render a tab only when it is displayed:
False
This is the default value.
If the lazyLoading property value of the ContentPane on the tab is false, the tab is rendered no matter whether it is displayed.
If the lazyLoading property value of the ContentPane on the tab is true, the tab is rendered only when it is displayed.
True
Each tab of the TabbedPane is rendered only when it is displayed, regardless of the lazyLoading property value of the ContentPane on the tab.
Note If the lazyLoading property value for the TabbedPane or the ContentPane in the TabbedPane is true, and ECA rules are applied on the current XUI page, you must select Use ECA loader to load ECA Rules in the properties for the XUI Editor.
When the lazyLoading capability is enabled, if you save the current XUI page as the XUI Include widget, the ECA rules and actions on the XUI page do not work in the XUI Include widget.
See
ECA editor support
See also
TabbedPane
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.
Properties that can be configured for the TabbedPane widget by using the ECA editor
 
Property
Description
id
This property can be used in the Condition part of ECA rule.
styleClass
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.
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.
This property can be used in the Actions part of ECA rule.
disabled
This property can be used in the Condition and Actions part of ECA rule.
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.
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.
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.
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.
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.
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.
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.
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.
This function can be used in the Actions part of ECA rule.
See also
Properties for the TabbedPane widget
ContentPane in a TabbedPane
The ContentPane in a TabbedPane is a container that contain the other widgets on the tab of the TabbedPane.
See also
TabbedPane
Implementation base
The ContentPane widget is a Dojo-based widget:
▪ com.ibm.btt.dijit.layout.ContentPane
See also
TabbedPane
Properties for the ContentPane widget
 
Property
Description
id
The identifier for the widget.
selected
The selected property is a boolean property that specifies whether the ContentPane widget is in a selected state. This is an optional property.
title
The title property specifies the title that is displayed on the ContentPane widget. This is an optional property.
closable
The closable property specifies whether the ContentPane widget can be closed by a user. This is an optional property.
iconClass
The iconClass property specifies the style of the icon for content pane title. The icon is displayed on the left side of title. You can input the property manually or you can click the Browse button to display the style selection dialog and select the style. Use the Show Preload CSS check-box to control the dojo icon css display. The default of the Show Preload CSS check-box is checked. For the XUI Editor, the visual effect of the iconClass is not displayed in real-time, you can preview it using Page review.
generateLayout
The generateLayout property specifies whether to generate the HTML layout. The default value is true.
generateInlineStyle
The generateInlineStyle property specifies whether to generate the inline styles. The default value is true.
lazyLoading
The lazyLoading property specifies whether to render a tab only when it is displayed:
False
This is the default value.
If the lazyLoading property value of the TabbedPane that contains the ContentPane is false, the tab is rendered no matter whether it is displayed.
If the lazyLoading property value of the TabbedPane that contains the ContentPane is true, the tab is rendered only when it is displayed.
True
The tab is rendered only when it is displayed, regardless of the lazyLoading property value of the TabbedPane that contains the ContentPane.
Note If the lazyLoading property value for the TabbedPane or the ContentPane in the TabbedPane is true, and ECA rules are applied on the current XUI page, you must select Use ECA loader to load ECA Rules in the properties for the XUI Editor.
Restriction
When the lazyLoading capability is enabled, if you save the current XUI page as the XUI Include widget, the ECA rules and actions on the XUI page do not work in the XUI Include widget.
See
ECA editor support
See also
TabbedPane
ECA editor support
The following events and properties can be configured for the ContentPane widget with the ECA editor.
Events that can be added to the ContentPane widget by using the ECA editor
 
Event
Description
onClose
Is fired when the content pane is closed.
onShow
Is fired when the content pane is displayed.
Properties that can be configured for the ContentPane widget by using the ECA editor
 
Property
Description
id
This property can be used in the Condition part of ECA rule.
title
The title property specifies the title that is displayed on the ContentPane widget. This is an optional property.
This property can be used in the Condition and Actions part of ECA rule.
closable
The closable property specifies whether the ContentPane widget can be closed by a user. This is an optional property.
This property can be used in the Condition and Actions part of ECA rule.
See also
Properties for the ContentPane widget