4 Creating a New Page Template with a New Portal Skin

In this lesson, working as a developer at design time, you will enhance the WebCenter portal application you constructed in the previous lesson and learn how to create a new JSF page template and register that template as a portal resource.

To achieve this goal, you will need to create a new page template, then extract the setup files provided with this Tutorial on your hard drive. The setup contains a batch of files with graphic images, skins and templates. You will then replace the new page template created by you in the application with the page template provided in the setup.

In the last step, you will register the new template and customize the site template, adding new images and a new skin to your portal application. When you run the application in a web browser, you will see a new home page with a new skin applied at runtime.

Introduction

This lesson contains the following steps:

Note:

Before you begin the steps in this lesson, ensure you have followed the steps up to this point in the Tutorial.

Step 1: Create a New Page Template

To extend the capabilities of our portal application, we need to create a new page template.

Note that in this step, we won't build a new JSF page template from scratch. But rather, we'll rely on a pre-configured, ready-made template which, following the steps in this lesson, you will extract into your application. To ensure that the template artifacts are correctly registered inside the application, we will create an empty template and then replace it with the one provided in the Tutorial Setup file.

You can use page templates to control the layout of your portal. A page template is a JSPX file that specifies the look and feel of your portal's pages. The template defines header, footer, content, and navigation regions within the page. You can apply the template to any number of pages, resulting in a consistent look and feel.

Tip:

The template is linked or referenced from the pages, so if you change the template, those changes are reflected on all the pages in your portal application.

For more information about page templates, see “Understanding Pages, Page Templates, and the Portal Page Hierarchy” in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

To create a new page template in our portal application:

  1. In the Application Navigator of your portal application project, navigate to the page templates folder (/oracle/webcenter/portalapp/pagetemplates) and right-click the folder and choose New.

    A New Gallery dialog appears, as shown in Figure 4-1.

  2. In the New Gallery, expand Web Tier, select JSF and then JSF Page Template, and click OK.

    Figure 4-1 The JSF Page Template Selected in the New Gallery

    Description of Figure 4-1 follows
    Description of "Figure 4-1 The JSF Page Template Selected in the New Gallery"

  3. In the Create JSF Page Template dialog (Figure 4-2), in the File Name field, enter the name for the JSPX file that represents the page template, in this case myTemplate.jspx.

    The file name identifies the page template in the Application Navigator.

    Figure 4-2 The Create JSF Page Template

    Description of Figure 4-2 follows
    Description of "Figure 4-2 The Create JSF Page Template"

  4. In the Directory field (Figure 4-2), enter the full directory path of the location under which to create the page template.

  5. In the Page Template Name field (Figure 4-2), enter the display name for the page template, in this case MyTemplate.

  6. Click OK to create the template.

  7. Navigate in the Application Navigator to the pagetemplates folder, select myTemplate.jspx, then right-click the Go to Page Definition menu item, as shown in Figure 4-3.

    Figure 4-3 Creating a New Page Definition for the myTemplate.jspx File

    Description of Figure 4-3 follows
    Description of "Figure 4-3 Creating a New Page Definition for the myTemplate.jspx File"

  8. When the dialog Confirm Create New Page Definition appears (Figure 4-4), click Yes.

    Figure 4-4 The Confirm Create New Page Definition Dialog

    Description of Figure 4-4 follows
    Description of "Figure 4-4 The Confirm Create New Page Definition Dialog"

    Tip:

    A page definition file is an XML file that specifies ADF bindings, page parameters, and permission settings. Various mappings and bindings used by pages and page templates are also specified. In this case, the myTemplatePageDef.xml file specifies the task flow for navigation rendering of the site, as well as parameters defining site structure paths.

    The Application Sources folder is primarily a repository for page definition files, like the myTemplatePageDef.xml file, as well as for source code in a project.

  9. Verify that the myTemplatePageDef.xml file now resides in the Application Sources sub folder pagetemplates, as shown in Figure 4-5.

    Figure 4-5 The myTemplatePageDef xml File in the Portal Application Sources Directory

    Description of Figure 4-5 follows
    Description of "Figure 4-5 The myTemplatePageDef xml File in the Portal Application Sources Directory"

    By associating a page definition with the page template, you will be able to include model objects, such as task flows and portlets, in the page template. Users can also switch to a different page template at runtime, if they choose.

    It's important to note that within your portal application, page templates must either all have associated page definitions or none have associated page definitions. The reason for this is that if you have a combination of page templates with and without associated page definitions, users won't be able to switch templates at runtime.

    For more information about templates and skins, see the chapter “Designing the Look and Feel of Your Portal” in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

Step 2: Extract Setup Files and Replace the Existing Template

Now you want to extract the provided Tutorial setup files from a folder (owcs-r11ps3-devtutsetup-254761.zip) that resides on your local hard drive and then move those files to the appropriate folders in the WebCenter Portal application.

If you have not yet downloaded these setup files, as described in "Step 6: Download the Sample Tutorial Files" in Chapter 2, then do so now. You can download the files from your web browser. The files are available at this URL address:

http://www.oracle.com/technetwork/middleware/webcenter/owcs-r11ps3-devtutsetup-254761.zip

To extract the setup files and place them in the correct location in your newly created application in JDeveloper:

  1. To begin with, you need to copy the owcs-r11ps3-devtutsetup-254761.zip file onto your hard drive in the directory of your choosing, and then proceed to unzip the files and extract their contents, as described in the following steps.

  2. On your local drive navigate to, for example, C:\...\USERS\Desktop\TutorialSetup\owcs-r11ps3-devtutsetup-254761.zip\.

    Four folders reside in that directory: images, skins, templates, and UCM Content, as shown in Figure 4-6. Note that the UCM Content folder contains content that you need to upload to a UCM content repository, as discussed in Step 6: Download the Sample Tutorial Files.

    Figure 4-6 Images, Skins, Templates, and Content Folders for Setup on Local Hard Drive

    Description of Figure 4-6 follows
    Description of "Figure 4-6 Images, Skins, Templates, and Content Folders for Setup on Local Hard Drive"

  3. Extract the contents of the images folder (Figure 4-7) and move those contents to the MyApplication/Portal/public_html/images folder in your portal application.

    Figure 4-7 The Expanded Images Folder in the Tutorial Setup Directory

    Description of Figure 4-7 follows
    Description of "Figure 4-7 The Expanded Images Folder in the Tutorial Setup Directory"

  4. Repeat the same procedure for contents of the skins folder (Figure 4-8), moving those contents to the MyPortalApplication/Portal/public_html/oracle/webcenter/portalapp/skins/ folder in your portal application. Note that the extracted skin is a Cascading Style Sheet (CSS) document.

    Figure 4-8 Expanded Skins Folder in the Tutorial Setup Directory

    Description of Figure 4-8 follows
    Description of "Figure 4-8 Expanded Skins Folder in the Tutorial Setup Directory"

  5. Repeat again the same procedure for the contents of the templates folder (Figure 4-9), moving those contents to two separate locations, in this case moving the myTemplate.jspx template to the MyPortalApplication/Portal/public_html/oracle/webcenter/portalapp/pagetemplates/ folder and the myTemplatePageDef.xml to the MyPortalApplication/Portal/adfmsrc/oracle/webcenter/portalapp/pagetemplates folder.

    Figure 4-9 Expanded Templates Folder in the Tutorial Setup Directory

    Description of Figure 4-9 follows
    Description of "Figure 4-9 Expanded Templates Folder in the Tutorial Setup Directory"

  6. Now select the Portal folder at the top level of your Project and click the Refresh icon in JDeveloper (not your web browser). This will refresh and save each of the folders whose contents you have extracted and copied to your portal application in JDeveloper, as shown in Figure 4-10.

    The myTemplatePageDef.xml file now resides in the pagetemplates folder.

    Figure 4-10 The Portal Hierarchy Refreshed to Include the Extracted Files for Setup

    Description of Figure 4-10 follows
    Description of "Figure 4-10 The Portal Hierarchy Refreshed to Include the Extracted Files for Setup"

  7. Once you refresh the page templates and skins folders in your portal application, the copied files, myTemplate.jspx and tutorial-skin.css, appear in their respective folders, as shown in Figure 4-11.

    Figure 4-11 myTemplate.jspx file and tutorial-skin.css File in the Portal Project Folders

    Description of Figure 4-11 follows
    Description of "Figure 4-11 myTemplate.jspx file and tutorial-skin.css File in the Portal Project Folders"

  8. Close the Portal Application Sources folders and navigate to the webcenter folder in your project directory.

Step 3: Create Portal Resources and Apply the New Template and Skin

In this next sequence of steps, you will create a portal resource at design time to customize both the site template and apply the newly provided tutorial skin.

  1. Open the webcenter folder in your portal project and navigate to the pagetemplates folder in the directory.

  2. Select the myTemplate.jspx file and right-click the file.

  3. Select the Create Portal Resource menu item, shown in Figure 4-12.

    Figure 4-12 The Create Portal Resource Menu Item for the myTemplate.jspx File

    Description of Figure 4-12 follows
    Description of "Figure 4-12 The Create Portal Resource Menu Item for the myTemplate.jspx File"

  4. In the Create Portal Resource dialog, enter in the Display Name field My Site Template (Figure 4-13) and click OK.

    Figure 4-13 The Create Portal Resource Dialog with the Display Name Specified as My Site Template

    Description of Figure 4-13 follows
    Description of "Figure 4-13 The Create Portal Resource Dialog with the Display Name Specified as My Site Template"

  5. Navigate to the skins folder and open it. Select the tutorial-skin file and right-click the Create Portal Resource menu item, as performed in the previous step.

  6. Change the Display Name to Tutorial Skin, and in the Skin Family field, enter mycustomskin, as shown in Figure 4-14.

    Figure 4-14 The Update Portal Resource Dialog with mycustomskin Specified as Skin Family Attribute

    Description of Figure 4-14 follows
    Description of "Figure 4-14 The Update Portal Resource Dialog with mycustomskin Specified as Skin Family Attribute"

  7. Click OK.

  8. Now select the Portal project in Application Navigator and right-click Run to run the portal application in JDeveloper. The portal displayed in the web browser shows the original template, with its default skin and standard portal application look-and-feel.

  9. In the default Home portal page in the web browser, log in as weblogic (which enables you to have administrative privileges) and enter weblogic1 as your password.

    Note that as discussed in Chapter 3, "Creating a WebCenter Portal Application," you must log in as a user with administrative privileges. In the Tutorial, the user “weblogic” has administrative privileges.

  10. After logging in, click the Administration link in the upper right corner of the browser window.

  11. When the Administration Console opens, select the Resources tab, and navigate to Page Templates in the Structure menu, as shown in Figure 4-15.

    Figure 4-15 The My Site Template as a Designated Resource in the Administration Console

    Description of Figure 4-15 follows
    Description of "Figure 4-15 The My Site Template as a Designated Resource in the Administration Console"

  12. By default, My Site Template is hidden. With that row selected, from the Edit menu, choose Show to change its state to Available. A green checkmark and the word "Available" appear next to it now, and it is available for use in the application.

  13. Similarly, under the Look and Layout heading, choose Skins. With Tutorial Skin selected, from the Edit menu, choose Show to change its state to Available.

  14. On the Administration Console, navigate to the Configuration tab. For Default Page Template menu, select My Site Template as the default page template, as shown in Figure 4-16.

    Figure 4-16 The Default Template Changed to My Site Template

    Description of Figure 4-16 follows
    Description of "Figure 4-16 The Default Template Changed to My Site Template"

  15. For Default Skin, select Tutorial Skin from the list. Now set the default portal skin to Tutorial Skin (Figure 4-17).

    Figure 4-17 The Default Portal Skin Changed to Tutorial Skin

    Description of Figure 4-17 follows
    Description of "Figure 4-17 The Default Portal Skin Changed to Tutorial Skin"

  16. Click the Back to Portal link in the Administration Console.

In this lesson, you have learned how to enhance your portal application by creating a new page template, setting that template as a portal resource and applying a new skin (extracted from the Tutorial Setup files and copied into the skins folder in your project) to your portal to change its look and feel at runtime.

In the next lesson, you move ahead to further customize your application portal by changing the default settings of your template at design time in JDeveloper.