25 Working with Page Styles

This chapter describes how to create and manage page styles for pages created in WebCenter Portal.

This chapter includes the following topics:

Section 25.1, "About Page Styles"
Section 25.2, "Applying a Page Style to a WebCenter Portal Page"
Section 25.3, "Creating a Page Style"
Section 25.4, "Editing a Page Style"
Section 25.5, "Managing a Page Style"

Permissions:

To perform the tasks in this chapter on shared page styles, you must have the application-level Create, Edit, and Delete Page Styles permission. Users with the Application Specialist role have this permission by default. For more information about application-level permissions, see the "Understanding Application Roles and Permissions" section in Oracle Fusion Middleware Administering Oracle WebCenter Portal.

To perform the tasks in this chapter on portal-level page styles, you must have the portal-level permission Create, Edit, and Delete Assets (standard permissions) or Create, Edit, and Delete Page Styles (advanced permissions). For more information about portal-level permissions, see Section 29.1, "About Roles and Permissions for a Portal."

25.1 About Page Styles

A page style describes the initial layout of the main content area of a newly created page, and may also dictate the type of content that the page supports. For example, the Wiki page style provides an instant wiki; a Blank page style has few restrictions on the types of content users can add to the pages that are based on it.

Figure 25-1 Sample Page Using a Page Style

Description of "Figure 25-1 Sample Page Using a Page Style"

When users create a page in the page editor, they are provided with selection of page styles to use (Figure 25-2).

Figure 25-2 Selecting a Style for a New Page

Description of "Figure 25-2 Selecting a Style for a New Page"

Note:

Users cannot select a page style when creating pages while creating a new portal.

The initial layout and content are copied from the page style to the main content area of the newly created page.

Built-in Page Styles

WebCenter Portal offers a range of page styles out of the box. Table 25-1 lists and describes the built-in page styles provided with WebCenter Portal.

Table 25-1 Out-of-the-Box Page Styles

Name	Illustration	Description
Blank		A one-column page with one layout box into which you can add content, including additional layout components.
Blog		A page preconfigured to expose blog controls from Content Server. This page style becomes available when the Documents tool is configured and enabled for the portal.
Home Page		A preseeded home page, based on the Right Narrow page style. The Home Page page style comes prepopulated with task flows and other content.
Left Narrow		A two-column page with two layout boxes into which you can add content, including additional layout components. Layout boxes are positioned side-by-side, with the narrower layout box on the left.
Right Narrow		A two-column page with two layout boxes into which you can add content, including additional layout components. Layout boxes are positioned side-by-side, with the narrower layout box on the right.
Three Column		A three-column page with three layout boxes into which you can add content, including additional layout components. Layout boxes are positioned side-by-side, with narrower layout boxes on the left and right sides.
Web Page		A page that takes a URL value, enabling you to expose external web content in your portal.
Wiki		A page preconfigured to expose wiki controls from the Oracle Content Server. This page style becomes available when the Documents tool is configured and enabled for the portal.

You cannot directly edit any of the built-in page styles. If you want to use a different layout for your pages, you can copy an existing page style and then edit the source code. For more information, see Section 25.3, "Creating a Page Style."

You can also download these custom page styles, bring them into Oracle JDeveloper for additional customization, and upload them back into WebCenter Portal. For more information, see Section 25.4, "Editing a Page Style." The difference between built-in and custom page styles is one of flexibility: many of the actions available to custom page styles are not available to built-in page styles.

25.2 Applying a Page Style to a WebCenter Portal Page

When you create a new page, the first page of the wizard enables you to apply a page style to the page (Figure 25-2).

25.3 Creating a Page Style

Although WebCenter Portal provides several built-in page styles, you may want to create your own. Creating custom page styles enables you to:

Create well formed and controlled layouts

Using layout components, you can create fixed and reliable layouts where the geometry is predictable.

See Also:

Chapter 16, "Working with Layout Components on a Page"
Seed parameters

If you seed parameters in the page style, then on page creation the user creating the page is prompted for values.

For example, the built-in Three Column page style defines the following parameters to enable users to set the width of the columns:
```
<parameters>
   <parameter id="leftWidth" value="${'25%'}"/>
   <parameter id="centerWidth" value="${'50%'}"/>
   <parameter id="rightWidth" value="${'25%'}"/>
</parameters>
```
When users create pages using the Three Column page style, the Create Page wizard includes a Settings page where they can set the column widths (Figure 25-3).

Figure 25-3 The Settings Page of the Create Page Wizard

Description of "Figure 25-3 The Settings Page of the Create Page Wizard"
Simplify styling

You can create parameters that are then used in the page to set CSS styles for various elements, for example the background color.

Figure 25-4 The Settings Page Including Background Color Parameter

Description of "Figure 25-4 The Settings Page Including Background Color Parameter"
Create common areas, logos, images, or links

If you want all the pages in your portal to include certain elements, such as logos or links, you can create those in your page style. Adding a task flow, that holds images or links, to the top of a page style means that all pages created from that page style will have a common area where, if you edit the task flow, you can update in all those pages in one step.

See Also:

Chapter 14, "Adding and Editing Resource Catalog Components on a Page"

There is no direct way to create a page style in WebCenter Portal. That is, no Create button is available for starting this process. To create a new page style, you must first copy an existing page style (for more information, see Section 20.5.4, "Copying an Asset").

After you have created the copy, you can edit its source code in the source code editor (for more information, see Section 20.4.2, "Editing the Source Code of an Asset"). However, for more flexibility and a better editing environment, you can download the copied page style and import it into JDeveloper for further development (for more information, see Section 20.6, "Working with Portal Assets in JDeveloper").

For information about working with page styles in JDeveloper, see the "Developing Page Styles" section in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper

25.4 Editing a Page Style

After you create a page style (by copying an existing page style), you can edit it to change the appearance and content to match your requirements.

Note:

Although you can edit the source code of a page style in WebCenter Portal using the Edit Source dialog. It is recommended that you download the page style and edit it in JDeveloper to take advantage of the richer editing experience.

Editing a page style is a fairly complex task. As such, page style editing should be completed by an experienced Web Developer.

Source editing enables you to work with the underlying code of a custom page style. There are several scenarios for working with page style source code in WebCenter Portal:

Copy a default page style and make adjustments to the copy's source code.
Copy a default page style, download the copy, import it into JDeveloper for enhancement, upload it back into WebCenter Portal, and edit the source code for further minor adjustments.
Create a completely new page style by copying another page style and replacing its code with your own original code. Note however that, due to the heavy hand-coding requirement, this scenario is not recommended.

In the Edit Source dialog, the page style source is presented on two tabs: Page and Page Definition. The code in the Page tab defines the page layout, content, and style. The code in the Page Definition tab 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.

For the steps to access the Edit Source dialog, see Section 20.4.2, "Editing the Source Code of an Asset."

Example 25-1 illustrates page style encoding. It describes a basic page with a two-column layout proportioned at 35 and 65 percent that is designed to flow. This is an example of a page style that was created in JDeveloper, imported into WebCenter Portal, and opened in the Edit Source dialog Page tab for minor revisions.

Example 25-1 Source Code of a Custom Page Style

<?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>

25.5 Managing a Page Style

The following options are available on the Assets or Shared Assets page to enable you to manage page styles: