1. Building Portals with Oracle WebCenter Portal
  2. Working with Portal Pages
  3. Working with Layout Components

12 Working with Layout Components

Use layout components in Structure view of the page editor to fine-tune the design of a page template, system page, or task flow.

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.

Topics:

About Layout Components

Layout components can be used to fine-tune the design of the page template, system page, or task flow. They are not exposed in the resource catalog, but you can access them when you edit a page template, system page, or task flow in the page editor in Structure view . For more information, see About Structure View.

Figure 12-1 Structure View of Page Edit Mode

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

Table 12-1 lists and describes the layout components you will find 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.

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:

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.

Setting gridCell Component Properties

To set gridCell component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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.

  3. Click OK to your changes.
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 for Oracle WebCenter Portal.

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:

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.

Setting gridRow Component Properties

To set gridRow component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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.

  3. Click OK to your changes.
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

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:

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 for Oracle WebCenter Portal.

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:

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 15-1) to provide a powerful and concise way of defining a layout with the basic building blocks of panelGridLayout, gridRow, and gridCell.

Setting panelGridLayout Component Properties

To set panelGridLayout component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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.

  3. Click OK to your changes.
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

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:

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 for Oracle WebCenter Portal.

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:

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.

Setting panelGroupLayout Component Properties

To set panelGroupLayout component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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.

  3. Click OK to your changes.
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:

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 for Oracle WebCenter Portal.

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:

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

Setting panelStretchLayout Component Properties

To set panelStretchLayout component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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 for Oracle WebCenter Portal.

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

  3. Click OK to your changes.
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 for Oracle WebCenter Portal

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:

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.

Setting panelTabbed Component Properties

To set panelTabbed component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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.

  3. Click OK to your changes.
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:

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 for Oracle WebCenter Portal.

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:

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.

Setting showDetailFrame Component Properties

To set showDetailFrame component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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.

  3. Click OK to your changes.
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 follows
Description of "Figure 12-3 Basic and Advanced Display Options for showDetailFrame Around Movable Box Component"

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:

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.

Setting sidebarItem Component Properties

To set sidebarItem component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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.

  3. Click OK to your changes.
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:

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 for Oracle WebCenter Portal.

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:

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.

Setting spacer Component Properties

To set spacer component properties:

  1. Open the Component Properties dialog for the component, as described in Setting Component Properties in Structure View.
  2. 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.

  3. Click OK to your changes.
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

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:

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 for Oracle WebCenter Portal.