Skip Headers
Oracle® Fusion Middleware User's Guide for Oracle WebCenter Portal: Spaces
11g Release 1 (11.1.1.7.0)

Part Number E10149-12
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Master Index
Master Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

15 Working with Page Styles

In planning and building your portal, you may find it useful to offer a wide selection of page styles to your users. It may also be useful to restrict page styles so that users build only the types of pages that you intend.

This chapter provides information about default, seeded page styles included with WebCenter Portal: Spaces and the custom page styles that you add your portal.

This chapter includes the following sections:

See Also:

For general information about adding and editing different types of resources, see Chapter 11, "Working with the Resources that Compose a Portal or Community."

Audience

This chapter is intended for users who want to provide and manage page styles in a Spaces application. By default, users with an application-level role that includes the permissions Application: Manage All and Page Styles: Create, Edit, and Delete Page Styles or a space role that includes the permissions Administration: Manage All and Resources: Create, Edit, and Delete Resources can perform the actions described in this chapter.

15.1 What You Should Know About Page Styles

When users create a page, a Create dialog opens with a selection of page styles (Figure 15-1).

Figure 15-1 Create Dialog

a Create Page dialog
Description of "Figure 15-1 Create Dialog"

Page styles describe the layout of a newly created page and may also dictate the type of content 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.

All page styles are published to the Create dialog through the Resource Manager (Figure 15-2).

Figure 15-2 Application-Level Resources Manager

Application-level Resources Manager
Description of "Figure 15-2 Application-Level Resources Manager"

Application-level page styles are provided on the Resources page accessed through the Administration link. space-level page styles are provided on the Resources page of the space administration.

The difference between application- and space-level page styles is one of scope:

There may be more page styles available on the Resources page than are available in a Create dialog. The site administrator and the space moderator determine which page styles are shown in the Create dialog through the following considerations:

The Spaces application offers a range of page styles out of the box (default page styles) and provides a means of copying page styles and editing their source (custom page styles). You can also download custom page styles, bring them into Oracle JDeveloper for additional customization, and upload them back into Spaces. The difference between default and custom page styles is one of flexibility: many of the actions available to custom page styles are not available to default page styles.

Table 15-1 compares the types of actions authorized users can perform on default and custom page styles in WebCenter Portal: Spaces.

Table 15-1 Actions Available to Default and Custom Page Styles

Action Default Custom More Information

Upload

Yes

Section 11.5.3, "Uploading a Resource"

Download

No

Yes

Section 11.5.2, "Downloading a Resource"

Preview

Yes

Yes

This control provides a means of previewing the page style. Select a page style and click Preview to render the page style in a page.

Copy

Yes

Yes

Section 11.4.1, "Copying a Resource"

Security Settings

No

Yes

Section 15.4.3, "Setting Security on a Custom Page Style"

Delete

No

Yes

Section 15.4.5, "Deleting a Custom Page Style"

Hide/Show

Yes

Yes

Section 15.4.1, "Showing and Hiding a Page Style in the Create Dialog"

Edit Source

No

Yes

Section 15.3, "Editing the Source Code of a Custom Page Style"

Edit Properties

No

Yes

Section 15.4.2, "Setting Properties on a Custom Page Style"

About

Yes

Yes

Section 11.1.5, "Viewing Information About a Resource"


Table 15-2 lists, and describes the default page styles provided with the Spaces application out of the box.

Table 15-2 Default Page Styles

Name Illustration Description

Blank

Blank page style

A one-column page with one layout box into which you can add content, including additional layout components.

Blog

Blog page style

A page preconfigured to expose blog controls from the Content Server. This page style becomes available in the Create dialog when the server is integrated with WebCenter Portal: Spaces.

Home Page

Home page style

A preseeded Home page, based on the Right Narrow Column Layout page style. The Home page style comes prepopulated with task flows and other content.

Left Narrow

Left narrow column page style

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

Right narrow column page style

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

Three column page style

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 the narrower layout boxes on the left and right sides.

Web Page

Web page style

A page that takes a URL value, enabling you to expose external web content in your WebCenter Portal: Spaces application.

Wiki

Wiki page style

A page preconfigured to expose wiki controls from the Content Server. This page style becomes available in the Create dialog when the server is integrated with WebCenter Portal: Spaces.


For both application- and space-level page styles, the About action opens a dialog that provides information about the selected page style. For more information, see Section 11.1.5, "Viewing Information About a Resource."

15.2 Creating a Custom Page Style

There is no direct way to create a page style in the Spaces application. That is, no Create button is available for starting this process. To create a new page style, you must first copy an existing style and then revise its source code in the source code editor or through JDeveloper. Or, you can create a page style in JDeveloper and upload it to Spaces.

For information about revising a page style's source code, see Section 15.3, "Editing the Source Code of a Custom Page Style." For information about copying a page style, see Section 15.4.4, "Copying a Page Style." For information about working with page styles in Oracle JDeveloper, see the section, "Developing and Uploading WebCenter Portal: Spaces Resources," in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

15.3 Editing the Source Code of a Custom Page Style

Source editing enables you to work with the source code of a custom page style. For example, you can upload a page style you create in JDeveloper and perform additional adjustments to it through the Edit Source dialog. You can even create a style from scratch in the Edit Source dialog, but this entails a lot of hand coding, and we do not recommend it.

This section provides information about editing custom page style source and steps you through the process of editing a custom page style. It includes the following subsections:

See Also:

For general information about editing a resource, see Section 11.3.2, "Editing the Source Code of a Resource."

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 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 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. Page tab content defines the page layout and style. Page Definition tab content 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 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 custom page style that was created in JDeveloper, imported into Spaces, and opened in the Edit Source dialog Page tab for minor revisions. The relevant code is in bold.

Example 15-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>

15.3.2 Editing Custom Page Style Source

The following procedure works equally for custom page styles edited at space- and application-levels.

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 the following 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

    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 Managing Page Styles

This section provides information about managing your seeded and custom page styles. It includes the following sections:

15.4.1 Showing and Hiding a Page Style in the Create Dialog

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

15.4.2 Setting Properties on a Custom Page Style

You can control a custom 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 11.4.2, "Setting Properties on a Resource."

Tip:

To view the properties associated with a resource, use the About option.

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

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 11.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 11.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 11.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 11.4.6, "Previewing a Resource."

15.5 Applying a Page Style

Once you have made a page style available (see Section 15.4.1, "Showing and Hiding a Page Style in the Create Dialog"), you can apply it to a new page. When you create a page, the page style is shown as one of your options in the Create dialog, depending on where you have exposed it (for example, at the application level, in a space, in a selection of spaces, or in the views of selected users, enterprise roles, or groups). To apply a page style, select it in the Create dialog.

Tip:

For information about accessing the Create dialog, see Section 17.2, "Creating a Page."

15.6 Using JDeveloper to Build Your Page Style

If you want to create a page style that is beyond the editing capabilities of the Spaces application, you can download the page style, import it into Oracle JDeveloper for editing, and then upload it back to the Spaces application. You can upload page styles directly to the Spaces application from within JDeveloper or through the Spaces application Resources Manager.

The steps to upload and download page styles from the Spaces application are described in Section 11.5.2, "Downloading a Resource," and Section 11.5.3, "Uploading a Resource."

For information about editing resources and uploading custom resources to the Spaces application through JDeveloper, see the section, "Developing and Uploading WebCenter Portal: Spaces Resources," in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.