Skip Headers
Oracle® Fusion Middleware Developer's Guide for Oracle WebCenter Portal
11g Release 1 (11.1.1.6.0)

Part Number E10148-18
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Feedback page
Contact Us

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

8 Introducing the AviTrust Portal Framework Sample Application

As a companion to this guide, a sample enterprise application was developed using Oracle Fusion Middleware 11g Release 1 (11.1.1.5), which includes Oracle WebCenter Portal: Framework and Oracle WebCenter Portal: Spaces. The application, called the AviTrust Portal Demonstration for WebCenter Portal, is referenced in various chapters throughout this guide to illustrate points and provide typical use cases for Oracle developers. It is intended to serve as a powerful learning tool for understanding the new portal features and services available in the latest release of WebCenter Portal.

In this chapter, you'll learn about these features and services, as well as take a quick, high-level tour of the components that were built using WebCenter Portal: Framework.

This chapter includes the following sections:

8.1 About the AviTrust Portal Framework Application for WebCenter

The AviTrust Portal Demo for WebCenter is a robust, rich-media portal application built for the enterprise, which demonstrates some of the advanced features available in Oracle Fusion Middleware, as well as WebCenter Portal: Framework. The application is based on a hypothetical online banking and financial services website -- the AviTrust Listening Bank.

Using this public-facing, extranet portal (shown in Figure 8-2), customers can browse and navigate various banking services offered by the AviTrust Bank, such as opening checking and savings accounts or applying for loans, through the bank website. Customers can also take advantage of a wide range of banking and financial services tailored for both small businesses and larger commercial enterprises, like setting up custom online accounts for access to the portal.

In this portal application, WebCenter Portal and WebCenter Portal: Framework are used to provide a host of Web 2.0 capabilities that include content-driven navigation, personalization scenarios, and integration of new WebCenter Portal: Services, including polls, blogs, RSS, discussion forums, tags, links, social networking and activity streams. These services are directly embedded into the AviTrust sample portal application.

By design, the AviTrust banking portal application was created (hypothetically) to reduce transaction costs and offer a wide range of convenient banking services to its online customers.

For example, the AviTrust banking portal allows authenticated customers to:

8.2 Downloading the AviTrust Portal Framework Application

To view and run the demo application, you need to install Oracle JDeveloper 11g (11.1.1.4) and the Oracle WebCenter Portal extension (11.1.1), as described in Section 3.2, "Installing WebCenter Portal's Extension for Oracle JDeveloper." You then need to download the application for this demonstration. Once the application is installed and running, you can view the application at design time in Oracle JDeveloper and at runtime by logging in as a user or administrator.

The AviTrust Portal Demo source distribution is available via the WebCenter Oracle Technology Network (OTN) page for Demos and Samples.

Sample files to import into your WebCenter Portal application, which include both project and archive files, available for download as a ZIP (or tgz) archive, will be made available here.

http://www.oracle.com/technetwork/middleware/webcenter/portal/documentation/avitrust-522536.html

The ZIP archive also includes instructions on how to load and install the project content.

Sample code for developers and administrators is available at http://www.oracle.com/technetwork/indexes/samplecode/index.html

Release downloads for Oracle WebCenter Portal Developers are available at

http://www.oracle.com/technetwork/middleware/webcenter/portal/downloads/index.html

8.3 Browsing Portal Framework Features at Runtime

Once you have downloaded and installed the AviTrust sample portal application, you can run the application and navigate to the components that were built using WebCenter Portal. This section will take you on a visual tour of the application and show you how the components were built using WebCenter: Framework.

The section focuses on how the various Oracle WebCenter Portal components display at runtime. You can examine the application at design time in Oracle JDeveloper. For more information on how you can add a service or feature to your application, refer to the appropriate chapter in this guide.

In broad outline, some of the new features illustrated by the AviTrust sample application in this release of WebCenter Portal include:

8.3.1 Exploring the AviTrust Sample Portal Home Page

To understand how the components of the banking portal were constructed, you can begin by launching and deploying the application in JDeveloper and then taking a look at the AviTrust Sample Portal Home page, as displayed in a web browser. The Home page will serve to illustrate some of the powerful, new features available in WebCenter Portal.

To view these features:

  1. Open the AviTrust Sample Portal application in Oracle JDeveloper.

  2. In Application Navigator, select the Portal [webcenterpm1.us.oracle.com] project and right-click the Run icon, as shown in Figure 8-1.

    Figure 8-1 The AviTrust Sample Portal Application Launched in Oracle JDeveloper

    Description of Figure 8-1 follows
    Description of "Figure 8-1 The AviTrust Sample Portal Application Launched in Oracle JDeveloper"

    If the Integrated WebLogic Server is not running, this action starts the server and (re)deploys the application. By default, the file index.html (or another page that it redirects to) displays in the browser.

    The Home page of the sample portal application now appears in a web browser, as shown in Figure 8-2.

    Figure 8-2 The AviTrust Home Page Displayed in a Web Browser

    Description of Figure 8-2 follows
    Description of "Figure 8-2 The AviTrust Home Page Displayed in a Web Browser"

On the portal Home page, secure user login is provided for authenticated bank customers by two points of entry:

  • Either by clicking the Sign-In link in the upper right portion of the portal

  • Or by entering their User Name and Password in the designated fields in the left portion of the Home page (shown in Figure 8-3).

In addition, administrators can set up security for authenticated users and provide delegated administration, while users manage their account and banking transactions. For more information, see Chapter 69, "Securing Your WebCenter Portal: Framework Application."

Figure 8-3 Secure Customer Login to Accounts in the AviTrust Home Page

Description of Figure 8-3 follows
Description of "Figure 8-3 Secure Customer Login to Accounts in the AviTrust Home Page"

8.3.2 Navigating the Site Using Tabs

Tabbed navigation provides banking customers with the most flexible and intuitive way of exploring the site.

The navigation model, rendered as a fly out menu on the template header, is based on an HTML template and a Cascading Style Sheet (CSS) file created by the AviTrust graphics design team. With four tabs embedded in the navigational bar (shown in Figure 8-4), customers can easily browse and access other pages and levels of information and services available on the banking website.

Figure 8-4 The Navigation Bar on the Home Portal Page with Four Tabs

Description of Figure 8-4 follows
Description of "Figure 8-4 The Navigation Bar on the Home Portal Page with Four Tabs "

To navigate the site using tabs:

  1. Move your cursor over the Personal tab in the navigation bar at the top of the page. A group of banking services are displayed, with links that customers can then click to access pages specific to their personal banking needs in the portal, as shown in Figure 8-5.

    Note that as you move your cursor over this and the other tabs in the navigation bar (illustrated subsequently in Figure 8-6, Figure 8-7, and Figure 8-8), the AviTrust Portal Application uses a different site template. There is a notable switch from the horizontal top-level, tab-style navigation to a hybrid model. This model uses horizontal tabs on the top and vertical links for side navigation. The WebCenter navigation components here are designed to be flexible yet easy to manage for purposes of branding partner and sub sites.

    For information on how to create the navigation model for your portal, refer to Chapter 11, "Building a Navigation Model for Your Portal."

    Figure 8-5 The Personal Tab Selected in the Navigation Bar with Links to Other Pages and Services

    Description of Figure 8-5 follows
    Description of "Figure 8-5 The Personal Tab Selected in the Navigation Bar with Links to Other Pages and Services"

  2. Now moving your cursor over the Small Business tab in the navigation bar at the top of the page, you find another group of banking services displayed, this time with links that customers can click to access pages specific to the needs of small businesses in the portal, as shown in Figure 8-6.

    Figure 8-6 The Small Business Tab Selected in the Navigation Bar with Links to Other Pages and Services

    Description of Figure 8-6 follows
    Description of "Figure 8-6 The Small Business Tab Selected in the Navigation Bar with Links to Other Pages and Services"

  3. If you move your cursor over the Commercial tab in the navigation bar at the top of the page, your web browser will display another group of banking services, with links that commercial customers can click to access pages specific to commercial banking needs in the portal, as shown in Figure 8-7.

    Figure 8-7 The Commercial Tab Selected in the Navigation Bar with Links to Other Pages and Services

    Description of Figure 8-7 follows
    Description of "Figure 8-7 The Commercial Tab Selected in the Navigation Bar with Links to Other Pages and Services"

  4. By moving your cursor over the Customer Support tab in the navigation bar at the top of the page, your web browser will display yet another group of banking services, with links that users can click to access customer support pages in the portal, as shown in Figure 8-8.

    Figure 8-8 The Customer Support Tab Selected with HTML Contents Displayed

    Description of Figure 8-8 follows
    Description of "Figure 8-8 The Customer Support Tab Selected with HTML Contents Displayed"

    In each case, customers browsing and accessing the AviTrust portal will find ease of access in navigating to pages for information that are relevant to their various banking needs.

  5. Click the Americas link on the Contact Us page, as shown in Figure 8-9. Note that the pages under Contact Us, like Americas, APAC and EMEA, are based on a different template, which provides customer navigational links on the left side of the page.

    The bread crumb on the top of the page lets you identify your current location within the site, and also provides users with easy access back to the top-level pages.

    Figure 8-9 The America's Support Page Following the Bread Crumb from the Contact Us Link

    Description of Figure 8-9 follows
    Description of "Figure 8-9 The America's Support Page Following the Bread Crumb from the Contact Us Link"

8.4 Accessing and Using the Resource Manager

The AviTrust Portal application demonstrates how users or administrators with appropriate privileges can easily manage portal resources at runtime.

At runtime, the Resource Manager provides access to administration tools for the resources available to the portal. For example, using the Resource Manager, the site administrator can perform the following tasks:

For more information, see Chapter 13, "Adding Resources to Your Portal."

To access and use the Resource Manager at runtime:

  1. Click the Sign-In link in the upper right corner of the Home page. A page appears with fields to enter User Name and Password, shown in Figure 8-10.

    Figure 8-10 The Login Page Displayed in a Web Browser

    Description of Figure 8-10 follows
    Description of "Figure 8-10 The Login Page Displayed in a Web Browser"

  2. Log in with the following credentials:

    Username: weblogic

    Password: welcome1

    The Administration Console now appears in the web browser. As an administrator, you can make changes at runtime and manage portal resources accordingly.

  3. In the Administration Console, click the Resources tab and select the Pages node in the Structure menu, shown in Figure 8-11. You can now create sub pages, specify the order and display of those pages, as well as perform editing tasks on those pages. <

    For more information, see Section 9.11.2, "Runtime WebCenter Portal Administration Console."

    Figure 8-11 The Administration Console with Pages Selected

    Description of Figure 8-11 follows
    Description of "Figure 8-11 The Administration Console with Pages Selected"

  4. In the Administration Console, click the Resources tab and select the Skins node in the Look and Layout menu, shown in Figure 8-12. You can now edit, change or modify the skins used in the portal.

    Figure 8-12 The AviTrust Skin Selected in the Look and Layout Menu

    Description of Figure 8-12 follows
    Description of "Figure 8-12 The AviTrust Skin Selected in the Look and Layout Menu"

    For more information, see Chapter 15, "Creating and Managing Skins."

  5. In the Administration Console, click the Resources tab and select the Content Presenter node in the Look and Layout menu, shown in Figure 8-13. You can now change the look and layout of your portal, using the Content Presenter to upload or edit item, folder or labels views.

    Figure 8-13 The Content Presenter Node Selected in the Look and Layout Menu

    Description of Figure 8-13 follows
    Description of "Figure 8-13 The Content Presenter Node Selected in the Look and Layout Menu"

    For more information, see Chapter 29, "Creating Content Presenter Display Templates."

  6. In the Administration Console, click the Services tab and select the Content node in the Services & Portlet Producers menu, shown in Figure 8-14.

    Figure 8-14 The Content Node Selected in the Services & Portlet Producers Menu

    Description of Figure 8-14 follows
    Description of "Figure 8-14 The Content Node Selected in the Services & Portlet Producers Menu"

    The Services tab with Contribution folder selected enables you to access content stored in Oracle WebCenter Content on Oracle Server.

  7. In the Administration Console, click the Security tab and select the Administrator node in the Role Name menu, shown in Figure 8-15. In so doing, you can set security access and privileges for the portal Administrator.

    Figure 8-15 The Security Tab Selected in the Administrator Node

    Description of Figure 8-15 follows
    Description of "Figure 8-15 The Security Tab Selected in the Administrator Node"

  8. In the Administration Console, click the Configuration tab and select the Default Page Template node in the Preferences menu, shown in Figure 8-16. In so doing, you can change the default page template to another template of your choice.

    Figure 8-16 The Configuration Tab Selected in the Preferences Menu

    Description of Figure 8-16 follows
    Description of "Figure 8-16 The Configuration Tab Selected in the Preferences Menu"

8.5 In-Context Editing of Web Content at Runtime

All portals need to enable content authors to make changes quickly and easily at runtime. Using WebCenter Portal's direct integration with Oracle Enterprise Content Management (ECM), authors can create and edit HTML documents with a minimum of effort.

For example, you can retrieve a template entry for a press release and then ensure that your new press release follows your corporate standard, thus easily evolving the site at runtime and still professionally managing the source content for your entire site.

To accomplish this, you log in to the AviTrust Portal as a content author who has privileges to edit content in a web browser, following these steps:

  1. Log in with the following credentials:

    Username: contentadmin

    Password: welcome1

  2. Click the Customer Support tab.

  3. Navigate to the center of the portal and press CTRL+SHIFT+C on your keyboard.

    This takes you into content contribution mode for runtime editing. A dotted line appears around the content to be edited, shown in Figure 8-17.

    Figure 8-17 In-Context Editing Enabled on the AviTrust Customer Support Page

    Description of Figure 8-17 follows
    Description of "Figure 8-17 In-Context Editing Enabled on the AviTrust Customer Support Page"

  4. Navigate to the upper right corner in the dotted area of the page and click the pencil icon on the top right hand side corner, as shown in Figure 8-18. This launches Site Studio Contributor, which enables you to edit the selected web content.

    Figure 8-18 The Edit Pencil Selected to Enable Runtime Editing of Web Content

    Description of Figure 8-18 follows
    Description of "Figure 8-18 The Edit Pencil Selected to Enable Runtime Editing of Web Content"

  5. In Oracle Site Studio Contributor, click to select the banner image and then delete it, shown in Figure 8-19.

    Note that you can easily replace the images or edit text through the Site Studio Contributor.

    Figure 8-19 Oracle Site Studio Contributor With the Content to be Edited

    Description of Figure 8-19 follows
    Description of "Figure 8-19 Oracle Site Studio Contributor With the Content to be Edited "

  6. Click the image icon (shown in Figure 8-20) to add a new image from the ECM repository.

    Figure 8-20 The Add Image Icon Selected

    Description of Figure 8-20 follows
    Description of "Figure 8-20 The Add Image Icon Selected"

  7. Open the Search form and in the search field in the upper right portion of the form, enter the keyword customer in the ECM console, as shown in the Figure 8-21, and select the image customer_relationship_manager2.png. You will now be able to search any new images uploaded by the content management team and choose an image from the list.

    Figure 8-21 Searching for the Keyword Customer in the ECM Console

    Description of Figure 8-21 follows
    Description of "Figure 8-21 Searching for the Keyword Customer in the ECM Console"

  8. Once the image is replaced, click Save and Close in Oracle Site Studio Contributor, as shown in Figure 8-22.

    Figure 8-22 The Save and Close Button Selected in Oracle Site Studio Contributor

    Description of Figure 8-22 follows
    Description of "Figure 8-22 The Save and Close Button Selected in Oracle Site Studio Contributor"

  9. Click the refresh icon (shown in Figure 8-23).

    You can now refresh the content to see the new image.

    Figure 8-23 The Refresh Icon Selected

    Description of Figure 8-23 follows
    Description of "Figure 8-23 The Refresh Icon Selected"

  10. Press CTRL+SHIFT+C again on your keyboard.

    Since you have finished in-context editing of the content stored in ECM, you can come out of contribution mode. The newly edited banner image and content now appears on the AviTrust Customer Support page, as shown in Figure 8-24.

    Figure 8-24 The Newly Edited Banner Image and Content on the Customer Support Page

    Description of Figure 8-24 follows
    Description of "Figure 8-24 The Newly Edited Banner Image and Content on the Customer Support Page "

8.6 Exposing Social Computing Services

WebCenter Portal exposes a comprehensive set of social computing services. These include ready-to-use task flows and portlets, enabling developers to become more productive. These services are designed to work together, so that you can add polls, blogs, threaded discussions, wikis and other social computing services to your site with a minimum of effort at runtime.

The Polls service lets you create, edit, and take online polls on your application pages. Polls let you survey your audience (such as their opinions and their experience level), check whether they can recall important information, and gather feedback on the efficacy of presentations.For more information, see Chapter 37, "Integrating the Polls Service."

In one scenario, for example, let's suppose an executive at the AviTrust Listening bank wants to poll members of the Online Small Business Community. The executive asks the website administrator to create a new Poll at runtime on the Polls Administration tab. The website administrator creates the poll and puts it on the home page of the community. A customer then takes the poll and the bank executive views the results. In this case, the poll is implemented at runtime, without having to make changes in JDeveloper at design time.

In another scenario, a small business customer may want to host an event for other customers. In the AviTrust banking portal, the customer creates an Event wiki page, using a specific template to define when and where the event is supposed to take place. Another customer can edit the wiki page by adding a requested agenda item or other information about the event.

The Wiki service provides a means for customers to work simultaneously on documents and share ideas, either in the context of communities or as individuals. Customers can use wiki syntax directly, or edit wiki pages as you would any text in a word processor. All changes and versions are tracked within Oracle ECM. Thus, wiki content becomes a true enterprise content resource.

For more information, refer to Chapter 32, "Integrating Wikis and Blogs."

8.6.1 Adding a Discussion Forum

The AviTrust sample application illustrates how easily you can add a Discussion Forum, similar to adding other social computing services, like polls, blogs and wikis, to your portal at runtime.

For more information, refer to Section 25.3.2, "Examples: Customizing Task Flows for Custom Framework Applications."

To create, edit and manage the content for a Small Business Forum in the AviTrust banking portal:

  1. Log in with the following credentials:

    Username: contentadmin

    Password: welcome1

  2. Click the Small Business tab.

  3. Navigate to the Forums link (shown in Figure 8-25) and click it.

    Figure 8-25 The Forums Link in the Small Business Page

    Description of Figure 8-25 follows
    Description of "Figure 8-25 The Forums Link in the Small Business Page"

  4. Navigate from the Small Business link to the Business Community page and click Forums, as shown in Figure 8-26. A list of AviTrust discussion topics and frequently-asked forum questions now appears

    As the content administrator, you can create a topic for the forum, edit its contents and observe the customer activity, such as replies and exchanges, on the forum itself.

Figure 8-26 The Forum Page to Create a Topic and Edit the Content of a Forum Discussion

Description of Figure 8-26 follows
Description of "Figure 8-26 The Forum Page to Create a Topic and Edit the Content of a Forum Discussion"

8.7 WebCenter Framework Components in the AviTrust Portal Demo

Now that you've taken a brief tour of the AviTrust Portal Demo for WebCenter, you can check out these features in depth and use them yourself by referring to the relevant chapters in this guide.

Table 8-1 describes at a high level the Oracle WebCenter Portal features that are included in the AviTrust Portal Demo for WebCenter.

To learn more about the different features, refer to the relevant chapter.

Table 8-1 WebCenter Portal Framework Features in the AviTrust Portal Demo for WebCenter

Feature Location in the Demo Chapter

Portal Navigation

Users can navigate the portal using tabs in the navigation bar. Developers can add content-driven navigational links to the portal, like pages, portlets, task flows, files, external applications or web pages in the navigation model.

Chapter 14, "Visualizing Your Portal Navigation."

Content Integration

Authenticated users can edit in-context HTML documents stored on Oracle Content Server, as well as in-context editing of Site Studio definition files.

Chapter 11, "Building a Navigation Model for Your Portal.">

Personalization

Administrators can render content based on a personalization scenario, using the Content Presenter. Content can be based on a query result derived from the a scenario deployed in the Personalization engine.

Chapter 67, "Personalizing WebCenter Portal Applications."

Resource Management

Portal resources, like pages, catalogs, and skins, can be managed at runtime, using Administration capabilities.

Chapter 13, "Adding Resources to Your Portal.""

Integration of WebCenter Services

Administrators can take advantage of social computing services, like polls, blogs, forums and wikis.

Chapter 32, "Integrating Wikis and Blogs."