<af:panelTabbed>

Attachment Mode

Geometry Management

• This component can be stretched by a parent layout component that stretches its children, e.g., panelStretchLayout if the dimensionsFrom attribute is set to "parent".
• This component uses <af:showDetailItem> to organize content into each tab body panel. The <af:showDetailItem> will allow stretching if:
  • The panelTabbed has dimensionsFrom="parent"
  • It contains a single child
  • It has stretchChildren="first" specified
  • The child has no width, height, margin, border, and padding
  • The child must be capable of being stretched
  Examples of components that can be stretched inside of a <af:showDetailItem> include:
  • <af:decorativeBox>
  • <af:panelAccordion>
  • <af:panelBox>
  • <af:panelCollection>
  • <af:panelGroupLayout layout="scroll">
  • <af:panelGroupLayout layout="vertical">
  • <af:panelHeader>
  • <af:panelSplitter>
  • <af:panelStretchLayout>
  • <af:panelTabbed>
  • <af:region>
  • <af:table>
  • <af:tree>
  • <af:treeTable>
  If you try to put a component inside of this component and that child component does not support being stretched, then the component hierarchy is illegal. To make it legal, you need to insert another intermediate component between this component and the child component. This intermediate component must support being stretched and must not stretch its children. An example of such a component that is commonly used for this purpose is <af:panelGroupLayout layout="scroll">. By using a wrapper like this, you create a flowing layout area where nothing will be stretched inside of it. Examples of components that do not support being stretched inside of these panelStretchLayout facets (and therefore need to be wrapped) include:
  • <af:panelBorderLayout>
  • <af:panelFormLayout>
  • <af:panelGroupLayout layout="default">
  • <af:panelGroupLayout layout="horizontal">
  • <af:panelLabelAndMessage>
  • <af:panelList>
  • <trh:tableLayout>

Supports Compressed Layout

PanelTabbed supports compressed layout modes of overflow or conveyor belt. Which compressed layout mode is used depends on the assignment of the -tr-layout-type skinning key (see skinning documentation). In order for a compressed layout component to work properly, it must be part of a supported layout on the page.

A compressed layout (overflow or conveyor belt) component requires that it is either:

• in a container that stretches its children, or
• in a container that has a set width.

Under these circumstances, when the compressed layout component is larger than the parent container, the compressed layout component will display buttons to support its particular compressed layout mode (overflow or conveyor belt).

For overflow compressed layout mode, selecting the overflow button(s) will show a popup containing the items that didn't fit on the page.

For conveyor belt compressed layout mode, selecting the conveyor belt buttons will roll the shown content. In addition, there is a conveyor belt droplist button that shows a popup containing all of the managed items.

Setting up a compressed layout (overflow or conveyor belt) component with the following layouts is not supported. If you use one of these layouts, you may have unexpected and inconsistent results:

• in a container that does not stretch its children.
• in a container that displays multiple children horizontally without explicit sizes for each child. For example, a panelGroupLayout with layout='horizontal' would be invalid, but panelSplitter is OK because it has an explicitly set splitter position.
• setting the compressed layout component with a styleClass or inlineStyle that assigns a percentage width value. Note that this includes assigning styleClass='AFStretchWidth' on a compressed layout component.

Code Example(s)

The following is an example of panelTabbed.

<af:panelTabbed id="pt1">
  <af:showDetailItem text="ADF Faces Components" id="sdi1">
    <af:panelHeader text="ADF Faces Components First Child" id="ph1"/>
    <af:panelHeader text="ADF Faces Components Second Child" id="ph2"/>
  </af:showDetailItem>
  <af:showDetailItem text="Architecture" disabled="true" id="sdi2">
    <af:panelHeader text="Architecture First Child" id="ph3"/>
    <af:panelHeader text="Architecture Second Child" id="ph4"/>
  </af:showDetailItem>
  <af:showDetailItem text="Release" id="sdi3">
    <af:panelHeader text="Release First Child" id="ph5"/>
    <af:panelHeader text="Release Second Child" id="ph6"/>
  </af:showDetailItem>
</af:panelTabbed>
   

The following example renders with the tab bar appearing only above the contents.

<af:panelTabbed>
  <af:showDetailItem text="ADF Faces Components" position="above">
    <af:panelHeader text="ADF Faces Components First Child"/>
    <af:panelHeader text="ADF Faces Components Second Child"/>
  </af:showDetailItem>
  <af:showDetailItem text="Architecture">
    <af:panelHeader text="Architecture First Child"/>
    <af:panelHeader text="Architecture Second Child"/>
  </af:showDetailItem>
  <af:showDetailItem text="Release" disabled="true">
    <af:panelHeader text="Release First Child"/>
    <af:panelHeader text="Release Second Child"/>
  </af:showDetailItem>
</af:panelTabbed>