B Oracle Composer Component Properties and Files

This appendix provides reference information about Oracle Composer-specific tags, configuration files, and style properties. This information is useful while performing the tasks described in Chapter 19, "Enabling Runtime Editing of Pages Using Oracle Composer" and Chapter 20, "Extending Runtime Editing Capabilities Using Oracle Composer."

This appendix contains the following sections:

Section B.1, "Oracle Composer Component Properties"
Section B.2, "Oracle Composer-Specific Files and Configurations"
Section B.3, "Oracle Composer Default Add-Ons and Property Panels"
Section B.4, "Oracle Composer Help Topic IDs"
Section B.5, "Oracle Composer Components Style-Specific Properties"
Section B.6, "Customizable Components (HTML) Properties"

B.1 Oracle Composer Component Properties

This section is a quick reference for all Oracle Composer tags. When you add Oracle Composer components to a page, default values are assigned to certain attributes. You can change these default values and define values for the remaining attributes in JDeveloper.

For information about adding these components to the page, see Section 19.1, "Designing Editable Pages Using Oracle Composer Components."

Note:

The Property Inspector in JDeveloper displays certain extended metadata attributes under the Customization Attributes category. You can use these properties to provide additional metadata information. For more information, see the section "Extended Metadata Properties" in Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

This section contains the following subsections:

Section B.1.1, "Page Customizable"
Section B.1.2, "Change Mode Link and Change Mode Button"
Section B.1.3, "Layout Customizable Component"
Section B.1.4, "Panel Customizable Component"
Section B.1.5, "Show Detail Frame Component"
Section B.1.6, "Custom Action"
Section B.1.7, "Show Property"

B.1.1 Page Customizable

Use the Page Customizable component to enable page editing at runtime. The Page Customizable component denotes the customizable part of a page and shows the Oracle Composer toolbar in Edit mode at runtime. When you enclose components within a Page Customizable component, Oracle Composer is enabled in the application page at run time, allowing the user to customize and edit the components.

In large applications, where you want to enable runtime page editing on multiple pages, you can include the Page Customizable component in the page template, somewhere in the top of the hierarchy. This way, all pages created using the template are editable at runtime.

Geometry Management

View mode: The Page Customizable component can be stretched by a parent layout component that stretches its children, for example, a Panel Stretch Layout or Panel Splitter component. If the Page Customizable component is stretched, it in turn stretches its child component to fill the space available to it. However, if the Page Customizable component is not stretched, its size is determined by the child component.

Edit mode: The Page Customizable component stretches its child component to fill the space available to it.

Attributes

Table B-1 describes the attributes of a Page Customizable component.

Table B-1 Attributes of a Page Customizable Component

Attribute	Type	Supports EL	Description
Common Attributes
id	String	No	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`.
Appearance Attributes
sourceViewPosition	String	Yes	The position of the Source view pane displaying components in a tree structure. Valid values are `bottom`, `end`, `start`, and `top`. Default value is `top`. Alternatively, the Source Position submenu on the View menu on the Oracle Composer toolbar provides options to set this attribute at runtime. For more information, see the section, Section 17.5, "Editing Capabilities in Source View in Page Edit Mode.".
sourceViewSize	String	Yes	The height or width of the Source view pane in pixels. Use this to specify height if the `sourceViewPosition` is set to `top` or `bottom`, or to specify width if `sourceViewPosition` is set to `start` or `end`. Since the default for `sourceViewPosition` is `top`, the pane has a default height of `200` pixels. Alternatively, the resize handler on the edge of the Source view pane enables users to alter the height or width of the pane at runtime.
toolbarLayout	String	Yes	The elements to be displayed on the Oracle Composer toolbar. This attribute can take a space-separated list of elements. The built in strings the component recognizes are `message`, `stretch`, `statusindicator`, `newline`, `menu`, `addonpanels`, `stretch`, `help`, and `button`. For more information about using this attribute, see Section 20.10, "Customizing the Oracle Composer Toolbar."
view	String	Yes	The default view in which to open a page in Oracle Composer. Available options are `design` and `source`. Default value is `design`. For more information, see Section 21.7, "Configuring an Application Page to Display in Source View by Default."
Style Attributes
styleClass	String	Yes	The CSS style class to use for this component. The style class can be defined in your JSPX page or in a skinning CSS file, for example.
inlineStyle	String	Yes	The CSS styles to use for this component. This is intended for basic style changes. The `inlineStyle` is a set of CSS styles that are applied to the root DOM element of the component. If the `inlineStyle`'s CSS properties do not affect the DOM element you want affected, then you must create a skin and use the skinning keys which are meant to target particular DOM elements, like `::label` or `::icon-style`.
Advanced Attributes
binding	`oracle.adf.view.page.editor.component.PageCustomizable`	Supports only EL	An EL reference that stores the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
sourceViewNodeAction	String	Yes	The name of the JPSX file to be called if you want to display custom actions against task flows in the component navigator in Oracle Composer Source view. The `sourceViewNodeAction` attribute can take the name of a JSPX file or an EL value that evaluates to a JSPX file name. For information about using this attribute, see Section 21.4, "Enabling Custom Actions that Display on Task Flows in the Component Navigator."
allowLabel	Boolean	Yes	Specifies whether label creation must be enabled in the Customization Manager. When `allowLabel` is set to `true`, a Save and Label button is displayed on the Oracle Composer toolbar. For more information, see Section 17.4.14, "Manage Application Customizations." This attribute is relevant only if you have configured sandbox support in your application.
catalog	String	Yes	The catalog to be used as the default one for the application page. Provide the catalog definition file name. For more information about using multiple resource catalogs, see Chapter 15, "Creating and Managing Resource Catalogs."

Supported Facets

The Page Customizable component provides an editor facet, which is prepopulated with a Page Editor Panel component. To ensure that Oracle Composer works properly, the editor facet must contain the Page Editor Panel component.

B.1.2 Change Mode Link and Change Mode Button

Use the Change Mode Button or Change Mode Link to enable switching to Edit mode of the page at runtime.

The Change Mode Link and Change Mode Button components share a common set of attributes. Table B-2 describes the attributes of a Change Mode Link or Change Mode Button component.

Table B-2 Attributes of a Change Mode Link or Change Mode Button Component

Attribute	Type	Supports EL?	Description
Common Attributes
id	String	Yes	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`. In a secured application, to enable the Edit link or button only for selected users based on specific criteria, you can specify an EL value for the `rendered` attribute. Note: In a secured application, it is recommended that you check all users' privileges and enable the Edit link or button only for privileged users. Unauthenticated users who stumble into page Edit mode can change component properties.
Behavior Attributes
immediate	Boolean	Yes	Specifies whether data validation - client-side or server-side - must be skipped when events are generated by this component. When `immediate` is `true`, the command's action and ActionListeners, including the default ActionListener provided by the JavaServer Faces implementation, is executed during the Apply Request Values phase of the request processing lifecycle, rather than waiting until the Invoke Application phase. Because validation runs during Process Validators (after Apply Request Values, but before Invoke Application), setting `immediate` to `true` skips validation.
Advanced Attributes
binding	`oracle.adf.view.page.editor.component.ChangeModeLink` or `oracle.adf.view.page.editor.component.ChangeModeButton`	Supports only EL	An EL reference that stores the component instance in a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.

If you do not want to use the Change Mode Link or Change Mode Button component, you can add your own button or link component and use the ChangeModeLink or ChangeModeButton API to enable the switching of the page mode.

Disabling Runtime Editing in Your Application Pages

To disable runtime editing of pages, you can revoke Edit privileges for users, or delete the Change Mode Link or Change Mode Button component from the page so that the user cannot navigate to the Edit mode of the page.

B.1.3 Layout Customizable Component

The Layout Customizable component applies a predefined layout to its child components. It is a container component that enables end users to lay out its child components in several predefined ways. Use the Layout Customizable component only to enable changing of the page layout at runtime. If you just want container components in which to layout components, but do not want to enable runtime layout changes, then it is recommended that you use ADF Faces layout components like Panel Stretch Layout and Panel Group Layout. It is recommended that you have just one Layout Customizable on the page.

A Layout Customizable component contains a direct child Panel Customizable component and two facets with Panel Customizable components by default to enable users to add content inside them at runtime. However, you can add any components inside the Layout Customizable component and its facets. The content in the three Panel Customizable components can be placed in different ways using predefined layouts. For more information, see the section, "Predefined Layout Types".

Table B-3 describes the attributes of a Layout Customizable component.

Table B-3 Attributes of the Layout Customizable Component

Attribute	Type	Supports EL?	Description
Common Attributes
id	String	No	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`. The rendering of a component can also be defined at runtime using the Show Component and Hide Component options.
type	String	Yes	Specifies the layout to be used for the page. You can choose from a list of eight predefined layouts. For more information, see Table B-5. Default value is `threeColumn`. You can define customization restrictions on a `Layout Customizable` component. Specifically, if you place a restriction on the `type` attribute, then layout changer options are shown as disabled and users cannot use them to change the page layout. For more information, see Chapter 23, "Modifying Default Security Behavior of Oracle Composer Components."
Appearance Attributes
text	String	Yes	Specifies the text to be displayed for the Change Layout menu. Use the `text` attribute to provide a descriptive label for the `Layout Customizable` component so that the component is clearly visible on the page at runtime. For example: `text="Change Layout"`
accessKey	Char	Yes	A character used to gain quick access to this button. For accessibility reasons, this functionality is not supported in screen reader mode. If the same access key appears in multiple input fields in the same page of output, the rendering user agent cycles among the elements accessed by the similar keys. Note that user agents are inconsistent about dealing with two links having same access key, and so the cycling behavior is dependent on what the user agent provides. This attribute is sometimes referred to as the "mnemonic". The character specified by this attribute must exist in the `Text` attribute of this button instance. If it does not, the user receives no visual indication of the existence of the `accessKey`. The easiest, and most convenient way to specify both the text and the mnemonic together is to use `textAndAccessKey`. Note that the `accessKey` is triggered by browser-specific and platform-specific modifier keys. It even has browser-specific meaning. For example, Internet Explorer 7.0 sets focus when you press Alt+<accessKey>. Firefox 2.0 on some operating systems sets focus when you press Alt+Shift+<accessKey>. Firefox 2.0 on other operating systems set focus when you press Control+<accessKey>. Refer to your browser's documentation for how it treats accessKey.
showIcon	Boolean	Yes	Specifies whether the default Change Layout icon is visible or not. The default value is `true`.
showLayoutChanger	Boolean	Yes	Specifies whether the Change Layout icon or text must be displayed. The default value is `true`. When set to `true`, the runtime behavior of the layout changer is as follows: Displayed in View mode.Displayed in Edit mode. It is always displayed in Edit mode, even if the value of the `showLayoutChanger` attribute is `false`. If there is a security or MDS restriction on the Layout Customizable component, then the layout changer is not displayed in View or Edit modes.
showTypes	String	Yes	Specifies the names of predefined layouts that must be displayed in the layout changer. Use this attribute to control the layout options displayed to users. You can provide a space-separated list of layout types. By default, all eight layouts are displayed when a user clicks the Change Layout icon or link.
shortDesc	String	Yes	The short description of the component. This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent, for example, Firefox 2 truncates long tooltips. For form components, the `shortDesc` is displayed in a note window.
Style Attributes
styleClass	String	Yes	A CSS style class to use for this component. The style class can be defined in your JSPX page or in a skinning CSS file, for example.
inlineStyle	String	Yes	The CSS styles to use for this component. This is intended for basic style changes. The `inlineStyle` is a set of CSS styles that are applied to the root DOM element of the component. If the `inlineStyle`'s CSS properties do not affect the DOM element you want affected, then you must create a skin and use the skinning keys which are meant to target particular DOM elements, like `::label` or `::icon-style`.
Behavior Attributes
binding	`oracle.adf.view.page.editor.component.LayoutCustomizable`	Supports only EL	An EL reference that stores the component instance in a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean. For example: binding="#{yourManagedBean.Binding}"

Supported Facets

Table B-4 describes the facets provided for a Layout Customizable component.

Table B-4 Facets of the Layout Customizable Component

Name	Description
contentA	Prepopulated with a `Panel Customizable` component. This `Panel Customizable` contains content to be rendered in area A in the layouts shown in Table B-5.
contentB	Prepopulated with a `Panel Customizable` component. This `Panel Customizable` contains content to be rendered in area B in the layouts shown in Table B-5.
facetSeparator	Content to be rendered once between each facet.
separator	Content to be rendered once between each of the other children.

Predefined Layout Types

When you add a Layout Customizable component to the page, three child Panel Cutsomizable components are added by default; one direct child and two Panel Customizables in the two facets. However, you can replace the child Panel Customizable components with any container components of your choice. When you select the layout type, the components in these Panel Customizables are arranged according to the layout type chosen.

Table B-5 describes the eight layouts that you can apply to your page or an area of the page at design time. To easily describe how components are laid out, let us assume the following:

The child Panel Customizable of contentA facet is called A.
The child Panel Customizable of contentB facet is called B.
The primary Panel Customizable, which is a direct child of the Layout Customizable, is called C.

Table B-5 Values for Type Attribute of Layout Customizable

Layout Type	Image Showing Content Arrangement
oneColumn	Note: In a `oneColumn` layout, `A` and `B` are rendered only if they contain child components.
threeColumn
threeColumnNarrow
twoColumn
twoColumnBottom
twoColumnNarrowLeft
twoColumnNarrowRight
twoColumnTop

B.1.4 Panel Customizable Component

Use the Panel Customizable component as a container for page content that can be customized at runtime. You can add content inside a Panel Customizable component at runtime using Oracle Composer's Resource Catalog. When you add child Show Detail Frame components inside a Panel Customizable, the Show Detail Frame components provide runtime customization options for arranging or deleting components on the page.

Use this component only to perform runtime customizations on child components. If you just want a container to arrange components, then it is recommended that you use an ADF Faces container like Panel Group Layout.

Geometry Management

The Panel Customizable component can be stretched by a parent layout component that stretches its children, for example, a Panel Stretch Layout or Panel Splitter component. By setting the layout attribute on the Panel Customizable component to stretch, the child component can be stretched to the size of the Panel Customizable.

Table B-6 describes the attributes of a Panel Customizable component.

Table B-6 Attributes of a Panel Customizable Component

Attribute	Type	Supports EL?	Description
Common Attributes
id	String	No	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`. The rendering of a component can also be defined at runtime using the Show Component and Hide Component options.
halign	String	Yes	Specifies the horizontal alignment of child components. You can set horizontal alignment on child components only if the `Panel Customizable` component has a horizontal or vertical layout. Available values are `center`, `end`, `left`, `right`, and `start`. Default value is `start`.
valign	String	Yes	Specifies the vertical alignment of child components. You can set vertical alignment on child components only if the `Panel Customizable` component has a horizontal layout. Available values are `baseline`, `bottom`, `middle`, and `top`. Default value is `top`.
shortDesc	String	Yes	Specifies a short description of the component. This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent. For example, Firefox 2 truncates long tooltips.
layout	String	Yes	Specifies how the children of the `Panel Customizable` must be laid out. Available options are `horizontal`, `vertical`, `scroll`, `stretch`, and `auto`. The default value is `vertical`. Depending on the value of the `layout` attribute, child components are laid out as follows: If you select `vertical`, then the child components are displayed one below the other and can be moved either up or down within the layout. If you select `horizontal`, then the child components are displayed adjacent to each other and can be moved either to the left or right within the layout. If you select `scroll`, then the child components are displayed one below the other, with scroll bars displayed if content overflows. If you select `stretch`, then the first child component is stretched to fill up available space in the `Panel Customizable` component. Subsequent child components are ignored. However, they are not removed from the page. The Add icons for adding new `Panel Customizable` components adjacent to the selected one are not enabled if you set `layout` to `stretch`. If you select `auto`, the child component is stretched only if the `Panel Customizable` is stretched by its parent. If not, the content scrolls.
Style Attributes
styleClass	String	Yes	A CSS style class to use for this component. The style class can be defined in your JSPX page or in a skinning CSS file, for example.
inlineStyle	String	Yes	The CSS styles to use for this component. This is intended for basic style changes. The `inlineStyle` is a set of CSS styles that are applied to the root DOM element of the component. If the `inlineStyle` attribute's CSS properties do not affect the DOM element you want affected, then you must create a skin and use the skinning keys which are meant to target particular DOM elements, like `::label` or `::icon-style`.
Behavior Attributes
allowAction	Boolean	Yes	Determines whether this component allows addition of child components, dragging and dropping `Show Detail Frame` components inside and from it, and rearranging child components at runtime. It also determines whether the Add Box icons (that enable users to add Box components adjacent to the component) must be rendered on the component. Available values are `none` and `all`. The default value is `all`. Note: You can also set this attribute while defining component security in the application's `adf-config.xml` file. For more information, see Section 23.5, "Applying Action-Level Restrictions on Panel Customizable and Show Detail Component Actions."
showEditAction	Boolean	Yes	While in Edit mode, in Design view, renders an Edit icon on the `Panel Customizable` header that enables users to edit component properties at runtime. Available values are `true` and `false`. Default value is `true`. This is relevant only in an Oracle Composer-enabled page, that is, if the `Panel Customizable` component is nested within a `Page Customizable` component.
showSplitAction	Boolean	Yes	In Design view of a page in Edit mode, renders the Add Box icons on the `Panel Customizable` header that enable users to add Box components above, below, to the left, or right of the selected component. Available values are `true` and `false`. Default value is `true`. This is relevant only in an Oracle Composer-enabled page, that is, if the `Panel Customizable` component is nested within a `Page Customizable` component. However, the Add Box icons are not displayed on the root `Panel Customizable` component. Although the default value for this attribute is `true`, the Add Box icons are not displayed on a component that is stretched.
showTabAction	Boolean	Yes	In Design view of a page in Edit mode, renders the Add a Tab Set or a Tab icon on the `Panel Customizable` header that enables users to add a tabs to the page. Available values are `true` and `false`. Default value is `false`. This is relevant only in an Oracle Composer-enabled page, that is, if the `Panel Customizable` component is nested within a `Page Customizable` component.
Advanced Attributes
binding	`oracle.adf.view.page.editor.component.PanelCustomizable`	Supports only EL	An EL reference that stores the component instance in a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.

Supported Facets

The Panel Customizable component supports a separator facet, which can be used to render content once between each of its child components.

Disabling the Edit Option on a Panel Customizable Component

When you switch to the Edit mode of a page at runtime, in Design view you will notice an Edit icon on all Panel Customizable or Box components that can be edited. To disable property editing on a specific Panel Customizable or Box component in Design view, you must set the showEditAction attribute on the component to false at design time. The Edit icon is no longer displayed on the component in Design view. However, users can still select such a component in Source view and edit its properties.

B.1.5 Show Detail Frame Component

Add Show Detail Frame components inside Panel Customizable components to enable runtime customizations like move, minimize, restore, and delete of child components. You can move Show Detail Frame components only if they are added inside a Panel Customizable component.

Geometry Management

A Show Detail Frame component can be stretched by a parent layout component that stretches its children, for example, Panel Customizable.

A Show Detail Frame component stretches its child component to fill the height and width available to it. It is recommended that you add only one child component inside a Show Detail Frame component. However, if you have more than one child component, the first child component is stretched to the height and width of the Show Detail Frame's content area and subsequent child components are ignored.

The resize handler at the lower right corner of a Show Detail Frame enables you to resize the component vertically. From then on, the Show Detail Frame cannot be stretched by its parent.

Table B-7 describes the attributes of a Show Detail Frame component.

Table B-7 Attributes of a Show Detail Frame Component

Attribute	Type	Supports EL?	Description
Common Attributes
id	String	No	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`. The rendering of a component can also be defined at runtime using the Show Component and Hide Component options.
text	String	Yes	A title for the `Show Detail Frame` component. You can change the style of this text using the `headerStyle` attribute.
icon	String	Yes	If you decide to add an icon on the header of the `Show Detail Frame` component, then this specifies the URI for the image to be used. For example: icon="http://source-pc/images/accessability.gif" Note: An image that is stored at the document root does not require a full path. For example: icon="detail.gif"
Appearance Attributes
shortDesc	String	Yes	The short description of the component. This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent, for example, Firefox 2 truncates long tooltips. For form components, the `shortDesc` is displayed in a note window.
background	String	Yes	Working with the skin CSS, provides a means of applying a different look and feel for this `Show Detail Frame` instance. Available values are `light`, `medium`, and `dark`. The default value is `medium`.
displayHeader	Boolean	Yes	Indicates whether the header of the `Show Detail Frame` is displayed. The default value is `true`. If you choose to set `displayHeader` to `false` and if you have exposed some actions on the component, then a toolbar is displayed when you move the mouse over the component area. The toolbar contains a drop down icon, which displays a menu of available options. This toolbar displays only in Edit mode, if there are actions available on the component.
displayShadow	Boolean	Yes	Specifies whether a shadow is cast by the `Show Detail Frame` component. The default value is `false`.
expansionMode	String	Yes	The default state of the `Show Detail Frame`. Available values are `minimized` and `normal`. The default display mode is `normal`.
Actions Attributes
displayActions	String	Yes	Specifies when seeded interactions are displayed. Available options are `onHover` and `always`. The default is `always`.
inheritGlobalActions	Boolean	Yes	This attribute is of significance if you add child custom action components, and the attribute specifies whether the global `action` value of a `custom action` must override the local value. The default value is `false`. For information about global custom actions, see Section 21.3.2.2, "Defining Custom Actions at the Global Level."
showMoveAction	String	Yes	Specifies whether the Move action is displayed in the Actions menu. Available values are `menu` and `none`. The default value is `menu`.
showRemoveAction	String	Yes	Renders a Remove icon on the `Show Detail Frame` header. Clicking this icon removes the component from the page. Available values are `chrome` and `none`. The default value is `none`. Note: In page Edit mode, the Remove icon appears regardless of this setting, provided other restrictions have not been applied.
showResizer	String	Yes	Specifies whether a resize handle is displayed on the lower right corner of the `Show Detail Frame`. You can alter only the height of a `Show Detail Frame` while resizing it. Available values are `never` and `always`. The default value is `always`.
showMinimizeAction	String	Yes	Specifies whether the minimize action is displayed on the header. Available values are `chrome` and `none`. The default is `chrome`.
showEditAction	Boolean	Yes	While in Edit mode, in Design view, renders an Edit icon on the `Show Detail Frame` header that enables you to edit component properties at runtime. Default value is `true`. This is relevant only in an Oracle Composer-enabled page, that is, if the `Show Detail Frame` component is nested within a `Page Customizable` component.
Style Attributes
contentStyle	String	Yes	The CSS style to apply to the `Show Detail Frame` content area. Manually enter any style in compliance with CSS version 2.0 or later. Th CSS styles in this attribute are commonly used to define the height and background color of the `Show Detail Frame`. For example, `height:200px;` `background-color:green;` Note: If the `Show Detail Frame` component is nested inside a `Panel Customizable` component with a horizontal layout, you must specify a width for the `Show Detail Frame` component to ensure that it is rendered in page View mode.
styleClass	String	Yes	The CSS style class to use for this component. The style class can be defined in your JSPX page or in a skinning CSS file, for example.
inlineStyle	String	Yes	The CSS styles to use for this component. This is intended for basic style changes. The `inlineStyle` is a set of CSS styles that are applied to the root DOM element of the component. If the `inlineStyle`'s CSS properties do not affect the DOM element you want affected, then you must create a skin and use the skinning keys which are meant to target particular DOM elements, like `::label` or `::icon-style`.
headerStyle	String	Yes	The CSS style to apply to the `Show Detail Frame` title that is displayed on the header. Manually enter any style in compliance with CSS version 2.0 or later. Th CSS styles in this attribute are commonly used to define the font, size, and color of the title text.
Behavior Attributes
partialTriggers	String	Yes	The IDs of the components that should trigger a partial update. This component listens on the trigger components. If a trigger component receives an event that causes it to update in some way, this component requests to be updated too. Identifiers are relative to the source component (this component), and must account for NamingContainers. If your component is inside of a naming container, you can use a single colon to start the search from the root of the page, or multiple colons to move up through the NamingContainers - "`::`" pop out of the component's naming container (or itself if the component is a naming container) and begin the search from there, "`:::`" pop out of two naming containers (including itself if the component is a naming container) and begin the search from there.
disclosureListener	`javax.el.MethodExpression`	Yes	A method reference to a disclosure listener. A disclosure event is fired when the user expands or collapses the `Show Detail Frame` component.
stretchContent	String	Yes	Specifies whether the `Show Detail Frame` stretches its child component. Available options are `true`, `false`, and `auto`. The default value is `true`. You can use the `stretchContent` attribute to stretch a child component that supports being stretched.For example, container components like `Panel Form Layout`, `Panel Customizable`, and `Show Detail Item` provide the capability to be stretched. If you select `true`, then the child component is stretched to the height and width of the `Show Detail Frame`'s content area. The default height of the `Show Detail Frame` is 200px. The height of the `Show Detail Frame` is defined using the `ContentStyle` attribute. If you select `auto`, the child component is stretched only if the `Show Detail Frame` is wrapped inside a component that stretches it. If not, `stretchContent` is set to `false`.
Advanced Attributes
binding	`oracle.adf.view.page.editor.component.ShowDetailFrame`	Supports only EL	An EL reference that stores the component instance in a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
attributeChangeListener	`javax.el.MethodExpression`	Yes	A method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change event might include the width of a column that supported client-side resizing.
selectChild	String	Yes	Specifies whether runtime selection and customization are enabled on child components. This is relevant only in an Oracle Composer-enabled page, that is, if the `Show Detail Frame` component is nested within a `Page Customizable` component. Default value is `yes`. However, when you add a task flow as a child of the `Show Detail Frame` component, this attribute defaults to `no`. If you select `yes`, then child components can be selected and customized at runtime.
Other Attributes
helpTopicID	String	Yes	Specifies a Help topic ID that is used to link to a custom Help topic from the component. To link to a Help topic from your `Show Detail Frame` component instance, you can either link to an HTML file that is stored directly in your application directory, or to a Help topic that is part of a JAR file.

Supported Facets

Table B-8 describes the facets available on a Show Detail Frame component.

Table B-8 Show Detail Frame Facets

Name	Description
titleBarAction	Used if an action is to be associated with title of the `Show Detail Frame` component. The component specified by the facet is rendered in place of the `Show Detail Frame`'s `text` attribute.
additionalActions	Used if some additional actions are to be added to the Actions menu available on the `Show Detail Frame` header. To ensure that the additional actions appear similar to other actions on the menu, use `Command Menu Item` components or a `Group` component with nested `Command Menu Item` components inside this facet.

Displaying Child Component Properties Along with Show Detail Frame Properties

When you switch to the Edit mode of a page at runtime, in Design view you will notice an Edit icon on all Show Detail Frame components that can be edited. Clicking this icon invokes the Component Properties dialog in which users can edit the Show Detail Frame's properties. If you want the Component Properties dialog to display the Show Detail Frame's properties and its child component's properties, then you can use the custom attribute, sdf_selection_rule.

In JDeveloper, right-click the Show Detail Frame component and select Insert inside cust:showDetailFrame, JSF core, and then Attribute. In the Insert Attribute dialog, specify sdf_selection_rule as the name and sdf_for_edit_mode_only as the value. In Source mode, this attribute appears as shown in the following example:

<cust:showDetailFrame text="showDetailFrame 1" id="sdf1">
  <f:attribute name="sdf_selection_rule" value="sdf_for_edit_mode_only"/>
</cust:showDetailFrame>

Disabling the Edit Option on a Show Detail Frame Component

When you switch to the Edit mode of a page at runtime, in Design view you will notice an Edit icon on all Show Detail Frame components that can be edited. To disable property editing on a specific Show Detail Frame or Movable Box component in Design view, then you can do this by setting the showEditAction attribute on the component to false at design time. The Edit icon is no longer displayed on the component when you enter the Edit mode of the page at runtime. However, users can still select such a component in Source view and edit its properties.

B.1.6 Custom Action

Use Custom Action components to trigger navigational flow in a task flow when a region is included inside a Show Detail Frame component. You can define custom actions corresponding to the ADFc outcomes of the task flows. At runtime, these custom actions are displayed on the Show Detail Frame header as icons, menu options, or both. A Custom Action must always be defined as a child component of a Show Detail Frame and is useful only when the Show Detail Frame also contains a task flow as its child component.

You can add as many Custom Action components as there are ADFc outcomes in the task flow. If you add a Custom Action attribute without a corresponding ADFc outcome, or if the action attribute value does not match an ADFc outcome defined on the view that is currently being displayed by the task flow, then that action is not displayed at runtime.

Note:

You can also define custom actions for Show Detail Frame components at the global level. For more information, see Section 21.3.2, "How to Enable Custom Actions on a Show Detail Frame Enclosing a Task Flow."

Table B-9 describes the attributes of a Custom Action component.

Table B-9 Attributes of a Custom Action Component

Attribute	Type	Supports EL?	Description
Common Attributes
id	String	No	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
action	String	Yes	Specifies the action outcome defined for the task flow. The value of this attribute must match the relevant ADFc outcome in the task flow definition file.
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`. The rendering of a component can also be defined at runtime using the Show Component and Hide Component options.
text	String	Yes	Represents the text of the menu item link. This is applicable for a custom action rendered as a menu item link.
Appearance Attributes
icon	String	Yes	For a custom action rendered as a toolbar link, specifies the icon to be rendered on the chrome. For a custom action rendered as a menu item link, this represents the icon to be displayed against the menu item text. This attribute supports these various types of URIs: absolute - an absolute path to the image, like `"http://oracleimg.com/admin/images/ocom/hp/oralogo_small.gif"` relative - a path located relatively to the source page, like `"bullet.jpg"` context relative - a path relatively based on the web application's context root, like `"/images/error.png"` server relative - a path relatively based on the web server by application name, like `"//adf-richclient-demo-context-root/images/error.png"` As icon does not allow alternative text to be provided for the image, in order to create an accessible product an icon must only be used when its use is purely decorative.
shortDesc	String	Yes	Provides a short description of the component. This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent, for example, Firefox 2 truncates long tooltips. For form components, the `shortDesc` is displayed in a note window. This is applicable only for a custom action rendered as a toolbar icon.
location	String	Yes	Determines whether the custom action is rendered as a toolbar icon or a menu item link. Available values are `chrome`, `menu`, or `both`. Default value is `chrome`.
Other Attributes
actionComponent	String	Yes	Specifies the ID of the command component that must be queued for the action event. When the `actionComponent` attribute is specified, the `Show Detail Frame` component queues the action event on this component. For more information, see Section 21.3.2.3, "Configuring Custom Actions that Display Task Flow Views in a Separate Browser Window."

B.1.7 Show Property

Use the Show Property component to display an attribute or parameter in a custom property panel at runtime. Use one Show Property component for each attribute or parameter that you want to display to users at runtime.

For more information about the Show Property component, see Section 20.3.6, "How to Display Properties and Parameters in a Custom Property Panel."

Table B-10 describes the new attributes of a Show Property component.

Table B-10 Attributes of a Show Property Component

Attribute	Type	Supports EL?	Description
Common Attributes:
id	String	No	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`. The rendering of a component can also be defined at runtime using the Show Component and Hide Component options.
attributeType	String	Yes	Specifies the property type. Supported values are `text`, `cbox`, `date`, `lov`.
value	String	Yes	Specifies the current value of the property. If the EL binding for the "value" points to a bean property with a getter but no setter, and this is an editable component, the component will be rendered in read-only mode.
label	String	Yes	Specifies the label of the component. If you want the label to appear above the control, use a `panelFormLayout`.
Data Attributes:
selectItem			Specifies the list of values to be displayed if `attributeType` was set to `lov`. This attribute takes an EL value that returns the list of values dynamically.
Appearance Attributes:
columns	Int	Yes	Specifies the size of the text control specified by the number of characters shown. The number of columns is estimated based on the default font size of the browser.
rows	Int	Yes	Specifies the height of the text control specified by the number of characters shown. The default value is 1, which generates a one-row input field. The number of rows is estimated based on the default font size of the browser.
shortDesc	String	Yes	Provides a short description of the component. This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent, for example, Firefox 2 truncates long tooltips. For form components, the `shortDesc` is displayed in a note window. This is applicable only for a custom action rendered as a toolbar icon.
simple	Boolean	Yes	A boolean value that controls whether the component provides label support; when set to "true", the component will not display the label (these may be ignored: label, labelAndAccessKey, accessKey, showRequired, help facet) and may use simpler layout primitives. One of the usecases can be when the component is used in repeatable elements like in table, for-each etc., where label is not required.
unselectedLabel			Specifies the label for the option that represents a value of null, meaning nothing is selected. If `unselectedLabel` is not set and if the component does not have a selected value, then an option with an empty string as the label and value is rendered as the first option in the choice box (if there isn't an empty option already defined). Once an option has been successfully selected, and if `unselectedLabel` is not set, then the empty option will not be rendered.
Behavior Attributes:
required	Boolean	Yes	Specifies whether a non-null, non-empty value must be entered. If `false`, validators will not be executed when the value is null or empty.
autoSubmit	Boolean	Yes	Specifies an attribute which if set to TRUE on a form element, the component will automatically submit when an appropriate action takes place (a click, text change, etc.). Since `autoSubmit` is a partial submit, also submitted and re-rendered are any other components with `partialTriggers` pointing to this component.
disabled	Boolean	Yes	Specifies whether the property should be shown as disabled. This is useful if the `Show Property` component is inside an iterator whose model specifies that the property must be shown as disabled, for example, if an MDS restriction has been applied on the property.
valueChangeListener	javax.faces.el.MethodBinding	EL only	Specifies a method reference to a value change listener.
Advanced Attributes:
binding	`oracle.adf.view.rich.component.fragment.UIXDeclarativeComponent`	Supports only EL	Specifies an EL reference that stores the component instance in a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
clientComponent	Boolean	Yes	Specifies whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary.
componentId			If you use the `Show Property` tag in Oracle Composer's property panel, `componentId` specifies the ID of the component for which the property must be rendered.
showELBuilder	Boolean	Yes	Specifies whether to display the EL builder for the property.
showResourceEditor	Boolean	Yes	Specifies whether to display the resource string editor for the property. However, this option is enabled only if you have configured resource string editing in the application and the property is of type String. For more information, see Section 21.12, "Configuring Runtime Resource String Editing."
taskFlowId	String	Yes	If `Show Property` is used to display task flow parameters, `taskFlowId` specifies the ID of the task flow.
taskFlowParam	String	Yes	If `Show Property` is used to display task flow parameters, `taskflowParam` specifies the task flow parameter that the input field must display.
validator	String	Yes	Specifies a method reference to a validator method.

Supported Facets

The Show Property component supports a customLink facet, which can be used to include a Commamd Menu Item. The Command Menu Item specified in this facet appears as a custom link in the dropdown next to the property field, along with Resource String editor and EL Builder.

B.2 Oracle Composer-Specific Files and Configurations

This section describes the various files that you can modify to extend Oracle Composer capabilities. While some files, for example the Oracle Composer extension file, pe_ext.xml, are entirely relevant to Oracle Composer only, others are ADF configuration files that can take entries for Oracle Composer-specific configurations.

This section includes the following topics:

Section B.2.1, "pe_ext.xml"
Section B.2.2, "adf-config.xml"
Section B.2.3, "adf-settings.xml"
Section B.2.4, "web.xml"

B.2.1 pe_ext.xml

You can create a pe_ext.xml file and add elements in it to register new Oracle Composer add-ons and custom property panels, selectively render panels, register event handlers, and define property filters. This file is not available by default when you add Oracle Components to a page. You can create this file in the META-INF directory in your ViewController project; for example, in the APPLICATION_HOME\ViewController\src\META-INF directory. This section describes the different elements of the Oracle Composer extension file schema and explain when you may want to use the schema elements.

This section contains the following subsections:

Section B.2.1.1, "addon-config"
Section B.2.1.2, "property-panels"
Section B.2.1.3, "lov-config"
Section B.2.1.4, "event-handlers"
Section B.2.1.5, "drop-handlers"
Section B.2.1.6, "filter-config"
Section B.2.1.7, "elbuilder-config"
Section B.2.1.8, "Sample pe_ext.xml File"

B.2.1.1 addon-config

Use the addon-config element to include entries for new Oracle Composer add-ons and custom property panels. For example, to add a new About button to your page that invokes a panel displaying information about your application, you must first create a task flow containing the information and then register this task flow in the pe_ext.xml file. Oracle Composer add-ons declared inside the addon-config element are configured in the adf-config.xml file, whereas custom property panels declared within the addon-config element are configured within the property-panels element in the extension file itself.

For information about configuring add-ons in adf-config.xml, see Section B.2.2.2, "addon-panels." For information about configuring custom property panels using the property-panels element, see Section B.2.1.2, "property-panels."

Insert the addon-config element within the pe-extension tag. You can add only one addon-config element in the XML file. Within the addon-config element you can have a panels element to define add-ons.

panels

Use the panels element to register new add-ons or property panels in Oracle Composer. Add the panels element within the addon-config element. You can have only one panels element in an extension file, and all custom panels must be defined inside this element.

panel

Use panel elements to define individual add-ons and property panels to display to users. Within the panels element you can insert any number of individual panel elements that define the add-ons or property panels to be displayed in Oracle Composer. You must have one panel element for every add-on or property panel you want to display.

Table B-11 describes the attributes of the panel element.

Table B-11 panel Element Attributes

Attribute	Description
`name`	An identifier that is used while referencing the new add-on in `adf-config.xml`, or a property panel in the `property-panels` section. This must be unique in the application.
`title`	The title to display on the button used to invoke the task flow in Oracle Composer. You can use EL for this property to show a localized title. For custom property panels, the title to display on the new tab for that panel.
`icon`	The icon that appears next to the title on the button. This is optional.
`taskflow-id`	The ID of the task flow that defines the add-on or property panel.
`help-topic-id`	A help topic ID that links to a custom help topic from the add-on or property panel. This is optional.

When a panel element is deleted from the file, that add-on or property panel is not displayed on the page.

The following example shows how to use the addon-config, panels, and panel elements:

  <addon-config>
    <panels>
      <panel name="oracle.fod.custom.panel" title="About FOD"
             icon="adf/webcenter/images/about.gif"
             taskflow-id="/WEB-INF/about-fod.xml#about-fod"   
      /> 
    </panels>
  </addon-config>

For more information about add-ons, see Section 20.2, "Creating Oracle Composer Add-Ons."

Optionally, to register an event handler for a specific add-on panel, you can also add an event-handlers element inside a panel element, as shown in the following example:

<event-handlers>
  <event-handler event="close">
    oracle.fod.custom.TaskFlowEventHandler
  </event-handler>
</event-handlers>

The XML code is the same as for any generic event handler. For more information, see Section B.2.1.4, "event-handlers."

B.2.1.2 property-panels

Use the property-panels element to register custom property panels. Add the property-panels element within the addon-config element. For information about custom property panels, see Section 20.3, "Creating Custom Property Panels." You can have only one property-panels element in an extension file.

property-panel

Use the property-panel element to define a custom property panel to display for a particular component in Oracle Composer. Within the property-panels element you can insert any number of individual property-panel elements to define custom property panels to display as tabs in the Component Properties dialog. To specify the component or task flow for which you want to register a custom property panel, you must add a component or taskflow-id element respectively within the property-panel.

Table B-12 describes the property-panel element attributes.

Table B-12 property-panel Element Attributes

Attribute	Description
`name`	An identifier for the custom property panel you want to display in the Component Properties dialog.
`rendered`	Whether this panel is displayed to users in the Component Properties dialog. This can take an EL value.

component

Use the component element to specify the fully qualified class name of the component for which you are registering the custom property panel. You can have only one component inside a property-panel element.

taskflow-id

Use the taskflow-id element to specify the name of the task flow for which you are registering the custom property panel. You can have only one taskflow-id inside a property-panel element.

panel

Use the panel element to specify a custom property panel to display as a tab in the Component Properties or Page Properties dialog for the component. Within a property-panel element, you can have any number of panel elements. Table B-13 describes the attributes of a panel element.

Table B-13 panel Element Attributes

Attribute Description

Attribute	Description
`name`	Name with which you declared the panel in the `addon-config` section.
`rendered`	Whether the custom property panel must be rendered or not.
`parameter`	Parameters to be passed to the implementing task flow. Takes an EL only and must return a `Map<String, String>`.

name

Name with which you declared the panel in the addon-config section.

rendered

Whether the custom property panel must be rendered or not.

parameter

Parameters to be passed to the implementing task flow.

Takes an EL only and must return a Map<String, String>.

When a panel element is deleted from the file, that property panel is no longer displayed in the Component Properties dialog.

The following example shows how to register a custom property panel for a Command Button component:

<property-panels>
  <property-panel name="cmdbtn">
    <component>oracle.rich.CommandButton</component>
    <panel name="prop.panel.cmdbtn"/>
  </property-panel>
</property-panels>

The following example shows how to register a custom property panel for a task flow:

<property-panels>
  <property-panel name="dashboard">
    <taskflow-id>/WEB-INF/dashboard-taskflow#prop-panel</taskflow-id>
    <panel name="dashboard.prop-panel" />
  </property-panel>
</property-panels>

B.2.1.3 lov-config

Use the lov-config element to register a custom List of Values or picker for a task flow parameter. Add the lov-config element directly under the pe-extension tag. You can have only one lov-config element in an extension file. Within this element, you can add a task-flow-definition element for each task flow that you want to register for LOV usage. Add an input-parameter-definition for each parameter that provides an LOV. Use enumeration elements to list the LOV options for a parameter, as shown in the following example:

<lov-config>
  <task-flow-definition taskflow-id="/WEB-INF/employee-details.xml#employee-details">
    <input-parameter-definition>
      <name>Designation</name>
        <enumeration>
          <item>
            <name>Accounts Manager</name>
            <value>Accounts Manager</value>
            <description>Accounts Manager</description>
          </item>
          <item>
            <name>Accounts Assistant</name>
            <value>Accounts Assistant</value>
            <description>Accounts Assistant</description>
          </item>
          <item>
            <name>Payroll Executive</name>
            <value>Payroll Executive</value>
            <description>Payroll Executive</description>
          </item>
          <item>
            <name>Senior Manager</name>
            <value>Senior Manager</value>
            <description>Senior Manager</description>
          </item>
        </enumeration>
    </input-parameter-definition>
  </task-flow-definition></lov-config>

For more information, see Section 20.5, "Configuring Custom LOVs or Pickers for Task Flow Parameters."

B.2.1.4 event-handlers

Use the event-handlers element to register handlers for events generated by Oracle Composer. Add the event-handlers element directly under the pe-extension tag. You can have only one event-handlers element under pe-extension.

Alternatively, to register an event handler for a specific Oracle Composer add-on panel, you can also add an event-handlers element inside a panel element under the addon-config section. For more information, see Section B.2.1.1, "addon-config."

event-handler

Use the event-handler element to register an event handler in Oracle Composer. Within event-handlers you can have any number of event-handler elements to register handlers for save, close, deletion, addition, and selection events. For example, if you have implemented the processSave method in a Java class called SaveHandler to perform a specific action when a Save event is invoked, then you can register that implementation in Oracle Composer by adding an event-handler entry in the pe_ext.xml file as follows:

<event-handlers>
  <event-handler event="save">view.SaveHandler</event-handler>   
</event-handlers>

For information about configuring event handlers, see Section 20.6, "Configuring Event Handlers for Oracle Composer UI Events."

B.2.1.5 drop-handlers

Use the drop-handlers element to register drop handlers to handle addition of components to the page from the Resource Catalog. Add the drop-handlers element directly under the pe-extension tag. You can have only one drop-handlers element in an extension file.

drop-handler

Use the drop-handler element to register a drop handler in Oracle Composer. Within drop-handlers you can have any number of drop-handler elements to register drop handlers that you created in the application. For example, if you created a drop handler called TestDropHandler to handle addition of XML components on the page, then you can register that implementation in Oracle Composer by adding a drop-handler entry in the pe_ext.xml file as follows:

<drop-handlers>
  <drop-handler>test.TestDropHandler</drop-handler>
</drop-handlers>

For more information, see Section 20.7, "Configuring Drop Handlers in the Resource Catalog."

B.2.1.6 filter-config

Use the filter-config element to define property filters for components that can be edited at runtime. For a selected component, the Component Properties dialog displays properties that can be edited. If you do not want to expose all properties for editing, you can filter specific properties so that they are not displayed in the Component Properties dialog. You can specify global-level filters to filter common attributes across all components, or you can define tag-level filters to filter properties for a particular component only.

Add the filter-config element directly under the pe-extension tag. You can have only one filter-config element in an extension file.

For information about property filters, see Section 20.8, "Defining Property Filters."

global-attribute-filter

Use the global-attribute-filter element to filter specific properties across all components. You can have only one global-attribute-filter element in the extension file. Within this element you can include any number of attribute elements to define property filters for components from different libraries.

taglib-filter

Use the taglib-filter element to define property filters for components within a particular library. You can include multiple taglib-filter elements to filter properties for components in different libraries. Within this element you can include tag elements for every component belonging to the library.

Table B-14 describes the attribute the taglib-filter element can take.

Table B-14 tag Element Attribute

Attribute	Description
`namespace`	Namespace of the tag library containing the component whose properties you want to filter.

tag

Use the tag element to specify a component whose properties you want to filter. You can include multiple tag elements within a taglib-filter element. Within this element you can include attribute elements for all properties you want to filter.

Table B-15 describes the attribute the tag element can take.

Table B-15 tag Element Attribute

Attribute	Description
`name`	Name of the component whose properties you want to filter, for example, `commandButton`, `portlet`.

attribute

Use the attribute element to specify a property to filter either across all components or for the specified component only. To define global-level filters, you must include attribute elements inside the global-attribute-filter. To define property filters for a particular component, you must include attribute elements inside the taglib-filter element.

Table B-16 describes the attribute the attribute element can take.

Table B-16 attribute Element Attributes

Attribute	Description
`name`	Name of the property you want to filter.
`filtered`	Whether the property must be filtered or not. Takes a value of `true` or `false`.

The following example shows how you can define global and component-level property filters:

<filter-config>  
  <global-attribute-filter> 
    <attribute name="accessKey" />
    <attribute name="attributeChangeListener" />
    <attribute name="autoSubmit" />
    <attribute name="binding" />
  </global-attribute-filter>
  <taglib-filter namespace="http://xmlns.oracle.com/adf/faces/rich"> 
    <tag name="commandButton">
      <attribute name="text" />
      <attribute name="icon" />
    </tag> 
</filter-config>

B.2.1.7 elbuilder-config

Use the elbuilder-config element to configure custom values for the expression builder. The expression builder invoked from Oracle Composer's Component Properties dialog enables users to specify EL values for component properties. Users can either select for a set of predefined values or enter an EL value in the text box. You can customize the expression builder to provide more options to users. For more information, see Section 20.4, "Extending the Expression Builder."

Add the elbuilder-config element directly under the pe-extension tag. You can have only one elbuilder-config element in an extension file.

selector

Use selector elements to define and include custom options, as shown in the following example:

<elbuilder-config>
  <!-- define selector -->
  <selector id="CustomELParameter">
    view.CustomELParameter
  </selector>
    
  <!-- include selector -->
  <selectors>
    <selector id="CustomELParameter"/>
  </selectors>
</elbuilder-config>

You can include many selector elements inside a selectors element.

B.2.1.8 Sample pe_ext.xml File

Example B-1 shows a sample pe_ext.xml file with different elements used to extend Oracle Composer capabilities.

Example B-1 Sample pe_ext.xml File

<pe-extension xmlns="http://xmlns.oracle.com/adf/pageeditor/extension">

<addon-config>
<!-- Oracle Composer add-on panels configuration -->
  <panels>
    <panel name="oracle.fod.custom.panel" title="About FOD"
           icon="adf/webcenter/images/about.gif"
           taskflow-id="/WEB-INF/about-fod.xml#about-fod"/> 
  </panels>

<!-- Oracle Composer property panels configuration -->
  <property-panels>
    <property-panel name="cmdbtn">
      <component>oracle.rich.CommandButton</component>
      <panel name="prop.panel.cmdbtn" />
    </property-panel>
  </property-panels>
</addon-config>

<Save event handler configuration -->
  <event-handlers>
    <event-handler event="save">view.SaveHandler</event-handler>   
  </event-handlers>

<!-- Test drop handler configuration -->
  <drop-handlers>
    <drop-handler>test.TestDropHandler</drop-handler>
  </drop-handlers>

<!-- Property filter configuration. Properties defined here are not displayed in Oracle Composer. -->
  <filter-config>  
    <global-attribute-filter> 
      <attribute name="accessKey" />
      <attribute name="attributeChangeListener" />
      <attribute name="autoSubmit" />
      <attribute name="binding" />
    </global-attribute-filter>
    <taglib-filter namespace="http://xmlns.oracle.com/adf/faces/rich"> 
      <tag name="commandButton">
        <attribute name="text" />
        <attribute name="icon" />
      </tag> 
  </filter-config>
</pe-extension>

B.2.2 adf-config.xml

The adf-config.xml file specifies application-level settings that are usually determined at deployment and are often changed at runtime. This file is created when you create your application and is located in the ADF META-INF folder under Descriptors in the Application Resources panel. The following example shows the minimal adf-config.xml file created when you create a WebCenter application:

<?xml version="1.0" encoding="windows-1252" ?>
<adf-config xmlns="http://xmlns.oracle.com/adf/config"
            xmlns:adf="http://xmlns.oracle.com/adf/config/properties">
  <adf:adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties">
    <adf-property name="adfAppUID" value="Application4-2138"/>
  </adf:adf-properties-child>
</adf-config>

When you add the Page Customizable component to a page, certain required configurations are added to the adf-config.xml file.

You must update the adf-config.xml file when you perform tasks such as registering new add-ons and custom property panels, selectively rendering add-ons, creating customization layers, enabling and disabling the Oracle Composer sandbox, creating custom Resource Catalogs, and disabling Source view. The following sections describe the various adf-config.xml elements used for Oracle Composer-specific configurations.

This section contains the following subsections:

Section B.2.2.1, "page-editor-config"
Section B.2.2.2, "addon-panels"
Section B.2.2.3, "sandbox-namespaces"
Section B.2.2.4, "session-options-factory"
Section B.2.2.5, "rcv-config"
Section B.2.2.6, "customizableComponentsSecurity"
Section B.2.2.7, "mds-config"
Section B.2.2.8, "resource-string-editor"
Section B.2.2.9, "enable-source-view"
Section B.2.2.10, "enable-zoom"
Section B.2.2.11, "persistent-change-manager"
Section B.2.2.12, "taglib-config"
Section B.2.2.13, "security-config"
Section B.2.2.14, "Sample adf-config.xml File"

B.2.2.1 page-editor-config

Use the page-editor-config element to include Oracle Composer-specific configurations such as add-on panel registration, sandbox configuration, resource string editor configuration, and so on. Add the page-editor-config element within the adf-config tag as shown in the following example:

<adf-config xmlns="http://xmlns.oracle.com/adf/config"
            xmlns:adf="http://xmlns.oracle.com/adf/config/properties"
            xmlns:mdsC="http://xmlns.oracle.com/adf/mds/config">
. . . 
  <page-editor-config xmlns="http://xmlns.oracle.com/adf/pageeditor/config">
    
  </page-editor-config>
</adf-config>

B.2.2.2 addon-panels

Use the addon-panels element to register custom add-ons and property panels in Oracle Composer. Insert the addon-panels element within the page-editor-config element. You can have only one addon-panels element in the file. Within this you can have any number of addon-panel elements to register custom panels. For more information about Oracle Composer add-ons and property panels, see Section 20.2, "Creating Oracle Composer Add-Ons" and Section 20.3, "Creating Custom Property Panels."

addon-panel

Use an addon-panel element to register an add-on in the adf-config.xml file. An addon-panel element must only be included inside the addon-panels element. You can have any number of addon-panel elements to register custom panels.

The following example shows how you can use addon-panels and addon-panel elements to register a new add-on:

<page-editor-config xmlns="http://xmlns.oracle.com/adf/pageeditor/config">
  <addon-panels>
    <!-- Page Properties add-on -->
    <addon-panel name="oracle.adf.pageeditor.addonpanels.page-settings" />
    
    <!-- Page Reset add-on -->
    <addon-panel name="oracle.adf.pageeditor.addonpanels.page-reset" />
  
    <addon-panel name="oracle.fod.custom.panel" />
  
  </addon-panels>
  . . . 
</page-editor-config>

The addon-panel element also supports the rendered attribute. This attribute can take an EL value and specifies whether the panel must be rendered in Oracle Composer or not.

When registering custom add-ons, you must also include entries for the default add-ons. If the default add-ons are not registered, then only your custom add-on is available in Oracle Composer.

The addon-panel element supports the following parameters:

rendered: Use to specify whether the add-on must be rendered or not. The rendered attribute can take true, false, or an EL value. Use this attribute to display an add-on conditionally based on specific criteria.
parameters: Use to declaratively pass parameters to the add-on task flow. The parameters attribute takes an EL value as shown in the following example:
```
<addon-panels>
  <addon-panel name="oracle.adf.pageeditor.addonpanels.customization-manager" parameters="#{AppUtilBean.customizationManagerParams}"/>
    . . .
</addon-panels>
```
where AppUtilBean provides the logic to pass parameters to the add-on task flow.

B.2.2.3 sandbox-namespaces

Use the sandbox-namespaces element to register namespaces for all metadata for which you want to enable sandbox creation at runtime. For more information about enabling sandbox creation, see Section 22.2.1, "How to Enable Oracle Composer Sandbox Creation."

Insert the sandbox-namespaces element within the adf-config element. The following example shows how to use the sandbox-namespaces element:

<page-editor-config xmlns="http://xmlns.oracle.com/adf/pageeditor/config">
  . . . 
  <sandbox-namespaces>
    <namespace path="/pages"/>
    <namespace path="/pageDefs"/>
  </sandbox-namespaces>
</page-editor-config>

B.2.2.4 session-options-factory

When creating customization layers in your application, use the session-options-factory element to register the ComposerSessionOptionsFactory implementation with Oracle Composer. This class contains the logic to save customizations in different layers based on the specified criteria. For more information, see Section 22.3, "Adding Customization Layers to View and Edit Modes: Example."

The following example shows how to register a class named AppsSessionOptionsFactoryImpl:

<page-editor-config xmlns="http://xmlns.oracle.com/adf/pageeditor/config">
  . . . 
  <session-options-factory>view.AppsSessionOptionsFactoryImpl</session-options-factory>
</page-editor-config>

B.2.2.5 rcv-config

Use the rcv-config element to register custom Resource Catalogs with Oracle Composer and to register the ResourceCatalogSelector implementation when using multiple Resource Catalogs.

If you want to display a custom Resource Catalog to users in place of the default one, you must first create a catalog definition file with the required content and then register this catalog definition in the Oracle Composer extension file and adf-config.xml file. The custom Resource Catalog is then displayed when a user clicks an Add Content button on the page. For more information, see Section 15.2, "Creating a Custom Resource Catalog."

Insert the rcv-config element within the adf-config tag. The following example shows how you can use the rcv-config element to register a custom catalog called users-catalog:

<adf-config xmlns="http://xmlns.oracle.com/adf/config"
            xmlns:adf="http://xmlns.oracle.com/adf/config/properties"
            xmlns:mdsC="http://xmlns.oracle.com/adf/mds/config">
  . . . 
  <rcv-config xmlns="http://xmlns.oracle.com/adf/rcs/viewer/adf-config">
    <default-catalog catalog-name="users-catalog"/>
  </rcv-config>
</adf-config>

You can also configure multiple Resource Catalogs with Oracle Composer so that different catalogs are displayed to different users depending on the specified criteria. When configuring multiple Resource Catalogs, use the rcv-config element with a catalog-selector element to register the ResourceCatalogSelector implementation, which contains the logic for selecting a Resource Catalog.

The following example shows how you can use the rcv-config element to register a ResourceCatalogSelector implementation called CatalogSelector:

<adf-config xmlns="http://xmlns.oracle.com/adf/config"
            xmlns:adf="http://xmlns.oracle.com/adf/config/properties"
            xmlns:mdsC="http://xmlns.oracle.com/adf/mds/config">
  . . . 
  <rcv-config xmlns="http://xmlns.oracle.com/adf/rcs/viewer/adf-config">
    <catalog-selector class-name="webcenter.CatalogSelector"/>
    <default-catalog catalog-name="default-catalog"/>
  </rcv-config>
</adf-config>

B.2.2.6 customizableComponentsSecurity

Use the customizableComponentsSecurity element to apply restrictions on Show Detail Frame actions. Insert the customizableComponentsSecurity element within the adf-config tag.

Within the customizableComponentsSecurity element, you can specify the enableSecurity, actionsCategory, actions, and custom-actions elements.

enableSecurity

Use the enableSecurity element to override the security inheritance behavior on Show Detail Frame actions. This element can take a value of true or false. If set to true, then the ability for a user to modify a component is first determined from the page permissions and then adjusted according to the current set of actions defined for that type of permission. If set to false, then all actions are available to users. A user's page permissions and actions configured in adf-config.xml are ignored.

actionsCategory

Use the actionsCategory element to apply restrictions on a group of Show Detail Frame actions simultaneously. Within the actionsCategory element, you can have actionCategory elements for the supported categories. For more information about action categories, see Section 23.5.2, "Defining Security at the Actions Category Level."

The following example shows how actionsCategory can be used:

<adf-config xmlns="http://xmlns.oracle.com/adf/config"
            xmlns:adf="http://xmlns.oracle.com/adf/config/properties"
            xmlns:mdsC="http://xmlns.oracle.com/adf/mds/config">
  . . . 
  <cust:customizableComponentsSecurity 
xmlns="http://xmlns.oracle.com/adf/faces/customizable/config">
    <cust:enableSecurity value="true"/>

    <cust:actionsCategory>
      <cust:actionCategory name="personalizeActionsCategory" value="false"/>
      <cust:actionCategory name="editActionsCategory" value="true"/>
    </cust:actionsCategory>

    <cust:actions>
      . . . 
    </cust:actions>

  </cust:customizableComponentsSecurity>
</adf-config>

actions

Use the actions element to apply restrictions on individual actions. Within each actions element, you can have action elements for all supported actions.

The following example shows how actions can be used:

<adf-config xmlns="http://xmlns.oracle.com/adf/config"
            xmlns:adf="http://xmlns.oracle.com/adf/config/properties"
            xmlns:mdsC="http://xmlns.oracle.com/adf/mds/config">
  . . . 
  <cust:customizableComponentsSecurity 
xmlns="http://xmlns.oracle.com/adf/faces/customizable/config">
    <cust:enableSecurity value="true"/>

    <cust:actionsCategory>
      . . . 
    </cust:actionsCategory>

    <cust:actions>
      <cust:action name="showMinimizeAction" value="true"/> 
      <cust:action name="showMoveAction" value="false"/> 
    </cust:actions>

  </cust:customizableComponentsSecurity>
<adf-config>

For more information about applying action-level restrictions, see Section 23.5, "Applying Action-Level Restrictions on Panel Customizable and Show Detail Component Actions."

custom-actions

Use the custom-actions element to define custom actions to display along with the other Show Detail Frame actions. You must add only one custom-actions element inside the customizableComponentsSecurity section. Within this you can add any number of custom-action elements to define individual custom actions.

Note:

Alternatively, you can add a custom-actions element inside an adf-config-child element instead of inside the customizableComponentsSecurity section.

For more information about custom actions, see Section 21.3.2, "How to Enable Custom Actions on a Show Detail Frame Enclosing a Task Flow."

B.2.2.7 mds-config

When defining type-level application customization restrictions on components, use the mds-config element to register a standalone XML file describing the restrictions to be applied on specific components. For information about applying type-level restrictions, see Section 23.1.1, "How to Define Type-Level Customization Policies."

Insert the mds-config element within the adf-config tag. You can add the mds-config element as follows:

<mds-config xmlns="http://xmlns.oracle.com/mds/config">
  <type-config>
    <standalone-definitions>
      <file>Directory_Name/standalone.xml</file>
    </standalone-definitions>
  </type-config>
</mds-config>

B.2.2.8 resource-string-editor

Use a resource-string-editor element to enable resource string editing in your application. Insert the resource-string-editor element within the page-editor-config section, as shown in the following example:

<page-editor-config xmlns="http://xmlns.oracle.com/adf/pageeditor/config">
  . . . 
  <resource-string-editor>
    <enabled>true</enabled>
  </resource-string-editor>
</page-editor-config>

For more information, see Section 21.12, "Configuring Runtime Resource String Editing."

B.2.2.9 enable-source-view

Use the enable-source-view element to enable or disable Source view in Oracle Composer. Insert the enable-source-view element within the page-editor-config section. Source view is enabled by default in Oracle Composer. You can disable it by setting enable-source-view to false, as shown in the following example:

<page-editor-config xmlns="http://xmlns.oracle.com/adf/pageeditor/config">
  . . . 
  <enable-source-view>false</enable-source-view>
</page-editor-config>

For more information, see Section 21.8, "Disabling Source View for the Application."

B.2.2.10 enable-zoom

Use the enable-zoom element to enable or disable the capability to zoom into task flows in Oracle Composer. Insert the enable-zoom element within a source-view tag in the page-editor-config section. Task flow zoom is enabled by default in Oracle Composer. You can disable it by setting enable-zoom to false, as shown in the following example:

<page-editor-config xmlns="http://xmlns.oracle.com/adf/pageeditor/config">
  . . . 
  <source-view>
    <enable-zoom>false</enable-zoom>
  </source-view>
</page-editor-config>

For more information, see Section 21.9, "Disabling Task Flow Zoom Capability."

B.2.2.11 persistent-change-manager

Use this to configure the change manager to be used for persisting changes made in Oracle Composer. Insert the persistent-change-manager element within the adf-faces-config section. You must set persistent-change-manager to MDSDocumentChangeManager as follows if you want to persist application customizations to MDS:

<adf-faces-config xmlns="http://xmlns.oracle.com/adf/faces/config">
  <persistent-change-manager>
    <persistent-change-manager-class>oracle.adf.view.rich.change.MDSDocumentChangeManager</persistent-change-manager-class>
  </persistent-change-manager>
. . . 
</adf-faces-config>

For more information about change persistence in Oracle Composer, see Section 21.11, "Configuring the Persistence Change Manager."

For more information about the persistent-change-manager element, see Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

B.2.2.12 taglib-config

Use the taglib-config element to specify the component tags that must be persisted by default. This element is relevant only when you define change persistence using persistent-change-manager in your adf-config.xml file.

When you add Oracle Composer components to the page, the adf-config.xml file is populated with the taglib-config element containing a list of tags and attributes that must be persisted. You can add more elements and attributes to the default list.

For more information about this element, see Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

Insert the taglib-config element within the adf-faces-config section. The taglib-config element appears as shown in the following example:

<adf-faces-config xmlns="http://xmlns.oracle.com/adf/faces/config">
  . . . 
  <taglib-config>
    <taglib uri="http://xmlns.oracle.com/adf/faces/customizable">
      <tag name="showDetailFrame">
        <persist-operations>all</persist-operations>
        <attribute name="expansionMode">
          <persist-changes>true</persist-changes>
        </attribute>
        <attribute name="contentStyle">
          <persist-changes>true</persist-changes>
        </attribute>
      </tag>
      <tag name="panelCustomizable">
        <persist-operations>all</persist-operations>
      </tag>
    </taglib>
  </taglib-config>
</adf-faces-config>

For more information, see Section 21.11, "Configuring the Persistence Change Manager."

B.2.2.13 security-config

Use this to override Oracle Composer-specific security configurations, specifically if you want to override the default security policies with application-level checks. Insert the security-config element inside the page-editor-config section. Within the security-config element, you can define security-policies, security-policy, policy-class, and task-flow-security elements.

security-policies

Use this to encompass all the security policies and policy overrides for Oracle Composer. You can have only one security-policies element under the page-editor-config section.

security-policy

Use this to override an existing policy. Add one security-policy element for each policy that you want to override.

The security-policy element supports the name and override attributes, where name is used to specify a name with which to register the custom policy and override is used to specify the name of the default policy that you want to override.

policy-class

Use this to specify the name of the custom security policy.

task-flow-security

Use this element, along with the check-permission attribute, to enable Oracle Composer to check for a task flow's permissions so that only users with appropriate privileges are allowed to edit or customize the task flow at runtime.

For more information, see Section 23.6, "Implementing Task Flow Security."

B.2.2.14 Sample adf-config.xml File

Example B-2 shows a sample adf-config.xml file with Oracle Composer-specific configurations.

Example B-2 Sample adf-config.xml File with Oracle Composer-Specific Configurations

<?xml version="1.0" encoding="windows-1252" ?>
<adf-config xmlns="http://xmlns.oracle.com/adf/config"
            xmlns:adf="http://xmlns.oracle.com/adf/config/properties"
            xmlns:mdsC="http://xmlns.oracle.com/adf/mds/config">
  <adf:adf-properties-child xmlns="http://xmlns.oracle.com/adf/config/properties">
    <adf-property name="adfAppUID" value="configfilesapp-7198"/>
  </adf:adf-properties-child>

  <mdsC:adf-mds-config version="11.1.1.000">
    <mds-config xmlns="http://xmlns.oracle.com/mds/config">
      <persistence-config>
        <metadata-namespaces>
          <namespace path="/oracle/adf/rc/metadata"
                     metadata-store-usage="WebCenterFileMetadataStore"/>
          <namespace path="/persdef/"
                     metadata-store-usage="WebCenterFileMetadataStore"/>

          <!-- Namespace definitions for Oracle Composer sandbox -->
          <!-- Your jspx customizations alone go here -->  
          <namespace path="/pages" metadata-store-usage="WebCenterFileMetadataStore">
            <namespace-restriction type="CUSTOMIZATIONS"/>
          </namespace>
          <!-- Your pagedef customizations alone go here -->
          <namespace path="/pageDefs" metadata-store-usage="WebCenterFileMetadataStore">
            <namespace-restriction type="CUSTOMIZATIONS"/>
          </namespace>
        </metadata-namespaces>
        <metadata-store-usages>
          <metadata-store-usage id="WebCenterFileMetadataStore"
                                default-cust-store="true">
            <metadata-store class-name="oracle.mds.dt.persistence.stores.file.SrcControlFileMetadataStore">
              <property name="metadata-path" value="../../mds"/>
            </metadata-store>
          </metadata-store-usage>
        </metadata-store-usages>
      </persistence-config>
      <cust-config>
        <match>
          <customization-class name="oracle.adf.share.config.SiteCC"/>
        </match>
      </cust-config>
      <cache-config>
        <max-size-kb>100000</max-size-kb>
      </cache-config>

      <!-- Registration of a standalone XML file used for type-level customization policies -->
      <type-config>
        <standalone-definitions>
          <file>Directory_Name/standalone.xml</file>
        </standalone-definitions>
      </type-config>
    </mds-config>
  </mdsC:adf-mds-config>

  <page-editor-config xmlns="http://xmlns.oracle.com/adf/pageeditor/config">

    <!-- Oracle Composer add-on panel configuration -->
    <addon-panels>
      <addon-panel name="oracle.adf.pageeditor.addonpanels.page-settings" />
      <addon-panel name="oracle.adf.pageeditor.addonpanels.page-reset" />
      <addon-panel name="oracle.fod.custom.panel" />
    </addon-panels>

    <!-- Oracle Composer sandbox configuration -->
    <sandbox-namespaces>
      <namespace path="/pages"/>
      <namespace path="/pageDefs"/>
    </sandbox-namespaces>

    <!-- ComposerSessionOptionsFactory class registration for implementing customization layers -->
     <session-options-factory>view.AppsSessionOptionsFactoryImpl</session-options-factory>

    <!-- Resource string editor configuration -->
    <resource-string-editor>
      <enabled>true</enabled>
    </resource-string-editor>

    <!-- Switch to enable or disable Oracle Composer Source view -->
    <enable-source-view>false</enable-source-view>

  </page-editor-config>

  <!-- Multiple Resource Catalog configuration -->
  <rcv-config xmlns="http://xmlns.oracle.com/adf/rcs/viewer/adf-config">
    <catalog-selector class-name="webcenter.CatalogSelector"/>
    <default-catalog catalog-name="users-catalog"/>
  </rcv-config>

  <!-- Oracle Composer and Customizable Components actions security configuration -->
  <cust:customizableComponentsSecurity xmlns="http://xmlns.oracle.com/adf/faces/customizable/config">
    <cust:enableSecurity value="true"/>
    <cust:actionsCategory>
      <cust:actionCategory name="personalizeActionsCategory" value="false"/>
      <cust:actionCategory name="editActionsCategory" value="true"/>
    </cust:actionsCategory>
    <cust:actions>
      <cust:action name="showMinimizeAction" value="true"/> 
      <cust:action name="showMoveAction" value="false"/> 
    </cust:actions>
  </cust:customizableComponentsSecurity>

  <adf-faces-config xmlns="http://xmlns.oracle.com/adf/faces/config">

    <!-- Oracle Composer persistence change manager configuration -->
      <persistent-change-manager>
        <persistent-change-manager-class>oracle.adf.view.rich.change.MDSDocumentChangeManager</persistent-change-manager-class>
      </persistent-change-manager>

    <!-- Oracle Composer default persistence configuration -->
    <taglib-config>
      <taglib uri="http://xmlns.oracle.com/adf/faces/customizable">
        <tag name="showDetailFrame">
          <persist-operations>all</persist-operations>
          <attribute name="expansionMode">
            <persist-changes>true</persist-changes>
          </attribute>
          <attribute name="contentStyle">
            <persist-changes>true</persist-changes>
          </attribute>
        </tag>
        <tag name="panelCustomizable">
          <persist-operations>all</persist-operations>
        </tag>
      </taglib>
    </taglib-config>
  </adf-faces-config>
</adf-config>

B.2.3 adf-settings.xml

The adf-settings.xml file, in addition to holding generic project- and library-level settings, can also be used to define custom actions on task flows. This section describes the adf-settings.xml configurations specific to Oracle Composer.

B.2.3.1 custComps-config

Use the custComps-config element to define custom actions on task flows consumed in the application. At runtime, the custom actions configurations in the application's adf-config.xml and adf-settings.xml files are picked up and appropriate actions are displayed on the Show Detail Frame component surrounding a task flow. For more information, see Section 21.3, "Enabling Custom Actions on a Task Flow."

Insert the custComps-config element within the adf-settings tag. Within the custComps-config element, you can specify the customActions element.

customActions

Use the customActions element in the adf-settings.xml file to define actions that you want to display on task flows. The custom actions defined here will be displayed along with the other actions on the surrounding Show Detail Frame component. You must add only one customActions element inside the custComps-config section. Within the customActions element you can add any number of customAction elements to define individual custom actions, as shown in the following example:

  <customActions>
   <customAction action="next" location="chrome"
                 rendered="true"
                 icon="/adf/webcenter/editheader_ena.png"
                 text="Next"
                  taskFlowId="/WEB-INF/task-flow-definition.xml#task-flow-definition"
                 shortDesc="next"/>
    <customAction action="prev" location="chrome"
                 rendered="true"
                 icon="/adf/webcenter/editheader_ena.png"
                 text="Previous"
 taskFlowId="/WEB-INF/task-flow-definition.xml#task-flow-definition"
                 shortDesc="prev"/>
  </customActions>

B.2.4 web.xml

The web.xml file is a Java EE standard descriptor that contains details about web applications. When you add a Page Customizable component to your page, the web.xml file available in the Application_Root\Project_Name\public_html\WEB-INF directory is updated to enable change persistence among other settings.

You must update web.xml further when creating an application that uses multiple customization layers and when enabling Oracle Composer sandbox. The following sections describe the web.xml configurations specific to Oracle Composer.

B.2.4.1 CHANGE_PERSISTENCE Context Parameter

The CHANGE_PERSISTENCE context parameter in the application's web.xml file specifies how application customizations are persisted. To enable changes in an Oracle Composer-enabled page to be persisted in MDS, you must ensure that the CHANGE_PERSISTENCE context parameter is set to ComposerChangeManager, as shown in the following example:

<context-param>
  <param-name>org.apache.myfaces.trinidad.CHANGE_PERSISTENCE</param-name>
  <param-value>oracle.adf.view.page.editor.change.ComposerChangeManager</param-value>
</context-param>

This context parameter registers the ChangeManager class to be used to ensure persistence to MDS. This configuration happens automatically when you add a Page Customizable component to a page in a new WebCenter application. However, in an existing ADF application, this context parameter may be set to some other value, for example session or oracle.adf.view.rich.change.FilteredPersistenceChangeManager. Therefore, when you add Oracle Composer components to such an application, you must ensure that the CHANGE_PERSISTENCE parameter is set to ComposerChangeManager.

For more information, see Section 21.11, "Configuring the Persistence Change Manager."

B.2.4.2 WebCenterComposerFilter

Use WebCenterComposerFilter in the web.xml file to register Oracle Composer's ComposerSessionOptionsFactory with Oracle ADF for every HTTP request. The request is then handled depending on your implementation of ComposerSessionOptionsFactory. This filter can be defined as shown in the following example:

<filter-mapping>
<filter-name>WebCenterComposerFilter</filter-name>
  <url-pattern>/faces/*</url-pattern>
  <dispatcher>FORWARD</dispatcher>
  <dispatcher>REQUEST</dispatcher>
</filter-mapping>

You must use WebCenterComposerFilter if you are performing the following tasks:

Creating customization layers. For information, see Section 22.3, "Adding Customization Layers to View and Edit Modes: Example."
Enabling sandbox creation in Oracle Composer. For more information, see Section 22.2.1, "How to Enable Oracle Composer Sandbox Creation."

B.3 Oracle Composer Default Add-Ons and Property Panels

This section lists the add-ons and property panels available by default in Oracle Composer.

B.3.1 Default Add-Ons

This section lists the add-ons available in Oracle Composer and provides the names with which these add-ons are registered in the adf-config.xml file. It is useful to know these names as you will need them to enable or disable the display of the add-ons in your application.

Page Properties

Used to edit page properties and create page parameters.

This add-on is registered with the name oracle.adf.pageeditor.addonpanels.page-settings in the adf-config.xml file.
Reset Page

Used to reset page customizations.

This add-on is registered with the name oracle.adf.pageeditor.addonpanels.page-reset in the adf-config.xml file.
Customization Manager

Used to manage customizations made to pages and task flows.

This add-on is registered with the name oracle.adf.pageeditor.addonpanels.customization-manager in the adf-config.xml file.

The Page Properties and Reset Page add-ons are rendered by default. If you create custom add-ons in your application, while registering those add-ons in adf-config.xml, you must also include the entries for the default add-ons. Without these, the default add-ons are not displayed in Oracle Composer. For information about add-ons, see Section 20.2, "Creating Oracle Composer Add-Ons."

B.3.2 Default Property Panels

This section lists the property panels available by default in the Component Properties and Page Properties dialogs and provides the names with which these panels are registered in the pe_ext.xml file. These names are useful if you choose to override the default panels with custom property panels, or hide some or all of the default panels. For information about creating property panels, see Section 20.3, "Creating Custom Property Panels."

Display Options

Used to define display-related behavior of a component. This panel is displayed in the Component Properties dialog for all components.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.generic-property-inspector.
Display Options (Show Detail Frame)

Used to define display-related behavior of a Show Detail Frame component. This panel is displayed in the Component Properties dialog for a Show Detail Frame component only.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.sdfprop.
Tabs

Used to define the display properties and order of tabs on a Panel Customizable or Box component. This panel is displayed in the Component Properties dialog for a Panel Tabbed or Panel Customizable component. The panel is displayed for a Panel Customizable component only if the component has tabs on it.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.panel-tabbed.
Style

Used to define the appearance of the component instance. This panel is displayed in the Component Properties dialog for all components.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.inline-style-editor.
Content Style

Used to define the appearance of content inside a component instance. This panel is displayed in the Component Properties dialog for all components.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.content-style-editor.
Events

Used to wire a contextual event to an action handler to enable the passing of values from a producer component to a consumer component when the event is triggered on the producer. This panel displays in the Component Properties dialog for all components.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.events.
Region Parameters

Used to define parameters for the task flow region. This panel displays in the Component Properties dialog only for task flow regions.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.region-param.
Portlet Paramters

Used to define portlet parameters. This panel displays in the Component Properties dialog only for portlets.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.portlet-param.
Layout Customizable

Used to define the layout for page components by selecting from a set of predefined layouts. This panel displays in the Component Properties dialog only for Layout Customizable components.

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.layout-cust-prop.
Child Components

Used to rearrange and show or hide child components inside a Panel Customizable component. This panel displays only for Panel Customizable components

In the pe_ext.xml file, this panel is referenced with the name oracle.adf.pageeditor.pane.child-navigator.
Page Parameters

Used to define the page parameters that can be wired to components on the page. This panel displays in the Page Properties dialog.

In the pe_ext.xml file, this panel is referenced with the name oracle.webcenter.page.pane.page-param.
Page Security

Used to define page permissions. This panel displays in the Page Properties dialog for secured application pages.

In the pe_ext.xml file, this panel is referenced with the name oracle.webcenter.page.pane.page-sec.

B.4 Oracle Composer Help Topic IDs

By default, context-sensitive help is not available for Oracle Composer panels and dialogs, and therefore Help icons are not displayed. These icons are displayed when you install a help provider and hook up help topics for the different panels and dialogs. Oracle Composer help topics are available in the pages_cs.jar file on the Oracle WebCenter Suite 11g Demonstrations and Samples page on the Oracle Technology Network (OTN) at:

http://webcenter.oracle.com

To integrate this help with the Oracle Composer UI in your WebCenter Portal application, a help provider must be available to the application. After creating a help provider, use the topic IDs in Table B-17 to hook up individual help topics.

Table B-17 Oracle Composer Runtime Help Topics

Topic ID to be Used	Corresponding Oracle Composer UI
pages_cs_pgeditmodesv	Source view of a page in Edit mode
pages_cs_pgeditmodedv	Design view of a page in Edit mode
pages_cs_cpparams	Parameters tab in the Component Properties dialog
pages_cs_cpdisplayopts	Display Options tab in the Component Properties dialog
pages_cs_cptabs.html	Tabs tab in the Component Properties dialog
pages_cs_cpstyle	Style tab in the Component Properties dialog
pages_cs_cpcontstyle	Content Style tab in the Component Properties dialog
pages_cs_othercss	Other CSS option on the Style tab in the Component Properties dialog
pages_cs_cpevents	Events tab in the Component Properties dialog
pages_cs_compcat	Catalog dialog
pages_cs_ppgen	Display Options tab in the Page Properties dialog
pages_cs_ppsecurity	Security tab in the Component Properties dialog
pages_cs_pppgparams	Parameters tab in the Component Properties dialog
pages_cs_cplayoutprops	Layout Customizable tab in the Component Properties dialog for a `Layout Customizable` component
pages_cs_resourceeditor	Select text resource dialog invoked on selecting the Select Text Resource option on the menu next to a field in the Component Properties dialog

Creating and Registering a Help Provider

This section describes an example where the help topics are extracted to a folder in the application Web context root and then hooked up to the UI elements.

Note:

For detailed information about creating a help provider and displaying help for components, see the section, "Displaying Help for Components" in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

To create and register a help provider:

Download the help JAR from OTN and extract the help files to a folder in your application, for example, Web Content/help.

Create a provider class, for example, WebCenterHelpProvider, with the following code:

package portal;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;

import oracle.adf.view.rich.help.ResourceBundleHelpProvider;

public class WebCenterHelpProvider extends ResourceBundleHelpProvider {
    public WebCenterHelpProvider() {
        super();
    }
   
    public String getExternalUrl(FacesContext context,
                                        UIComponent component,
                                        String topicId) {
      return "http://localhost:7101/help_test-Portal-context-root/help/" + topicId+".html";
    }
}

<adf-settings xmlns="http://xmlns.oracle.com/adf/settings">
<adf-faces-config xmlns="http://xmlns.oracle.com/adf/faces/settings">
  <help-provider prefix="pages_cs">
    <help-provider-class>
      portal.WebCenterHelpProvider
    </help-provider-class>
    <property>          
      <property-name>baseName</property-name>
      <value>oracle.adfinternal.view.page.editor.resource.ComposerBundle</value>
    </property>
  </help-provider>
</adf-faces-config>
</adf-settings>

Run a page in your application and verify that the help shows up correctly.

B.5 Oracle Composer Components Style-Specific Properties

This section includes a series of tables that describe the style selectors associated with Oracle Composer components. Additionally, it describes how to use the background property to choose one of three skin-defined looks for these components.

This section contains the following subsections:

Section B.5.1, "Style Selectors for Oracle Composer Components"
Section B.5.2, "Style Attributes"

B.5.1 Style Selectors for Oracle Composer Components

Use a style selector to describe an element's appearance by identifying the element and defining styles for it.

This section contains the following subsections:

Global Style Selectors
Oracle Composer Status Indicator Style Selectors
Page Customizable Style Selectors
Layout Customizable Style Selectors
Panel Customizable Style Selectors
Show Detail Frame Style Selectors

B.5.1.1 Global Style Selectors

Use global style selectors to define styles for multiple components within the application. Table B-18 lists and describes the global style selectors relevant to Oracle Composer components.

Table B-18 Global Style Selectors

Style Selector	Description
.ComposerDark:alias	Specifies the default color for toolbars, headers, and so on in Oracle Composer, with a color scheme of dark.
.ComposerLight:alias	Specifies the default color for toolbars, headers, and so on in Oracle Composer, with a color scheme of light.
.ComposerBackground	Specifies the color scheme for Composer dialogs, such as the Component Properties and Page Properties dialogs.
.ComposerBorder	Specifies the border, width, and so on for Composer dialogs, such as the Component Properties and Page Properties dialogs.
.PEClickableImageAnchor:alias	An alias for rendering a clickable icon in a table cell. Specifies the CSS properties needed to display an image which is clickable and which has inline-mode display. For example, you can specify this as a common property for all action icons on a `Show Detail Frame` header. By default, this alias is included in style selectors that use 16x16 images and have to display inline background-images for both IE and Firefox. To customize, you can include this alias in your selector and override its properties. For example, you can change font-size and padding-right for an image with different height and width, or you can set "display: block" with height, width attributes to display in block mode.
.ChildPanelFacetWarning	Specifies the style for the warning message displayed in the child navigator in the Component Properties dialog.

B.5.1.2 Oracle Composer Status Indicator Style Selectors

Use the style selectors in Table B-19 to skin the status indicator component in the Oracle Composer toolbar.

Table B-19 Status Indicator Style Selectors

Style Selector	Description
af\|statusIndicator.ComposerStatus	Specifies the style for the status indicator component. You can use this to specify a fixed height for the status indicator.
af\|statusIndicator.ComposerStatus::idle-icon	Specifies the icon that represents the idle state. This icon is generally a non-animated icon that indicates communication is NOT occurring with the server.
af\|statusIndicator.ComposerStatus::processing-icon	Specifies the icon that represents the processing state. This icon is generally an animated icon that indicates communication IS occurring with the server.
af\|statusIndicator.ComposerStatus::connecting-icon	Specifies the icon that displays when the Active Data Service is in the process of connecting. This icon is generally an animated icon.
af\|statusIndicator.ComposerStatus::connected-icon	Specifies the icon that displays when the Active Data Service is in the connected state. This icon is generally a non-animated icon and may be the same as the idle state icon.
af\|statusIndicator.ComposerStatus::reconnecting-icon	Specifies the icon that displays when the Active Data Service has lost connection and is attempting to reconnect. This icon is generally an animated icon.
af\|statusIndicator.ComposerStatus::disconnected-icon	Specifies the icon that displays when the Active Data Service is in the disconnected state. This icon is generally a non-animated icon used to indicate that no further reconnection attempts will be made without use interaction.

B.5.1.3 Page Customizable Style Selectors

Use the style selectors in Table B-20 to skin Page Customizable components.

Table B-20 Page Customizable Style Selectors

Style Selector	Description
af\|pageCustomizable	Specifies the default size of a `Page Customizable` component when not being stretched by its parent container.
af\|pageCustomizable af\|toolbox.ComposerToolbox	Specifies the style for the main dark gray toolbar displayed in Edit mode. This toolbar contains a message about the page being edited and the various buttons.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|panelGroupLayout.ComposerConcurrency	Specifies the style for the concurrency toolbar that appears below the main Oracle Composer toolbar when two or more users are editing a page at the same time in the same customization layer.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|toolbar af\|pageCustomizable af\|toolbox.ComposerToolbox af\|toolbar::separator af\|pageCustomizable af\|toolbox.ComposerToolbox af\|toolbox::body af\|pageCustomizable af\|toolbox.ComposerToolbox af\|toolbox::body af\|toolbox::row af\|pageCustomizable af\|toolbox.ComposerToolbox af\|toolbox::body af\|toolbox::last-row af\|pageCustomizable af\|toolbox.ComposerToolbox af\|toolbox::body af\|toolbox::row af\|toolbox::leading-cell	Specifies the styles for the different areas in the toolbar.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|commandToolbarButton::text af\|pageCustomizable af\|toolbox.ComposerToolbox af\|commandToolbarButton:hover af\|pageCustomizable af\|toolbox.ComposerToolbox af\|commandToolbarButton:depressed	Specify the styles for the Oracle Composer toolbar buttons such as Page Properties and Reset Page.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|menuBar::body af\|pageCustomizable af\|toolbox.ComposerToolbox af\|menuBar::body:rtl	Specifies the style for the body of the View menu on the toolbar.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|menuBar af\|menu::bar-item-text	Specifies the style for the text on the View menu.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|menuBar af\|menu::bar-item:highlighted	Specifies the style for the View menu when the mouse hovers over it.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|menuBar af\|menu::bar-item:depressed	Specifies the style for the View menu when it is clicked.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|menuBar af\|menu::bar-item-open-icon-style	Specifies the style for the dropdown icon appearing on the View menu.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|menuBar af\|menu:depressed af\|menu::bar-item-open-icon-style	Specifies the style for the dropdown icon when it is clicked on the View menu.
af\|pageCustomizable af\|toolbox.ComposerToolbox af\|menuBar af\|menu:highlighted af\|menu::bar-item-open-icon-style	Specifies the style for the dropdown icon when the mouse hovers over it.
af\|pageCustomizable af\|toolbar.SourceView	Specifies the style for the toolbar in Oracle Composer Source view.
af\|pageCustomizable af\|toolbar.SourceView af\|menuBar	Specifies the style for the menubar in Source view.
af\|dialog.ComposerDialog::content-start af\|dialog.ComposerDialog::content-start:rtl af\|dialog.ComposerDialog::content af\|dialog.ComposerDialog::content:rtl af\|dialog.ComposerDialog::content-end	Specify the styles for the dialogs invoked using Oracle Composer toolbar buttons. Available alias is `:rtl`, which can be used when the component must be rendered right-to-left.
af\|pageCustomizable af\|breadCrumbs.ComposerBreadcrumbs af\|pageCustomizable af\|breadCrumbs.ComposerBreadcrumbsHidden:step	Specify the styles for Oracle Composer breadcrumbs.
af\|pageCustomizable:edit af\|panelGroupLayout.ComposerSplitHorz af\|pageCustomizable:edit af\|panelGroupLayout.ComposerSplitVert	Specifies the style for `Panel Customizable` components that are split horizontally or vertically. Typically, these selectors are used to specify the height in case of a horizontal split, or width in case of a vertical split.
af\|pageCustomizable:edit, af\|pageCustomizable:stretched	Specifies the style for the `Page Customizable` component in Edit mode. This selector ensures that in Edit mode, a `Page Customizable` always stretches. In View mode, it will flow if being flowed, or stretch if being stretched.
af\|pageCustomizable:printable	Specifies the style for the `Page Customizable` in printable mode. It suppresses the height and width of the `Page Customizable`.
af\|pageCustomizable af\|panelGroupLayout.ComposerCutComp af\|tree::node-stamp-text	Specifies the style for the dotted line border around components that are cut.

B.5.1.4 Layout Customizable Style Selectors

Use the style selectors in Table B-21 to skin Layout Customizable components.

Table B-21 Layout Customizable Style Selectors

Style Selector	Description
af\|layoutCustomizable::menu:edit	Specifies the style for the Change Layout button in Edit mode.
af\|layoutCustomizable::menu:edit af\|commandImageLink::text af\|layoutCustomizable::menu:edit af\|commandImageLink::text:hover	Specify the styles for the text on the Change Layout button in Edit mode.
af\|layoutCustomizable.AFStretchWidth	Specifies the width to which the component can stretch horizontally.

B.5.1.5 Panel Customizable Style Selectors

Use the style selectors listed in Table B-22 to skin Panel Customizable components.

Note:

Some style selectors in Table B-22 have three color-scheme selections: light, medium, and dark. Using these you can define three distinct looks in your CSS and specify which one to use through the background property in the JDeveloper Property Inspector. Depending on which value is specified for a component instance's background property, the skin applies the relevant style.

Table B-22 Panel Customizable Style Selectors

Style Selector	Description
af\|panelCustomizable	Specifies the style for the root element of the component.
af\|panelCustomizable.PEStretched	Specifies the style for the component, when it is stretched.
af\|panelCustomizable:edit	Specifies the style for the container in Edit mode.
af\|panelCustomizable:edit:drop-target	Specifies the style for this component when you drag another component on the page and hover over this component to drop it in.
af\|panelCustomizable::edit-mode-content-style	Specifies the style for the area containing the Edit and Delete icons.
af\|panelCustomizable::add-icon-style af\|panelCustomizable::add-icon-style:active af\|panelCustomizable::add-icon-style:hover af\|panelCustomizable::add-icon-style:rtl	Specify the styles for the Add Content button on the component.
af\|panelCustomizable::edit-icon-style af\|panelCustomizable::edit-icon-style:active af\|panelCustomizable::edit-icon-style:hover	Specify the styles for the Edit icon on the component.
af\|panelCustomizable::delete-icon-style af\|panelCustomizable::delete-icon-style:active af\|panelCustomizable::delete-icon-style:hover	Specify the styles for the Delete icon on the component.
.PanelCustomizableDropProxy	Specifies the style for the placeholder area inside this component when you drag another component on the page and hover over this component to drop it in.
af\|panelCustomizable:edit:inline-selected .p_AFActiveInlineEditableContainer af\|panelCustomizable:edit:hover-target	Specifies the styles for the components in the inline editable subtree in the `Panel Customizable` component.
af\|panelCustomizable::add-icon-link af\|panelCustomizable::add-icon-link:active af\|panelCustomizable::add-icon-link:hover	Specify the styles for the Add icon in the `Panel Customizable` component.
af\|panelCustomizable::addtab-icon-style af\|panelCustomizable::addtab-icon-style:active af\|panelCustomizable::addtab-icon-style:hover	Specify the styles for the Add Tab icon in the `Panel Customizable` component.
af\|panelCustomizable::split-up-icon-style af\|panelCustomizable::split-up-icon-style:active af\|panelCustomizable::split-up-icon-style:hover af\|panelCustomizable::split-down-icon-style af\|panelCustomizable::split-down-icon-style:active af\|panelCustomizable::split-down-icon-style:hover af\|panelCustomizable::split-left-icon-style af\|panelCustomizable::split-left-icon-style:active af\|panelCustomizable::split-left-icon-style:hover af\|panelCustomizable::split-right-icon-style af\|panelCustomizable::split-right-icon-style:active af\|panelCustomizable::split-right-icon-style:hover	Specify styles for the icons available on a `Panel Customizable` component to split it horizontally and vertically.
.PanelCustomizableDropProxy	Specifies the style for a component being dragged and dropped inside a `Panel Customizable` component.

B.5.1.6 Show Detail Frame Style Selectors

Use the style selectors listed in Table B-23 to skin portlets and Show Detail Frame components.

In WebCenter Portal applications, each portlet is rendered with portlet chrome (for more information, see Section 57.1.1, "Portlet Anatomy"). The portlet chrome shares the same chrome rendering mechanism as a Show Detail Frame component. Thus, the style and icon selectors that apply to Show Detail Frame also apply to the portlet chrome. In other words, in addition to defining styles for Show Detail Frame components, use Show Detail Frame style and icon selectors to define styles for portlets.

Note:

Some Show Detail Frame style selectors in Table B-23 have light, medium, and dark color scheme options. Using these you can define three distinct looks in your CSS and specify which one to use through the background property in the JDeveloper Property Inspector. Depending on which value is specified for a component instance's background property, the skin applies the relevant style.

Table B-23 Show Detail Frame Style Selectors

Style Selector	Description
af\|showDetailFrame	Specifies the style for the root element of the component.
af\|showDetailFrame::container:light af\|showDetailFrame::container:medium af\|showDetailFrame::container:dark	Specify the styles for the element containing the contents within the component.
af\|showDetailFrame.p_AFStretched	Specifies the style for the root element when the component is stretched.
af\|showDetailFrame::content af\|showDetailFrame::content:light af\|showDetailFrame::content:medium af\|showDetailFrame::content:dark	Specify the styles to render for the content region of the component.
af\|showDetailFrame::header af\|showDetailFrame::header:light af\|showDetailFrame::header:medium af\|showDetailFrame::header:dark	Specify the styles for the header element. This element surrounds the header text, icon, and actions regions.
af\|showDetailFrame::header-center af\|showDetailFrame::header-center:medium af\|showDetailFrame::header-center:dark	Specify the styles for the region on the component header containing the icons, title, and actions menu.
af\|showDetailFrame::header-startaf\|showDetailFrame::header-start:rtl af\|showDetailFrame::header-start:dark af\|showDetailFrame::header-start:dark:rtl	Specify the styles for the small cap-like area at the start of the header. Available alias is `:rtl`, which can be used when the component must be rendered right-to-left.
af\|showDetailFrame::header-end, af\|showDetailFrame::header-end:rtl af\|showDetailFrame::header-end:dark af\|showDetailFrame::header-end:dark:rtl	Specify the styles for the small cap-like area at the end of the header. Available alias is `:rtl`, which can be used when the component must be rendered right-to-left.
af\|showDetailFrame::footer-start af\|showDetailFrame::footer-start:rtl af\|showDetailFrame::footer-center af\|showDetailFrame::footer-end af\|showDetailFrame::footer-end:rtl	Specify the styles for the `Show Detail Frame` component's footer element.
af\|showDetailFrame::shadowbox af\|showDetailFrame::shadowbox:rtl af\|showDetailFrame::shadowbox_div1 af\|showDetailFrame::shadowbox_div1:rtl af\|showDetailFrame::shadowbox_div2 af\|showDetailFrame::shadowbox_div2:rtl	Specify styles for the shadow cast by the `Show Detail Frame` component.
af\|showDetailFrame::toolbar af\|showDetailFrame::toolbar:rtl	Specifies the styles for a floating toolbar on the `Show Detail Frame` component.
af\|showDetailFrame::icon-style	Specifies the style for the icon on the `Show Detail Frame` header, if the `icon` attribute is set on the component.
af\|showDetailFrame::header-text af\|showDetailFrame::header-text:rtl	Specifies the style for the title available on the component header. Available alias is `:rtl`, which can be used when the component must be rendered right-to-left.
af\|showDetailFrame::header-actions	Specifies the style for icons such as delete and the actions menu on the component header.
af\|showDetailFrame::toolbar-container af\|showDetailFrame::toolbar-container:light af\|showDetailFrame::toolbar-container:medium af\|showDetailFrame::toolbar-container:dark	Specify styles for the container element of the floating toolbar. Available aliases are `:light`, `:medium`, and `:dark`.
af\|showDetailFrame::collapse-icon-style af\|showDetailFrame::collapse-icon-style:active af\|showDetailFrame::collapse-icon-style:hover af\|showDetailFrame::collapse-icon-style.PEDisplayNone	Specify styles for the Collapse icon on the component header. Available aliases are `:active` and `:hover` that you can use to specify styles for the Collapse icon when clicked or when the mouse hovers over it. You can use `PEDisplayNone` to hide the Collapse icon.
af\|showDetailFrame::disclose-icon-style af\|showDetailFrame::disclose-icon-style:active af\|showDetailFrame::disclose-icon-style:hover af\|showDetailFrame::disclose-icon-style.PEDisplayNone	Specify the styles for the Disclose icon on the component header. You can use `PEDisplayNone` to hide the Disclose icon.
af\|showDetailFrame::actionmenu-icon-style af\|showDetailFrame::actionmenu-icon-style:active af\|showDetailFrame::actionmenu-icon-style:hover	Specify the styles for the action menu icon. This style has a background-image that you can override.
af\|showDetailFrame::remove-icon-style af\|showDetailFrame::remove-icon-style:active af\|showDetailFrame::remove-icon-style:hover	Specify the styles for the Delete icon.
af\|showDetailFrame::edit-icon-style af\|showDetailFrame::edit-icon-style:active af\|showDetailFrame::edit-icon-style:hover	Specify the styles for the Edit icon.
af\|showDetailFrame::preview-icon-style af\|showDetailFrame::preview-icon-style:active af\|showDetailFrame::preview-icon-style:hover	Specify styles for the Preview icon.
af\|showDetailFrame::edit-mode-content-style af\|showDetailFrame::edit-mode-content-style:light	Specify the styles for the area that contains the edit and remove icons.
af\|showDetailFrame::edit-mode-edit-icon-style af\|showDetailFrame::edit-mode-edit-icon-style:active af\|showDetailFrame::edit-mode-edit-icon-style:hover	Specify the styles for the Edit icon on the component header in Edit mode.
af\|showDetailFrame::edit-mode-remove-icon-style af\|showDetailFrame::edit-mode-remove-icon-style:active af\|showDetailFrame::edit-mode-remove-icon-style:hover	Specify the styles for the Delete icon on the component header in Edit mode.
af\|showDetailFrame::edit-text-link af\|showDetailFrame::edit-text-link:rtl af\|showDetailFrame::edit-text-link:hover	Specify the styles for the Edit Text link in Edit mode when the component includes a Rich Text Editor component as a child.
af\|showDetailFrame::resize af\|showDetailFrame::resize:rtl	Specifies the style for the resize handler on the component. Available alias is `:rtl`, which can be used when component must be rendered right-to-left.
af\|showDetailFrame::content.PEWrapsRTE > af\|richTextEditor af\|toolbox > af\|toolbox::body, af\|showDetailFrame::content.PEWrapsRTE > af\|richTextEditor af\|toolbox > af\|toolbox::body > af\|toolbox::row, af\|showDetailFrame::content.PEWrapsRTE > af\|richTextEditor af\|toolbox > af\|toolbox::body > af\|toolbox::last-row, af\|showDetailFrame::content.PEWrapsRTE > af\|richTextEditor af\|richTextEditor::content-input-container af\|showDetailFrame::content.PEWrapsRTE > af\|richTextEditor af\|richTextEditor::content-input, af\|showDetailFrame::content.PEWrapsRTE > af\|richTextEditor af\|richTextEditor::content-input-container af\|showDetailFrame::content:medium.PEWrapsRTE af\|showDetailFrame::content:light.PEWrapsRTE af\|showDetailFrame::content.PEWrapsRTE > af\|richTextEditor af\|toolbox	Specify styles for the areas surrounding and inside a nested Rich Text Editor component. For example, to ensure that the background color of the Rich Text Editor component is transparent in Edit mode, or to provide borders around the component.
af\|showDetailFrame::content.PEStretched	Specifies the height when the `Show Detail Frame` component stretches its content.
af\|showDetailFrame::content.PEStretched:printable	Ensures that the `Show Detail Frame` does not restrict the height of its content in printable mode.
af\|showDetailFrame::dynamic-help-icon-container af\|showDetailFrame::dynamic-help-icon-container:rtl	Specifies the styles for the help icon container on the component header.
af\|showDetailFrame::dynamic-help-icon-style af\|showDetailFrame::dynamic-help-icon-style:active af\|showDetailFrame::dynamic-help-icon-style:hover	Specify the styles for the help icon on the component header.
.PEShowDetailFrameAnimIcon	Specifies the animation icon to be used to show busy status on the component, for example, when you expand it.
.PEIconAndTextInHeading:alias .PEIconAndTextInHeading:alias:rtl	Specify the styles for rendering an icon with text in the component header.

B.5.2 Style Attributes

Table B-24 provides a quick reference for the style attributes available for WebCenter Customizable Components and Oracle Composer components through the JDeveloper Property Inspector. Note that portlets also use these style attributes.

For detailed information about style properties, see the CSS Specifications page at:

http://www.w3.org/TR/CSS21/

Table B-24 Style Attributes of Oracle Composer and WebCenter Customizable Components

Attribute	Description
`background-color`	The background color of the component. Choose from a list of colors, or click the Edit icon to select from a color palette.
`background-image`	The image that is displayed in the component background. Select to inherit from a parent component or to display no image, or click the Edit icon to select an image.
`background-repeat`	Specify whether and how the background image should repeat. Choose from: `<none>`: Forgo repeating the image. `no-repeat`: Forgo repeating the image. `repeat`: Repeat the image to fill the container. `repeat-x`: Repeat the image horizontally but not vertically. `repeat-y`: Repeat the image vertically but not horizontally. `inherit`: Inherit this setting from a parent component.
`border-color`	The color of the border that surrounds the component. Choose from a list of colors, or click the Edit icon to select from a color palette.
`border-style`	The style of border to draw around the component. Choose from: `<none>`: Apply no style to the border. `none`: Do not display a border (use `border-style:none` on the `ContentStyle` property to turn off portlet borders. Using this attribute with `InlineStyle` does not turn off portlet borders.) `hidden`: Hide the border. `dotted`: Display the border as a line of dots. `double`: Display the border as a double line. `groove`: Display the border as a grooved line. `ridge`: Display the border as a ridged line. `inset`: Display the border as a concave line. `outset`: Display the border as a convex line. `dashed`: Display the border as a line of dashes. `solid`: Display the border as a solid line. `inherit`: Inherit the border style from a parent component.
`border-width`	The thickness of the component border. Select `thick`, `medium`, `thin`, or `inherit` to determine the thickness of the border or inherit border width from a parent component. Alternatively, click the Edit icon and define a thickness in your preferred unit of measurement.
`color`	The color of the component text. Select from a list, or click the Edit icon to select from a color palette.
`font-family`	The font family (such as Arial, Helvetica, or sans-serif) for the component text. Enter this value manually.
`font-size`	The size of component text. Choose from: `Choose Length`: Specify an absolute value for the `font-size` in your preferred unit of measurement. `Choose Percentage`: Specify font size as a percentage of the normal text size defined for the browser. `inherit`: Inherit font size from a parent component. `large`: Select the next size larger than the font associated with the parent component. `larger`: Increase the font size to larger than the font associated with the parent component (`larger` is larger than `large`). `medium`: Set the font size to the default font size of the parent component. `small`: Set the font size to smaller than the default font size of the parent component. `smaller`: Set the font size to smaller than the default font size of the parent component (`smaller` is smaller than `small`).
`font-style`	The font style of the component text. Choose from: `<none>`: Apply no style to the font. `normal`: The font is not italic. `italic`: The font is italic. `oblique`: The font is slanted to look italic, though the font family may not have a formal italic member. `inherit`: Inherit font style from a parent component.
`font-weight`	The thickness of the component text. Choose from: `<none>`: Specify no weight for the component text. `normal`: Apply same weight as the parent component's default font weight. `bold`: Set component text in bold. `bolder`: Set component text darker than bold. `light`: Set component text lighter than normal. `lighter`: Set component text lighter than light. `100–900`: Specify a value for text darkness—`100` is lightest and `900` is darkest—`400` is normal weight; `700` is bold. `inherit`: Inherit font weight from a parent component.
`height`	The spacing to apply between lines of continuous text (also known as leading). Specify a height by choosing from: `Choose Length`: Specify an absolute value in your preferred unit of measurement. `Choose Percentage`: Specify a value as a percentage of the value set for a parent component. `auto`: Set line height automatically, usually about 2 points larger than font size. `inherit`: Inherit line height from the parent component.
`list-style-image`	An image to use as an indicator of a list item. Specify an image instead of defining a `list-style-type`. Choose from: `inherit`: Inherit a list style image from a parent component. `none`: Use no image as an indicator of a list item. Or click the Edit icon and select an image.
`list-style-type`	The type of indicator to use for items on a list. Use this instead of specifying a image through `list-style-image`. Select from among many styles offered on the list, including `<none>`, which means the browser's default style is used, and `inherit`, which means the `list-style-type` is inherited from a parent component.
`margin`	The border of space surrounding the component content. Choose from: `Choose Length`: Specify an absolute value for all margins. `Choose Percentage`: Set a value as a percentage of the margin of a parent component. `inherit`: Inherit margin value from a parent component. `auto`: Set the value automatically according to browser defaults.
`padding`	The amount of space between the component and its margin or, if there is a border, between the component and its border. Choose from: `Choose Length`: Specify an absolute value in your preferred unit of measurement. `Choose Percentage`: Specify the value as a percentage of the padding set for a parent component. `inherit`: Inherit the value from a parent component.
`text-align`	The horizontal alignment of the component text. Choose from: `<none>`: Use browser default. `left` `right` `center` `justify`: Align text so that all lines start and end at the same point left and right. `auto`: Apply a value automatically, either left or right. `inherit`: Inherit alignment from a parent component.
`text-decoration`	The decorative value to apply to component text. Choose from: `<none>`: Use the browser default for hyperlinks; otherwise, no text decoration. `none`: No text decoration, including no underscore for hyperlinks. `underline`: Draw a line under all component text. `overline`: Draw a line over all component text. `line-through`: Draw a line through the middle of all component text. `blink`: Make component text blink. `inherit`: Inherit text decoration from a parent component.
`vertical-align`	The vertical alignment of component text. Choose from: `Choose Length`: Specify an absolute value in your preferred unit of measurement. `Choose Percentage`: Specify a value as a percentage of the value set for a parent component. `inherit`: Inherit the value from a parent component. `baseline`: Set the text on the baseline of the text row. `middle`: Set the text in the middle of the text row. `text-bottom`: Set the text on the bottom of the text row, lower than the baseline. `text-top`: Set the text at the top of the text row, above the baseline. `sub`: Set the text as subscript. `super`: Set the text as superscript.
`width`	The spacing between text. Specify a width by choosing from: `Choose Length`: Specify an absolute value in your preferred unit of measurement. `Choose Percentage`: Specify a value as a percentage of the value set for a parent component. `auto`: Set line height automatically, usually about 2 points larger than font size. `inherit`: Inherit line height from the parent component.

B.6 Customizable Components (HTML) Properties

Customizable Components (HTML) are similar in function to customizable components from the 10.1.3.2.0 release and can be used to add more customizable components to your migrated 10.1.3.2.0 application page. These customizable components are available from the Customizable Components (HTML) tag library in JDeveloper. When you add customizable components to the page, default values are assigned to certain attributes and you can define values for the remaining attributes as required.

Customizable components enable users to minimize or maximize, hide or show, or move any component on the page at runtime.

B.6.1 Panel Customizable (HTML) Component

Use the Panel Customizable (HTML) component as a container for page content that can be customized at runtime. Components added inside a Panel Customizable (HTML) can be maximized, minimized, or rearranged.

Use this component only to perform runtime customizations on child components. If you just want a container to arrange components at design time, then it is recommended that you use an ADF Faces container like Panel Group Layout.

Table B-25 describes the attributes of a Panel Customizable (HTML) component.

Table B-25 Attributes of a Panel Customizable (HTML) Component

Attribute	Type	Supports EL?	Description
Common Attributes
id	String	No	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`.
layout	List of values `horizontal`/`vertical`	Yes	Specifies how the children of the `Panel Customizable` (HTML) are laid out. The default value is `vertical`. Depending on the value of the layout attribute, child components are laid out as follows: If you select `vertical`, then the child components are displayed one below the other and can be moved either up or down within the layout. If you select `horizontal`, then the child components are displayed adjacent to each other and can be moved either to the left or right within the layout.
Style Attributes
styleClass	String	Yes	A CSS style class to use for this component. The style class can be defined in your JSPX page or in a skinning CSS file, for example.
inlineStyle	String	Yes	The CSS styles to use for this component. This is intended for basic style changes. The `inlineStyle` is a set of CSS styles that are applied to the root DOM element of the component. If the `inlineStyle`'s CSS properties do not affect the DOM element you want affected, then you must create a skin and use the skinning keys which are meant to target particular DOM elements, like `::label` or `::icon-style`.
Advanced Attributes
binding	String	Yes	An EL reference that stores the component instance in a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean. For example: binding="#{yourManagedBean.Binding}"

B.6.2 Show Detail Frame (HTML) Component

Add Show Detail Frame (HTML) components inside Panel Customizable (HTML) components to enable user customizations like maximizing, moving, minimizing, restoring, and deleting child components. You can perform these customizations only if you add Show Detail Frame (HTML) components inside Panel Customizable (HTML) components.

Table B-26 describes the attributes of a Show Detail Frame (HTML) component.

Table B-26 Attributes of a Show Detail Frame (HTML) Component

Attribute	Type	Supports EL?	Description
Common Attributes
id	String	No	The identifier for the component. The identifier must follow a subset of the syntax allowed in HTML: Must not be a zero-length String. First character must be an ASCII letter (A-Za-z) or an underscore ('_'). Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').
rendered	Boolean	Yes	Specifies whether the component is rendered. When set to `false`, no output is delivered for this component (the component is not in any way rendered, and cannot be made visible on the client). The default value is `true`.
text	String	Yes	A title for the `Show Detail Frame` (HTML) component.
icon	String	Yes	If you want to add an icon on the header of the `Show Detail Frame` component, then this specifies the URI for the image to be used. For example: icon="http://source-pc/images/accessability.gif" Note: An image that is stored at the document root does not require a full path. For example: icon="detail.gif"
Appearance Attributes
shortDesc	String	Yes	The short description of the component. This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent, for example, Firefox 2 truncates long tooltips. For form components, the `shortDesc` is displayed in a note window.
background	List of values `light`/`medium`/`dark`	Yes	Working with the skin CSS, provides a means of applying a different look and feel for this `Show Detail Frame (HTML)` instance. The default value is `medium`.
displayHeader	Boolean	Yes	Indicates whether the header of the `Show Detail Frame` (HTML) is displayed. The default value is `true`. If you set `displayHeader` to `false` and if you have exposed some actions on the component, then a toolbar is displayed when you move the mouse over the component area. The toolbar contains a drop down icon, which displays a menu of available options. This toolbar is rendered only if there are actions available on the component. The toolbar display is also affected by the `isSeededInteractionAvailable` attribute. As the default value for `isSeededInteractionAvailable` is `false`, the toolbar is not displayed. It can be displayed by setting `isSeededInteractionAvailable` to `true`.
expansionMode	List of values `maximized`/`minimized`/`normal`	Yes	The default state of the `Show Detail Frame (HTML)`. The default display mode is `normal`.
Actions Attributes
showMoveAction	List of values `menu`/`none`	Yes	Specifies whether the Move action is displayed in the Actions menu. The default value is `menu`.
showMinimizeAction	List of values `chrome`/`none`	Yes	Specifies whether the minimize action is displayed on the header. The default is `chrome`.
showMaximizeAction	List of values `menu`/`none`	Yes	Specifies whether the minimize action is displayed on the header. The default value is `menu`.
Style Attributes
contentStyle	String	Yes	The CSS style to apply to the `Show Detail Frame (HTML)` content area. Manually enter any style in compliance with CSS version 2.0 or later.
styleClass	String	Yes	A CSS style class to use for this component. The style class can be defined in your JSPX page or in a skinning CSS file, for example.
inlineStyle	String	Yes	The CSS styles to use for this component. This is intended for basic style changes. The `inlineStyle` is a set of CSS styles that are applied to the root DOM element of the component. If the `inlineStyle`'s CSS properties do not affect the DOM element you want affected, then you must create a skin and use the skinning keys which are meant to target particular DOM elements, like `::label` or `::icon-style`.
Behavior Attributes
partialTriggers	String	Yes	The IDs of the components that should trigger a partial update. This component listens on the trigger components. If a trigger component receives an event that causes it to update in some way, this component requests to be updated too. Identifiers are relative to the source component (this component), and must account for NamingContainers. If your component is inside of a naming container, you can use a single colon to start the search from the root of the page, or multiple colons to move up through the NamingContainers - "`::`" pops out of the component's naming container (or itself if the component is a naming container) and begin the search from there, "`:::`" pops out of two naming containers (including itself if the component is a naming container) and begin the search from there.
disclosureListener	`javax.el.MethodExpression`	Yes	A method reference to a disclosure listener. A disclosure event is fired when the disclosure state changes.
Advanced Attributes
binding	String	Yes	An EL reference that stores the component instance in a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean. For example: binding="#{yourManagedBean.Binding}"
attributeChangeListener	`javax.el.MethodExpression`	Yes	A method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.

The Expression Builder option available when setting these attributes enables you to bind the component instance to a managed bean property.

Show Detail Frame Facets

You can use the Show Detail Frame (HTML) facets to define and display custom actions on Show Detail Frame (HTML) components. Table B-27 describes the facets that enable you to display custom actions supported by the Show Detail Frame (HTML) component.

Table B-27 Show Detail Frame (HTML) Facets

Facet	Description
titleBarAction	Used if an action is to be associated with title of the `Show Detail Frame` (HTML) component.
additionalActions	Used if some additional actions are to be added to the list of actions available on the `Show Detail Frame (HTML)` header.

JDeveloper displays all facets available to the Show Detail Frame (HTML) component in the Structure window. However, only those that contain UI components appear activated.

B.6.3 Customizable Components (HTML) Style Selectors

The tables in this section describe the style selectors that you can use to skin WebCenter Customizable Components.

This section contains the following subsections:

Panel Customizable (HTML) Style Selectors
Show Detail Frame (HTML) Style Selectors
Property Keys
Icon Selectors

B.6.3.1 Panel Customizable (HTML) Style Selectors

Use the style selectors listed in Table B-28 to skin Panel Customizable (HTML) components. For icon selectors relevant to the Panel Customizable component, see Section B.6.3.4, "Icon Selectors."

Table B-28 Panel Customizable (HTML) Style Selectors

Style Selector	Description
afh\|panelCustomizable::no-header-content	Specifies the style to render for all four component borders when the component header is turned off.

B.6.3.2 Show Detail Frame (HTML) Style Selectors

Use the style selectors listed in Table B-29 to skin the Show Detail Frame (HTML) components.

Note:

In addition to defining styles for Show Detail Frame components, the Show Detail Frame style and icon selectors define styles for portlets.

Table B-29 Show Detail Frame (HTML) Style Selectors

Style Selector	Description
afh\|showDetailFrame::header-top-border-light afh\|showDetailFrame::header-top-border-medium afh\|showDetailFrame::header-top-border-dark	Specifies the style for the top and bottom border of a component header and, also the header background color.
afh\|showDetailFrame::container	Specifies the style for the component's container.
afh\|showDetailFrame::header-light afh\|showDetailFrame::header-medium afh\|showDetailFrame::header-dark	Specifies the style for text in the component's header. The header is usually a banner of color that contains a title and links to menus and other types of actions. Define the header background color with the `af\|showDetailFrame::header-top-border-[light,medium,dark]` style element. Use icon selectors to specify the icons to use in the component header and, also the shape of the header's left and right sides.
afh\|showDetailFrame::content-light afh\|showDetailFrame::content-medium afh\|showDetailFrame::content-dar	Specifies the style for the component's left, right, and bottom borders.
afh\|showDetailFrame::main-menu-container	Specifies the style for the component's main menu container.
afh\|showDetailFrame::sub-menu-container	Specifies the style for the component's submenu container.
afh\|showDetailFrame::menu-item	Specifies the style for an individual item on the component's main menu.
afh\|showDetailFrame::menu-item:hover	Specifies the style to render when the mouse hovers over a component main menu item.
afh\|showDetailFrame::sub-menu-item	Specifies the style for an individual item on the component's submenu.
afh\|showDetailFrame::sub-menu-item:hover	Specifies the style to render when the mouse hovers over a component submenu item.
afh\|showDetailFrame::actions-image-separator	Specifies the amount of padding to provide around the component's Actions, Minimize, and Restore icons. For more information, see also Section B.6.3.4, "Icon Selectors".
afh\|showDetailFrame::menu-item-separator	Specifies the style for the line that separates a command or groups of commands on the component's Actions menu. In the default case, a separator appears to be a single thick line. This is achieved using `border-top` and `border-bottom` elements to style the separator. A user who creates a custom skin can style the separator differently. For example, a user can create a separator that displays as a rectangular bar with a colorful background.
A.afh\|showDetailFrame::title-clickable	Specifies the style to render for the component's title when the title is a link.
afh\|showDetailFrame::no-header-content afh\|showDetailFrame::no-header-content-light afh\|showDetailFrame::no-header-content-medium afh\|showDetailFrame::no-header-content-dark	Specifies the style to render for all four component borders when the component header is turned off.

B.6.3.3 Property Keys

Use property keys to control the display of custom menu items and component action icons. Though you include property keys in your custom skin, they are not represented in the generated CSS that results from the skin.

To explain, skins go through a process that results in a generated CSS. In turn, the generated CSS is consumed by the application. Most style selectors for Panel Customizable and Show Detail Frame components are represented in the generated CSS. Property keys are the exception. Although they affect the application as much as any other component style selector, they are not represented in the final generated CSS.

Table B-30 lists and describes property keys relevant to Panel Customizable and Show Detail Frame components.

Table B-30 Property Keys of Panel Customizable and Show Detail Frame Components

Property Key Description

Property Key	Description
showDetailFrame {-ora-additional-actions-position-last:true}	Positions additional actions relative to seeded actions on the component's Actions menu. Set to `false` to position additional actions before seeded actions. By default, additional actions are positioned after seeded actions. The default value is `true`.
showDetailFrame {-ora-menu-icon-display:false}	Controls the display of icons next to their related commands on a `Show Detail Frame` Actions menu. Set to `true` to display icons to the left of each action on the Actions menu. By default, no icons are displayed to the left of individual actions. The default value is `false`. For information about specifying the icons to use when this property key is set to `true`, see Section B.6.3.4, "Icon Selectors."

showDetailFrame {-ora-additional-actions-position-last:true}

Positions additional actions relative to seeded actions on the component's Actions menu.

Set to false to position additional actions before seeded actions. By default, additional actions are positioned after seeded actions.

The default value is true.

showDetailFrame {-ora-menu-icon-display:false}

Controls the display of icons next to their related commands on a Show Detail Frame Actions menu.

Set to true to display icons to the left of each action on the Actions menu. By default, no icons are displayed to the left of individual actions.

The default value is false.

For information about specifying the icons to use when this property key is set to true, see Section B.6.3.4, "Icon Selectors."

B.6.3.4 Icon Selectors

Icons are either displayed or not displayed depending on whether the component's ora-menu-icon-display property key is set to true or false. Property keys are described in Section B.6.3.3, "Property Keys."

Each icon selector has a light, medium, and dark scheme. Using these you can define three distinct looks in your CSS and specify which one to use through the background property in the JDeveloper Property Inspector. Depending on which value is specified for a component instance's background property, the skin applies the relevant style.

For easy, error-free portability, store all application icons under the WebCenter Portal application's root folder.

The selectors described in Table B-31 apply to the icons used with Panel Customizable (HTML) and Show Detail Frame (HTML) components.

Table B-31 Icon Selectors for WebCenter Customizable Components

Selector Description

Selector	Description
`showDetailFrame` showDetailFrame::light-ActionsIcon:alias showDetailFrame::medium-ActionsIcon:alias showDetailFrame::dark-ActionsIcon:alias `panelCustomizable` panelCustomizable::light-ActionsIcon:alias panelCustomizable::medium-ActionsIcon:alias panelCustomizable::dark-ActionsIcon:alias	This icon represents the Actions menu. The Actions menu lists the actions a user can perform on the component. In a WebCenter Portal application, the Actions icon is rendered on the right corner of the component header.
`showDetailFrame` showDetailFrame::light-MinimizeIcon:alias showDetailFrame::medium-MinimizeIcon:alias showDetailFrame::dark-MinimizeIcon:alias `panelCustomizable` panelCustomizable::light-MinimizeIcon:alias panelCustomizable::medium-MinimizeIcon:alias panelCustomizable::dark-MinimizeIcon:alias	This icon represents the Minimize option. Minimize collapses the view of the component like a window shade. In a WebCenter Portal application, the Minimize icon is rendered on the left side of the component header. See also, `showDetailFrame::light-ExpandIcon:alias`.
`showDetailFrame` showDetailFrame::light-MaximizeIcon:alias showDetailFrame::medium-MaximizeIcon:alias showDetailFrame::dark-MaximizeIcon:alias	This is applicable only for the `Show Detail Frame (HTML)` component. The rich variant of this component does not support the maximize action. This icon represents the Maximize option, which expands the `Show Detail Frame (HTML)` component to the dimensions of the `Panel Customizable (HTML)` component that contains it. Where multiple `Show Detail Frame (HTML)` components display in the same container, these are displaced while the maximized `Show Detail Frame (HTML)` remains maximized. In a WebCenter Portal application, the Maximize icon is displayed to the left of the Maximize command on the component's Actions menu.
`panelCustomizable` panelCustomizable::light-MaximizeIcon:alias panelCustomizable::medium-MaximizeIcon:alias panelCustomizable::dark-MaximizeIcon:alias	This is applicable only for the `Panel Customizable (HTML)` component. The rich variant of this component does not provide any actions. This icon represents the Maximize option, which expands component display to the dimensions of the container. Where multiple components display in the same container, these are displaced by the maximized component. In a WebCenter Portal application, the Maximize icon is displayed to the left of the Maximize command on the component's Actions menu.
`showDetailFrame` showDetailFrame::light-RestoreIcon:alias showDetailFrame::medium-RestoreIcon:alias showDetailFrame::dark-RestoreIcon:alias `panelCustomizable` panelCustomizable::light-RestoreIcon:alias panelCustomizable::medium-RestoreIcon:alias panelCustomizable::dark-RestoreIcon:alias	This icon represents the Restore option, which restores maximized views to their default display modes. In a WebCenter Portal application, the Restore icon is rendered to the left of the Restore command on the component's Actions menu.
`showDetailFrame` showDetailFrame::light-ExpandIcon:alias showDetailFrame::medium-ExpandIcon:alias showDetailFrame::dark-ExpandIcon:alias `panelCustomizable` panelCustomizable::light-ExpandIcon:alias panelCustomizable::medium-ExpandIcon:alias panelCustomizable::dark-ExpandIcon:alias	The Expand icon represents the action that expands a component that has been minimized. The Expand icon toggles with the Minimize icon. That is, when the component is minimized, the Expand icon is displayed; when the component is expanded, the Minimize icon is displayed. In a WebCenter Portal application, the Expand icon is displayed on the left side of the component header.
`showDetailFrame` showDetailFrame::light-MoveIcon:alias showDetailFrame::medium-MoveIcon:alias showDetailFrame::dark-MoveIcon:alias `panelCustomizable` panelCustomizable::light-MoveIcon:alias panelCustomizable::medium-MoveIcon:alias panelCustomizable::dark-MoveIcon:alias	This icon represents the Move option, which enables rearrangement of a component's location in relation to the other components on the page. In a WebCenter Portal application, the Move icon is displayed to the left of the Move command on the component's Actions menu.
`showDetailFrame` showDetailFrame::light-MoveLeftIcon:alias showDetailFrame::medium-MoveLeftIcon:alias showDetailFrame::dark-MoveLeftIcon:alias `panelCustomizable` panelCustomizable::light-MoveLeftIcon:alias panelCustomizable::medium-MoveLeftIcon:alias panelCustomizable::dark-MoveLeftIcon:alias	This icon represents the Move Left option on the component submenu. Move Left rearranges the component horizontally, one position closer to the left boundary of the page. For example, imagine three horizontally arranged components. You select Move Left on the right-most component. It becomes the middle component. In a WebCenter Portal application, the Move Left icon is displayed to the left of the Move Left submenu item on the component's Actions menu.
`showDetailFrame` showDetailFrame::light-MoveRightIcon:alias showDetailFrame::medium-MoveRightIcon:alias showDetailFrame::dark-MoveRightIcon:alias `panelCustomizable` panelCustomizable::light-MoveRightIcon:alias panelCustomizable::medium-MoveRightIcon:alias panelCustomizable::dark-MoveRightIcon:alias	This icon represents the Move Right option on the component submenu. Move Right rearranges the component horizontally, one position closer to the right boundary of the page. For example, imagine three horizontally arranged components. You select Move Right on the left-most component. It becomes the middle component. In a WebCenter Portal application, the Move Right icon is displayed to the left of the Move Right submenu item on the component's Actions menu.
`showDetailFrame` showDetailFrame::light-MoveUpIcon:alias showDetailFrame::medium-MoveUpIcon:alias showDetailFrame::dark-MoveUpIcon:alias `panelCustomizable` panelCustomizable::light-MoveUpIcon:alias panelCustomizable::medium-MoveUpIcon:alias panelCustomizable::dark-MoveUpIcon:alias	This icon represents the Move Up option on the component submenu. Move Up rearranges the component vertically in relation to the other components on the page. For example, imagine three vertically arranged components. You select Move Up on the middle component. It becomes the topmost component. In a WebCenter Portal application, the Move Up icon is displayed to the left of the Move Up submenu item on the component's Actions menu.
`showDetailFrame` showDetailFrame::light-MoveDownIcon:alias showDetailFrame::medium-MoveDownIcon:alias showDetailFrame::dark-MoveDownIcon:alias `panelCustomizable` panelCustomizable::light-MoveDownIcon:alias panelCustomizable::medium-MoveDownIcon:alias panelCustomizable::dark-MoveDownIcon:alias	This icon represents the Move Down option on the component submenu. Move Down rearranges the component vertically in relation to the other components on the page. For example, imagine three vertically arranged components. You select Move Down on the middle component. It becomes the bottommost component. In a WebCenter Portal application, the Move Down icon is displayed to the left of the Move Down submenu item on the component's Actions menu.
`showDetailFrame` showDetailFrame::light-HeaderLeftIcon:alias showDetailFrame::medium-HeaderLeftIcon:alias showDetailFrame::dark-HeaderLeftIcon:alias `panelCustomizable` panelCustomizable::light-HeaderLeftIcon:alias panelCustomizable::medium-HeaderLeftIcon:alias panelCustomizable::dark-HeaderLeftIcon:alias	This icon provides an image for the top-left corner of the component header.
`showDetailFrame` showDetailFrame::light-HeaderRightIcon:alias showDetailFrame::medium-HeaderRightIcon:alias showDetailFrame::dark-HeaderRightIcon:alias `panelCustomizable` panelCustomizable::light-HeaderRightIcon:alias panelCustomizable::medium-HeaderRightIcon:alias panelCustomizable::dark-HeaderRightIcon:alias	This icon provides the image for the top-right corner of the component header.
`showDetailFrame` showDetailFrame::light-ToolbarLeftIcon:alias showDetailFrame::medium-ToolbarLeftIcon:alias showDetailFrame::dark-ToolbarLeftIcon:alias `panelCustomizable` panelCustomizable::light-ToolbarLeftIcon:alias panelCustomizable::medium-ToolbarLeftIcon:alias panelCustomizable::dark-ToolbarLeftIcon:alias	This icon provides the left portion of the component's FadeIn-FadeOut toolbar. The FadeIn-FadeOut toolbar comes into play when the `adfp:portlet` tag attribute `isSeededInteractionAvailable` is set to `true` and `displayHeader` is set to `false`. The toolbar contains the Actions menu that would otherwise be displayed on the header. To invoke the toolbar, users move their mouse over the component content area. If the page design is very simple, then the FadeIn-FadeOut toolbar may not display, even when `displayHeader` is set to `false` and `isSeededInteractionAvailable` is set to `true`.
`showDetailFrame` showDetailFrame::light-ToolbarRightIcon:alias showDetailFrame::medium-ToolbarRightIcon:alias showDetailFrame::dark-ToolbarRightIcon:alias `panelCustomizable` panelCustomizable::light-ToolbarRightIcon:alias panelCustomizable::medium-ToolbarRightIcon:alias panelCustomizable::dark-ToolbarRightIcon:alias	This icon provides the right portion of the component's FadeIn-FadeOut toolbar. See the description for `showDetailFrame::light-ToolbarLeftIcon:alias` for an explanation of the FadeIn-FadeOut toolbar.
`showDetailFrame` showDetailFrame::light-ToolbarCenterIcon:alias showDetailFrame::medium-ToolbarCenterIcon:alias showDetailFrame::dark-ToolbarCenterIcon:alias `panelCustomizable` panelCustomizable::light-ToolbarCenterIcon:alias panelCustomizable::medium-ToolbarCenterIcon:alias panelCustomizable::dark-ToolbarCenterIcon:alias	This icon provides the center portion of the component's FadeIn-FadeOut toolbar. See the description for `showDetailFrame::light-ToolbarLeftIcon:alias` for an explanation of the FadeIn-FadeOut toolbar.
`showDetailFrame` showDetailFrame::light-EditIcon:alias showDetailFrame::medium-EditIcon:alias showDetailFrame::dark-EditIcon:alias `panelCustomizable` panelCustomizable::light-EditIcon:alias panelCustomizable::medium-EditIcon:alias panelCustomizable::dark-EditIcon:alias	This icon represents the Edit option on the component menu. In a WebCenter Portal application, the Edit icon is displayed to the left of the Edit menu item on the component's Actions menu.
`showDetailFrame` showDetailFrame::light-HelpIcon:alias showDetailFrame::medium-HelpIcon:alias showDetailFrame::dark-HelpIcon:alias `panelCustomizable` panelCustomizable::light-HelpIcon:alias panelCustomizable::medium-HelpIcon:alias panelCustomizable::dark-HelpIcon:alias	This icon represents the Help option on the component menu. In a WebCenter Portal application, the Help icon is displayed to the left of the Help menu item on the component's Actions menu.

showDetailFrame

showDetailFrame::light-ActionsIcon:alias
showDetailFrame::medium-ActionsIcon:alias
showDetailFrame::dark-ActionsIcon:alias

panelCustomizable

panelCustomizable::light-ActionsIcon:alias
panelCustomizable::medium-ActionsIcon:alias
panelCustomizable::dark-ActionsIcon:alias

This icon represents the Actions menu. The Actions menu lists the actions a user can perform on the component.

In a WebCenter Portal application, the Actions icon is rendered on the right corner of the component header.

showDetailFrame

showDetailFrame::light-MinimizeIcon:alias
showDetailFrame::medium-MinimizeIcon:alias
showDetailFrame::dark-MinimizeIcon:alias

panelCustomizable

panelCustomizable::light-MinimizeIcon:alias
panelCustomizable::medium-MinimizeIcon:alias
panelCustomizable::dark-MinimizeIcon:alias

This icon represents the Minimize option. Minimize collapses the view of the component like a window shade.

In a WebCenter Portal application, the Minimize icon is rendered on the left side of the component header.

See also, showDetailFrame::light-ExpandIcon:alias.

showDetailFrame

showDetailFrame::light-MaximizeIcon:alias
showDetailFrame::medium-MaximizeIcon:alias
showDetailFrame::dark-MaximizeIcon:alias

This is applicable only for the Show Detail Frame (HTML) component. The rich variant of this component does not support the maximize action.

This icon represents the Maximize option, which expands the Show Detail Frame (HTML) component to the dimensions of the Panel Customizable (HTML) component that contains it. Where multiple Show Detail Frame (HTML) components display in the same container, these are displaced while the maximized Show Detail Frame (HTML) remains maximized.

In a WebCenter Portal application, the Maximize icon is displayed to the left of the Maximize command on the component's Actions menu.

panelCustomizable

panelCustomizable::light-MaximizeIcon:alias
panelCustomizable::medium-MaximizeIcon:alias
panelCustomizable::dark-MaximizeIcon:alias

This is applicable only for the Panel Customizable (HTML) component. The rich variant of this component does not provide any actions.

This icon represents the Maximize option, which expands component display to the dimensions of the container. Where multiple components display in the same container, these are displaced by the maximized component.

In a WebCenter Portal application, the Maximize icon is displayed to the left of the Maximize command on the component's Actions menu.

showDetailFrame

showDetailFrame::light-RestoreIcon:alias
showDetailFrame::medium-RestoreIcon:alias
showDetailFrame::dark-RestoreIcon:alias

panelCustomizable

panelCustomizable::light-RestoreIcon:alias
panelCustomizable::medium-RestoreIcon:alias
panelCustomizable::dark-RestoreIcon:alias

This icon represents the Restore option, which restores maximized views to their default display modes.

In a WebCenter Portal application, the Restore icon is rendered to the left of the Restore command on the component's Actions menu.

showDetailFrame

showDetailFrame::light-ExpandIcon:alias
showDetailFrame::medium-ExpandIcon:alias
showDetailFrame::dark-ExpandIcon:alias

panelCustomizable

panelCustomizable::light-ExpandIcon:alias
panelCustomizable::medium-ExpandIcon:alias
panelCustomizable::dark-ExpandIcon:alias

The Expand icon represents the action that expands a component that has been minimized. The Expand icon toggles with the Minimize icon. That is, when the component is minimized, the Expand icon is displayed; when the component is expanded, the Minimize icon is displayed.

In a WebCenter Portal application, the Expand icon is displayed on the left side of the component header.

showDetailFrame

showDetailFrame::light-MoveIcon:alias
showDetailFrame::medium-MoveIcon:alias
showDetailFrame::dark-MoveIcon:alias

panelCustomizable

panelCustomizable::light-MoveIcon:alias
panelCustomizable::medium-MoveIcon:alias
panelCustomizable::dark-MoveIcon:alias

This icon represents the Move option, which enables rearrangement of a component's location in relation to the other components on the page.

In a WebCenter Portal application, the Move icon is displayed to the left of the Move command on the component's Actions menu.

showDetailFrame

showDetailFrame::light-MoveLeftIcon:alias
showDetailFrame::medium-MoveLeftIcon:alias
showDetailFrame::dark-MoveLeftIcon:alias

panelCustomizable

panelCustomizable::light-MoveLeftIcon:alias
panelCustomizable::medium-MoveLeftIcon:alias
panelCustomizable::dark-MoveLeftIcon:alias

This icon represents the Move Left option on the component submenu. Move Left rearranges the component horizontally, one position closer to the left boundary of the page. For example, imagine three horizontally arranged components. You select Move Left on the right-most component. It becomes the middle component.

In a WebCenter Portal application, the Move Left icon is displayed to the left of the Move Left submenu item on the component's Actions menu.

showDetailFrame

showDetailFrame::light-MoveRightIcon:alias
showDetailFrame::medium-MoveRightIcon:alias
showDetailFrame::dark-MoveRightIcon:alias

panelCustomizable

panelCustomizable::light-MoveRightIcon:alias
panelCustomizable::medium-MoveRightIcon:alias
panelCustomizable::dark-MoveRightIcon:alias

This icon represents the Move Right option on the component submenu. Move Right rearranges the component horizontally, one position closer to the right boundary of the page. For example, imagine three horizontally arranged components. You select Move Right on the left-most component. It becomes the middle component.

In a WebCenter Portal application, the Move Right icon is displayed to the left of the Move Right submenu item on the component's Actions menu.

showDetailFrame

showDetailFrame::light-MoveUpIcon:alias
showDetailFrame::medium-MoveUpIcon:alias
showDetailFrame::dark-MoveUpIcon:alias

panelCustomizable

panelCustomizable::light-MoveUpIcon:alias
panelCustomizable::medium-MoveUpIcon:alias
panelCustomizable::dark-MoveUpIcon:alias

This icon represents the Move Up option on the component submenu. Move Up rearranges the component vertically in relation to the other components on the page. For example, imagine three vertically arranged components. You select Move Up on the middle component. It becomes the topmost component.

In a WebCenter Portal application, the Move Up icon is displayed to the left of the Move Up submenu item on the component's Actions menu.

showDetailFrame

showDetailFrame::light-MoveDownIcon:alias
showDetailFrame::medium-MoveDownIcon:alias
showDetailFrame::dark-MoveDownIcon:alias

panelCustomizable

panelCustomizable::light-MoveDownIcon:alias
panelCustomizable::medium-MoveDownIcon:alias
panelCustomizable::dark-MoveDownIcon:alias

This icon represents the Move Down option on the component submenu. Move Down rearranges the component vertically in relation to the other components on the page. For example, imagine three vertically arranged components. You select Move Down on the middle component. It becomes the bottommost component.

In a WebCenter Portal application, the Move Down icon is displayed to the left of the Move Down submenu item on the component's Actions menu.

showDetailFrame

showDetailFrame::light-HeaderLeftIcon:alias
showDetailFrame::medium-HeaderLeftIcon:alias
showDetailFrame::dark-HeaderLeftIcon:alias

panelCustomizable

panelCustomizable::light-HeaderLeftIcon:alias
panelCustomizable::medium-HeaderLeftIcon:alias
panelCustomizable::dark-HeaderLeftIcon:alias

This icon provides an image for the top-left corner of the component header.

showDetailFrame

showDetailFrame::light-HeaderRightIcon:alias
showDetailFrame::medium-HeaderRightIcon:alias
showDetailFrame::dark-HeaderRightIcon:alias

panelCustomizable

panelCustomizable::light-HeaderRightIcon:alias
panelCustomizable::medium-HeaderRightIcon:alias
panelCustomizable::dark-HeaderRightIcon:alias

This icon provides the image for the top-right corner of the component header.

showDetailFrame

showDetailFrame::light-ToolbarLeftIcon:alias
showDetailFrame::medium-ToolbarLeftIcon:alias
showDetailFrame::dark-ToolbarLeftIcon:alias

panelCustomizable

panelCustomizable::light-ToolbarLeftIcon:alias
panelCustomizable::medium-ToolbarLeftIcon:alias
panelCustomizable::dark-ToolbarLeftIcon:alias

This icon provides the left portion of the component's FadeIn-FadeOut toolbar.

The FadeIn-FadeOut toolbar comes into play when the adfp:portlet tag attribute isSeededInteractionAvailable is set to true and displayHeader is set to false.

The toolbar contains the Actions menu that would otherwise be displayed on the header. To invoke the toolbar, users move their mouse over the component content area.

If the page design is very simple, then the FadeIn-FadeOut toolbar may not display, even when displayHeader is set to false and isSeededInteractionAvailable is set to true.

showDetailFrame

showDetailFrame::light-ToolbarRightIcon:alias
showDetailFrame::medium-ToolbarRightIcon:alias
showDetailFrame::dark-ToolbarRightIcon:alias

panelCustomizable

panelCustomizable::light-ToolbarRightIcon:alias
panelCustomizable::medium-ToolbarRightIcon:alias
panelCustomizable::dark-ToolbarRightIcon:alias

This icon provides the right portion of the component's FadeIn-FadeOut toolbar.

See the description for showDetailFrame::light-ToolbarLeftIcon:alias for an explanation of the FadeIn-FadeOut toolbar.

showDetailFrame

showDetailFrame::light-ToolbarCenterIcon:alias
showDetailFrame::medium-ToolbarCenterIcon:alias
showDetailFrame::dark-ToolbarCenterIcon:alias

panelCustomizable

panelCustomizable::light-ToolbarCenterIcon:alias
panelCustomizable::medium-ToolbarCenterIcon:alias
panelCustomizable::dark-ToolbarCenterIcon:alias

This icon provides the center portion of the component's FadeIn-FadeOut toolbar.

See the description for showDetailFrame::light-ToolbarLeftIcon:alias for an explanation of the FadeIn-FadeOut toolbar.

showDetailFrame

showDetailFrame::light-EditIcon:alias
showDetailFrame::medium-EditIcon:alias
showDetailFrame::dark-EditIcon:alias

panelCustomizable

panelCustomizable::light-EditIcon:alias
panelCustomizable::medium-EditIcon:alias
panelCustomizable::dark-EditIcon:alias

This icon represents the Edit option on the component menu. In a WebCenter Portal application, the Edit icon is displayed to the left of the Edit menu item on the component's Actions menu.

showDetailFrame

showDetailFrame::light-HelpIcon:alias
showDetailFrame::medium-HelpIcon:alias
showDetailFrame::dark-HelpIcon:alias

panelCustomizable

panelCustomizable::light-HelpIcon:alias
panelCustomizable::medium-HelpIcon:alias
panelCustomizable::dark-HelpIcon:alias

This icon represents the Help option on the component menu. In a WebCenter Portal application, the Help icon is displayed to the left of the Help menu item on the component's Actions menu.