12 Working with Layout Components

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:

Permissions

To perform the tasks in this chapter, you must be a portal manager or a portal member with the portal-level permission Basic Services: Edit Page Access, Structure, and Content (standard permissions) or permission to edit the asset for example, Page Templates, Task Flow Styles (Advanced Permissions).

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

12.1 About Layout Components

Some page layout components are not exposed for use in the resource catalog. They are configurable when you edit a page template, system page, or task flow in the page editor in Structure view (Figure 12-1). For more information, see About Structure View.

Figure 12-1 Structure View of Page Edit Mode

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

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

Table 12-1 Layout Components

Layout Component	Description
`gridCell`	In a `panelGridLayout` 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. For more information, see Working with the gridCell Component.
`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 Working with the gridRow Component.
`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 Working with the panelGridLayout Component.
`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 Working with the panelGridLayout Component.
`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 Working with the panelGroupLayout Component.
`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 Creating a Task Flow). For more information, see Working with the panelStretchLayout Component.
`panelTabbed`	The parent component of a tab set. For more information, see Working with the panelTabbed Component.
`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 Working with the showDetailFrame Component.
`sidebarItem`	A child component of a tab set (`panelTabbed`). For more information, see Working with the sidebarItem Component.
`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 Working with the spacer Component.

12.2 Working with the gridCell Component

This section provides an overview of the gridCell component and lists and describes its associated properties. It includes the following subsections:

12.2.1 About the gridCell Component

To add a gridRow component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

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.

12.2.2 Setting gridCell Component Properties

To set gridCell component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in gridCell Component Display Options.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
- Child Components properties provide options for hiding, showing, and rearranging component content.
Click OK to your changes.

12.2.2.1 gridCell Component Display Options

Table 12-2 lists and describes the gridCell properties in the Display Options dialog.

Table 12-2 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.

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 Expression Language Expressions in Developing WebCenter Portal Assets and Custom Components with Oracle JDeveloper.

12.3 Working with the gridRow Component

This section provides an overview of the gridRow component and lists and describes its associated properties. It includes the following subsections:

12.3.1 About the gridRow Component

To add a gridRow component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

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.

12.3.2 Setting gridRow Component Properties

To set gridRow component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in gridRow Component Display Options.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
- Child Components properties provide options for hiding, showing, and rearranging component content.
Click OK to your changes.

12.3.2.1 gridRow Component Display Options

Table 12-3 lists and describes the gridRow properties in the Display Options dialog.

Table 12-3 gridRow Display Options

Property Description

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).

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).

See Also:

12.4 Working with the panelGridLayout Component

This section provides an overview of the panelGridLayout component and lists and describes its associated properties. It includes the following subsections:

12.4.1 About the panelGridLayout Component

To add a panelGridLayout component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

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 newest 11.1.1.8.3 out-of-the-box page templates (see Table 16-1) to provide a powerful and concise way of defining a layout with the basic building blocks of panelGridLayout, gridRow, and gridCell.

12.4.2 Setting panelGridLayout Component Properties

To set panelGridLayout component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in panelGridLayout Component Display Options.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
Click OK to your changes.

12.4.2.1 panelGridLayout Component Display Options

Table 12-4 lists and describes the panelGridLayout properties in the Display Options dialog.

Table 12-4 panelGridLayout Display Options

Property Description

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`	A field for entering `ALT` text for the component. `ALT` text appears as a tooltip when users roll their mouse pointers over the component.

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

A field for entering ALT text for the component.

ALT text appears as a tooltip when users roll their mouse pointers over the component.

See Also:

12.5 Working with the panelGroupLayout Component

This section provides an overview of the panelGroupLayout component and lists and describes its associated properties. It includes the following subsections:

12.5.1 About the panelGroupLayout Component

To add a panelGroupLayout component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

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.

12.5.2 Setting panelGroupLayout Component Properties

To set panelGroupLayout component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in panelGroupLayout Component Display Options.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
- Child Components properties provide options for hiding, showing, and rearranging component content.
Click OK to your changes.

12.5.2.1 panelGroupLayout Component Display Options

Table 12-5 lists and describes the panelGroupLayout properties in the Display Options dialog.

Table 12-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`	A field for entering `ALT` text for the component. `ALT` text appears as a tooltip when users roll their mouse pointers over the component.
`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:

12.6 Working with the panelStretchLayout Component

This section provides an overview of the panelStretchLayout component and lists and describes its associated properties. It includes the following subsections:

12.6.1 About the panelStretchLayout Component

To add a panelStretchLayout component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

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 12-2).

Figure 12-2 Facets of a panelStretchLayout Component

Description of "Figure 12-2 Facets of a panelStretchLayout Component"

Note:

Figure 12-2 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.

12.6.2 Setting panelStretchLayout Component Properties

To set panelStretchLayout component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in panelStretchLayout Component Display Options.
  
  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 Expression Language Expressions in Developing WebCenter Portal Assets and Custom Components with Oracle JDeveloper.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
Click OK to your changes.

12.6.2.1 panelStretchLayout Component Display Options

Table 12-6 lists and describes the panelStretchLayout properties in the Display Options dialog.

Note:

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

Table 12-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 do 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`	A field for entering tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component.
`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 do 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:

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 . Expression Language Expressions in Developing WebCenter Portal Assets and Custom Components with Oracle JDeveloper

12.7 Working with the panelTabbed Component

This section provides an overview of the panelTabbed component and lists and describes its associated properties. It includes the following subsections:

12.7.1 About the panelTabbed Component

To add a panelTabbed component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

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.

12.7.2 Setting panelTabbed Component Properties

To set panelTabbed component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in panelTabbed Component Display Options.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
Click OK to your changes.

12.7.2.1 panelTabbed Component Display Options

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

Table 12-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`	A field for entering tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component.
`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:

12.8 Working with the showDetailFrame Component

This section provides an overview of the showDetailFrame component and lists and describes its associated properties. It includes the following subsections:

12.8.1 About the showDetailFrame Component

To add a showDetailFrame component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

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.

12.8.2 Setting showDetailFrame Component Properties

To set showDetailFrame component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in showDetailFrame Component Display Options.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
Click OK to your changes.

12.8.2.1 showDetailFrame Component Display Options

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

Though it is not obvious in the page editor, the showDetailFrame component is usually wrapped around task flows. Consequently, the Display Options dialog for task flows, and any other component wrapped in a showDetailFrame, share the same Display Options properties.

When you display the properties of a showDetailFrame component in Structure view (Setting Component Properties in Structure View). the Display Options are presented on two subtabs: Basic and Advanced (Figure 12-3).

Figure 12-3 Basic and Advanced Display Options for showDetailFrame Around Movable Box Component

Description of "Figure 12-3 Basic and Advanced Display Options for showDetailFrame Around Movable Box Component"

12.9 Working with the sidebarItem Component

This section provides an overview of the sidebarItem component and lists and describes its associated properties. It includes the following subsections:

12.9.1 About the sidebarItem Component

To add a sidebarItem component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

The sidebarItem component is a child component of panelTabbed (see Working with the panelTabbed Component). Unlike panelTabbed, which provides all of the properties associated with a tab set, sidebarItem provides all of the properties associated with a single tab.

12.9.2 Setting sidebarItem Component Properties

To set sidebarItem component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in sidebarItem Component Display Options.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
Click OK to your changes.

12.9.2.1 sidebarItem Component Display Options

Table 12-8 describes the sidebarItem properties in the Display Options dialog.

Table 12-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`	A field for entering tooltip text for the component, The tooltip appears when users roll their mouse pointers over the component.
`Text`	The text to render on the tab. The default value, an EL expression, evaluates to `New Tab`.

See Also:

12.10 Working with the spacer Component

This section provides an overview of the spacer component and lists and describes its associated properties. It includes the following subsections:

12.10.1 About the spacer Component

To add a spacer component to a page template, system page, or task flow in Structure view in the page editor, see Adding a Component in Structure View.

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.

12.10.2 Setting spacer Component Properties

To set spacer component properties:

Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
On each tab of the Component Properties dialog, enter properties as required:
- Display Options properties are described in spacer Component Display Options.
- Style properties are common to many other components, as described in Table 10-2. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the portal skin.
Click OK to your changes.

12.10.2.1 spacer Component Display Options

Table 12-9 lists and describes the spacer properties in the Display Options dialog.

Table 12-9 spacer Display Options

Property Description

Property	Description
`Height`	A field for specifying 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 do not work as you expect.
`Short Desc`	A field for entering tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component.
`Width`	A field for specifying spacer width. Use any standard CSS unit of measure, such as pt, px, pc, li, %, and so on.

Height

A field for specifying 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 do not work as you expect.

Short Desc

A field for entering tooltip text for the component.

The tooltip appears when users roll their mouse pointers over the component.

Width

A field for specifying spacer width.

Use any standard CSS unit of measure, such as pt, px, pc, li, %, and so on.

See Also: