15 Working with Page Styles

15.3.1 What You Should Know About Editing Page Style Source

Use the Edit Source dialog to expose the underlying code of a selected custom page style and make adjustments to it. For example, you can create a new page style in JDeveloper, upload it to WebCenter Spaces through the Resource Manager, preview it, and edit the source to make adjustments.

In contrast, you can copy a default page style, download the copy to your local drive, bring it into JDeveloper for customization, upload it back into WebCenter Spaces, and open it in the Edit Source dialog for further adjustments.

You can simply copy a default page style and make adjustments to the copy's source in the Edit Source dialog.

You can even create a page style from the beginning, by copying another page style, and then replacing its code with your own original code through the Edit Source dialog. Note, however, that, due to the heavy hand-coding requirement, we do not recommend this scenario.

In the Edit Source dialog, the custom page style source is presented on two tabs: Page and Page Definition. The Page tab source defines the page layout and style. The Page Definition tab source holds parameter definitions and task flow and data control bindings. Each represents the underlying *.jspx page and page definition file that comprise the page style.

Example 15-1 illustrates custom page style encoding. It creates a basic page that is designed to flow and provide two columns that are 35 percent and 65 percent in proportion. This is an example of a custom page style that was created in JDeveloper, imported into WebCenter Spaces, and opened in the Edit Source dialog Page tab for minor revisions. The relevant code is in bold.

<?xml version='1.0' encoding='utf-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:pe="http://xmlns.oracle.com/adf/pageeditor"
xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:trh="http://myfaces.apache.org/trinidad/html" version="2.1">
 <jsp:directive.page deferredSyntaxAllowedAsLiteral="true"/>
 <jsp:directive.page contentType="text/html;charset=utf-8"/>
 <f:view>
  <af:document title="#{pageDocBean.title}" id="docrt">
   <af:form usesUpload="true" id="f1">
    <af:pageTemplate value="#{bindings.shellTemplateBinding.templateModel}"
    id="T">
     <f:facet name="content">
      <pe:pageCustomizable id="pcl1">
       <af:panelGroupLayout id="pgl1" layout="scroll"
       styleClass="replace_with_scheme_name"
       inlineStyle="replace_with_inline_style">
        <trh:tableLayout id="tl1" width="100%">
         <trh:rowLayout id="rl1">
          <trh:cellFormat id="cf1" width="35%" valign="top">
           <cust:panelCustomizable id="hm_pnc1" layout="scroll"/>
          </trh:cellFormat>
          <trh:cellFormat id="cf2" width="65%" valign="top">
           <cust:panelCustomizable id="hm_pnc2" layout="scroll"/>
          </trh:cellFormat>
         </trh:rowLayout>
        </trh:tableLayout>
        <trh:tableLayout id="tl2"/>
       </af:panelGroupLayout>
       <f:facet name="editor">
        <pe:pageEditorPanel id="pep1"/>
       </f:facet>
      </pe:pageCustomizable>
     </f:facet>
    </af:pageTemplate>
   </af:form>
  </af:document>
 </f:view>
</jsp:root>

15.3.2 Editing Custom Page Style Source

The following procedure works equally for custom page styles edited in a Space and those edited at the application level

To edit the source of a custom page style:

1. Go to the Space or application-level Resources page, and select Page Styles from the panel on the left.

   Tip:

   You can use "pretty URLs" to navigate to the Resources page:

   • Application-level Resources page:

     http://host:port/webcenter/spaces/admin/resources
     

   • Space-level Resources page:

     http://host:port/webcenter/spaces/spaceName/admin/resources
     

2. Select the custom page style, and then from the Edit menu select Edit Source to open the selected page style in the Source Editor (Figure 15-3).

   Figure 15-3 Source Editor

   
   Description of "Figure 15-3 Source Editor"
   
   

3. Make changes to the source according to your requirements.

4. When finished, click OK to save your changes and close the editor.

15.4.1 Showing and Hiding a Page Style in the Create Page Dialog

When you create a page style, by default it is hidden. A hidden page style is not available for use in the application, the Home Space, or any other Space. To make a page style available, it must be marked as shown. Further, for a page style created at the application level, you can control whether it is available to any, all, or selected Spaces in the application. Finally, you can set access on a selected page style through its security settings.

• For information about a page style's security settings, see Section 15.4.3, "Setting Security on a Custom Page Style."

• For information about a page style's exclusion settings, see Section 10.4.2, "Setting Properties on a Resource."

• For information about hiding and showing application resources, including page styles, see Section 10.4.3, "Showing and Hiding Resources."

15.4.2 Setting Properties on a Custom Page Style

You can control a page style's display attributes and availability by setting its properties in the Edit Properties dialog. Setting page style properties follows the same procedure as any other resource. For more information, see Section 10.4.2, "Setting Properties on a Resource."

In addition to the default attributes exposed through the Edit Properties dialog (Display Name, Description, and the like), you can expose any custom attributes built into an custom page style. The Edit Properties dialog provides a Custom Attributes section for entering attribute name/value pairs (Figure 15-4).

Figure 15-4 Attributes Section of Edit Properties Dialog

Description of "Figure 15-4 Attributes Section of Edit Properties Dialog"

For example, the following custom attribute is available to all custom page styles:

editPageAfterCreation

This custom attribute controls whether a newly created page opens in edit or view mode. It takes a value of true or false:

• Enter ${true} to open a newly created page in edit mode. This is the default value.

• Enter ${false} to open a newly created page in view mode.

When you associate this custom attribute with a particular page style, every time a user creates a page based on that style, the attribute value is considered and the page behaves accordingly.

15.4.3 Setting Security on a Custom Page Style

You can control whether all users or only specific users or groups can access the page style that you created in your application or Space. Setting access to a page style follows the same procedure as any other resource. For more information, see Section 10.4.4, "Setting Security for a Resource."

15.4.4 Copying a Page Style

You can make a copy of a page style by selecting it and choosing Copy from the Edit menu on the Resources - Page Styles page. Copying a page style follows the same procedure as any other resource. For the generic procedure, see Section 10.4.1, "Copying a Resource."

15.4.5 Deleting a Custom Page Style

Provided you are assigned the required permissions, you can delete any custom page style. Deleting a page style follows the same procedure as any other resource. For more information, see Section 10.4.5, "Deleting a Resource."

15.4.6 Previewing a Page Style

You can preview how a page style will look by selecting it on the Resources - Page Styles page and clicking Preview. For more information, see Section 10.4.6, "Previewing a Resource."