12 Working with Layout Components
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 follows](img/wcsug_pgcre8_sourceview.gif)
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 |
---|---|
|
In a |
|
In a |
|
Provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The |
|
Provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The |
|
Provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The |
|
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 |
|
The parent component of a tab set. For more information, see Working with the panelTabbed 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 For more information, see Working with the showDetailFrame Component. |
|
A child component of a tab set ( |
|
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:
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 |
---|---|
|
Specifies the number of columns wide this cell will consume (see |
|
A means of expressing the horizontal alignment of component content. Choose from:
|
|
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:
|
|
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 |
|
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 |
|
Specifies the number of rows tall this cell will consume. |
|
Specifies
|
|
Specifies the vertical alignment for this cell's anchor point within the cell's coordinates. Choose from:
|
|
Specifies the width of the cell's column:.
Other considerations:
|
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:
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 |
---|---|
|
Specifies the row height. Valid values are:
|
|
Specifies the amount of space to be added below this row. The next row could provide a value through its |
|
Specifies the amount of space to be added above this row. The previous row could provide a value through its |
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 16-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:
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 |
---|---|
|
Specifies the source of the dimensions applied to the component:
Default value: If the |
|
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:
|
|
A field for entering
|
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:
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 |
---|---|
|
A means of expressing the horizontal alignment of component content. Choose from:
|
|
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:
|
|
A means of specifying the orientation of component content. Choose from:
|
|
A field for entering
|
|
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:
No theme (none) is the default. |
|
A means of expressing the vertical alignment of component content. Choose from:
|
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 follows](img/wcsug_pgcre8_facets.gif)
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:
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 |
---|---|
|
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. |
|
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:
|
|
See the description for |
|
Specifies the source of the dimensions applied to the component:
Default value: If the |
|
See the description for |
|
The width of the end facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on. |
|
A field for entering tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component. |
|
See the description for |
|
The width of the start facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on. |
|
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:
No theme (none) is the default. |
|
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. |
|
See the description for |
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:
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 |
---|---|
|
Specifies when tabs are created:
|
|
Specifies when tab content is rendered:
|
|
Specifies the source of the dimensions applied to the component:
|
|
The position of the tab portion of the
In accessibility screen reader mode, the tab position is always |
|
A field for entering tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component. |
|
Specifies whether some, none, or all tabs can be removed:
|
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:
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 follows](img/wcsug_lay_mbdisplayopts.gif)
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:
sidebarItem Component Display Options
Table 12-8 describes the sidebarItem
properties in the Display Options dialog.
Table 12-8 sidebarItem Display Options
Property | Description |
---|---|
|
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. |
|
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) |
|
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 |
|
A field for entering tooltip text for the component, The tooltip appears when users roll their mouse pointers over the component. |
|
The text to render on the tab. The default value, an EL expression, evaluates to |
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:
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 |
---|---|
|
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. |
|
A field for entering tooltip text for the component. The tooltip appears when users roll their mouse pointers over the component. |
|
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.