12 Developing Page Styles and Task Flow Styles

This chapter describes how to use Oracle JDeveloper to create and manage page styles and task flow styles for your WebCenter Portal Framework applications.

This chapter includes the following topics:

12.1 Introduction to Styles

Oracle WebCenter Portal provides several different styles to determine the layout of content within a portal:

Runtime Management

Portal Framework applications support the runtime administration of styles to help users continue developing a portal even after it has been deployed. With runtime administration, authorized users can manage styles in a browser-based environment, with no requirement to install or understand JDeveloper. For more information, see Section 9.5, "Working with Portal Resources at Runtime."

Round-Trip Development

You can bring runtime-created or modified styles back into JDeveloper, to ensure that any changes are not lost when the portal is redeployed. You can also edit these styles to further enhance them if necessary, and upload them back into the deployed portal. For more information, see Section 9.6, "Working with Round-Trip Development."

Note:

You cannot create Content Presenter display templates at runtime. You can create page and task flow styles at runtime only by making a copy of an existing style.

This section includes the following topics:

12.1.1 Introduction to Page Styles

A page style is a JSPX page used for pages created at runtime. It describes the layout of a newly created page and may also dictate the type of content that the page supports.

When a user creates a page using a page style, the layout and initial content are copied from the page style to the newly created page. Unlike page templates, page styles are not reference-based, that is, if you change a page style, the change is not inherited in pages that use the style.

Typically, a page style contains components that enhance the usefulness and appearance of a given page. These include an in-place HTML text editor, images, layout boxes, hyperlinks, and so on. Content contributors can further populate the page with content. Figure 12-1 shows a sample portal page that is based on a page style.

Figure 12-1 Sample Page that Uses a Page Style

Description of Figure 12-1 follows
Description of ''Figure 12-1 Sample Page that Uses a Page Style''

You create page styles in JDeveloper, but they are only used at runtime to create pages.

A user can create pages at runtime based on the available page styles. The Create Page option is available in the Assets page of the runtime administration console. It is also available in other application pages that contain the Page - Create New task flow. When a user clicks Create Page, the Create Page dialog displays a set of predefined styles, as shown in Figure 12-2. The user can choose a style and create a page based on that. As the layout is already in place in the new page, the user only needs to add content to different areas of the page.

Figure 12-2 Create Page Dialog

Description of Figure 12-2 follows
Description of ''Figure 12-2 Create Page Dialog''

12.1.2 Introduction to Task Flow Styles

Task flow styles are very similar to page styles, except that they are used at runtime to create task flows rather than pages. Task flow styles are especially useful when creating task flows for use with Data Presenter, as they can include objects that can then be bound to any data visualization that is added to the task flow.

Task flow styles are used only when creating task flows at runtime, but they are created and published in JDeveloper.

Task flow styles are displayed in the Create New Task Flow dialog box (Figure 12-3). Users can choose a style and create a task flow based on that style. For more information, see the "Working with Task Flows" section in Building Portals with Oracle WebCenter Portal.

Figure 12-3 Create New Task Flow Dialog

Description of Figure 12-3 follows
Description of ''Figure 12-3 Create New Task Flow Dialog''

12.2 Developing Page Styles

Page styles are JSPX pages that can be used as templates to create new pages at runtime.

When users create a new page at runtime, the Create Page dialog, shown in Figure 12-2, displays the available page styles.

This section includes the following topics:

Note:

You can develop page styles in JDeveloper for use in WebCenter Portal. For more information, see Section 9.7, "Working with WebCenter Portal Resources."

12.2.1 How to Create a Page Style

The recommended method for creating page styles is to download one of the existing page styles and import it into JDeveloper. You can then use this page style as the starting point for your new page style and then export it for uploading back into your application.

Creating a page style this way also ensures that it is available in the Create Page dialog.

To create a page style:

  1. In the deployed application, download one of the existing page styles. For more information, see the "Downloading an Asset" section in Building Portals with Oracle WebCenter Portal.

  2. Import the downloaded page style into JDeveloper. For more information, see Section 9.6.2, "How to Import a Portal Resource into JDeveloper."

  3. In the Application Navigator, right-click the imported page style, and choose Open.

  4. In the visual editor, make any changes to the layout of content of the page style, in the same way as you would edit any page.

    For information about how to define the content of the page style, see Section 17.6.1, "How to Create Templates for Pages Created at Runtime" and Section 12.2.2, "What You May Need to Know About Developing Page Styles."

    Example 12-1 shows the code for a sample page style, /oracle/webcenter/portalapp/pages/pageStyles/TemplateFlowingTwoColumn.jspx, which creates a basic page designed to flow and provide two columns that are 35 percent and 65 percent in proportion. Example 12-2 shows the associated page definition file, /oracle/webcenter/portalapp/pages/pageStyles/TemplateFlowingTwoColumnPageDef.jspx.

    Example 12-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.pageTemplateBinding.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>

    Example 12-2 Page Definition of the Custom Page Style

    <pageDefinition version="11.1.1.41.30" id="TemplateFlowingTwoColumnPageDef"
  Package="oracle.webcenter.siteresources.scopedMD.s8bba98ff_4cbb_40b8_beee_296c916a23ed.pageStyle.gsr2b052c53_0eba_43fd_81e2_7f12dbb885a5">
  <parameters/>
  <executables>
    <page viewId="#{preferenceBean.defaultPageTemplate}" 
          id="pageTemplateBinding" Refresh="ifNeeded"/> 
    <taskFlow id="pageeditorpanel" taskFlowId="#{pageEditorBean.pageEditorPanel}"/>
  </executables>
</pageDefinition>

  5. Save your changes.

  6. Export the page style. For more information, see Section 9.6.3, "How to Export a Portal Resource from JDeveloper."

  7. Upload the exported page style into the deployed application. For more information, see the "Uploading an Asset" section in Building Portals with Oracle WebCenter Portal.

12.2.2 What You May Need to Know About Developing Page Styles

There are a few prerequisites for developing page styles to be exposed as portal resources.

  • If a page style is based on a page template, then while designing the page style JSPX file, add the content facet, or any other facet defined in the page template, to contain page content.

  • To make the page customizable, add a Page Customizable component within the content facet. As the Page Customizable contains a child Panel Customizable component by default, users can add content to the page at runtime.

  • To enable dynamic selection of the page template to use for the page style, in the page style JSPX file, specify that the page template is defined in the page style's page definition, as follows:

    <af:pageTemplate value="#{bindings.pageTemplateBinding.templateModel}" id="T">

    You can then specify an EL value in the page style page definition to retrieve the name of the page template from the default page template setting, as follows:

    <page viewId="#{preferenceBean.defaultPageTemplateViewId}" 
      id="pageTemplateBinding" Refresh="ifNeeded"/>

    At runtime, users with the appropriate permissions can switch to a different page template by selecting a new default page template in the runtime administration console. For more information, see the "Choosing a Default Page Template" section in Administering Oracle WebCenter Portal.

  • You can create a managed bean that controls which page template to use, as shown in the following example:

    public class siteTemplatesManager {
    final private String templateA = "/templateA.jspx";
    final private String templateB = "/templateB.jspx";
    private String currentSiteTemplateViewId;
    
    public siteTemplatesManager() {
        super();
        currentSiteTemplateViewId = templateA;
    }
    public String gettemplateViewId() {
        return currentSiteTemplateViewId;
    }
    public void settemplateAViewId(ActionEvent ae) {
        currentSiteTemplateViewId = templateA;
    }
    public void settemplateBViewId(ActionEvent ae) {
        currentSiteTemplateViewId = templateB;
    }
}

12.2.3 How to Delete a Page Style

If a page style is no longer required within your application, you can delete it.

When you delete a page style, it is no longer listed in the Create Page dialog. Deleting a page style has no impact on pages that have already been created using the page style.

To delete a page style, right-click the page style in the Application Navigator and choose Delete from the context menu. For more information, see Section 9.4, "Deleting Portal Resources."

12.3 Developing Task Flow Styles

Task flow styles are ADF task flows that can be used as templates to create new task flows at runtime.

You may choose to create task flow styles for the following purposes:

  • To provide a specific, consistent layout for task flows.

  • To seed a UI picker that can in turn be used in the task flows created from the task flow style, for example, a task flow style with a portal picker drop down. When a task flow based on this style is populated with an Activity Stream task flow, the picker drop down can be wired to an input parameter on the Activity Stream task flow. The Activity Stream task flow then displays activities specific to the selected portal.

  • To provide a predefined UI that can be bound separately to data, for example, you can create a flowing data layout in the task flow style, create a task flow from it, drop a data control, then bind the flowing data layout to the data control.

When users create a new task flow at runtime, the Create New Task Flow dialog, shown in Figure 12-3, displays the available task flow styles.

This section includes the following topics:

Note:

You can develop task flow styles in JDeveloper for use in WebCenter Portal. For more information, see Section 9.7, "Working with WebCenter Portal Resources."

12.3.1 How to Create a Task Flow Style

Creating a task flow style is the same as creating a task flow, but you create task flow styles only so that they can be used as templates to create task flows at runtime.

The recommended method for creating task flow styles is to download one of the existing task flow styles and import it into JDeveloper. You can then use this task flow style as the starting point for your new task flow style and then export it for uploading back into your application.

Creating a task flow style this way also ensures that it is available in the Create New Task Flow dialog.

To create a task flow style:

  1. In the deployed application, download one of the existing task flow styles. For more information, see the "Downloading an Asset" section in Building Portals with Oracle WebCenter Portal.

  2. Import the downloaded task flow style into JDeveloper. For more information, see Section 9.6.2, "How to Import a Portal Resource into JDeveloper."

  3. In the Application Navigator, right-click the imported task flow style, and choose Open.

  4. Make any changes to the code of the task flow style.

  5. Save your changes.

  6. Export the task flow style. For more information, see Section 9.6.3, "How to Export a Portal Resource from JDeveloper."

  7. Upload the exported task flow style into the deployed application. For more information, see the "Uploading an Asset" section in Building Portals with Oracle WebCenter Portal.

12.3.2 What You May Need to Know About Developing Task Flow Styles

To expose a task flow style for use when creating task flows at runtime, you must consider the following requirements:

  • Create only one view fragment for a task flow that will be used as a task flow style. The view fragment JSFF file must be created in the same location as the task flow definition XML file.

  • Add a Panel Customizable component to the view fragment from the Composer tag library. This ensures that task flows based on this task flow style can be populated at runtime.

  • Create a page definition for the view fragment, by right-clicking the JSFF file and choosing Go to Page Definition. The page definition for the view fragment must also be located in the same directory as the task flow definition XML file.

  • If the task flow style refers to code, for example, using an EL value, then that code must be present in the deployed application.

12.3.3 How to Delete a Task Flow Style

If a task flow style is no longer required within your application, you can delete it.

When you delete a task flow style, it is no longer listed in the Create New Task Flow dialog at runtime. Deleting a task flow style has no impact on task flows that have already been created using the task flow style.

To delete a task flow style, right-click the task flow style in the Application Navigator and choose Delete from the context menu. For more information, see Section 9.4, "Deleting Portal Resources."