2 Introduction to the WebCenter Sample Application

As a companion to this guide, a sample enterprise application was developed using Oracle Fusion Middleware 11g Release 1 (11.1.1), including Oracle WebCenter Framework. This sample application, called the Fusion Order Demo for WebCenter, is used as an example throughout this guide to illustrate points and provide samples.

In this chapter, you will learn about the Fusion Order Demo for WebCenter, as well as take a quick tour of the components built using Oracle WebCenter Framework.

This chapter includes the following sections:

• Section 2.1, "About the Fusion Order Demo for WebCenter"

• Section 2.2, "Browsing the Oracle WebCenter Framework Components in the Fusion Order Demo for WebCenter at Runtime"

• Section 2.3, "Oracle WebCenter Framework Components in the Fusion Order Demo for WebCenter"

2.1 About the Fusion Order Demo for WebCenter

The Fusion Order Demo for WebCenter showcases Oracle Fusion Middleware, including Oracle WebCenter Framework, in an enterprise, integrated application. In this sample application, electronic devices are sold through a storefront-type web application. Customers can browse various products, place orders, and check the status of their orders. In this application, you can see Oracle WebCenter Framework features being used to provide Web 2.0, customization, and personalization capabilities.

In order to view and run the demo, you need to install Oracle JDeveloper 11g (11.1.1) and the Oracle WebCenter extension (11.1.1), as described in Section 3.1, "Installing the WebCenter Extension Bundle." 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 an existing customer.

For information on downloading and installing the sample application and the associated schema, refer to Chapter 2, "Introduction to the ADF Sample Application" in the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

For more details on the Fusion Order Demo for WebCenter, refer to the Oracle Fusion Order Demo Application for WebCenter page on the Oracle Technology Network at http://www.oracle.com/technology/products/webcenter/fod_for_webcenter.html, which includes the download ZIP file containing the application, as well as an installation and usage guide.

2.2 Browsing the Oracle WebCenter Framework Components in the Fusion Order Demo for WebCenter at Runtime

Once you have downloaded and installed the demo, you can run the application and navigate to the components built using Oracle WebCenter. This section will take you on a visual tour of the application and show you the components built using Oracle WebCenter Framework.

This section focuses on how the various Oracle WebCenter 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. Table 2-1 provides a quick reference to the relationship between the features you will see in this section and the chapters in the guide that show you how to implement them.

2.2.1 Exploring the Home.jspx Page

Let's take a look at the Home page, which showcases the following Oracle WebCenter Framework features:

• Documents service

• Links service

• Tags service

• Discussions service

To view these features in the Fusion Order Demo for WebCenter application:

1. Open the application in Oracle JDeveloper and run the home.jspx page. You'll notice that the center of the page looks like Figure 2-1.

   Figure 2-1 Sample Fusion Order Demo for WebCenter Home Page

   
   Description of "Figure 2-1 Sample Fusion Order Demo for WebCenter Home Page"
   
   

2. Below one of the product names, click See Full Details to view a few of the features built with Oracle WebCenter Framework.

   For example, if you click See Full Details beneath Bluetooth Phone Headset, your screen will look something like this:

   Figure 2-2 Documents tab

   
   Description of "Figure 2-2 Documents tab"
   
   

   Notice that the Documents tab is selected, with a list of contents beneath it. This component was built using the Documents service (Chapter 14, "Integrating the Documents Service"). The Documents service enables you to display content from a content server or file system directly within the application. In this example, a folder named Bluetooth Phone Headset contains a number of product manuals in different formats (PDF, text, GIF, and so on) on an Oracle Content Server, which you can browse directly from the Documents tab.

3. Notice two components above the tabs, called Links and Tags.

   Figure 2-3 Links and Tags

   
   Description of "Figure 2-3 Links and Tags"
   
   

   These two components display when the Links and Tags services are added to an application.

   You can click each of these links to see what displays, but to learn more about each of these features, refer to Chapter 22, "Integrating the Links Service" and Chapter 23, "Integrating the Tags Service."

   Figure 2-4 Links in the Fusion Order Demo for WebCenter

   
   Description of "Figure 2-4 Links in the Fusion Order Demo for WebCenter"
   
   

   The links that display here are sample links we've created from the Bluetooth Phone Headset folder to two documents within the folder and to external URLs. You can quickly access other information about the product or even create new links by choosing Link to New to link to a new document or URL or Link to Existing to link to a document shown in the Bluetooth Phone Headset folder. This service enables you to create relationships between content within the WebCenter application and from within the WebCenter application to external sources.

   Figure 2-5 Tags in the Fusion Order Demo for WebCenter

   
   Description of "Figure 2-5 Tags in the Fusion Order Demo for WebCenter"
   
   

   The Tag this item dialog shows the item you wish to tag (Bluetooth Phone Headset) and provides a field where you can view or modify existing tags (in this case, bluetooth) and add new tags. You also see a list of possible tags you may want to use, as well as a check box that enables you to let others see and use these tags within the application.

4. Now, let's browse the other tabs. Click the Reviews tab.

   Figure 2-6 Reviews Tab of the Fusion Order Demo for WebCenter

   
   Description of "Figure 2-6 Reviews Tab of the Fusion Order Demo for WebCenter"
   
   

   Here, you'll see product reviews by users, which is an example of the Discussions service. The Discussions service enables you to post reviews about a particular topic to a discussion forum, to which other users can respond. In this example, you are viewing a Discussion forum for the Bluetooth Phone Headset, where a user has posted a review of it. You can click the link that displays under Topic to read or reply to a review, or post your own review of the product. To learn more about this feature, see Chapter 17, "Integrating the Discussions Service."

5. At the bottom of the page, click OK to exit this portion of the demo.

Now, let's take a look at some of the other portions of this application that illustrate Oracle WebCenter Framework.

2.2.2 Exploring MyPage.jspx

Let's take a look at the personal page, MyPage, which showcases the following Oracle WebCenter Framework features:

• Search service

• Embedding a video by using Oracle Composer

• Recent Activities service

• RSS Viewer service

• People Connections service

• Announcements service

• Standards-Based Java (JSR 168) portlet

• Activity Stream task flow

• Tags service (tag cloud)

To view these features in the Fusion Order Demo for WebCenter:

1. Before we look at the personal page, take a quick look at the top of the application. You'll notice a search toolbar, which was built using the Search service (Chapter 24, "Integrating the Search Service"). Figure 2-7 shows the toolbar with the keyword "playstation" entered.

   Figure 2-7 Search Toolbar

   
   Description of "Figure 2-7 Search Toolbar"
   
   

2. If you enter a keyword, for example phone, a list of results displays. The Search service returns all instances of the keyword across the entire application. Figure 2-8 shows an example of possible search results.

   Figure 2-8 Search Results

   
   Description of "Figure 2-8 Search Results"
   
   

3. To the left of the Search toolbar, click the My Page link.

   Figure 2-9 My Page Link

   
   Description of "Figure 2-9 My Page Link"
   
   

4. In the top left corner of My Page, you can see a YouTube video embedded within a customizable component (Figure 2-10). Oracle Composer includes a toolbar that enables you to add a video to your application.

   Figure 2-10 Embedding a VIdeo

   
   Description of "Figure 2-10 Embedding a VIdeo"
   
   

   Section 2.2.3, "Editing MyPage.jspx" explains a bit more about Oracle Composer and the Fusion Order Demo. For more information about embedding a video, see Section 12.5, "Adding XML Content to the Resource Catalog: Examples."

5. Below the video component, notice the component called Recent Activities (Figure 2-11), which was built using the Recent Activities service (Chapter 25, "Integrating the Recent Activities Service").

   Figure 2-11 Recent Activities Component

   
   Description of "Figure 2-11 Recent Activities Component"
   
   

   You'll notice in the upper right corner of this component that activities from the last 30 days display. The services listed: Documents, Discussions, and Announcements, are the services that have been updated by any of the application's users over the past 30 days. The number next to each service name indicates the number of updates during the same period of time.

6. Below the Recent Activities component, notice the FOD News section (Figure 2-12), which receives an RSS feed local to the application. This component was built using the RSS Viewer service (Chapter 15, "Integrating the RSS Service").

   Figure 2-12 RSS Viewer in the Fusion Order Demo for WebCenter

   
   Description of "Figure 2-12 RSS Viewer in the Fusion Order Demo for WebCenter"
   
   

7. To the right of the YouTube video component, notice the My Connections component, which was built using the People Connections service. People Connections service enables you to provide social networking capabilities in an application. At runtime, application users can create their own network by inviting other users to join them.

   You can use the Search User field to locate a specific user, or click the arrow to see a list of users available to add to your network (Figure 2-13).

   Figure 2-13 People Connections -- Invite Screen

   
   Description of "Figure 2-13 People Connections -- Invite Screen"
   
   

   Once you invite a user and that user accepts your invitation, you see the user in your network. Here, for example, if you're logged in as user ngreenbe, you see the two users: ahunold and sking in your network (Figure 2-14). In turn, if you log in as ahunold or sking, you also see user ngreenbe in your network.

   Figure 2-14 People Connections -- Connections Screen

   
   Description of "Figure 2-14 People Connections -- Connections Screen"
   
   

8. Below the My Connections component, notice the Announcements component (Figure 2-15), built using the Announcements service. This service connects to the same back-end Discussions server as the Reviews you saw in Section 2.2.1, "Exploring the Home.jspx Page."

   Figure 2-15 Announcements in the Fusion Order Demo for WebCenter

   
   Description of "Figure 2-15 Announcements in the Fusion Order Demo for WebCenter"
   
   

   Here, the Announcements service displays sale items on products contained in the Discussions server. The application administrator or developer can modify the Announcement service to display different information that you may want to call out within the application, such as discounts or product recall information.

9. To the right of the My Connections component is a Standards-Based Java (JSR 168) portlet (Figure 2-16) that is based on an Oracle ADF task flow. This ADF task flow was turned into a portlet by using the Oracle JSF Portlet Bridge (Chapter 30, "Creating Portlets with the Oracle JSF Portlet Bridge").

   Figure 2-16 Top Five Electronics (Standards-Based Java (JSR 168) Portlet)

   
   Description of "Figure 2-16 Top Five Electronics (Standards-Based Java (JSR 168) Portlet)"
   
   

   You can also learn more about turning an Oracle ADF task flow into a portlet using the Oracle JSF Portlet in the Oracle Magazine article, "Turn Applications into Portlets" available on the Oracle Technology Network at http://webcenter.oracle.com.

10. Below the Top Five Electronics portlet, notice the Activity Stream module (Figure 2-17). The Activity Stream task flow, which displays in this module, tracks recent activities to certain services, like Documents and People Connections.

    Figure 2-17 Activity Stream Showing Recent Activities to the Documents and People Connections Services

    
    Description of "Figure 2-17 Activity Stream Showing Recent Activities to the Documents and People Connections Services"
    
    

11. Below the Activity Stream component is a Tag Cloud (Figure 2-18), which is built using the Tagging - Tag Cloud task flow in the Tags service (Chapter 23, "Integrating the Tags Service").

    Figure 2-18 Tag Cloud in the Fusion Order Demo for WebCenter

    
    Description of "Figure 2-18 Tag Cloud in the Fusion Order Demo for WebCenter"
    
    

    The Tag Cloud is a visual representation of all the tag keywords used in the application. The more frequently the tag keyword is used, the bigger the font; in this case, "fod" is the most commonly used tag, and thus its font is largest in the Tag Cloud.

Now that we've explored the pages and their components that were built using Oracle WebCenter Framework, let's take a look at some of the other tasks you can do.

2.2.3 Editing MyPage.jspx

You'll notice that, at the top of the window, there is an Edit link. Clicking this link enables you to customize the page. By clicking this link, the you can customize your own personal pages by adding published portlets that display information, such as the "Top Electronic Sellers" and "My Recommendations" portlets. You can also view properties of components at runtime. This capability was implemented using Oracle Composer, one of Oracle WebCenter Framework's components.

This section describes the following Oracle WebCenter Framework features:

• Oracle Composer

• Oracle Composer extension

• Oracle Composer Toolbar

• Resource Catalog

To use Oracle Composer in the sample application:

1. Next to the "Welcome username" text, click Edit (Figure 2-19).

   Figure 2-19 Edit Link

   
   Description of "Figure 2-19 Edit Link"
   
   

2. At the top of the page, click the About FOD link (Figure 2-20) to display an example of how you can use the Oracle Composer extension to add information about the application for your users.

   Figure 2-20 About FOD Link in the Fusion Order Demo for WebCenter

   
   Description of "Figure 2-20 About FOD Link in the Fusion Order Demo for WebCenter"
   
   

   The About FOD panel that displays is a custom panel, where you can view details about the demo itself. This is an example of how you can create and register a custom panel in a custom WebCenter application.

3. When you edit the page, you can also view the Oracle Composer toolbar at the top of the page, as shown in Figure 2-21.

   Figure 2-21 Oracle Composer Toolbar

   
   Description of "Figure 2-21 Oracle Composer Toolbar"
   
   

4. You can use the Add content link to add new content to your page. When you click Add content, a catalog displays (Figure 2-22). This catalog is an example of a customized Resource Catalog (Chapter 12, "Configuring the Resource Catalog for Oracle Composer"). You can log into the application and create different Resource Catalogs for each user, or view the same Resource Catalog across the application.

   Figure 2-22 Customized Resource Catalog in the Fusion Order Demo for WebCenter

   
   Description of "Figure 2-22 Customized Resource Catalog in the Fusion Order Demo for WebCenter"
   
   

   You can use the Resource the Product Videos link to add a video from YouTube to your application, as you saw in Section 2.2.2, "Exploring MyPage.jspx." Figure 2-23 shows the Resource Catalog that displays when you choose to add a Product Video to your application.

   Figure 2-23 Adding Product Videos from YouTube

   
   Description of "Figure 2-23 Adding Product Videos from YouTube"
   
   

Now that you've taken the tour of the Fusion Order Demo for WebCenter, you can check out these features in depth and use them yourself by referring to the relevant chapters in this manual. You can find the references to these chapters throughout the tour, or, for a quick reference guide, refer to Table 2-1.

2.3 Oracle WebCenter Framework Components in the Fusion Order Demo for WebCenter

Table 2-1 describes at a high level the Oracle WebCenter features are included in the Fusion Order Demo for WebCenter. To learn more about the different features, refer to the relevant chapter.

Table 2-1 WebCenter Features in the Fusion Order Demo for WebCenter Sample Application

Feature	Location in the Demo	Chapter
Oracle Composer	Users can customize their own personal pages by adding published portlets that display information, such as the "Top Electronic Sellers" and "My Recommendations" portlets. Users can view properties of components at runtime. This runtime customization is enabled by the Oracle Composer. See Section 2.2.3, "Editing MyPage.jspx" for the location in the demo.	Chapter 7, "Enabling Runtime Editing of Pages Using Oracle Composer."
Oracle Composer extension	Users can view a custom panel (the "About FOD" panel in the demo), which lets you view details about the demo itself. This is an example of how you can create and register a custom panel in a custom WebCenter application. See Section 2.2.3, "Editing MyPage.jspx" for the location in the demo.	Chapter 8, "Extending Runtime Editing Capabilities Using Oracle Composer"
Oracle Composer Toolbar and Product Videos on YouTube	Oracle Composer Toolbar enables you to edit the page at runtime and perform such actions as embedding a video within your application. See Section 2.2.2, "Exploring MyPage.jspx" and Section 2.2.3, "Editing MyPage.jspx" for the location in the demo.	Chapter 12, "Configuring the Resource Catalog for Oracle Composer"
Resource Catalog	You can log in as different users and view customized resource catalogs. See Section 2.2.3, "Editing MyPage.jspx" for the location in the demo.	Chapter 12, "Configuring the Resource Catalog for Oracle Composer"
Activity Stream	See Section 2.2.1, "Exploring the Home.jspx Page" for the location in the demo. Track recent updates to services like People Connections and Documents in this easy-to-read module.	Chapter 20, "Integrating the People Connections Service"
Discussion Forums and Announcements	Users can read the reviews of a particular product, as well as post their own comments using the Discussions service. The application administrator can use the Announcements service to display news about the products, such as discounts or recall information. See Section 2.2.1, "Exploring the Home.jspx Page" for the location in the demo.	Chapter 17, "Integrating the Discussions Service"
Documents	When you view information about a particular product in the application, you can access documents such as product manuals in different formats (PDF, Microsoft Word, GIF, JPG, and so on). These documents are stored in a content management system. See Section 2.2.1, "Exploring the Home.jspx Page" for the location in the demo.	Chapter 14, "Integrating the Documents Service"
Links	Using the Links service, you can quickly access, as well as create links to and from related product information from the document library, the discussion forums, and announcements. For example, if you are viewing a PDF that mentions an iPod, you can click a link that takes you directly to more information about iPods and their accessories. See Section 2.2.1, "Exploring the Home.jspx Page" for the location in the demo.	Chapter 22, "Integrating the Links Service"
People Connections	This service tracks recent updates to some of the services in the application: Discussions, Announcements, and Documents. See Section 2.2.2, "Exploring MyPage.jspx" for the location in the demo.	Chapter 20, "Integrating the People Connections Service"
Recent Activities	This service tracks recent updates to some of the services in the application: Discussions, Announcements, and Documents. See Section 2.2.2, "Exploring MyPage.jspx" for the location in the demo.	Chapter 25, "Integrating the Recent Activities Service"
RSS Viewer	You can view RSS feeds, in this case news about the Fusion Order Demo for WebCenter. See Section 2.2.2, "Exploring MyPage.jspx" for the location in the demo.	Chapter 15, "Integrating the RSS Service"
Search	This search feature enables you to search the content from all the services in the Fusion Order Demo for WebCenter, including discussion forums, announcements, the document library, and tagged content. See Section 2.2.2, "Exploring MyPage.jspx" for the location in the demo.	Chapter 24, "Integrating the Search Service"
Tags	You can use the Tags service to tag content in the document library, as well as add a Tag Cloud to your application to show the tags used. Custom tagging is used to tag a sample product. See Section 2.2.1, "Exploring the Home.jspx Page" and Section 2.2.2, "Exploring MyPage.jspx" for the locations in the demo.	Chapter 23, "Integrating the Tags Service"
Oracle JSF Portlet Bridge	This portlet is based on an ADF task flow and displays the "Top Five Electronics" in the demo. See Section 2.2.2, "Exploring MyPage.jspx" for the location in the demo.	Chapter 30, "Creating Portlets with the Oracle JSF Portlet Bridge"
Standards-Based Java (JSR 168) Portlet	This portlet contains product recommendations in a standards-based JSR 168 portlet, which you can add from a customized Resource Catalog. See Section 2.2.2, "Exploring MyPage.jspx" for the location in the demo.	Chapter 31, "Creating Portlets with the Portlet Wizard"