Panels - Tabbed

This compound component is used to layout other components. It uses a set of overlapping panels that can be selected either by clicking on the associated tab or by cycling through with the

Back and Next buttons.

 

Component at design time

Drag and drop an

Panels - Tabbed component onto the page:

The

Panels - Tabbed component looks like this on the page:

 

Component at runtime

The

Panels - Tabbed component looks like this on the page during runtime:

 

Properties and All Attributes views

The Properties view for a component shows the most common set of attributes you can set on a component, and, depending on the component, you might also see options for adding controls, actions, or other components. To open the Properties view, click

Window | Show View | Properties.

These common attributes for the Panels - Tabbed component display on the odc:tabbedPanel tab in the Properties view. See the All Panels - Tabbed attributes table for a complete list of attributes. Additional configuration options for panel items are on the odc:tabbedPanel>Items tab:

Table 1. Panels - Tabbed configuration options

Configuration option	Description
Add a panel for each tab to display in the control	Allows you to specify the IDs, labels and order of tabs in the panels - tabbed component. Additionally, you may also specify that individual tabs contain predefined finish and cancel command button components.

The All Attributes view shows a table of all the attributes you can set on a component, which includes those attributes you can access from the Properties view. To switch to the All Attributes view, click the

All Attributes icon in the upper right corner of the Properties view.

Table 2. All Panels - Tabbed attributes

Attribute name	Represented in Properties view by	Description
binding	Not represented	An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).
height p	Size: Height	Specifies the height of the component in either pixels or percentage. To specify percentage, append % to the value.
id	ID	Assigns a name to a component. Should be a unique name within a JSP.
initialPandelld	Not represented	Specifies the panel's initial ID.
numOfTabs	Scroll after display of X tabs	Number of tabs to be displayed on the panel. Limits the number of tabs visible within the component to the number entered into the field. Additional tabs can be accessed by using the inserted scrolling control.
rendered	Not represented	Can be set to true or false: false - Component will not be rendered to the browser at runtime. true - Component will get rendered. This is the default value.
showBackNextButton	Displays Next and Back buttons.	Checking this box inserts a pair of buttons that can be used to cycle between the various tabs within the component.
slantActiveLeft	Tab border curve (in pixels)	Width of nip off the upper left side of the tab, when tab is the selected tab.
slantActiveRight	Tab border curve (in pixels)	Width of the tab border curve in pixels on the upper right side of the tab, when the tab is select.
slantInactiveLeft	Tab border curve (in pixels)	Width of nip off the upper left side of the tab, when tab is NOT the selected tab.
slantInactiveRight	Tab border curve (in pixels)	Width of nip off the upper right side of the tab, when tab is NOT the selected tab.
styleClass	Style: Classes	Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.
width	Size: Width	Specifies the width of the component in either pixels or percentage. To specify percentage is to be used append % to the value.

---