Composer Library - Page Customizable Component

Use the Page Customizable component to enable run-time editing of the page. When you enclose components within a Page Customizable component, Composer is enabled in the application page at run time, allowing the user to customize and edit the components. When a user switches to page Edit mode, Composer provides the following controls for editing pages: More

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

Note: It is recommended that the Page Customizable component have only one direct child component. If you add more than one direct child component, only the first child component is rendered at runtime. All other child components are ignored.

Example

<pe:pageCustomizable id="pageCustomizable1">
  <cust:panelCustomizable id="panelCustomizable1" layout="scroll">
    <cust:showDetailFrame text="Product Data"
                          id="sdf1">
      <af:region value="#{bindings.prodmeta1.regionModel}"
                 id="r1"/>
    </cust:showDetailFrame>
  </cust:panelCustomizable>
  <f:facet name="editor">
    <pe:pageEditorPanel id="pep1"/>
  </f:facet>
</pe:pageCustomizable>

Common Attributes

Element Description

id

Specifies the unique identifier for the component on the page. This attribute is populated with a unique value by default when you add 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

Specifies whether the component is rendered. When set to false, no output is delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). The default value is true.

Appearance Attributes

Element Description

sourceViewPosition

Specifies the position of the Structure view panel displaying components in a tree structure. Valid options are top, start, end, and bottom. Default value is top. Users can change the Structure view panel position at runtime.

sourceViewSize

Specifies the height of the Source view panel in pixels.Alternatively, the resize handler along the edge of the Source view panel enables users to alter the height of the panel at runtime.

editModeView

Specifies the default view in which to open a page in Composer. Valid options are design and source. Default value is design.

rendered

Specifies whether the component is rendered. When set to false, no output is delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). The default value is true.

toolbarLayout

Specifies the elements to be displayed on the Composer toolbar. This attribute controls the layout of the toolbar. It can take a space-separated list of elements.

The built in strings that the component recognizes are:

  • message - area showing the message with the page name

  • statusindicator - area showing the status indicator icon

  • menu - area showing the View menu that allows users to switch between views. Note that users can switch between views by clicking the required tab on the Composer toolbar.

  • addonpanels - area showing Composer add-ons. The add-ons are all displayed in a sequence within this area.

  • help - area showing the Help icon

  • button - area showing the Save and Close buttons

  • newline - the next toolbar element is placed on a new line

  • stretch - adds a stretched component

In addition, you can specify names of custom toolbar elements. When Composer encounters a string in toolbarLayout that it doesn't recognize, like customToolbarAbc, it looks for a facet of that name and renders the content if it finds the facet.


Style Attributes

Element Description

styleClass

Specifies 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

Specifies 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 will have to create a skin and use the skinning keys which are meant to target particular DOM elements, like ::label or ::icon-style.

Advanced Attributes

Element Description

binding

Specifies an EL reference that will store 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.

sourceViewNodeActions

Specifies the name of the JPSX file to be called if you want to display custom actions against task flows in the component navigator in Composer Structure view. The sourceViewNodeActions attribute can take the name of a JSPX file or an EL value that evaluates to a JSPX file name.
allowLabel Specifies whether label creation must be enabled in the Customization Manager. When allowLabel is set to true, a Save and Label button is displayed in the Customization Manager. When a user clicks this button, customizations made in the current context are saved in a new label. Creating labels in this way is useful as users can easily revert to older versions of a page.

The allowLabel attribute is relevant only if you have configured sandbox support in your application.

catalog Specifies the catalog to be used as the default one for the application page. Provide the catalog definition file name.
allowEL Specifies whether an EL can be entered for component properties. The default is true. If an EL is already defined for a property, it cannot be changed.
protectEL Specifies whether an EL in form elements is read-only. Default is false.

If an EL is already defined and the component is being edited in a different layer, the EL cannot be changed.

designViews Specifies the views available to a user in Composer. This attribute can take a space-separated list of elements. Available options are design, add-content, source, select, preview, and all. This setting overrides the global setting in adf-config.xml.

Customization Attributes

Element Description

customizationAllowed

Specifies whether customizations are allowed on this component. Available values are true and false. The default value is true.

customizationAllowedBy

Specifies the roles for which customization is enabled.The Expression Builder option available when setting these attributes allows you to bind the attribute to a managed bean.

Related Topics

"Adding Custom Actions to Components" in Developing WebCenter Portal Assets and Custom Components with Oracle JDeveloper