16 Working with Layout Components on a Page

This chapter describes the types of layout components that support page infrastructure, but are not available through the resource catalog.

This chapter includes the following topics:

Section 16.1, "About Layout Components"
Section 16.2, "Customizing the Display Name of Child Components"
Section 16.3, "Setting panelGridLayout Properties"
Section 16.4, "Setting gridRow Properties"
Section 16.5, "Setting gridCell Properties"
Section 16.6, "Setting panelGroupLayout Properties"
Section 16.7, "Setting panelStretchLayout Properties"
Section 16.8, "Setting panelTabbed Properties"
Section 16.9, "Setting showDetailFrame Properties"
Section 16.10, "Setting sidebarItem Properties"
Section 16.11, "Setting spacer Properties"

Permissions:

To perform the tasks in this chapter, you must be a portal moderator or a portal member with the portal-level permission Basic Services: Edit Page Access, Structure, and Content (standard permissions) or the Pages: Edit Pages (advanced permissions).

For more information about permissions, see Section 29.1, "About Roles and Permissions for a Portal."

16.1 About Layout Components

Some page layout components are not exposed for use in the resource catalog. They are associated with the components on a page, and are configurable when you edit a page in Structure view (Figure 16-1).

Figure 16-1 Structure View of Page Edit Mode

Description of "Figure 16-1 Structure View of Page Edit Mode"

Table 16-1 lists and describes the layout components you are likely to encounter in Structure view of the page editor.

Table 16-1 Layout Components

Layout Component	Description
`panelGridLayout`	Provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The `Layout` property determines the arrangement of the child components. For more information, see Section 16.3, "Setting panelGridLayout Properties."
`gridRow`	In a `panelGridLayout` component, one or more `gridRow` components describe the rows of a grid layout structure. Each row defines a height and margins. For more information, see Section 16.4, "Setting gridRow Properties."
`gridCell`	Each `gridRow` component uses one or more `gridCell` components to describe the cells for columns in that row of the grid layout structure. Each cell defines width, margins, column span, row span, horizontal alignment, and vertical alignment. For more information, see Section 16.5, "Setting gridCell Properties."
`panelGroupLayout`	Provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The `Layout` property determines the arrangement of the child components. For more information, see Section 16.6, "Setting panelGroupLayout Properties."
`panelStretchLayout`	Provides a means of arranging content in defined areas on a page. Useful for enabling content to stretch when the browser is resized. An example of a `panelStretchLayout` component is a task flow that uses the Stretch task flow style (see Section 28.3.3, "Creating a Task Flow to Visualize Data"). For more information, see Section 16.7, "Setting panelStretchLayout Properties."
`panelTabbed`	The parent component of a tab set. For more information, see Section 16.8, "Setting panelTabbed Properties."
`showDetailFrame`	Renders a border, or chrome, around its child component along with a header that contains icons to enable users to perform some operations. These include a menu icon with options for moving the component, along with its content, to new positions on the page. Users can drag and drop `showDetailFrame` components from one `panelCustomizable` component to another on the page. Note that a `showDetailFrame` must be included inside a `panelCustomizable` component for it to be movable. For more information, see Section 16.9, "Setting showDetailFrame Properties."
`sidebarItem`	A child component of a tab set (`panelTabbed`). For more information, see Section 16.10, "Setting sidebarItem Properties."
`spacer`	Provides a means of incorporating some blank space in pages so that the page appears less cluttered than it would if all the components were presented immediately next to each other or immediately below each other. For more information, see Section 16.11, "Setting spacer Properties."

16.2 Customizing the Display Name of Child Components

On a page, a component may be a parent to a number of child components. When you view the properties of the parent component, you can find its child components listed on the Child Components tab of the Component Properties dialog. When multiple child components are of the same type, they may be indistinguishable from each other in the list of child components. For example, a panelGroupLayout component uses the value of its layout attribute (for example, vertical) as the display name, so multiple panelGroupLayout components may all have the same name in the list of child components, as illustrated in Figure 16-2 in Structure view.

Figure 16-2 Child Component Names

Description of "Figure 16-2 Child Component Names"

If you need to identify and work with a specific child component, you can edit the source code of a page to specify a unique display name for any component to make it easily distinguishable. This display name is shown in hint text and the Component Properties dialog. This is a developer task, described in the "Customize the Display Name of Child Components" section of Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

16.3 Setting panelGridLayout Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The panelGridLayout component is a newer ADF component that uses one or more gridRow components to describe the rows of a grid layout structure. Each row defines a height and margins. Each gridRow uses one or more gridCell components to describe the cells for columns in that row of the grid layout structure. Each cell defines width, margins, column span, row span, horizontal alignment, and vertical alignment. This component is used in the latest 11.1.1.8.3 out-of-the-box page templates (see Table 21-1, "Built-in Page Templates") to provide a powerful and concise way of defining a layout with the basic building blocks of panelGridLayout, gridRow, and gridCell.

Properties for the panelGridLayout component include a Child Components tab with options for hiding, showing, and rearranging component content. For more information, see Section 14.3.5, "Working with Child Components."

Table 16-2 lists and describes the panelGridLayout properties that appear on the Display Options tab in the Component Properties dialog.

Table 16-2 panelGridLayout Display Options

Property	Description
`Dimensions From`	Specifies the source of the dimensions applied to the component: `auto`—Either `parent` or `children`, depending on the `panelGridLayout` parent container. If the parent's `Layout` attribute is set to `stretch`, then `parent` is used; otherwise `children` is used. `children`—The dimensions are taken from the children (`topHeight` will still be honored so the contents of this facet will be constrained to those dimensions; if percent units are specified, then the default value will be used instead). Note that any height assignment (e.g. `inlineStyle` or `styleClass`) on the `panelGridLayout` component must be omitted to avoid a competing assignment for how tall the component will be. `parent`—The dimensions are taken from the `inlineStyle` specified on the component; if not specified, then they are taken from the parent; if no values are specified on the parent, then they are taken from the skin. Default value: If the `oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS context-param` is set to `auto` in the project's `web.xml`, the default value for this attribute will be `auto`. Otherwise, the default value will be `parent`.
`Landmark`	A means of enhancing user accessibility as described by the Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA). Each option describes the intended role of a content area to assist in using the area as a navigational landmark on the page. Screen readers and other assistive technologies can make use of these landmarks in page navigation. Select an option to clarify the role or purpose of a content area's content: `none`—A content area that is not intended as a page navigational landmark `banner`—A content area containing mostly site-oriented content, rather than page-specific content, such as the company logo or the portal-wide search feature Typically, a banner appears at the top of a page and spans the page width. `complementary`—Supporting content, designed to be complementary to the main content at a similar level on the page, but still meaningful when separated from the main content, such as related documents `contentinfo`—A content area that contains information about the application, such as the copyright or privacy statement. `main`—The main content area of the page `navigation`—A collection of navigational elements (usually links) for navigating the page or related pages. `search`—A content area that contains one or more widgets used to define and execute a search.
`Short Desc`	Specifies `ALT` text for the component. `ALT` text appears as a tooltip when users roll their mouse pointers over the component.
`Show Component`	An option for hiding or showing the component on the page. Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.

See Also:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. If you need EL assistance, an application developer can provide an EL expression; see the "Expression Language Expressions" appendix in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

16.4 Setting gridRow Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

In a panelGridLayout component, one or more gridRow components describe the rows of a grid layout structure. Each row defines a height and margins. Each gridRow component uses one or more gridCell components to describe the cells for columns in that row of the grid layout structure.

Properties for the gridRow component include a Child Components tab with options for hiding, showing, and rearranging component content. For more information, see Section 14.3.5, "Working with Child Components."

Table 16-3 lists and describes the gridRow properties that appear on the Display Options tab in the Component Properties dialog.

Table 16-3 gridRow Display Options

Property	Description
`Height`	Specifies the row height. Valid values are: `auto`—The browser draws the components in this row then the `panelGridLayout` component uses the heights of these components to adjust the layout accordingly. A fixed CSS length, such as `px`, `em`—Constrains the height of the row to be exactly this size regardless of what components are in the row. A `%` length—Uses a normalized fraction of the remaining `panelGridLayout` space not already used by the other rows (this may resolve to zero). This option is only valid if the `panelGridLayout` has a fixed height or if it is being stretched by its parent component because otherwise it would be a circular definition for height.
`Margin Bottom`	Specifies the amount of space to be added below this row. The next row could provide a value through its `marginTop` value. Only fixed dimension units are supported, such as `px`, `em`, `pt` (not `auto` nor `%`). The margin candidates are resolved using the largest value of the first unit type encountered (conflicting unit types are ignored).
`Margin Top`	Specifies the amount of space to be added above this row. The previous row could provide a value through its `marginBottom` value. Only fixed dimension units are supported, such as `px`, `em`, `pt` (not `auto` nor `%`). The margin candidates are resolved using the largest value of the first unit type encountered (conflicting unit types will be ignored).
`Show Component`	An option for hiding or showing the component on the page. Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.

See Also:

16.5 Setting gridCell Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

Each gridRow component uses one or more gridCell components to describe the cells for columns in that row of the grid layout structure. Each cell defines width, margins, column span, row span, horizontal alignment, and vertical alignment.

Properties for the gridCell component include a Child Components tab with options for hiding, showing, and rearranging component content. For more information, see Section 14.3.5, "Working with Child Components."

Table 16-4 lists and describes the gridCell properties that appear on the Display Options tab in the Component Properties dialog.

Table 16-4 gridCell Display Options

Property	Description
`Column Span`	Specifies the number of columns wide this cell will consume (see `Width` for `columnSpan` impact).
`Halign`	A means of expressing the horizontal alignment of component content. Choose from: `start`—Align content horizontally, starting from the starting position. This is either left or right depending on whether the current context is localized for a left-reading or right-reading language. `center`—Align content horizontally, starting from the center. This option is not valid for cell content that uses unstable, percentage-based widths. `end`—Align content horizontally, starting from the ending position. This is either right or left depending on whether the current context is localized for a left-reading or right-reading language. `stretch`— if (1) the cell has a non-auto width, (2) the row has a non-auto height, (3) `Valign` is also set to `stretch`, and (4) there is only one child component within the `gridCell`, then the cell will attempt to anchor the child component to all sides of the cell's coordinates. Otherwise, the `start` behavior will be used instead. Note that not all components can be stretched; refer to each component's "geometry management" documentation for details.
`Landmark`	A means of enhancing user accessibility as described by the Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA). Each option describes the intended role of a content area to assist in using the area as a navigational landmark on the page. Screen readers and other assistive technologies can make use of these landmarks in page navigation. Select an option to clarify the role or purpose of a content area's content: `none`—A content area that is not intended as a page navigational landmark. `banner`—A content area containing mostly site-oriented content, rather than page-specific content, such as the company logo or the portal-wide search feature. Typically, a banner appears at the top of a page and spans the page width. `complementary`—Supporting content, designed to be complementary to the main content at a similar level on the page, but still meaningful when separated from the main content, such as related documents. `contentinfo`—A content area that contains information about the application, such as the copyright or privacy statement. `main`—The main content area of the page. `navigation`—A collection of navigational elements (usually links) for navigating the page or related pages. `search`—A content area that contains one or more widgets used to define and execute a search.
`Margin End`	Specifies the amount of space to be added after this cell's last column. Other cells in this cell's last column position could provide their own values through the `marginEnd` value. Other cells from the next column could provide their own values through their `marginStart` values. Only fixed dimension units are supported, such as `px`, `em`, `pt` (not `auto` nor `%`). The margin values are resolved using the largest value of the first unit type encountered (conflicting unit types will be ignored).
`Margin Start`	Specifies the amount of space to be added after this cell's first column. Other cells in this cell's first column position could provide their own values through the `marginStart` value. Other cells from the previous column could provide their own values through their `marginEnd` values. Only fixed dimension units are supported, such as `px`, `em`, `pt` (not `auto` nor `%`). The margin values are resolved using the largest value of the first unit type encountered (conflicting unit types will be ignored).
`Row Span`	Specifies the number of rows tall this cell will consume.
`Short Desc`	Specifies `ALT` text for the component. `ALT` text appears as a tooltip when users roll their mouse pointers over the component.
`Valign`	Specifies the vertical alignment for this cell's anchor point within the cell's coordinates. Choose from: `top`—Content is aligned with the top of the cell. `middle`—Content is aligned with the middle of the cell. `bottom`—Content is aligned with the bottom of the cell. `stretch`—If (1) the cell has a non-auto width, (2) the row has a non-auto height, (3) `Halign` is also set to `stretch`, and (4) if there is only one child component within the `gridCell`, then the cell will attempt to anchor the child component to all sides of the cell's coordinates. Otherwise, the `top` behavior is used instead. Note that not all components can be stretched; refer to each component's "geometry management" documentation for details.
`Width`	Specifies the width of the cell's column:. `dontCare`—Allows other cells in this column define the width. `auto`—The browser draw the components in this column then the `panelGridLayout` uses the widths of these components to adjust the layout accordingly. This option is not valid for cell content that uses unstable, percentage-based widths. A fixed CSS length, such as `px`, `em`—Constrains the width of this column to be exactly this size regardless of what components are in the column. A `%` length—Uses a normalized fraction of the remaining `panelGridLayout` space not already used by the other columns (this may resolve to zero). Other considerations: This value must be omitted (use the default value of `dontCare`) if `columnSpan` is not equal to `1`. The effective width will be the sum of the widths of the spanned columns. If more than 1 cell in the column defines a non-`dontCare` width ,then the width will be resolved using the largest value of the first unit type encountered (conflicting unit types will be ignored). If all cells in the column do not specify a `dontCare` value for width, the width is treated as if they were all using `auto`; the widest natural width value given by the browser will be used.
`Show Component`	An option for hiding or showing the component on the page. Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.

See Also:

16.6 Setting panelGroupLayout Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The panelGroupLayout component provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The component's Layout property determines the arrangement of child components.

Properties for the panelGroupLayout component include a Child Components tab with options for hiding, showing, and rearranging component content. For more information, see Section 14.3.5, "Working with Child Components."

Table 16-5 lists and describes the panelGroupLayout properties that appear on the Display Options tab in the Component Properties dialog.

Table 16-5 panelGroupLayout Display Options

Property	Description
`Halign`	A means of expressing the horizontal alignment of component content. Choose from: `start`—Align content horizontally, starting from the starting position. This is either left or right depending on whether the current context is localized for a left-reading or right-reading language. `center`—Align content horizontally, starting from the center. `end`—Align content horizontally, starting from the ending position. This is either right or left depending on whether the current context is localized for a left-reading or right-reading language. `left`—Align content horizontally, starting from the left. `right`—Align content horizontally, starting from the right.
`Landmark`	A means of enhancing user accessibility as described by the Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA). Each option describes the intended role of a content area to assist in using the area as a navigational landmark on the page. Screen readers and other assistive technologies can make use of these landmarks in page navigation. Select an option to clarify the role or purpose of a content area's content: `none`—A content area that is not intended as a page navigational landmark. `banner`—A content area containing mostly site-oriented content, rather than page-specific content, such as the company logo or the portal-wide search feature. Typically, a banner appears at the top of a page and spans the page width. `complementary`—Supporting content, designed to be complementary to the main content at a similar level on the page, but still meaningful when separated from the main content, such as related documents. `contentinfo`—A content area that contains information about the application, such as the copyright or privacy statement. `main`—The main content area of the page. `navigation`—A collection of navigational elements (usually links) for navigating the page or related pages. `search`—A content area that contains one or more widgets used to define and execute a search.
`Layout`	A means of specifying the orientation of component content. Choose from: `default`—Align content vertically. `horizontal`—Align content horizontally `vertical`—Align content vertically `scroll`—Align content vertically with a scrollbar The scrollbar is rendered when the height/width of component content exceeds the component height or width.
`Short Desc`	Specifies `ALT` text for the component. `ALT` text appears as a tooltip when users roll their mouse pointers over the component.
`Show Component`	An option for hiding or showing the component on the page. Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.
`Theme`	The component style theme to apply to the children of this component. Use this property to change the theme without causing associated skin changes. Application skins are the sources of the themes. Some skins may have no theme definitions. Enter one of: `dark` `medium` `light` No theme (`none`) is the default.
`Valign`	A means of expressing the vertical alignment of component content. Choose from: `middle`—Content is aligned with the middle of the parent component. `top`—Content is aligned with the top of the parent component. `bottom`—Content is aligned with the bottom of the parent component. `baseline`—Content is aligned with the baseline of the parent component.

See Also:

16.7 Setting panelStretchLayout Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The panelStretchLayout component provides a means of arranging content in defined areas on a page. This component is useful for enabling content to stretch when the browser is resized.

The panelStretchLayout component's defined areas are called facets (Figure 16-3).

Figure 16-3 Facets of a panelStretchLayout Component

Description of "Figure 16-3 Facets of a panelStretchLayout Component"

Note:

Figure 16-3 shows the facets when the language reading direction of the application is configured left-to-right. If instead the language direction is right-to-left, the start and end facets are switched.

Facets are controlled by the values you enter for their Display Options properties. When you set the height of the top and bottom facets, any contained components are stretched to fit the height. Similarly, when you set the width of the start and end facets, any components contained in those facets are stretched to that width. If no components are placed in a facet, then the facet does not take up any space.

Table 16-6 lists and describes the panelStretchLayout properties that appear on the Display Options tab in the Component Properties dialog.

Note:

All panelStretchLayout height and width facets take the value auto; however, using auto slows page performance.

Table 16-6 panelStretchLayout Display Options

Property	Description
`Bottom Height`	The height of the bottom facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on. Never express a Height value as a percentage. Because of differences between browsers and between layout containers, percentages may not work as you expect. If you want your component to take up 100% of a page, consider creating a page using the Stretch page style and adding the component to it.
`Bottom Landmark`	A means of enhancing user accessibility as described by the Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA). Each option describes the intended role of a content area to assist in using the area as a navigational landmark on the page. Screen readers and other assistive technologies can make use of these landmarks in page navigation. Select an option to clarify the role or purpose of the content area's content: `none`—A content area that is not intended as a page navigational landmark `banner`—A content area containing mostly site-oriented content, rather than page-specific content, such as the company logo or the portal-wide search feature Typically, a banner appears at the top of a page and spans the page width. `complementary`—Supporting content, designed to be complementary to the main content at a similar level on the page, but still meaningful when separated from the main content, such as related documents `contentinfo`—A content area that contains information about the application, such as the copyright or privacy statement. `main`—The main content area of the page `navigation`—A collection of navigational elements (usually links) for navigating the page or related pages. `search`—A content area that contains one or more widgets used to define and execute a search.
`Center Landmark`	See the description for `Bottom Landmark`.
`Dimensions From`	Specifies the source of the dimensions applied to the component: `auto`—Either `parent` or `children`, depending on the `panelStretchLayout` parent container. If the parent's `Layout` attribute is set to `stretch`, then `parent` is used; otherwise `children` is used. `children`—The dimensions are taken from the children (`topHeight` will still be honored so the contents of this facet will be constrained to those dimensions; if percent units are specified, then the default value will be used instead). Note that any height assignment (e.g. `inlineStyle` or `styleClass`) on the `panelStretchLayout` component must be omitted to avoid a competing assignment for how tall the component will be. `parent`—The dimensions are taken from the `inlineStyle` specified on the component; if not specified, then they are taken from the parent; if no values are specified on the parent, then they are taken from the skin. Default value: If the `oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS context-param` is set to `auto` in the project's `web.xml`, the default value for this attribute will be `auto`. Otherwise, the default value will be `parent`.
`End Landmark`	See the description for `Bottom Landmark`.
`End Width`	The width of the end facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on.
`Short Desc`	Specifies tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component.
`Show Component`	An option for hiding or showing the component on the page. Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.
`Start Landmark`	See the description for `Bottom Landmark`.
`Start Width`	The width of the start facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on.
`Theme`	The component style theme to apply to the children of this component. Use this property to change the theme without causing associated skin changes. Application skins are the sources of the themes. Some skins may have no themed definitions. Enter one of: `dark` `medium` `light` No theme (none) is the default.
`Top Height`	The height of the top facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on. Never express a Height value as a percentage. Because of differences between browsers and between layout containers, percentages may not work as you expect. If you want your component to take up 100% of a page, consider creating a page using the Stretch page style and adding the component to it.
`Top Landmark`	See the description for `Bottom Landmark`.

See Also:

16.8 Setting panelTabbed Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The panelTabbed layout component is the parent component of a tab or tab set. Its unique set of Display Options controls the behind-the-scenes method of tab creation, the source for the tabs dimensions, the tab's position, and the like.

Table 16-7 lists and describes Display Options associated with the panelTabbed layout component.

Table 16-7 panelTabbed Display Options

Property	Description
`Child Creation`	Specifies when tabs are created: `immediate`—Tabs are created as soon as the page is accessed. Use this setting for content to be used by all users every time they use this page. `lazy`—Tabs are created when the parent (`panelTabbed` component) is brought forward and are maintained in cache thereafter. This selection may enhance performance when content is fetched from cache. `lazyUncached`—Tabs are created when the parent (`panelTabbed` component) is likely to be brought forward and may be removed when the parent is not forward. Use this setting for data that can become stale.
`Content Delivery`	Specifies when tab content is rendered: `immediate`—All tab content is rendered as soon as the page is accessed. Use this setting for content to be used by all users every time they use this page. `lazyUncached`—Tab content is rendered when the tab is likely to be brought forward and may be removed when the tab is not forward. Use this setting for data that can become stale.
`Dimensions From`	Specifies the source of the dimensions applied to the component: `auto`—Either `parent` or `disclosedChild`, depending on the `panelTabbed` parent container. If the parent's `Layout` attribute is set to `stretch`, then `parent` is used; otherwise `disclosedChild` is used. `disclosedChild`—The dimension is taken from the currently active tab. `parent`—(default) The dimension is taken from any values specified on the component; if no values are specified, then they are taken from the parent; if no values are specified on the parent, then they are taken from the skin.
`Position`	The position of the tab portion of the `panelTabbed`: `above`—(default) Tabs are shown above the tab content area. `below`—Tabs are shown below the tab content area. `both`—Tabs are shown above and below the tab content area. In accessibility screen reader mode, the tab position is always `above`.
`Short Desc`	Specifies tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component.
`Show Component`	An option for hiding or showing the component on the page. Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.
`Tab Removal`	Specifies whether some, none, or all tabs can be removed: `none`—Tabs cannot be deleted from the tab set `all`—All tabs can be deleted from the tab set `allExceptLast`—All but one the last tab can be deleted from the tab set Note: The selection `allExceptLast` renders a Close icon on all except the last tab when users hover their mouse pointers over them. Additional coding is required on the `panelTabbed` component before the Close action can execute. Developers must write code to respond to `ItemEvent` with a listener attached to the `showDetailItem`'s `itemListener` attribute. For example: <af:panelTabbed tabRemoval="allExceptLast" id="pt1"> <af:showDetailItem itemListener="myBean.onRemove" id="sdi1"> … Write the deletion code in a Java bean named `myBean` with the method `onRemove`.

See Also:

For information about working with tabs, see Section 12.4.6, "Creating Layered Content Regions Using Tabs."

16.9 Setting showDetailFrame Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The showDetailFrame component renders a border, or chrome, around its child component along with a header that contains icons to enable users to perform some operations. These include a menu icon with options for moving the component, along with its content, to new positions on the page. Users can drag and drop showDetailFrame components from one panelCustomizable component to another on the page. Note that a showDetailFrame must be included inside a panelCustomizable component for it to be movable.

A showDetailFrame component enables the following actions:

Collapse and expand the component
Move content to different positions on the page
Rearrange task flows using options on the Actions menu
Edit and save text in a text editor.

The Display Options associated with showDetailFrame are common to many other types of components and are listed in Table 14-1, "Display Options Properties" with one exception: the showDetailFrame layout component does not expose the property Allow Child Selection. Refer to Table 14-1, "Display Options Properties" for recommendations related to Allow Resize on the showDetailFrame layout component.

Display Options for showDetailFrame are presented on two subtabs: Basic and Advanced (Figure 16-4).

Figure 16-4 Basic and Advanced Display Options

Description of "Figure 16-4 Basic and Advanced Display Options"

16.10 Setting sidebarItem Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The sidebarItem component is a child component of panelTabbed (see Section 16.8, "Setting panelTabbed Properties"). Unlike panelTabbed, which provides all of the properties associated with a tab set, sidebarItem provides all of the properties associated with a single tab.

Table 16-8 describes the sidebarItem properties that appear on the Display Options tab in the Component Properties dialog.

Table 16-8 sidebarItem Display Options

Property	Description
`Disclosed`	Indicates the current active tab; that is, the tab that is forward. This value is set by default depending on whether the selected tab is forward. Changes you make to this value have no effect.
`Icon`	The URL to an image. Use any Web-compatible image from any accessible location. That is, do not put in a path to an image on an external server that requires authentication. Enter a full URL or a URL that is relative to the application root. Use CSS formatting. For example, enter: url(http://www.abc.com/image.jpg)
`Inflexible Height`	The number of pixels the component will use when in a container that allocates size among multiple sibling items. If the component requires more than the set limit, its sibling components are pushed to overflow menus. The default is 100 pixels. Note: This attribute is valid only when the parent container is a `panelAccordion` component.
`Short Desc`	Specifies tooltip text for the component, The tooltip appears when users roll their mouse pointers over the component.
`Show Component`	An option for hiding or showing the component on the page: Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.
`Text`	The text to render on the tab. The default value, an EL expression, evaluates to `New Tab`.

See Also:

16.11 Setting spacer Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The spacer component provides a means of incorporating some blank space in pages so that the page appears less cluttered than it would if all the components were presented immediately adjacent to each other.

Table 16-9 lists and describes the spacer properties that appear on the Display Options tab in the Component Properties dialog.

Table 16-9 spacer Display Options

Property	Description
`Height`	Specifies the spacer height. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on. Never express a `Height` value as a percentage. Because of differences between browsers and between layout containers, percentages may not work as you expect.
`Short Desc`	Specifies tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component.
`Show Component`	An option for hiding or showing the component on the page: Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.
`Width`	Specifies spacer width. Use any standard CSS unit of measure, such as pt, px, pc, li, %, and so on.

See Also: