A Tab component
is part of a Tab Set component. You can add a new tab to a tab set in two ways, by right-clicking the Tab Set component or a Tab component and choosing Add Tab or by dragging a new Tab component from the Woodstock Layout category of the Palette and dropping it on the Tab Set or on another Tab component. You can also drag from the Palette and drop the tab on the tab set's nodes in the
This component is a JavaServer Faces 1.2 component. You see components that use this
version of JavaServer Faces when your project uses Java EE 5. For more information on JavaServer Faces 1.2,
see:
If you drop the Tab component to the left or right of an existing tab, it is added to the same row of tabs.
If you drop the Tab component on an existing tab, the dropped tab becomes a child tab of the tab on which you drop it unless the existing tab is a third level tab. You can have at most three levels of tabs in a tab set.
You cannot add a child tab to a tab that has components in its Layout Panel. When you drop a tab on an existing tab component that has an empty Layout Panel, the empty Layout Panel is deleted to make room for the dropped tab.
By default, a Tab component has a Layout Panel below it where you can drop components that will be displayed when the user selects the tab. The Layout Panel by default has its panelLayout property set to Grid Layout, meaning that components dropped on the panel are aligned at the location where they are dropped. You can change the layout behavior by setting the panelLayout property to Flow Layout, which aligns dropped components left to right in rows. For more information on Layout Panel properties, see Layout Panel Component Properties Window.
To select a tab in a tab set, either click the Tab component on the page or select the Tab component's node in the
To select the whole tab set, either click the border of the Tab Set component on the page or select the tab set's node in the Navigator window. Alternatively, you can select a Tab component and either press Escape or right-click and choose Select Parent to select its parent component.
If you select a tab on a page in the Visual Designer, a side effect is that it becomes the selected tab. If this effect is not what you want, select the tab in the Navigator window so you can set its properties.
You can drag tabs in the Navigator window to change their location and level in the tab set.
Some typical uses of tabs:
You can drop components on the Layout Panel component below a tab to enable a set of components to be displayed below each tab. When the user selects a tab, they see only the components that are associated with the tab, without having to change pages.
You can use a tab set to navigate among a set of pages. Each tab component links to a Visual Web JSF page in your web application. You would use the Page Flow editor to define each tab to display a page in the application, with the current page's tab set as the selected tab. If you want to use the tab set for page navigation, be sure to delete each tab component's Layout Panel.
You can also right-click the Tab component and choose a number of options, including the following:
Edit Text. Type the text that will appear on the tab and press Enter. The new text will be set in the text property.
Edit action Event Handler. Code the action event handler, the method that is called when the user clicks the tab. This method determines which page or resource to open based on specified conditions. The action method typically processes mouse clicks and returns a string indicating the name of a page navigation case (the page in your application to display next). The default name for the method is tab-id_action, where tab-id is the name of the tab, the value of the tab's id property.
Bind to Data. Dynamically set the text that appears on the tab. You can bind the component's text property to an object or a data provider, as described in the topic Bind to Data Dialog Box.
Property Bindings. Opens a dialog box that enables you to bind properties of the component in addition to the text property to other objects or bean properties that update this component's properties automatically.
Add Binding Attribute. This option adds a binding attribute to the component.
Note: If you plan to script the component in Java code, you must manually add a binding attribute, which is bound using a value binding expression to a property of the backing page bean.
Remove Binding Attribute. This option removes the binding attribute from the component.