|Oracle® Fusion Middleware Tutorial for Oracle WebCenter Developers
11g Release 1 (22.214.171.124.0)
Part Number E10273-07
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 that goal, you will need to create the page template, then extract the setup files provided with this Tutorial from a folder residing on your hard drive. The folder contains a batch of files with graphic images, skins and templates. You will then copy these files to their respective folders in your application project and replace the existing
swooshy page template, with a new page template that is provided.
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.
This lesson contains the following steps:
Before you begin the steps in this lesson, ensure you have followed the steps up to this point in the Tutorial.
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.
To create a new page template in our portal application:
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.
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
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
The file name identifies the page template in the Application Navigator.
Figure 4-2 The Create JSF Page Template
In the Directory field (Figure 4-2), enter the full directory path of the location under which to create the page template.
In the Page Template Name field (Figure 4-2), enter the display name for the page template, in this case
Click OK to create the template.
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
When the dialog Confirm Create New Page Definition appears (Figure 4-4), click Yes.
Figure 4-4 The Confirm Create New Page Definition Dialog
Tip:A page definition file is an
XMLfile 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.xmlfile specifies the task flow for navigation rendering of the site, as well as parameters defining site structure paths.
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.
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
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 “Designing the Look and Feel of Your Portal” in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter.
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 Tutorial setup files, as described in Step 6: Download the Sample Tutorial Files, do so now. You can download the files from your web browser. The files are available at this URL address:
To extract the setup files and place them in the correct location in your newly created application in JDeveloper:
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.
On your local drive navigate to, for example,
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 The Images, Skins, Templates, and UCM Content Folders for Setup Residing on Your Local Hard Drive
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
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
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
Figure 4-9 Expanded Templates Folder in the Tutorial Setup Directory
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.
myTemplatePageDef.xml file now resides in the
Figure 4-10 The Portal Hierarchy Refreshed to Include the Extracted Files for Setup
Once you refresh the page templates and skins folders in your portal application, the copied files,
tutorial-skin.css, appear in their respective folders, as shown in Figure 4-11.
Figure 4-11 The myTemplate.jspx file and tutorial-skin.css File in the Portal Project Folders
Close the Portal
Application Sources folders and navigate to the
webcenter folder in your project directory.
webcenter folder in your portal project and navigate to the
pagetemplates folder in the directory.
myTemplate.jspx file and right-click the file.
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
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
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.
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
Click the Refresh button in the Application Navigator to refresh the contents of the skins folder.
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.
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
After logging in, click the Administration link in the upper right corner of the browser window.
When the Administration Console opens, select the Resources tab, and navigate to the
Page Templates item in the Structure menu, as shown in Figure 4-15. The page template is now displayed.
Figure 4-15 The My Site Template as a Designated Resource in the Administration Console
In the 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
In the Administration Console, navigate to the Configuration tab and select it. From the Default Skin menu, 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
Click the Back to Portal link in the Administration Console.
Refresh the web browser page to reload the new tutorial skin.
Now the Go Green, Eat Fresh Home page appears, as shown in Figure 4-18.
Figure 4-18 The Home Portal in a Web Browser with a New Tutorial Skin Applied
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.