Contents

Title and Copyright Information

Preface

Audience

Documentation Accessibility

Related Documents

Conventions

1 Introduction to WebCenter Portal: Framework and the Tutorial

What is WebCenter Portal: Framework?

What Will I Create?

The Development Scenario

Tutorial Path

2 Preparing for the Tutorial

Introduction

Step 1: Obtain the Software

Step 2: Install the WebCenter Extension Bundle

Step 3: Set the User Home Directory Environment Variable

Step 4: Verify the Correctly Installed JDeveloper Release and WebCenter Extension

Step 5: Work with the Integrated WebLogic Server (WLS)

Step 6: Download the Sample Tutorial Files

Step 7: Create a Content Repository Connection

3 Creating a WebCenter Portal Application

Introduction

Step 1: Create a Custom WebCenter Portal Application

Step 2: Use Seeded Page Templates to Build Your Portal Application

4 Creating a New Page Template with a New Portal Skin

Introduction

Step 1: Create a New Page Template

Step 2: Extract Setup Files and Replace the Existing Template

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

5 Changing the Look and Feel of Your Portal Application

Introduction

Step 1: Change the Default Settings For Template and Skin

Step 2: Change the Default Page Template at Runtime

6 Connecting to and Managing Content Repositories

Introduction

Step 1: Connect to Oracle WebCenter Content Repository

Step 2: Create a User With Privileges To Edit Repository Content

Step 3: Add a Content Item to the Navigation Model

Step 4: Take Advantage of Iterative Development

Step 5: Add a New Content Query

7 Customizing Pages for Permissions and Runtime Editing

Introduction

Step 1: Customize Pages and Set Permissions

Step 2: Edit Documents at Runtime

8 Conclusion

Summary

Moving On

Index

Oracle® Fusion Middleware

Tutorial for Oracle WebCenter Portal Developers

11g Release 1 (11.1.1.6.0)

E10273-08

November 2011

Oracle Fusion Middleware Tutorial for Oracle WebCenter Portal Developers, 11g Release 1 (11.1.1.6.0)

E10273-08

Copyright © 2007, 2011, Oracle and/or its affiliates. All rights reserved.

Primary Author: Tom Maremaa

Contributor:  Bill Witman, Peter Moskovits, Kundan Vyas, Robin Fisher, Fadi Hakim, Bob Fraser, Richard Nessel, Ingrid Snedecor, Savita Thakur, Joan Carter, Promila Chitkara

This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited.

The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing.

If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, the following notice is applicable:

U.S. GOVERNMENT RIGHTS Programs, software, databases, and related documentation and technical data delivered to U.S. Government customers are "commercial computer software" or "commercial technical data" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, the use, duplication, disclosure, modification, and adaptation shall be subject to the restrictions and license terms set forth in the applicable Government contract, and, to the extent applicable by the terms of the Government contract, the additional rights set forth in FAR 52.227-19, Commercial Computer Software License (December 2007). Oracle America, Inc., 500 Oracle Parkway, Redwood City, CA 94065.

This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal injury. If you use this software or hardware in dangerous applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its safe use. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous applications.

Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The Open Group.

This software or hardware and documentation may provide access to or information on content, products, and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content, products, and services. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services.

Preface

This Tutorial introduces you to Oracle WebCenter Portal: Framework, a key component of Oracle WebCenter Portal that enables you to build your own WebCenter Portal: Framework Applications. As you work through this Tutorial, you'll become familiar with Oracle JDeveloper and the components that have been added to support the new Oracle WebCenter Portal: Framework functionality. When you're ready to begin building your own application, you can move on to the Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal for assistance.

Note:

For the portable document format (PDF) version of this manual, when a URL breaks onto two lines, the full URL data is not sent to the browser when you click it. To get to the correct target of any URL included in the PDF, copy and paste the URL into your browser's address field. In the HTML version of this manual, you can click a link to directly display its target in your browser.

Audience

This document is intended for users wishing to familiarize themselves with Oracle WebCenter Portal: Framework and learn how to develop WebCenter Portal: Framework Applications.

This Tutorial does not assume any prior knowledge of Oracle JDeveloper or Oracle WebCenter Portal. It does, however, assume that you are already somewhat familiar with the following:

Oracle Application Development Framework (Oracle ADF)

Oracle ADF Faces

HTML coding experience (including CSS and JavaScript)

XML, XSD, XSL syntax rules experience

Some understanding of JSPs, JavaScript and/or Java

Basic knowledge of content management tools and processes

General web concepts and web site structures

The Tutorial is intended for the developer who wants to learn how to build a WebCenter Portal: Framework application. It is aimed specifically at WebCenter site developers, consultants, project managers, and site administrators who need to build and administer portal applications.

Documentation Accessibility

For information about Oracle's commitment to accessibility, visit the Oracle Accessibility Program website at http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc.

Access to Oracle Support

Oracle customers have access to electronic support through My Oracle Support. For information, visit http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info or visit http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs if you are hearing impaired.

Related Documents

For more information on Oracle WebCenter Portal: Framework, see the following documents, which are available on the Oracle WebCenter Suite Documentation page on the Oracle Technology Network (OTN) at http://www.oracle.com/technology/products/webcenter/documentation.html:

Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal, which explains how to use Oracle JDeveloper and Oracle WebCenter Portal Framework to develop WebCenter Portal: Framework applications

Oracle Fusion Middleware User's Guide for Oracle WebCenter Portal: Spaces, which explains how to use WebCenter Portal: Framework applications at runtime (in a browser)

For more information on Application Development Framework, see the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

Conventions

The following text conventions are used in this document:

Convention | Meaning
boldface | Boldface type indicates graphical user interface elements associated with an action, or terms defined in text or the glossary.
italic | Italic type indicates book titles, emphasis, or placeholder variables for which you supply particular values.
monospace | Monospace type indicates commands within a paragraph, URLs, code in examples, text that appears on the screen, or text that you enter.

1 Introduction to WebCenter Portal: Framework and the Tutorial

Welcome to Oracle WebCenter Portal: Framework! This chapter introduces you to key WebCenter Portal: Framework concepts, then explains what you will create following the steps in this Tutorial. The lessons are designed to familiarize you with different aspects of WebCenter Portal: Framework functionality, and to demonstrate enough about each feature so that you can create your own WebCenter Portal: Framework applications.

If you need additional information about a feature, you can always refer to the Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal and the Oracle Fusion Middleware User's Guide for Oracle WebCenter Portal: Spaces.

What is WebCenter Portal: Framework?

The WebCenter Portal: Framework provides portal-specific features to a WebCenter Portal application. Portals allow users to view and interact with information and to customize their experience to match their exact requirements. Portals typically include features like pages, navigation, security, and customization. Portals can also include features like portlets, content management system integration, personalization, social computing services, search, analytics, and more.

WebCenter Portal: Framework augments the Oracle ADF environment by providing additional integration and runtime customization options. In essence, the framework integrates capabilities historically included in portal products, such as navigation, page hierarchies, portlets, customization, personalization, and integration, directly into the fabric of the JSF environment. This eliminates artificial barriers for the user and provides the foundation for developing context-rich applications.

You can selectively add only desired Oracle WebCenter Portal components or services to your WebCenter Portal application. For example, you might only want to add the Instant Messaging and Presence (IMP) service. In this case, you could add just that service without adding all of the other services available with Oracle WebCenter Portal.

Figure 1-1 provides an overview of the Oracle WebCenter Portal architecture, showing the major components that make up the product.

Figure 1-1 Overview of the Oracle WebCenter Architecture

In Figure 1-1, notice Oracle WebCenter Portal: Services and Composer. You will use both of these components in conjunction with WebCenter Portal: Framework in this Tutorial.

For more information about WebCenter Portal: Framework, WebCenter Services, and Composer, refer to “Understanding Oracle WebCenter Portal" in the Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

What Will I Create?

In this Tutorial, you will use WebCenter Portal: Framework to build a WebCenter Portal: Framework application that is customizable at runtime, empowering you and your end users to edit application pages according to personal requirements and directly leveraging Oracle Metadata Services (MDS).

Building your portal application, you will also use Composer, which is an easy, browser-based environment whose components you can simply add at design time to a page in JDeveloper. In conjunction with Metadata Services, Composer provides a runtime editing tool that enables business users to edit application pages. Changes made to a page at runtime are then saved as metadata, separate from the base application definitions. This eliminates the need to revise your application and redeploy it to the production environment.

The goal is for you to complete the lessons in the Tutorial and build your WebCenter Portal: Framework application within a period of about two hours. In so doing, you will gain valuable hands-on experience working with Oracle JDeveloper and learning some of the important, high-level concepts you need to master in order to extend your knowledge of JDeveloper and the Framework.

The Tutorial is not intended to provide you with a complete guide to all the features and capabilities available in the WebCenter Portal: Framework. However, as you build your portal as a developer at design time, you ought to become familiar with some of the key concepts and paradigms in the Framework, such as

The power of page templates

Working with and applying skins to change the look and feel of your portal at runtime

The power of the unified navigation model

Iterative development so you can work more quickly and efficiently when building a portal application by disabling certain optimization features

Customizing pages and site templates in your portal and setting permissions for user access

Runtime in-context editing of HTML document content

You will create a content repository connection that is owned and deployed by your WebCenter Portal application. In this case, the connection will be to the Oracle WebCenter Content repository with access provided to the Oracle Content Server. You will set UCM as your primary connection and navigate to the UCM Content folder in the Contributions directory, where the HTML content for your application is stored. You will then retrieve this content and use it to customize portal pages by dragging and dropping the documents from the folder on to various components and rendering that content as Content Presenter task flows. This is a preferred and recommended method of working with the tools available in the Portal Framework.

By using Oracle WebCenter Portal: Services to integrate content from a content repository, you will be able to display that content in a user-friendly interface and enable users to “tag” and search the content.

The Development Scenario

Go Green Eat Fresh is a public facing website that offers restaurant customers a choice of healthy and fast foods to eat, including pastas, meat and salads. Customers can browse and select from a menu of choices on the Home page of the portal. Administrators and registered users with access can edit the content of HTML documents, such as menus, food listings and orders, at runtime. That content is stored in folders in Oracle WebCenter Content repository for easy access and can be retrieved when content pages need to be changed or modified.

In this Tutorial you play the dual role of a portal developer and a website administrator who is tasked with building the Go Green Eat Fresh portal and managing its content repository, changing and updating its content based on customer needs and demands.

These will be your assigned tasks:

Create an application based on a WebCenter Portal: Framework application template.

Create users with Administration access to the portal.

Create site navigation for your portal.

Create a navigation link of type Content Item.

Create a page which renders HTML documents listed under a folder in UCM as tabs.

Create a page which acts as a template to create content type links.

Create a content type link (as a node in the navigation) to a folder in UCM, which will list all the documents under it as child links.

Create a content link (as a node in the navigation) which will render the result of Content Query (CMIS query) as links under the node.

Create a customizable page which is invisible in the page hierarchy.

Create an editable content page (rendering an HTML page)

Figure 1-2 shows a partial view of the WebCenter Portal: Framework Application you will create following the lessons in this Tutorial.

Figure 1-2 A Partial View of the Go Green Eat Fresh Public Facing Restaurant Website

Tutorial Path

This Tutorial is designed for the chapters to be completed in the same sequence as they are presented. Due to dependencies, completing them in a different order may result in missing resources or even errors.

The path through this Tutorial is as follows:

Chapter 2, "Preparing for the Tutorial" tells you what you must do before you can complete the steps in this Tutorial, like verifying you have correctly installed JDeveloper and the required WebCenter Extensions. It also specifies that you will need to connect to a content repository, in this case, the Oracle WebCenter Content repository, to complete the lessons in the Tutorial.

Chapter 3, "Creating a WebCenter Portal Application" introduces you to the steps you need to follow to create a WebCenter Portal: Framework Application, using Oracle JDeveloper.

Chapter 4, "Creating a New Page Template with a New Portal Skin" discusses how to create a new JSF page template and set that template as a portal resource.

Chapter 5, "Changing the Look and Feel of Your Portal Application" describes how to change the default settings for both your page template and skin at design time in JDeveloper, thus changing the application look and feel.

Chapter 6, "Connecting to and Managing Content Repositories" discusses how to create a content repository connection owned and deployed by your WebCenter Portal application.

Chapter 7, "Customizing Pages for Permissions and Runtime Editing" describes how to customize specific pages in the page hierarchy and set permissions for user access, as well as how to edit in-context HTML document content.

Chapter 8, "Conclusion" recaps the lessons you learned in each chapter, discussing the sequence of steps that you followed to create, enhance and customize a WebCenter Portal: Framework Application.

2 Preparing for the Tutorial

To prepare for this Tutorial, you need to obtain and install the current release of Oracle JDeveloper 11g Release 1 (11.1.1.6) software on your system. You also need to verify if you have the correct Oracle WebCenter extension installed. Beyond that, you will need to copy and extract a folder with sample Tutorial files on your hard drive. This chapter explains what you need to install in order to successfully complete the lessons in the Tutorial.

In addition, you will need to create a connection to a content repository. This is a necessary and preferred way of working with a content-based portal, such as the one you will create by following the lessons in this Tutorial.

Chapter 6, "Connecting to and Managing Content Repositories" describes how you create a connection to the Oracle WebCenter Content repository. Note that you can also have portal applications that do not use content stored in a repository.

Introduction

You will set up the environment for the Tutorial by following these steps:

Step 1: Obtain the Software

Step 2: Install the WebCenter Extension Bundle

Step 3: Set the User Home Directory Environment Variable

Step 4: Verify the Correctly Installed JDeveloper Release and WebCenter Extension

Step 5: Work with the Integrated WebLogic Server (WLS)

Step 6: Download the Sample Tutorial Files

Step 7: Create a Content Repository Connection

Step 1: Obtain the Software

Oracle JDeveloper provides an integrated development environment for developing WebCenter Portal applications. For information on obtaining and installing Oracle JDeveloper, see the Oracle JDeveloper page on OTN at:

http://www.oracle.com/technetwork/developer-tools/jdev/overview/index.html

Step 2: Install the WebCenter Extension Bundle

Before you can begin to develop WebCenter applications, you need to install the WebCenter extension bundle in Oracle JDeveloper. The WebCenter extension bundle is a JDeveloper add-in that provides the complete set of WebCenter capabilities and features to the JDeveloper Studio Edition.

To install the WebCenter extension bundle:

Start Oracle JDeveloper.

If the Select Default Roles dialog displays, select Default Role to enable all technologies, and click OK.

If a dialog opens asking if you want to migrate settings from an earlier version, click No.

From the Help menu, select Check for Updates.

Click Next in the Welcome page of the Check for Updates wizard.

On the Source page, under Search Update Centers, search for the WebCenter extension, select it, then click Finish.

When prompted, restart JDeveloper

JDeveloper is now configured to create the WebCenter portal application for this Tutorial.For more information on obtaining and installing Oracle WebCenter Framework, see the Oracle WebCenter page on OTN at:

http://webcenter.oracle.com

Step 3: Set the User Home Directory Environment Variable

Oracle strongly recommends that you set an environment variable for the user home directory that is referenced by JDeveloper. By setting this variable, you can avoid receiving long pathname errors that are known to occur in some circumstances.

For detailed instructions on setting this variable on Windows, Linux, UNIX, and Mac OS X operating systems, see “Setting the User Home Directory” in the Oracle Fusion Middleware Installation Guide for Oracle JDeveloper.

Step 4: Verify the Correctly Installed JDeveloper Release and WebCenter Extension

Once you have obtained the software, ensure that you have installed Oracle JDeveloper 11g Release 1 (11.1.1.6), shown in Figure 2-1, and the Oracle WebCenter Portal extension (11.1.1).

Figure 2-1 Oracle JDeveloper 11g Release 1 About Box

If you are not sure whether you have the WebCenter Portal extension, you can verify this by opening Oracle JDeveloper, then About from the Help menu, then click the Extensions tab. At the top of the About dialog, you should see Oracle JDeveloper 11g Release 1 11.1.1.6.0. On the Extensions list, sort by Identifier to locate the oracle.webcenter.* components.

Figure 2-2 shows the Oracle WebCenter Portal components listed in JDeveloper.

Figure 2-2 Oracle WebCenter Portal Framework Extensions in Oracle JDeveloper

If you do not see these components (shown in Figure 2-2), you must install the WebCenter Portal extension, as described in the following steps.

To install the WebCenter Portal extension to Oracle JDeveloper using the Update Center:

Launch Oracle JDeveloper.

If the Select Default Roles dialog displays, select Default Role to enable all technologies, and click OK.

If a dialog displays asking if you want to migrate settings from an earlier version, click No.

In Oracle JDeveloper, choose Check for Updates from the Help menu.

On the Welcome page, click Next.

Select Search Update Centers, and choose Oracle Fusion Middleware Products, then click Next.

On the Updates page, search for the WebCenter Portal extension, select it, then click Finish.

When prompted, restart JDeveloper.

For more information on obtaining and installing Oracle WebCenter Portal Framework, see the Oracle WebCenter Portal page on OTN (http://webcenter.oracle.com).

Step 5: Work with the Integrated WebLogic Server (WLS)

Installation of Oracle WebCenter Portal Framework reconfigures the Integrated WebLogic Server (WLS) domain in JDeveloper to include additional libraries and several prebuilt portlets. For this Tutorial, you may not need to work with the additional libraries or prebuilt built portlets. However, you do need to know how to start and stop Integrated WLS.

There are several options for starting Integrated WLS available in the Run menu in Oracle JDeveloper.

To start Integrated WLS in debug mode, select Debug Server Instance from the Run menu.

Running the service in debug mode helps in debugging the service.

To start Integrated WLS in the regular mode, select Start Server Instance from the Run menu.

There are several ways to determine if the integrated WLS is running and to stop it.

The Terminate menu shows you a list of running server(s) and the deployed application(s), if any. (Figure 2-3). To stop a server (or to undeploy an application), select it from this menu.

Figure 2-3 The Terminate Menu Shows What Is Running

Select Terminate from the Run menu, and select the server to stop it.

Access the Integrated WLS console from your browser:

http://localhost:7101/console

Note:

Sometimes WebLogic Server is not accessible (for example, if a user tries to restart WebLogic Server too quickly, before it has successfully shut down). In this case, you may have to manually shut down or stop the Java process.

In working with Integrated WLS, it is important to understand the following concepts.

Integrated WebLogic Server (Integrated WLS) is a preconfigured WebLogic Server that provides a complete Java 2 Enterprise Edition (Java EE) 1.4-compliant environment. It is written entirely in Java and executes on the Java Virtual Machine (JVM) of the standard Java Development Kit (JDK). You can run WebLogic Server on the standard JDK provided with your operating system or the one provided with Oracle JDeveloper.

You can use Integrated WLS as a platform for pretesting WebCenter Portal application deployments on your local computer by establishing an application server connection to it from Oracle JDeveloper. When you run the application in Integrated WLS, it is actually deployed as if you were deploying it to a WebLogic Server instance in an application server. For more information about Integrated WLS, see Section 64.3, “Deploying a WebCenter Portal Application to a WebLogic Managed Server,” in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

Note:

You can specify the Java Virtual Machine (JVM) settings for a WebCenter Portal application running on the Integrated WLS in the setDomainEnv.sh script located here:

JDEV_SYSTEM_DIRECTORY/DefaultDomain/bin/

The default memory values are:

-Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m

When creating or referring to the JDEV_SYSTEM_DIRECTORY, keep in mind that, on a Windows platform, a WebCenter domain name cannot contain spaces, and the domain cannot be created in a folder that has a space in its path. Also, pages in WebCenter Portal application are not rendered if there is a space in the path to the system directory in Oracle JDeveloper. Therefore, ensure that DOMAIN_HOME and JDEV_SYSTEM_DIRECTORY paths do not contain spaces.

Step 6: Download the Sample Tutorial Files

As you work through the lessons in this Tutorial, you'll need to include certain content -- images, skins and templates -- in your portal application. This material is contained in a ZIP file, which you can download by following these instructions.

To download the sample Tutorial files:

Open a browser, and enter the following in the Address field:

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

Open the ZIP file (owcs-r11ps3-devtutsetup-254761.zip), as shown in Figure 2-4.

Figure 2-4 The Downloaded Tutorial SetUp Zip File

Unzip the file to a local drive, such as C:\TutorialSetUp.

In Chapter 4, "Creating a New Page Template with a New Portal Skin," you will extract the contents of these files and copy them step-by-step to their appropriate folders for use in building your portal application.

Once you've downloaded the zip file and unzipped it, extracting its contents, you will need to upload the Oracle WebCenter Content folder to the Contributions folder in the Oracle WebCenter Content repository. For information on how to upload content to Oracle WebCenter Content, see Chapter 6, “Checking In Files,” in the Oracle Middleware User's Guide for Content Server.

The UCM Content folder contains HTML content (Figure 2-5) you will need in creating your WebCenter Portal application, as you work through the lessons in this Tutorial.

Figure 2-5 The UCM Content Folder with Sub Folders of HTML Content for Upload

Step 7: Create a Content Repository Connection

To complete the lessons in this Tutorial, you will need access to a content repository, specifically one that is owned and deployed by your WebCenter Portal application. In this case, for purposes of this Tutorial, you will need to create a connection to the Oracle WebCenter Content repository, which provides access to the Content Server.

Connecting to the Oracle WebCenter Content repository is a preferred use case and best practice for creating WebCenter Portal applications, if you need to work with content-based portal, as is the case with the lessons described in this Tutorial.

Chapter 6, "Connecting to and Managing Content Repositories" discusses in detail the steps you need to follow to create a connection to Oracle WebCenter Content. It is not necessary to create this connection before starting to create and build your portal application.

For more information about creating a content repository connection, see “Configuring Content Repository Connections” in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal. The chapter discusses how to configure connections to content repositories to provide access to the content.

For information about how to configure Content Server for Oracle WebCenter, see “Oracle Content Server Prerequisites” in Oracle Fusion Middleware Administrator's Guide for Oracle WebCenter Portal.

3 Creating a WebCenter Portal Application

In this lesson, you will create a basic WebCenter Portal: Framework application. WebCenter provides an application template that provisions the new application with WebCenter Portal files and libraries – everything you need to develop and deploy a portal.

You will play the role of a portal developer assigned the task of developing the basic structure of the portal. By selecting the option to configure your application with standard portal features, you will ensure that all the necessary portal artifacts, like templates, catalogs, skins, default page, and the Resource Manger, are generated in the application. This will reduce the time required to develop your application.

As a developer, you will learn in this lesson how to work with the existing application template, and then in "Creating a New Page Template with a New Portal Skin" how to modify and change that default page template.

At the end of this lesson, the page you create will look like Figure 3-1 when you log in as Administrator and open the page in a web browser.

Figure 3-1 The Home Page with Administrator Privileges Enabled after Successful Login

Introduction

This lesson contains the following steps:

Step 1: Create a Custom WebCenter Portal Application

Step 2: Use Seeded Page Templates to Build Your Portal Application

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 Custom WebCenter Portal Application

Let's begin by creating a WebCenter Portal: Framework application, using the WebCenter wizard for creating new portal applications. The wizard uses an out-of-the-box Portal Application template that ensures the appropriate application components are included.

After you create your portal application, you can then configure the necessary connections to a database and content repository, as described in Chapter 6, "Connecting to and Managing Content Repositories."

To create a WebCenter Portal application: 

In Oracle JDeveloper, in the Application Navigator, choose the New Application icon (Figure 3-2) and click it to launch the application wizard.

Figure 3-2 The New Application Icon in Application Navigator

Now in the Items list, navigate down the list and select WebCenter Portal Framework Application (Figure 3-3).

Figure 3-3 Create New WebCenter Portal Framework Application

On the Application Name tab, in the Application Name field, enter MyPortalApplication, as shown in Figure 3-4. Click the Browse button in the Directory field to specify the directory on your system where you want your portal application to reside.

In the Application Package Prefix field (shown in Figure 3-4), enter my.portal.application.

Figure 3-4 Naming Your Application - Step 1 of 5

Click Next.

The Name your project dialog appears in the wizard, as shown in Figure 3-5. On the Project Name tab, in the Project Name field, note that the project is named Portal by default.

Figure 3-5 Name Your WebCenter Project - Step 2 of 5

Click Next.

On the Project Java Settings tab, in the Default Package field (Figure 3-6), note that the project package is named my.portal.application.portal by default. A source root directory and an output directory are also specified by default.

Figure 3-6 Configure Java Settings in WebCenter - Step 3 of 5

Click Next.

The Configure WebCenter settings dialog appears, as shown in Figure 3-7. Ensure that the checkbox Configure the application with standard Portal features is checked.

Figure 3-7 Configure WebCenter Settings - Step 4 of 5

Click Next.

In the wizard, Step 5 of 5 appears in the Create WebCenter Portal - Framework dialog. A second project name is created, entitled PortalWebAssets, as shown in Figure 3-8.

Figure 3-8 Configure WebCenter Settings - Step 5 of 5

Click Finish.

Oracle JDeveloper now configures and generates the base XML files, offline databases, page flows, web pages, business components, web services, binding files, and enterprise Java Beans available for you to build and deploy your WebCenter Portal application, as shown in the MyPortalApplication Overview window (Figure 3-9).

Figure 3-9 The MyPortalApplication Overview Window with Java Files Selected

Return to the folders of your portal application in Application Navigator. A collapsed view of the folders shows your default project as named Portal, with Application Sources and Web Content as sub folders, shown in Figure 3-10.

Note PortalWebAssets is also a project. PortalWebAssets are intended to include static resources, like HTML and image files, in a newly created portal web assets project.

Figure 3-10 The MyPortalApplication Project in a Collapsed View in Application Navigator

Following the steps in the Wizard, your WebCenter Portal application is now populated with a portal project, named Portal, and a static application resources project called by default PortalWebAssets. Your portal project includes features like site navigation, page hierarchies, delegated administration, security, page templates, and runtime customizing. Your portal application can consume portlets, incorporate content management services, and include WebCenter social computing services. PortalWebAssets include static application resources like HTML and image files. By separating the static resources into a separate project, you can deploy those resources to a dedicated server.

Now expand the various folders and sub folders, like catalogs, navigators, page hierarchy, pages and page templates (shown in Figure 3-11), for a view of the logical structure and parent-child relationships created in your portal application.

Figure 3-11 Expanded Folders in MyPortalApplication Project Shown in Application Navigator

Now you need to change the context root of the portal application. Right-click Portal project and choose the Project Properties menu item, as shown in Figure 3-12.

Figure 3-12 The Project Properties Menu Item Selected to Change the Context Root of the Application

Select the Java EE Application node in the Javadoc list, which appears in the Java EE Application dialog. In the Java EE Web Context Root field, enter mytutorial, as shown in Figure 3-13, and click OK.

Ensure that the Java EE web context root is set to mytutorial.

Figure 3-13 The Java EE Application Dialog with mytutorial Entered in the Java EE Web Context Root Field

In Application Navigator, right-click the Portal project and choose Run to run the application.

A Configure Default Domain dialog appears, as shown inFigure 3-14. In the Administrator ID field, enter weblogic. In the Passworld field, enter weblogic1. Note that you can change any of these values at your discretion.

Figure 3-14 The Configure Default Domain Dialog to Enter Administrator ID and Password

Click OK.

Oracle JDeveloper now builds the application out of the box and displays the default portal page Home in a web browser, as shown in Figure 3-15.

Initially, this portal displays a single page, rendered as Home. The Home page is based on the seeded Globe page template (discussed in the next section), which provides all the initial functionality of the portal, including a banner, a login form with User Name and Password fields, and a navigation menu with a single link element -- Home -- displayed on the web page.

Figure 3-15 The Default Home Portal Page in a Web Browser

In the upper right corner of the Home page, in the User Name field (Figure 3-16), you can log into the Home page. Enter weblogic as the User Name. (Note that the weblogic user is seeded in the integrated WebLogic Server.) In the Password field, enter weblogic1.

Figure 3-16 Enter User Name and Password To Log in to Home Page

Figure 3-17 shows the portal Home page with Administrator privileges enabled after successfully logging in.

Note that Administrator privileges are now enabled because you can see the Administration link in the upper right corner of the web browser. This means the user, specified here as weblogic, has administration privileges for the portal.

Figure 3-17 The Home Page with Administrator Privileges Enabled After Successful Login

For more information on creating an application based on the WebCenter Portal Application template, see “Preparing Your Development Environment” in the Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

Step 2: Use Seeded Page Templates to Build Your Portal Application

When you create a portal, you will base its look and feel on a page template. Page templates enable you to maintain a consistent look and feel across all the pages in your portal, and typically determine the artifacts, like banners, footers and navigation bars, that surround the main content of the page.

Using JDeveloper, you can create and publish page templates. In addition, you can also modify them to meet specific design or runtime requirements in your portal application.

By selecting the Configure the application with standard Portal features option, as shown in Figure 3-7, "Configure WebCenter Settings - Step 4 of 5", two seeded, out-of-the-box templates are added by default to your portal application: pageTemplate_globe.jspx (shown in Figure 3-19) and pageTemplate_swooshy.jspx (Figure 3-20).

Both templates offer essentially the same functionality but with a different set of graphics.

To view the pageTemplate_globe.jspx template:

Navigate to the pagetemplates folder in your portal project.

Double-click the folder and select the pageTemplate_globe.jspx file, as shown in Figure 3-18.

Figure 3-18 The pageTemplate_globe.jspx File in the Page Templates Folder

Right-click the page template and choose Open. The file opens in JDeveloper, as shown in Figure 3-19.

Ensure that you select the Design tab in the lower left corner.

Figure 3-19 The pageTemplate_globe.jspx Seeded Page Template

Figure 3-19 shows the pageTemplate_globe.jspx page template with each of its page features and artifacts (enumerated below) called out with their corresponding numbers in the illustration.

A link to the portal home page

A tag line

A welcome message

A link to the seeded Administration page

A login area that converts to a logout link when users are logged in

A navigation bar

An area for adding content to pages based on the template

A copyright notice

Figure 3-20 shows the pageTemplate_swooshy.jspx page template, but without each of its page features and artifacts enumerated.

Figure 3-20 The Seeded PageTemplate swooshy.jspx

Using JDeveloper, you can modify and edit this default page template to meet your particular requirements. You can also create and build your own page template, as we discover in the next lesson in this Tutorial, ensuring that it has a common navigation bar, footer, and banner, then leave it up to your content contributors to populate the portal with content at runtime.

Following the steps outlined in this Tutorial, you have created a new portal application using Oracle JDeveloper.

In the next lesson, you will learn how to modify and edit an existing page template, with the goal of customizing its behavior to meet the particular needs of your end users. By completing that task, you will create a new page template in your portal application, further customizing its look and feel, and then set that template as an application resource.

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

Introduction

This lesson contains the following steps:

Step 1: Create a New Page Template

Step 2: Extract Setup Files and Replace the Existing Template

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

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:

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 myTemplate.jspx.

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 MyTemplate.

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

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

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:

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, 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 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 MyPortalApplication/Portal/adfmsrc/oracle/webcenter/portalapp/pagetemplates folder.

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.

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

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, myTemplate.jspx and 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.

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.

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

Select the 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 OK.

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.

5 Changing the Look and Feel of Your Portal Application

In the previous lesson, you changed the default template in your portal application to myTemplate and proceeded to change the default skin to the tutorial skin provided in the folder on your hard drive whose contents you extracted. These changes then appeared in your web browser as a new template and a new skin when you built and ran your application in JDeveloper.

Now in this lesson, you will move ahead to change the default settings for both your template and skin at design time in JDeveloper. When you launch your portal application again in a web browser, these changes will show the new default settings with changed preferences, as well as the new template and skin. In so doing, you'll learn how to change the look and feel of your portal application at design time and how to apply skins to your portal.

A skin is essentially a global style sheet (based on the Cascading Style Sheet specification [CSS]) that you can apply to your entire application. Once you do that, every layout component automatically uses the styles assigned by the skin. You cannot edit that skin at runtime or post-deployment, however.

Skins are important because they enable you to define the appearance of your application and achieve some degree of consistency across multiple pages, so that you can more effectively communicate your company's preferred look and feel.

Introduction

This lesson contains the following steps:

Step 1: Change the Default Settings For Template and Skin

Step 2: Change the Default Page Template at Runtime

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

Step 1: Change the Default Settings For Template and Skin

When you create a WebCenter Portal Application using the WebCenter Application template, a skin is included by default. In this Tutorial, you've extracted a custom skin provided for you, which you've then applied in place of the default skin. Now you need to change the default settings for both the skin and the provided template by changing their preference entries.

To change the default preferences of your portal application at design time, you will need to directly edit the adf-config.xml file in your project. The steps to accomplish this task are described in this section, as follows.

To change the default settings for the skin and template:

Open adf-config.xml.

To locate this file in JDeveloper, open the Application Resources part of the Application Navigator. Then, open the Descriptors folder and the ADF META-INF folder, as shown in Figure 5-1.

Figure 5-1 Location of the adf-config.xml File in JDeveloper

In the ADF META-INF folder, select the adf-config.xml file and open it. The file appears in the Overview tab, as shown in Figure 5-2.

Figure 5-2 The adf-config.xml file Specifying Component Configuration

Now click the Source view tab in the JDeveloper window to view the XML source contents of the file.

In the Search field of the adf-config.xml file, enter the word preferences. Navigate in the XML schema to this code (Example 5-1):

Example 5-1 The XML Code Specifying the Default Page Template

<portal:preference id="oracle.webcenter.portalapp.pagetemplate.pageTemplate"
                   desc="Default Page Template"
         value="/oracle/webcenter/portalapp/pagetemplates/pageTemplate_globe.jspx"
                   resourceType="Template" display="true"/>

Change the value attribute to myTemplate.jspx and change the desc attribute to "My Site Template", as shown in Example 5-2

Example 5-2 Changed XML Template Code

       value="/oracle/webcenter/portalapp/pagetemplates/myTemplate.jspx"
             desc="My Site Template"

Navigate in the preference schema to the desc attribute "Default Portal Skin" and the value attribute "portal", shown in Example 5-3. Select "portal" and change it to "mycustomskin".

Example 5-3 The Value Attribute of the Default Portal Skin

<portal:preference id="oracle.webcenter.portalapp.skin"
                   desc="Default Portal Skin" value="portal"

In the Source view of the adf-config.xml file, note that the value attribute is now updated as "mycustomskin", as shown in Figure 5-3.

Figure 5-3 The Portal Skin Value Attribute Changed to "mycustomskin"

Change the desc attribute from "Default Portal Skin" to "Tutorial Skin", shown in Figure 5-4.

Figure 5-4 The Changed desc Attribute to Tutorial Skin

Save the adf-config.xml file.

Right-click the Portal project in Application Navigator and select Run to build and launch the application in JDeveloper.

When the Home page appears in a web browser, log in as User weblogic and Password as weblogic1 to log in and enable Administrator privileges.

In the Administration Console, click the Resources tab and click the Skins item in the Look and Layout list. As a result of the changes you've made through steps 5 and 8, the Tutorial Skin, when checked, will be available to the application (Figure 5-5).

Tip:

The Administration Console lets you work with resources, services, security, and portal configurations at runtime. The Administration Console includes a Resources tab that lets you work with several portal-specific features at runtime, like pages, page templates, navigation models, resource catalogs, skins, page style, task flows, and so on.

The Resource Manager enables portal administrators to manage these resources at runtime. Using the Resource Manager, portal users can also download resources, or an entire application, from the runtime environment, edit them in JDeveloper, and then upload them back into the deployed application.

Figure 5-5 The Tutorial Skin Available When Checked as Skin Resource

Since you are still developing your application (and have not yet deployed it), you can continue to switch back and forth between the runtime view and design time in Oracle JDeveloper to modify the look and feel.

For more information about changing default templates and applying different skins at design time, see Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

Step 2: Change the Default Page Template at Runtime

The steps that follow describe how you can change the default page template at runtime. You accomplish this by logging in as a user with administrative privileges and clicking the Administration link in the web browser to access the Administration Console. Once in the Administration Console, you will select the Resources tab that lets you work with portal-specific features at runtime, like page templates.

The values you enter in the Administration Console, modifying or changing page templates, will be lost the next time you choose Run from JDeveloper, however.

Tip:

It's important to understand that if you are using the Integrated WebLogic Server in a development environment, running your portal application through JDeveloper as we've been doing in this Tutorial, then any changes you make to the portal at runtime, using the Resource Manager, will be discarded upon redeployment by default. If you use the Resource Manager, for example, to make changes like adding entitlements to a page, changing the layout, or modifying the navigation model, those changes will not be preserved the next time you redeploy your application.

Note:

You can also change the default page template by modifying the adf-config.xml file, as you did with the skin, described in Step 1: Change the Default Settings For Template and Skin.

To change the default page template from Globe to Swooshy:

In the Application Navigator in JDeveloper, right-click the Portal project and choose Run to run the application. The application opens in your web browser, as shown in Figure 5-6.

Figure 5-6 The Home Portal Page with Administration Privileges Enabled

In the default Home portal page in the web browser, log in as weblogic and weblogic1 as your password.

Note that you must log in as a user with administrative privileges. In the Tutorial, the user "weblogic" has administrative privileges.

Click the Administration link in the upper right corner of the web page. The Administration Console appears (Figure 5-7).

Select the Resources tab and navigate to the Page Templates item in the Structure menu, as shown in Figure 5-7. Note that the Propagation tab will only appear if you have defined the appropriate connection for propagating from stage to production.

Figure 5-7 Administration Console with the Resource Tab and Page Templates Item Selected

Click the Page Templates item. Both the Globe PageTemplate and the Swooshy PageTemplate appear, as shown in Figure 5-8, with the Globe PageTemplate field highlighted. Note that both templates are marked as available, so you can apply them.

Figure 5-8 The Globe PageTemplate Selected in the Page Templates Item

Select the Configuration tab in the Administration Console. In the Preferences menu, the Default Page Template is specified as the Globe PageTemplate (Figure 5-9).

Figure 5-9 The Globe Template Specified as the Default Page Template in Preferences

Change the Default Page Template and set it to the Swooshy PageTemplate, as shown in Figure 5-10.

Figure 5-10 The Default Page Template Changed to Swooshy Page Template

Click the Back to Portal link. The new page template is applied to the portal.

In this lesson, you've learned how to change the default settings for both your template and skin at design time in JDeveloper by changing their preferences and updating portal resources. With those changes in effect, your portal application will have a different look and feel.

You also learned how to change the default page template at runtime from Globe to Swooshy by accessing the Administration Console and modifying preferences.

6 Connecting to and Managing Content Repositories

In this lesson, you will create a content repository connection that is owned and deployed by your WebCenter Portal application. In this case, the connection will be to the Oracle WebCenter Content repository with access provided to the Oracle WebCenter Portal's Content Service for Oracle WebCenter Content. You will set Oracle WebCenter Content as your primary connection and navigate to the Contributions directory, where HTML content files for your application, like About Us, Contact Us, Home and Menu, are stored in content sub folders.

You will then work with these files and the Documents - Content Presenter service to create task flow bindings for the application. For example, in the home.jspx file, you will drag and drop the home.html file as your Content Presenter. By enabling a connection to the Oracle WebCenter Content repository, you will be able to manage more efficiently the content you need while optimizing the development of your application.

The other tasks described in this lesson include learning how to add a content item to the default navigation model, as well as how to take advantage of Iterative Development, which allows you to make changes to your application while it is still running on the Integrated WebLogic Server and immediately see the effects of those changes when you refresh the pages in your web browser. You will also learn how to add a new Content Query that will fetch all the documents you need in your portal application that are based on specified metadata field tags.

At the end of this lesson, the page you created in the previous lesson will look like Figure 6-1.

Figure 6-1 The MyPortalApplication in a Web Browser with Menu Items Selected

For more information about adding content items to the navigation model and new content queries, see Building a Navigation Model for Your Portal in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal. For more information about managing content repositories and UCM, see Oracle Fusion Middleware Administrator's Guide for Oracle WebCenter Portal.

Introduction

This lesson contains the following steps:

Step 1: Connect to Oracle WebCenter Content Repository

Step 2: Create a User With Privileges To Edit Repository Content

Step 3: Add a Content Item to the Navigation Model

Step 4: Take Advantage of Iterative Development

Step 5: Add a New Content Query

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

Step 1: Connect to Oracle WebCenter Content Repository

Oracle JDeveloper enables you to manage and handle document content stored on the Oracle WebCenter Portal's Content Service for Oracle WebCenter Content by creating a connection to the content repository, in this case to Oracle WebCenter Content. This connection is then owned and deployed by your portal application. You create this connection in Application Resources, as described in the following steps.

To connect to the content repository:

In Application Navigator, navigate down to Application Resources and right-click the Connections folder.

Choose New Connection and the Content Repository item. The Create Content Repository Connection dialog appears, as shown in Figure 6-2.

Figure 6-2 The Create Content Repository Connection Dialog

In the Connection Name field, enter UCM. Ensure that you enter UCM in all caps. Note that you should not use any other designation for the Oracle WebCenter Content connection, like myUCM, for example. The Oracle WebCenter Content content for the Tutorial relies on this specific connection name. Ensure that the connection name is UCM.

From the Repository Type field, select Oracle Content Server. Ensure that you check Set as primary connection for Documents service.

In the Configuration Parameters pane (Figure 6-2), enter the parameters and values shown in Table 6-1. The Server Host Name should be your server host, that is, the host name of the system where your Oracle Content Server is running. The Content Server Listener Port is the port of your Oracle Server.

Table 6-1 Configuration Parameters and Values

Parameter
Value

RIDC Socket Type

socket

Server Host Name

your.serverhost.com

Content Server Listener Port

The port of your Oracle Server

Ensure that you check Specify login credentials for the current JDeveloper session (Figure 6-2).

In the User Name field, enter weblogic and in the Password field, enter weblogic1.

Click Test Connection, and if successful, click OK.

In Application Resources, expand the Connections folder, as shown in Figure 6-3. Note that you are now connected to the Oracle WebCenter Content repository.

Figure 6-3 The Connection Established to the Content Repository

Under your UCM connection, expand the Contributions folder and navigate to the UCM Content folder, where your uploaded content is stored. Now open the Home folder with the home.html file shown in Figure 6-4.

Figure 6-4 The Home Folder Opened with the home.html file Shown in the UCM Content Directory

Return to your portal project directory, navigate up to the pages folder. Open the home.jspx file, then view it in Source view by clicking the Source tab. The home.jspx file appears in Source view, as shown in Figure 6-5.

Figure 6-5 The home.jspx File in Source View

Select the XML code snippet <cust:panelCustomizable id="hmpnc1" layout="scroll"/> at the center of the file, as shown in Figure 6-6. You will add another line of code after the selected snippet.

Figure 6-6 The Customizable Panel XML Code Snippet

In the UCM Content folder, open the Home folder and select the home.html file, shown in Figure 6-7.

Figure 6-7 The home.html File in the UCM Content Folder

In JDeveloper, return to the Source view of the home.jspx file. Select the XML code snippet <cust:panelCustomizable id="hmpnc1" layout="scroll"/> shown in Figure 6-6, and drag and drop the home.html from the connection on to the panelCustomizable.

Choose the Create menu item, then scroll down the sub menu list to select the Documents - Content Presenter item, as shown in Figure 6-8, and click the item.

Figure 6-8 The Create Documents - Content Presenter Menu Item Selected

The Edit Task Flow Binding dialog now appears, shown in Figure 6-9. The task flow input parameters are automatically assigned specific values. Click OK.

Figure 6-9 The Edit Task Flow Binding Dialog with Specific Values Assigned

It's important to understand that in the last two steps, you have added a Content Presenter task flow and set the task flow parameters to read the values from the navigation link parameters. When you run your portal application, the Home node will automatically appear in the navigation menu because the home.jspx file has already been added to the page hierarchy and the page hierarchy has been added to the default navigation model.

Save your changes.

Refresh the web browser.

The new Home link appears in the navigation, with the text for document content at the center of the Home page, as shown in Figure 6-10.

Figure 6-10 The MyPortalApplication in a Web Browser with the Home Page and Home Content Defined

In this sequence of steps, you have learned how you can take advantage of the Content Presenter task flow in order to display and render documents under a UCM Content folder as a tab.

Using the Content Presenter task flow, you are able to drag and drop a task flow onto a panel component as a region in the XML code for purposes of binding the task flow to that region. You can then set task flow parameters to read the values from the navigation link parameters.

Up to this point, you have created and built a page that can be used as a template, if you choose, onto which you can add multiple navigational links.

Step 2: Create a User With Privileges To Edit Repository Content

Now that you have successfully created a connection to the Oracle WebCenter Content repository for your WebCenter Portal application and performed the necessary steps to drag and drop the home.html file as your Content Presenter, we will create a user in the portal application who will have privileges to edit the content stored in your repository.

There are two steps involved to accomplish this particular task:

Create a user (in this case, named contentadmin) in the application

Create a user with the same name (contentadmin) in the Embedded LDAP WebLogic Server and add that user as a part of the Administrators group

When you run the application after completing these steps and log in as contentadmin, the identity of this user is propagated to the Embedded LDAP of Oracle WebLogic Server.

Since the UCM instance uses the same Embedded LDAP as an identity store, and since all the users who are a part of the Administrators users group have by default Read, Write, Delete and Administration privileges, the user you've added -- contentadmin -- will be able to edit content.

To create a user in the portal application with privileges to edit content stored in your repository:

In Application Navigator, navigate down to Application Resources, expand the META-INF folder and open the jazn-data.xml file, shown in Figure 6-11.

Figure 6-11 The jazn-data.xml File Selected in the META-INF Folder

Create a user named contentadmin in your portal application (Figure 6-12).

Once you have created a user in the application, you will create a user on the embedded LDAP of Oracle WebLogic Server.

Figure 6-12 The contentadmin Created as a User In Oracle WebCenter Content with Name and Password

Log in to the Oracle WebLogic Server Administration Console where the Oracle WebCenter Content server is installed and enter contentadmin as the user name and the password you used when installing the product (Figure 6-13). Note the Display Name is Contentadmin.

Figure 6-13 Logging in to the Administration Console for Oracle WebLogic Server

Select the Security Realms item in the Oracle WebCenter Content Domain Structure pane (Figure 6-14) and click it.

Figure 6-14 The Security Realms Item in Oracle WebCenter Content

Now select the myrealm name in the Realms table (Figure 6-15) and click it.

Figure 6-15 The Name myrealm Selected in the Realms Table

In the Settings for myrealm pane (Figure 6-16), select and then click the Users and Groups tab.

Figure 6-16 Users and Groups Selected in the Settings for myrealm Pane

In the Users table, click the New button (Figure 6-17).

Figure 6-17 The New User Button Selected in the Users and Groups Pane

Now create a user named contentadmin when asked what you would like to name your new user (Figure 6-18). Specify this new user as a Content Administrator when asked how you would like to describe this new user.

Figure 6-18 The User contentadmin Created as New User

Select and then click the newly created user in the Users table (Figure 6-19). Content Administrator appears in the Description field of the table. Note that the page displays information about each user that has been configured in this security realm.

Figure 6-19 The Newly Created User contentadmin in the Users Table

Select and click the Groups tab in the Settings for contentadmin pane (Figure 6-20).

Figure 6-20 Groups Tab Selected in the Settings for contentadmin Pane

Select the Groups tab and choose the Administrators group from the Parent Groups: Available list and add it to Groups (Figure 6-20). Note that you can use this page to configure group membership for a particular user.

Figure 6-21 Administrators in Available Parent Groups Added to Groups

Click Save.

Once you've completed these steps, the user you've added -- contentadmin -- will now be able to edit the UCM content in the content repository.

Step 3: Add a Content Item to the Navigation Model

In this next sequence of steps, we move ahead to add a content item to the default navigation model XML file for the application.

To add a content item to the default navigation model:

In the Application Navigator of your portal application project, go to the navigations folder (/oracle/webcenter/portalapp/navigations). Right-click default-navigation-model.xml, and choose Open.

In the Design view for the navigation model, in the Navigation column on the left side, click the Add new node icon (the plus icon) and choose the Content Item, shown in Figure 6-22.

Figure 6-22 Adding a Content Item to the Default Navigation Model

Tip:

When you first create a WebCenter Portal application, the seeded navigation model, default-navigation-model.xml, is set as the default navigation model. The default navigation model provides a convenient way to select a navigation model that can be used by default by your application. Page template designers, for example, can then reference this default navigation model without having to know its actual name.

You can set the default navigation model for your application, if you want to create your own model, by editing the oracle.webcenter.portalapp.navigation.model preference in the adf-config.xml file.

The navigation window for the default-navigation-model.xml file appears with a link specified as contentItem and with the Id specified also as contentItem. You will need to change these entries, as shown in Figure 6-23. Note that the Type field is set as Content.

Select the About Us file, enter in the Link Id field: aboutus. In the URL Attributes pane, enter the Display Value as About Us.

Figure 6-23 Id and Display Value Specified for Content Item

Click the Browse icon (in the shape of a magnifying glass) next to the URL field to browse the contents.

In the Choose a Resource dialog, open and expand the UCM sub folders, then navigate to the UCM Content folder and select the aboutus.html file shown in Figure 6-24.

Figure 6-24 The aboutus.html file Selected in the Choose a Resource Dialog

Click OK. The URL of the selected resource appears in the URL field.

Note that you can also simply drag and drop the file from the content connection into the navigation and it will create the content item for you.

Save your files.

Now return to your web browser, reload the browser page and log in as the weblogic user. The About Us link appears in the navigation model next to Home, as shown in Figure 6-25.

Figure 6-25 The About Us Link in the Web Browser of Your Portal Application

Step 4: Take Advantage of Iterative Development

The Iterative Development option is enabled by default in your WebCenter Portal application. There are several advantages to this option.

For one thing, iterative development lets you speed up your development process by allowing you to make changes to your application while it is still running on the Integrated WebLogic Server and then immediately see the effects of those changes when you refresh the current pages in your web browser.

Tip:

On a browser refresh, you will see changes almost instantly to page definitions and page hierarchy, existing JSPX files and the navigation model, page templates, the resource catalog and task flows or portlets you may have added to pages. For example, you can add a task flow to a page and simply refresh the browser or you can change the values in task flows and right away see the results.

Other operations are not supported by iterative development, however, and require you to re-run the application if you create any new file explicitly (for example, a new page definition or page hierarchy), or implicitly. For instance, when you add a sub-page to a node in the page hierarchy, a new *pages.xml file is created, or if you edit any configuration file, like web.xml or adfc-config.xml.

Basically, iterative development works by disabling certain optimization features. Note that iterative development only applies when running from JDeveloper using the built-in server. This option has no effect once your portal application is deployed to a staging or production server.

In the previous step Step 3: Add a Content Item to the Navigation Model, you added a new content link to your application, which appeared in the navigation hierarchy when you refreshed the contents of your web browser.

With Iterative Development enabled in your application, you will add a new link in JDeveloper of type Content in the default navigation model under Root, and then choose the menu.html document for that link. As you save the changes to your application and refresh the browser page, you will see the Menu node on the navigation menu. Clicking it will enable you to see the content of the Menu.

To add a new link in the default navigation model in your application:

In Application Navigator, select the default-navigation-model.xml file. Right-click the Application Properties menu item.

In the Application Properties dialog, select WebCenter in the Run node and ensure that Enable Iterative Development is checked. (Note that this is checked by default.)

Click OK.

In the Navigation pane with the default-navigation-model.xml file selected, click the plus icon to add a Content Item in the navigation, as shown in Figure 6-26.

Figure 6-26 The Content Item To Be Added to the Default Navigation Model XML File

The contentItem appears as a node in the default-navigation-model.xml navigation and in the Id field as contentItem. Change the Id to menu and the Display Value to Menu, as shown in Figure 6-27.

Figure 6-27 The contentItem Changed to menu with a New Display Value

Click the Browse icon next to the URL field.

Navigate to the Menu folder in your UCM connection and select the menu.html file, as shown in Figure 6-28.

Figure 6-28 The Choose a Resource Dialog with menu.html Selected

Click OK.

Refresh the Home page in your web browser and note that the Menu link appears in the navigation of the Home page, as shown in a partial view in Figure 6-29. This is the result of enabling the Iterative Development feature in your portal application.

Figure 6-29 The Refreshed Web Browser Page with the Menu Link Added in the Navigation Model

Step 5: Add a New Content Query

In this next step, you will add a new content query to your portal application. This query will fetch all the documents that are based on metadata field tags in the Oracle WebCenter Content repository.

To add a new content query:

Return to your portal application in JDeveloper and open the default-navigation-model.xml file.

Add the new node icon by clicking the plus button.

Select the Content Query menu item in the list, as shown in Figure 6-30.

Figure 6-30 Adding a New Content Query to the Default Navigation Model

In the Content Query pane, enter in the Id field menucontent. In the Content Query Attributes pane, enter as the Display Value Menu Content (Figure 6-31).

Figure 6-31 The Content Query Pane with Id and Display Value Changed

Select Menu Content in the navigation node, and click the Browse icon in the URL field. The Choose a Resource dialog now appears.

In the Choose a Resource dialog, expand Connections, and select UCM, then click OK. Note that your connection named UCM appears in the Repository field, shown in Figure 6-32.

Figure 6-32 The Repository Field with UCM Entered

Drag and drop the Menu Content item, which is a content query, on the Menu item. This query, based on a metadata field tag in UCM, will fetch all the documents that match the specified criteria for the query in UCM, as shown in Figure 6-33.

Enter the Content Query text in the Query field: SELECT cmis:name FROM ora:t:IDC:GlobalProfile WHERE ora:p:xWCTags LIKE 'menu%'. Note that documents have to be tagged with the keyword: "menu" for the content query to work properly.

Figure 6-33 The Menu Contact Content Query Text Entered

Ensure that you check Insert Folder Contents.

Tip:

You need to perform this step, which is necessary and required in this case, to ensure that the result of the menu content query is published under the menu node because the menu content query is a child of the menu node. The step is not required in all use cases, however.

To ensure that your Content Query executes properly and returns the correct set of results, you need to set its metadata on the content.

As shown in Step 8, the Content Management Interoperability Services (CMIS) query looks like this:

SELECT cmis:name FROM ora:t:IDC:GlobalProfile WHERE ora:p:xWCTags LIKE 'menu%'

Note that UCM relies on the concept of a “display” name and an “internal” name for each metadata field. For example, in this CMIS query xWCtags is the internal name for the metadata field while Tags is the display name for the same field. When you build a CMIS query, you need to use the UCM internal name for the field.

Tip:

The CMIS query used in this example fetches all the documents based on the metadata field Tags. For the content query to work properly, you must enter the metadata next to the Tags field in the Oracle WebCenter Content Administration Console for Content Server. In this example, the Tags field is set to a value specified as menu.

Keep in mind that the Tags field described here is strictly one of the metadata fields in Oracle WebCenter Content repository, and not related to any other Oracle WebCenter Tags service or tagging capability.

For more information on how to view content metadata -- in particular, the Tags field -- see the section “Viewing Content Information” in the Chapter “Working with Files” in Oracle Fusion Middleware User's Guide for Content Server.

For more information on how to update content metadata, see the section “Content Item Metadata” in the Chapter “Working with Files” in Oracle Fusion Middleware User's Guide for Content Server.

The following steps will enable you to set the correct values on the Tags field.

Log into the UCM instance with Administrator privileges enabled, as shown in Figure 6-34.

Figure 6-34 Login With Administrator Privileges

Navigate to the Menu folder in the Contribution Folders directory in the UCM repository, as shown in Figure 6-35.

Figure 6-35 The Menu Folder For Oracle Content Server in UCM

Click the Info button under the Actions menu item for the fastfood.htmlfile, shown in Figure 6-36. This action takes you to the Content Information page in Oracle Content Server (Figure 6-37).

Figure 6-36 Clicking The Info Button for the fastfood.html File

On the Content Information page (Figure 6-37), choose the Content Actions menu, and click the Update menu item. In so doing, you will land on the Info Update Form for the fastfood.html page (Figure 6-38).

Figure 6-37 Content Actions Menu With Click On Update Selected

In the Info Update Form, now set a value defined as menu in the Tags field, as shown in Figure 6-38.

Figure 6-38 Setting the Value menu in the Tags Field

Click the Submit Update button at the bottom of the form (Figure 6-39). In so doing, you will set the metadata for the content query.

Figure 6-39 Clicking Submit Update to Set the Metadata For The Content Query

Now save your changes, return to your portal application and refresh the home page in your web browser. The Fast Food link appears under the Menu node in the navigation bar (Figure 6-40).

Figure 6-40 The Fast Food Link Displayed Under the Menu Node

Repeat steps 14-18 for other HTML files, like salad.html and pasta.html, which reside in the Menu folder in your repository. Once you set the metadata on the Tags field for all the HTML files, the results of each CMIS query will appear under the Menu node when you refresh your web browser.

In this lesson, you've learned the importance of working with and managing your document contents in the Oracle WebCenter Content repository. In so doing, you can optimize your development efforts, enable Iterative Development and add new content to your navigation model. You can also take advantage of adding content queries to your navigation model, which enable you to query and fetch documents based on specific metadata tags that are used in Oracle WebCenter Content.

In the next lesson, you will move ahead to extend your portal development skills by learning how to customize portal pages and add them to your page hierarchy, setting permissions on user access. In addition, you'll learn how you can easily edit HTML content in-context at runtime in your portal application.

7 Customizing Pages for Permissions and Runtime Editing

In this lesson, as a developer at design time, you will customize the content on a specific page in the page hierarchy of your WebCenter Portal: Framework application, adding that page and its content to the hierarchy so you can set permissions for user access and editing, or modification of document content.

You will also drag and drop documents in HTML format from your UCM repository on to a consignable panel component in a new.jspx page and render that page as a Content Presenter task flow. The Content Presenter task flow lets you add content to your portal application, in this case, using the Documents service to display that document content stored in your content repository. The Documents service provides a user-friendly interface to manage, display, and search documents at runtime.

In the last step, you will enable authenticated users to edit the content of those HTML pages in-context at runtime. A pop-up window will open an editing session for adding or modifying content stored in your UCM repository.

At the end of this lesson, the home page you created in the previous lesson will look like Figure 7-1 when in-context editing of HTML content is enabled on the Contact Us page at runtime.

Figure 7-1 The Portal Application Contact Us Page Enabled for Editing at Runtime

Introduction

This lesson contains the following steps:

Step 1: Customize Pages and Set Permissions

Step 2: Edit Documents at Runtime

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

Step 1: Customize Pages and Set Permissions

Building on the steps of the previous lesson (Chapter 6), we can now move ahead to customize specific pages in our WebCenter Portal application, thus setting page permissions and user access.

To accomplish this task, we first need to create a new.jspx page, in this case, contacts.jspx, and then add that page to the Page Hierarchy. By adding the page to the hierarchy, we can set page permissions, and in so doing, we can specify user access to those pages for security purposes.

To customize pages and set page permissions in our portal application:

In JDeveloper, navigate to the pages folder in Application Navigator.

Right-click New, expand Web Tier, select JSF and select the JSF Page, which launches the Create JSF Page dialog, as shown in Figure 7-2.

Enter contacts.jspx in the File Name field and ensure that the checkbox Create as XML Document (*.jspx) is checked.

Figure 7-2 The Create JSF Page Dialog with the Globe Page Template Selected

Select Globe Page Template from the list of available templates as the Page Template.

Click OK.

Select contacts.jspx and open it in Source view (Figure 7-3).

Figure 7-3 The contacts.jspx File Shown in Source View

Now in Application Navigator, select the home.jspx file, which resides in the pages folder, open it in Source view and select the code line, which specifies the value attribute, shown in Figure 7-4. Note that this is needed so the page picks up the template changes that occur at runtime.

Figure 7-4 The value Attribute Selected in the home.jspx File in Source View

Now copy the code line highlighted in Figure 7-4, which displays the value attribute that specifies the page template bindings, and paste this code line into the contacts.jspx file where the value attribute is located, as shown in Figure 7-5.

Figure 7-5 The value Attribute Pasted into the contacts.jspx File

Select the home.jspx file, right-click the file, and choose the Go to Page Definition menu item, shown in Figure 7-6. This opens the homePageDef.xml file.

Figure 7-6 Specifying the Page Definition in the home.jspx File in Source View

In the homePageDef.xml file in Source view, select and copy the code snippet specifying the viewID attribute for the page template and the id for the page template binding, as shown in Figure 7-7 and in Example 7-1.

Figure 7-7 The homePageDef.xml File in Source View with the viewID Attribute Selected

Example 7-1 Code Snippet to Copy into contactsPageDef.xml

<page viewID="${preferenceBean.defaultPageTemplate}"
       id="pageTemplateBinding" Refresh="ifNeeded"/>

Select the contacts.jspx file, right-click the file, and choose the Go to Page Definition menu item, as shown in Figure 7-6, when you opened the homePageDef.xml file.

Now open the contactsPageDef.xml file in Source view and paste the code snippet you copied from the previous step, replacing the code lines shown in Figure 7-8. These code lines specify the path and id attributes for the contacts page definition file.

Figure 7-8 The path and id Attributes Selected in contactsPageDef.xml

Now choose the contacts.jspx file and open it in Source view. Then in JDeveloper, navigate to the Component Palette, which resides in the right-hand column of the application, and select Composer.

In Composer, navigate down the items in the list to the Page Customizable component and drag and drop that component on to the contacts.jspx file in the space between the code lines <f:facet name="content"> and </f:facet>, as shown in Figure 7-9.

Tip:

The Page Customizable component denotes the customizable part of a page and appears in the Composer toolbar in Edit mode at runtime. Components enclosed within a Page Customizable component can be customized and edited.

Figure 7-9 The Code Snippet for Panel Customizable Added to contacts.jspx

Now expand the UCM connection in JDeveloper, as shown in Figure 7-10, and drag and drop the contactus.html file on to the panelCustomizable component.

Figure 7-10 The contactus.html File Selected in the Contact Us Folder

When the pop-up menu appears, choose the Create menu item and navigate to the Documents - Content Presenter task flow sub menu item shown in Figure 7-11 to render the HTML content.

Tip:

The Content Presenter task flow lets you conveniently add content to your portal application. You can select a single item of content, multiple content items, or query for content, and then select a template to render that content on a page in your application. In so doing, Content Presenter enables you to precisely customize the selection and presentation of your content in your WebCenter Portal application.

Note that the Content Presenter task flow is available only when the connected content repository is Oracle Content Server and your WebCenter administrator has completed the prerequisite configuration. For more information about managing content repositories and UCM, see Oracle Fusion Middleware Administrator's Guide for Oracle WebCenter Portal

The Documents service enables you to display content from a content server or file system directly within your application. End users can then view and manage documents, as well as other types of content stored in content repositories.

Figure 7-11 The Documents - Content Presenter Task Flow Selected for Creation

The Edit Task Flow Binding dialog appears, as shown in Figure 7-12. Note that in the Input Parameters section, there is a UCM value for the datasource field.

Figure 7-12 The Edit Task Flow Binding Dialog with a Data Source Value as a UCM Document Name

Click OK.

Return to the portal application and navigate to the pagehierarchy folder. Now open the pages.xml file, shown in Figure 7-13.

Figure 7-13 The Page Hierarchy Root Node For the page.xml File

When the pages.xml Page Hierarchy pane opens, drag and drop the contacts.jspx file into the Root node (Figure 7-14).

Figure 7-14 The pages.xml Page Hierarchy with contacts Selected in the Root Node

Select contacts in the Root node and in the Page Hierarchy pane, uncheck the Visible checkbox, which is shown as checked in Figure 7-14.

Now navigate to the default-navigation-model.xml file in the navigations folder and open it in Design view, as shown in Figure 7-15.

Figure 7-15 The default-navigation-model.xml File Pane in Design View

Navigate to the pages folder, select the contacts.jspx file and drag it to the default-navigation-model node (Figure 7-16),

Figure 7-16 The Contacts Link Added in the Navigation Model

Choose the Page Link item and select the Add new node icon to add a link to the navigation model.

The navigation dialog opens, as shown in Figure 7-17, with contacts entered in the Id field. In the URL Attributes pane, enter the Display Value as Contacts.

Figure 7-17 The Navigation Pane with the Id for Contacts and the Display Value Specified as Contacts

Return to Application Navigator, select the Portal project and right-click Run to launch the application in a web browser.

The application opens in a web browser with Contact Us as part of the navigation model, as shown in Figure 7-18. The page will be populated with content using Composer, shown in Figure 7-19.

For more information about creating and adding Content Presenter task flows and display templates, see Chapter 28, in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

Figure 7-18 The MyPortalApplication shown in a Web Browser with the Contact Us Link Added to Navigation

Step 2: Edit Documents at Runtime

Now that we have customized our Contacts Page in our application, dragging and dropping the contacts.html document from our UCM repository on to the panelCustomizable component in contacts.jspx and rendering it as a Content Presenter task flow, we can move on to the task of enabling in-context HTML editing capability to our documents.

In-context document editing offers authenticated users easier access and control over document content. This feature is only available at runtime, however.

To edit documents at runtime:

In Application Navigator, select the Portal project and right-click Run to launch the application in a web browser.

Once the application opens in a web browser with Contact Us as part of the navigation model, click the Contact Us link in the banner to the right of the Menu link. The Contact Us page displays the page on which you can enter document content, as shown in Figure 7-19.

Figure 7-19 The Contact Us Page For Users to Enter Document Content

Log in to the Home page as contentadmin with the password you entered when installing the product (Figure 7-20).

Figure 7-20 Logging into the Home Web Page

Once you have successfully logged in, click the content of the page and press CTRL + SHIFT + C on your keyboard. The Home page in the web browser appears at the center with a hash-marked outline and an edit icon below the navigation bar in the upper right corner, indicating that the outlined portion of the Home page can be edited for document content, as shown in Figure 7-21.

Tip:

By entering the CTRL + SHIFT + C keys, you will enable the content contributions mode, which allows you to edit in-context HTML content stored in the UCM content repository. You won't need to edit the page using Composer.

Note that editing or customizing pages requires using a different set of tools and procedures, which enable you to add taskflows and portlets, for example, or to otherwise modify the page itself, and not just the document content on the page at runtime.

Figure 7-21 The MyPortalApplication in a Web Browser with Content Editing Enabled

Navigate in the outlined portion of the browser page to the edit icon and click the icon to enable editing, as shown in Figure 7-22.

Figure 7-22 The Edit Icon Selected to Enable Editing of Home Page Document Content

An Edit window pops up at the center of the page where authenticated users can add content to the home.html page and edit that content using a rich text editor, as shown in Figure 7-23. Note that the document content is stored in the UCM content repository for easy access and retrieval.

Figure 7-23 The Edit Window for In-context Editing of HTML Content

Users can then save their edits by clicking the Save button in the upper left corner of the window (Figure 7-24).

Figure 7-24 The Edit-Save Window for Saving of In-context HTML Document Content

In this lesson, you have learned how to customize specific pages in the page hierarchy of your WebCenter Portal: Framework application and how to add those pages to the hierarchy so you can set permissions for user access. You have also learned how easy it is to enable runtime HTML editing of your document content stored in the UCM repository by adding new content to the page and making it editable at runtime.

8 Conclusion

Congratulations! You have created a WebCenter Portal: Framework application and learned about the fundamentals of Oracle WebCenter Portal: Framework.

Summary

In this Tutorial, you learned how to perform a few quick and easy steps to create a WebCenter Portal: Framework application. You also learned how to modify and customize your application to meet the specific needs of end users coming to your web portal.

Specifically, you learned how to:

Create a connection to a content repository (UCM), which allowed you to access the content you needed for building your portal application. As you move on and develop more complex WebCenter Portal: Framework applications, you may want to connect to other content repositories for various content, and so on. You can use the same methodology to create a connection to your other repositories.

Create a simple WebCenter Portal: Framework application, which allowed you to check out how to use the built-in WebCenter application template to create a basic JSF application. You logged as Administrator in the Administration Console and changed the default page template from Globe to swooshy.

Create and register a new page template, which enabled you to create a page definition for the template. You were then able to extract the contents of a setup file into your portal application. The file included images, templates and skins. You registered the new template and new skin as application resources in Oracle JDeveloper.

Change the look and feel of the application using a new skin. At design time, you changed the default settings for both the template and the skin in the adf-config.xml file, and changed the entry preferences.

Add pages to the page hierarchy in the default navigation model, and within that model, create links to your documents from UCM.

Enable the process of Iterative Development in your portal application, thus enabling you to make changes to your application while it is still running on the Integrated WebLogic Server and then immediately see the effects of those changes when you refresh the pages in your web browser.

Add new content queries in the default navigation model, with each query fetching documents based on metadata field tags in UCM.

Customize pages and site templates in your portal and set permissions for user access.

Edit HTML documents in-context at runtime, using a provided rich text editor.

You should now have a basic working knowledge of the fundamentals of Oracle WebCenter Portal Framework.

Moving On

You can learn more about designing your own WebCenter Portal: Framework applications, including using Composer, WebCenter Services, and portlets, in the Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

To learn more about what you can do at runtime, including using Composer to customize pages, and how the various components behave and can be configured at runtime, see the Oracle Fusion Middleware User's Guide for Oracle WebCenter Portal: Spaces.

You can find all Oracle WebCenter Portal documentation on the WebCenter Documentation page on the Oracle Technology Network, at http://www.oracle.com/technology/products/webcenter/documentation.html.

You can learn more about other features of Oracle WebCenter Portal, and view demonstrations and see examples of WebCenter Portal: Framework applications, portlets, and services in action on the Oracle WebCenter Portal home page on the Oracle Technology Network at:

http://www.oracle.com/technology/products/webcenter/index.html.

Index

A  C  D  E  G  H  I  L  M  O  P  R  S  T  U  W 

A

Administration Console

selecting Resources, 4.4

selecting Resources tab, 5.3

values entered, 5.3

working with resources, services, security, and portal configurations at runtime, 5.2

Administrator privileges, 3.2

Application Navigator

Application Resources in portal project, 5.2

applications

creating WebCenter applications, 3.2

C

changing preference entries, 5.2

content item

added to navigation model, 6.4

adding to default navigation model, 6

Content Presenter

task flow, 7, 7.2

Content Query

adding, 6

content query

adding to portal application, 6.6

content repository

access, 2.8

custom WebCenter applications

creating, 3.2

Customize

pages, 7.2

D

default page template

changing at runtime, 5.3

default-navigation-model

about, 6.4

document editing at runtime, 7.3

documents

drag and drop in HTML format, 7

edit at runtime, 7.3

Documents - Content Presenter service

creating task flow bindings, 6

Documents service

about, 7, 7.2

E

edit

adf-config.xml file to change default preferences, 5.2

G

Globe Page Template, 7.2

Globe page template, 3.2

H

HTML editing

in-context, 7.3

I

Integrated WebLogic Server (WLS)

installation, start and stop, 2.6

Iterative Development

advantages, 6.5

effects, 6

L

look and feel

defining, 4.2

how to change at design time, 5

M

metadata field tags

in UCM, 6.6

modify and edit an existing page template, 3.3

O

Oracle Composer

Component Palette, 7.2

Oracle JDeveloper

installing, 2.2

verifying correct release, 2.5

Oracle Technology Network, Preface

Oracle WebCenter

about, 1.1

OTN

see Oracle Technology Network, Preface

P

Page Customizable component, 7.2

page definition

associating, 4.2

Page Hierarchy, 7.2

Page template

creating, 4.2

referenced, 4.2

swooshy, 4

page template

artifacts and page features, 3.3

seeded, 3.3

PageTemplate

Globe, 5.3

Swooshy, 5.3

pageTemplate

swooshy, 3.3

panelCustomizable component, 7.3

permissions, 7.2

Portal Application template, 3.2

Portal resource

creating, 4.4

preferences

change default, 5.2

R

Resource Manager, 5.2

using at runtime, 5.3

Resource Manger

necessary portal artifacts, 3

S

sample files

downloading, 2.7

Sample Tutorial Files

download, 2.7

set permissions

user access and editing, 7

Site template

customizing, 4.4

skin

custom, 5.2

global style sheet, 5

skins

defining the appearance of your application, 5

T

template

default, 5

Tutorial setup files

extracting, 4.3

tutorial skin

provided in tutorial setup zip file, 5

U

UCM, 2.8

connecting to a content repository, 6.2

metadata field tags, 6

UCM repository, 7, 7.3

users

control over document content, 7.3

W

web address for zip files, 2.7

WebCenter applications

creating, 3.2

WebCenter extension

steps to install correct components, 2.5

verifying components, 2.5

WebCenter Framework

about, 1.1

The figure shows the portal application with menu item links in a web browser.

The figure shows the path and id attributes selected in the contactsPageDef.xml file.

The figure shows the Tutorial Skin checked as available as a skin resource in the portal application.

The figure shows the Create Content Repository dialog with data entered into specified fields.

The figure shows the home.html file in the UCM Contents folder.

The figure shows the contacts.jspx file in Source view with panelCustomizable property selected.

The figure shows the contacts link added in the navigation model.

The figure shows the adf-config.xml file under the Application Resources part of the Application Navigator. Open the Descriptors folder, and then open the ADF META-INF folder to locate this file.

This figure shows the pageTempate_globe.jspx template in Design View in JDeveloper. The figure shows the location of each of the page template elements described below.

The figure shows how to create a new page definition for the myTemplate.jspx file.

The figure shows the home.jspx file when opened in Source view.

The figure shows Contacts in the Root node of the Page Hierarchy.

The figure shows the application resource connection to UCM with the menu.html file selected in the Menu folder that resides in the WebCenterTutorial directory.

The figure shows how to set the metadata by clicking the Submit Update button.

The figure shows the Security Realms item in UCM

The figure shows the window for saving document edits in the UCM repository.

The tt_pages_portalwebassets.gif shows the MyPortalApplication directory in collapsed view, with the PortalWebAssets folder highlighted.

The figure shows content editing enabled in a web browser on Contacts page.

The figure shows the Content Information page and the Content Actions menu.

The figure shows the Create JSF Page dialog with the File Name specified as contacts.jspx and the Globe Page Template selected from the drop down menu.

The figure shows the Content Query pane with UCM entered as the Repository field.

The figure shows the contacts.jspx file opened in Source view.

The figure shows the Java EE Application dialog with mytutorial entered in the Java EE Web Context Root field.

The figure shows the default portal skin changed to Tutorial Skin.

The figure shows the Documents - Content Presenter item selected.

The figure shows the new Home page in a web browser with an area at the center of the page for content.

The figure shows the Contacts page in a web browser where users can enter document content.

The figure shows My Site Template in the Page Templates directory.

The figure shows the Configure WebCenter Settings dialog.

The figure shows the Confirm Create New Page Definition dialog.

The figure shows the Project Properties menu item selected.

The figure shows the home.jspx file in Source view.

The figure shows the Application Resources dialog with the about.html file selected in the WebTutorial folder that resides in the UCM repository.

The figure shows the contacts.jspx file in Source view with the pasted value attribute.

The figure shows the newly create page definition template in the pagetemplates directory.

The figure shows the pages.xml file opened and showing its page hierarchy.

The figure shows the edit window for in-context editing of HTML document content.

The figure shows the About Us link added to the Home navigation page in a web browser.

The figure shows the default-navigation-model.xml file opened in Design view.

The figure shows the JSF Page Template selected in the New Gallery dialog.

The figure shows the pageTempate_swooshy.jspx template in Design View in JDeveloper.

The figure shows the Create JSF Page Template dialog with the file name and Page Template Name fields specified.

The figure shows the changed desc attribute.

The figure shows the folders containing graphics, skins and templates in the TutorialSetup folder on the local hard drive.

The figure shows the Default Page Template set to My Site Template.

The figure shows the newly created user contentadmin in the Users table list.

The figure shows the menu folder for Oracle Content Server in UCM.

The figure shows the Create Portal Resource dialog with the Display Name specified.

The figure shows the contentadmin created as a user in UCM.

The figure shows the Name Your Project dialog.

The figure shows how to set the value 'menu' to the Tags field.

The figure shows the Content Query item added to the default navigation model in the Navigation pane.

The figure shows the downloaded zip file for the Tutorial.

The figure shows the code snippet for the home.jspx file.

The figure shows the User and Groups selected in the Settings for myrealm pane in UCM.

The figure shows the home portal page with User Name and Password fields displayed for log in.

The Home portal page in a web browser with administrator privileges enabled.

The figure shows the pageTemplate_globe.jspx file.

The figure shows the Administrators chosen in the Parent Groups and added to Groups.

The figure shows the Terminate menu, which indicates that the Integrated WebLogic Server is running and that there is an application called MyPortalApplication deployed to the server.

The figure shows the newly extracted and copied files myTemplate.jspx and tutorial-skin.css in their respective folders in the Portal project.

The figure shows the MyPortalApplication Overview window with Java Files selected.

The figure shows the Oracle WebCenter architecture, as explained in the surrounding text. At the base is the Application Development Framework. Above that are the WebCenter Portal Framework and WebCenter Services. Above that are the Composite Applications, Portals, and WebCenter Spaces.

The figure shows the default navigation model xml file with changed values for Id and URL Attributes.

The figure shows the viewId attribute selected in the homePageDef.xml file.

The file tt_pages_change_default pagetemp.gif shows how to change the default page template from Globe to Swooshy.

The figure shows the Oracle WebCenter Framework component extensions in JDeveloper.

The figure shows the Connections directory with UCM connected established.

The figure shows the skins folder expanded in the Tutorial Setup directory.

The figure shows the portal skin value property changed.

The figure shows the Configure Project Java Settings dialog.

The figure shows the new user named contentadmin as created in the Create New User pane.

The figure shows the pencil icon selected on the Home page to enable editing of document content.

The figure shows the Navigation pane with a new content item added to the navigation model.

The figure shows myrealm selected in the Security Realms pane of UCM.

The figure shows the login in the Administration Console of WebLogic Server.

The figure shows the about box in Oracle JDeveloper with the latest release version.

The figure shows the Go to Page Definition menu item selected.

The figure shows the Documents - Content Presenter item selected.

The figure shows the New Application dialog.

The file tt_customize_nav_contacts.gif shows the navigation pane with Link ID as contacts and the URL Attributes Display Value as Contacts.

The figure shows the Create WebCenter Portal Framework dialog with the Project Name field entered as PortalWebAssets.

The figure shows the images folder expanded in the Tutorial Setup directory.

The file tt_createconnect_homefolder.gif shows the home.html file in the WebCenterTutorial directory.

The file tt_pages_newprojnav.gif shows the generated project files in Application Navigator.

The figure shows the Configure Default Domain dialog where you must enter your admininistrator ID and password.

The figure shows the UCM Folder expanded with sub folders for your portal application.

The figure shows the Edit Task Flow Binding dialog.

The figure shows the user logging into the Home web page.

The figure shows the login page for Oracle Content Server with Administrator privileges.

The figure shows the expanded templates folder in the Tutorial Setup directory.

The figure shows the application name filled in.

The figure shows the entered text data in the Query field.

The file tt_pages_admin_resourcetab.gif shows the Administration Console with the Resources tab selected and the page template item selected.

The figure shows the home portal page in a web browser.

The figure shows Groups selected in the Settings for contentadmin pane.

The figure shows the Update Portal Resource with the Skin Family attribute specified as mycustomskin.

The figure shows the Navigation pane with a Content Item selected to be added to the navigation model.

The figure shows the New user button selected in the Users and Groups pane.

The figure shows the New Application button in Application Navigator.

The figure shows the results of following the previous four steps.

The file tt_pages_admin_configpagetemplates.gif shows the specified default page template as Globe.

The figure shows the Portal hierarchy with extracted setup file folders refreshed.

The figure shows the Edit Task Flow Binding dialog.

The file tt_pages_admin_pagetemplates.gif shows the page templates and their availability in the portal application.

The figure shows the jazn-data.xml file in the META-INF folder.

The figure shows the Create Portal Resource menu item selected for the myTemplate.jspx file.

The file tt_personalize_adf_config.gif shows adf-config.xml file window specifying component configuration.

The figure shows the Content Query pane with menucontent as the Id and Menu Content as the Display Value for the Content Query Attributes.

The figure shows the new Home portal page in a web browser with the new tutorial skin applied.

The figure shows a partial view of the WebCenter Portal application you will create in this Tutorial.

The figure shows the Info button clicked under the Actions menu for fastfood.html.

The figure shows Menu link added to the navigation in the web browser.

The figure shows the expanded Contact Us folder with the contactus.html file selected.

The figure shows the Navigation pane with Link Id and URL Attributes entries added into their respective fields.

Oracle Legal Notices

Copyright Notice

Copyright © 1994-2010, Oracle and/or its affiliates. All rights reserved.

License Restrictions Warranty/Consequential Damages Disclaimer

This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited.

Warranty Disclaimer

The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing.

Restricted Rights Notice

If this software or related documentation is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, the following notice is applicable:

U.S. GOVERNMENT RIGHTS Programs, software, databases, and related documentation and technical data delivered to U.S. Government customers are "commercial computer software" or "commercial technical data" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, the use, duplication, disclosure, modification, and adaptation shall be subject to the restrictions and license terms set forth in the applicable Government contract, and, to the extent applicable by the terms of the Government contract, the additional rights set forth in FAR 52.227-19, Commercial Computer Software License (December 2007). Oracle USA, Inc., 500 Oracle Parkway, Redwood City, CA 94065.

Hazardous Applications Notice

This software is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications which may create a risk of personal injury. If you use this software in dangerous applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure the safe use of this software. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software in dangerous applications.

Trademark Notice

Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners.

Third-Party Content, Products, and Services Disclaimer

This software and documentation may provide access to or information on content, products, and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content, products, and services. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services.