Final WebCenterPs3 Workshop Workbook

WEBCENTER PS3 WORKSHOP

CREATING A WEBCENTER PARTNER PORTAL

JANUARY 2011

Copyright © 2010, Oracle USA, Inc. All rights reserved.

Authors: - Birender Singh, Madhusudhan Rao, John Brunswick and Stacy Grega

i

ii

TABLE OF CONTENTS

Table of Contents ........................................................................................................................... ii

WebCenter Introduction ................................................................................................................. 4 About Oracle WebCenter ..................................................................................................................................................... 4 Today's Business Challenges ................................................................................................................................................ 4 WebCenter Benefits ............................................................................................................................................................... 4 WebCenter Components and Architecture ........................................................................................................................ 5

Oracle WebCenter Architecture ...................................................................................................................................... 5 Oracle WebCenter Portal Framework ............................................................................................................................ 6

Workshop and Hand-On Activities Introduction .......................................................................... 7

Use Case 1 – Create a Partner Portal ............................................................................................. 12 WebCenter Portal Application Template .........................................................................................................................12 Workshop Exercise Scenario ..............................................................................................................................................12

Creating WebCenter Portal Application Step-by-step Procedures ..........................................................................13 About MDS and Persistence ..............................................................................................................................................16

Setting up the MDS and Persistence Step-by-step Procedures ................................................................................17 Testing the WebCenter Portal Application Step-by-Step Procedures.....................................................................20

Use Case 2 – Customizing Look and Feel .................................................................................... 22 Page Templates, Page Styles, and Skins ............................................................................................................................22 Workshop Exercise Scenario ..............................................................................................................................................22

Modify Existing Application Template Step-by-step Procedures ............................................................................23 Adding CSS Step-by-step Procedures ..........................................................................................................................25 Adding Images Step-by-step Procedures .....................................................................................................................26 Viewing the new Look and Feel ....................................................................................................................................28

Use Case 3 – Creating Pages and Navigation ............................................................................... 30 About Pages ..........................................................................................................................................................................30 About Navigation .................................................................................................................................................................30 Workshop Exercise Scenario ..............................................................................................................................................31

To Create a Page Step-by-step Procedures ..................................................................................................................32 To Add a Page to the Page Hierarchy Step-by-step Procedures ..............................................................................34 Test the Application Step-by-step Procedures ............................................................................................................37

Use Case 4 – Securing Pages ......................................................................................................... 38 WebCenter Portal Application - Page-level and Page Hierarchy Security ..................................................................38 Workshop Exercise Scenario ..............................................................................................................................................38

Adding Roles Step-by-step Procedures ........................................................................................................................39 Adding Users and Assigning Roles Step-by-step Procedures ...................................................................................41 Securing Pages Step-by-step Procedures ......................................................................................................................43 Adding a New Page Step-by-step Procedures .............................................................................................................43 Adding Page-level Security Step-by-step Procedures .................................................................................................45 Testing Page Security ......................................................................................................................................................48

Use Case 5 – Creating Connections to Various Sources ............................................................... 50 Oracle Universal Content Management ...........................................................................................................................50

iii

Create a Database Connection Step-by-step Procedures ..........................................................................................51 Create a UCM Connection Step-by-step Procedures ................................................................................................52 Create a Discussion Forum Connection Step-by-step Procedures ..........................................................................54

Use Case 6 – Getting Content from UCM ..................................................................................... 56 Oracle Universal Content Management ...........................................................................................................................56 Workshop Exercises .............................................................................................................................................................56

Adding Content from UCM Step-by-step Procedures - The Home Page .............................................................58 Adding Content from UCM Step-by-step Procedures - The Product Page ..........................................................62 Adding Content Directly to Page Navigation Step-by-step Procedures .................................................................68 Adding Content from UCM - The Contact Us Page ................................................................................................70 Making Content Editable at Runtime Step-by-step Procedures - The About Us Page .......................................71 Modifying the default-navigation-model.xml File Step-by-step Procedures ..........................................................75 Editing Content at Run-time Step-by-step Instructions............................................................................................76

Use Case 7 – Customize Your Portal at Run-time with Oracle Composer................................... 78 Oracle Composer Introduction..........................................................................................................................................78 Making Pages Editable at Run-time ..................................................................................................................................79 Workshop Exercise Scenario ..............................................................................................................................................79

Making a Page Customizable Step-by-step Procedures - The Employee Dashboard ..........................................80 Customizing Your Portal using Composer Step-by-step Procedures .....................................................................81

Use Case 8 – Adding Announcements and Discussions .............................................................. 84 Announcements and Discussions ......................................................................................................................................84 Workshop Exercise Scenario ..............................................................................................................................................84

Adding a Discussion Forum Step-by-step Procedures ..............................................................................................85 Adding Announcements Step-by-step Procedures ....................................................................................................87

Use Case 9 – Using Mash-Ups ...................................................................................................... 90 Mashup Introduction ...........................................................................................................................................................90 Workshop Exercise Scenario ..............................................................................................................................................90

Create New Page Step-by-step Procedures .................................................................................................................91 Create a Data-Source Step-by-step Procedures ..........................................................................................................92 Creating Data-controls Step-by-step Procedures .......................................................................................................95 Create Task Flows Step-by-step Procedures ...............................................................................................................97 Adding A Task Flow to A Page Step-by-step Procedures ..................................................................................... 101

4

WEBCENTER INTRODUCTION

About Oracle WebCenter Oracle WebCenter provides the most comprehensive enterprise portal framework and integrated Enterprise 2.0 services to create rich enterprise portals, transactional websites, and social networking sites. WebCenter supports the creation of all styles of Web sites, portals, and composite applications ranging from employee intranets to customer extranets, dashboards, wikis and blogs, community discussion forums, online stores, and many others.

Today's Business Challenges

Organizations are required to innovate faster and react quicker to stay ahead of the competition. Organizations must address key challenges such as:

make it easy for users to interact with various data sources and applications to be productive

present a more comprehensive view across business processes

deliver upgrades, customizations, and new applications faster

WebCenter Benefits

WebCenter effectively addresses these business challenges and provides the following benefits to organizations:

Decrease Development Costs: by leveraging a wide-range of plug and play products, tools, and services.

Deploy Applications Faster: by reusing services across many applications and incorporating ready-made tools that support the activities that drive today's businesses.

Lower total cost: Spend less on software, hardware, and development to build, maintain and change your applications.

Leverage current IT investments: by driving increased usage from existing back-office systems from a single UI.

Meet changing business needs: Provides the ability to take advantage of portal infrastructure benefits as appropriate to the application requirements and evolve the application to meet changing or evolving requirements using additional portal infrastructure services and tools.

Improve Productivity: by providing fingertip access to the information and systems users need to do their jobs, and integrated tools to help them work more effectively together.

Improve Business Processes: streamline work that crosses organizational boundaries, thereby reducing errors and improving process throughput.

5

WebCenter Components and Architecture

Oracle WebCenter includes an integrated set of components, built on a standards-based, service-oriented architecture. Oracle WebCenter combines dynamic user interface technologies with which to develop rich internet applications, the flexibility and power of an integrated, multi-channel portal framework, and a set of horizontal Enterprise 2.0 capabilities delivered as services that provide content, collaboration, presence and social networking capabilities.

Figure 1 provides an overview of the Oracle WebCenter architecture, showing major components that comprise the product.

Figure 1 Overview of Oracle WebCenter Architecture

Oracle WebCenter Architecture

Oracle WebCenter comprises the following components (shown in Figure 1):

Oracle Application Development Framework

Oracle WebCenter Portal Framework

Oracle WebCenter Services such as Discussions, Events, Activity Graphs, Wikis, Blogs, Linking, Content Management, People Connections

Oracle Composer

Oracle WebCenter Spaces

6

Oracle WebCenter Portal Framework

The WebCenter portal framework provides portal-specific features to a WebCenter application. These features include page hierarchies, navigation models, delegated security, customization, and others. Portals can also include features like portlets, content management system integration, personalization, social computing services, search, analytics, and more.

From the perspective of an end user, a portal is a web site with pages that are organized by tabs or some other form of navigation. Each page can contain portlets, static content, dynamic content, and task flows. Authorized users can also customize their view of a portal by adding their own pages, adding portlets of their choosing, and changing the Look And Feel of the interface.

7

WORKSHOP AND HAND-ON ACTIVITIES

INTRODUCTION

Avitek is a car dealership company, which deals with various brands of cars. Avitek needs a public facing portal for its customers to browse new offers and products, order products online and display personalized content to the registered users. You will play the role of a portal developer and website administrator to build and manage the Avitek portal.

The hands-on exercises are designed to help you understand the power of Oracle's WebCenter plug and play components and how WebCenter portal framework provides page hierarchies, navigation models, security, delegated administration, page templates, catalogs, skins, and customization features to portal developers and end users.

The following screens show the Avitek Portal you will build:

HOME PAGE

8

PRODUCTS PAGE

9

ABOUT US - NEWS RELEASES

ABOUT US - CONTACT US

10

MANAGEMENT DASHBOARD

JOE'S DASHBOARD

11

12

USE CASE 1 – CREATE A PARTNER PORTAL

In this Use Case, you will:

Create a new portal application using Oracle's WebCenter Portal Application template

Set important application properties such as MDS and persistence

Run and test the application

Oracle WebCenter makes it easy for organizations to create new portal applications. Its powerful integrated development environment, JDeveloper, simplifies the development of creating applications and provides full development life cycle support. Oracle JDeveloper:

Increases developers’ productivity via a visual and declarative approach to application design.

Provides a combination of visual editors, property inspectors, structure panes, and editing dialogues to simplify and eliminate tedious coding.

Technical Note: Oracle JDeveloper is the development environment for the Oracle Application Development Framework (Oracle ADF). Oracle ADF is an end-to-end development framework, built on top of the Enterprise Java platform, and offering unparalleled productivity. The framework provides integrated infrastructure solutions for the various layers of the application including data access, business services, development, a controller layer, rich Web, mobile and desktop interfaces, data binding, and security.

WebCenter Portal Application Template

When creating an application, you can choose to create the application based on the NEW WebCenter Portal Application template. This automatically includes the Portal Framework which adds a number of portal-specific features to your application including: Page hierarchies, navigation models, delegated administration, customization, page templates, catalogues and skins.

Workshop Exercise Scenario

Avitek is a car dealership company, which deals with various brands of cars. Avitek is planning to build a public facing portal / website for its customers to browse new offers / products, order products online and display personalized content to the registered users. In this workshop you play the role of a portal developer and a website administrator to build and manage the Avitek portal respectively.

After the set of exercises in this Use Case; you will have a new Avitek portal that consists of 1 Home page and uses a default portal template.

13

Creating WebCenter Portal Application Step-by-step Procedures

(1) Start the JDeveloper from its installed location.

(2) Choose option of “New Application”.

(3) Enter the name of the application as “AvitekDemo”.

(4) Browse the directory location where you would like to store the application contents, for example under

jdeveloper/mywork directory.

14

(5) Enter the “Application Package Prefix” as avitek.demo.

(6) Choose WebCenter Portal Application in the Application Template pane.

(7) Click Next.

(8) Keep default values on the Project Name screen and click “Next” to continue.

15

(9) Keep the default values on the Configure Java Settings screen and click "Next".

(10) Make sure the Configure the application with standard Portal features option is checked. This setting

ensures that the application generates all the portal artifacts in the application such as Templates,

Catalogs, Skins, Default Pages, Site Resource Manager, etc.

16

(11) Click “Finish” to complete the process of creating a PS3 WebCenter portal application.

(12) In the Application Navigator; expand Portal >> Web Content >> oracle >> webcenter >> portalapp to

view the many portal framework items added to your portal application.

.

About MDS and Persistence

MDS contains all modifications and customizations to an application. MDS enable you to move portal settings from one project to another and preserve your customizations. Below is a brief introduction to MDS and why it's important.

Most industries customize their enterprise applications to serve different audiences and domains. Problems can arise when an application is modified at the site level. For example, upgrading an application with site-level customizations may lead to data loss or data-merge errors. Consequently, a new version of the application cannot be deployed until all merge conflicts are reconciled.

In the metadata domain, MDS provides the customization feature to address such problems. The customization feature allows for the creation of nonintrusive customization layers that are applied on top of the base application definitions. Customization layers, or layered changes, are described in their own documents and are stored separately from the base application definition. At runtime, applicable customizations are loaded from the metadata store and layered over the base metadata definition to produce the desired effect. Product upgrades and patches affect only the base metadata definition, so customizations continue to function properly.

17

Setting up the MDS and Persistence Step-by-step Procedures

(1) Once the AvitekDemo application is created, choose “Application” option from top level menu and

select “Application Properties”.

(2) Once the “Application Properties” dialogue is open, search for “mds”.

18

(3) Select MDS under Run.

(4) Click on the “Browse” button for the Override Location field. Navigate to the application's working

directory; i.e. /home/<user_name>/jdeveloper/mywork/AvitekDemo.

(5) On top right corner of window click on “Create Folder” icon.

(6) Enter “Directory Name” as “portalmds”.

19

(7) Click "OK".

(8) Now select the “portalmds” directory and click “Select”.

(9) Under Directory Content, select the “Preserve customization across application runs” option. This

option ensures that changes made during the last run of the application are retained. By default, it is not

selected. Refer to the figure below.

(10) Click “OK”.

20

(11) In JDeveloper, Choose File → Save All, in order to save all configurations for AvitekDemo.

Testing the WebCenter Portal Application Step-by-Step Procedures

(1) In the Application Navigator, navigate to index.html.

(2) Right click index.html and choose "Run".

(3) The webcenter portal application is then accessible on url as http://owcvm03/AvitekDemoApp-Portal-

context-root/index.html.

(4) View the default layout and template used in your WebCenter portal application. Notice the page

includes a Login.

http://owcvm03/AvitekDemoApp-Portal-context-root/index.html

http://owcvm03/AvitekDemoApp-Portal-context-root/index.html

ORACLE WEBCENTER PS3 WORKSHOP JAN 2011

21


22

USE CASE 2 – CUSTOMIZING LOOK AND FEEL

In this Use Case, you will

customize the look and feel of the Avitek partner portal

modify an existing page Template

work with CSS and Images

Page Templates, Page Styles, and Skins To build an effective portal, it is important to decide on a look and feel for your portal. You can design the look and feel by adding certain presentation elements, such as banners, navigations, and footers, around the content area. Once you settle on a look and feel that is suitable for your portal structure, you can save these settings as a page template. With the use of page templates and page styles, you can achieve some consistency across pages in your portal.

Page templates determine the artifacts that surround the main content of the page, while page styles determine the layout for the main content of the page. Skins contribute to the look and feel of your portal by specifying the application background color, screen fonts, and, with some skins, the shapes and images used for application buttons and icons. If you want each page in your portal to look similar, an effective way to accomplish this is by using page templates, page styles, and skins.

Oracle WebCenter applications comes with two supplied templates. The default page templates are:

pageTemplate_globe.jspx and

pageTemplate_swooshy.jspx.


After completing the steps in this exercise, your portal will take on the AVITEK look and feel as seen in the

picture below. Workshop files are provided to you to complete the exercises. Check with the workshop

facilitator on where to access the file LookandFeelArtifacts.zip.


23

Modify Existing Application Template Step-by-step Procedures

(1) Open JDeveloper 11.1.1.4.0 from the installed location.

(2) Open the AvitekDemo application.

(3) In the Application Navigator, expand the “Portal” project and navigate to the “Web Content → oracle

→ webcenter → portalapp → pagetemplates”.


24

(4) Right click on “pageTemplate_globe.jspx” and open.

(5) Click the Source tab to switch to source mode to edit the template.

(6) Workshop files have been included as part of this workshop. Ask the facilitator where you can locate

the "LookandFeelArtifacts" files.

(7) Copy the "LookandFeelArtifacts" files to your desktop.

(8) Open the “LookandFeelArtifact” folder.

(9) Open file “pageTemplate_globe.jspx” in a text editor.

(10) Copy and Paste the entire content from the file document into the pageTemplate_globe.jspx already

opened in source mode in JDeveloper.


25

Adding CSS Step-by-step Procedures

(1) Create a "css" directory under "Portal → Web Content" in JDeveloper if one does not already exist.

Select Web Content, right-click and choose” New”.

(2) Click the “General Category” and choose “Folder” as the Item.

(3) Click OK.


26

(4) Type in a Folder Name of “css”, leave the default directory, and click OK.

(5) Workshop files have been provided to you. Open the “LookandFeelArtifact” folder.

(6) Copy the style.css from the workshop files and paste into the

“/jdeveloper/mywork/AvitekDemo/Portal/public_html/css” folder.

Adding Images Step-by-step Procedures

(1) Create an "images" directory under "Portal → Web Content" in JDeveloper if one does not already

exist.

(2) Select Web Content, right-click and choose “New”.


27

(3) Click the General Category and choose Folder as the Item.

(4) Click OK.

(5) Type in a Folder Name of images, leave the default directory, and click OK.

(6) Workshop files have been provided to you. Open the “LookandFeelArtifact” workshop files folder.

(7) Copy all the PNG images from the workshop files and paste into the

“/jdeveloper/mywork/AvitekDemo/Portal/public_html/images” folder.


28

Viewing the new Look and Feel

(1) Press “File → Save All” in JDeveloper.

(2) In the Application Navigator, navigate to index.html.

(3) Right click “index.html” and choose "Run".

(4) The webcenter portal application is then accessible on url as http://owcvm03/AvitekDemoApp-

Portal-context-root/index.html

(5) Upon completing these exercises, your portal now has the Avitek look and feel.


29


30

USE CASE 3 – CREATING PAGES AND

NAVIGATION

In this use-case, you will

create a new Products portal page

add navigation to the Products page

About Pages

A portal consists of one or more pages, and pages play a crucial role in a portal's structure and organization. Generally, a page is a container for one or more entities like task flows, portlets, and content. Pages also typically include a navigation interface, like a navigation tree, tabs, or bread crumbs.

In a WebCenter Portal application, three default pages are included in the Portal project under the folder oracle/webcenter/portalapp/pages as shown in the exercises. These 3 pages are:

error.jspx

home.jspx

login.jspx

The placement of these pages is for organizational purposes, and new pages do not necessarily need to be created under the pages folder.

About Navigation

Navigation models define the content, structure, and metadata of your portal navigation. Typically, portals provide information from different sources. Information may be provided by pages, portlets, task flows, content repositories like Oracle's Universal Content Management system, and external pages. Users need a way to easily move through this information and quickly access the specific information that they need. You provide this access to information through your portal navigation.

The navigation model defines the content, structure, and metadata of the navigation. When you create the navigation model, you specify the items to include and the hierarchy of those items. Navigation models can include the following resources:

Pages (individual pages and page hierarchies)

Content (individual content items or the results of a content query)


31

Other navigation models

Portlets

Task flows

External applications

External links

The navigation component in the WebCenter Portal Application is controlled by defining page hierarchy in pages.xml file and default-navigation-model.xml. These files are shown in the screen capture below.

Workshop Exercise Scenario Upon completing the exercises in this Use Case; your portal application will look like the following. Notice the new Products portal page with active navigation to the page.


32

To Create a Page Step-by-step Procedures

(1) For the AvitekDemo application, in the Application Navigator, navigate to Portal → WebContent →

oracle → webcenter → portalapp → pages.

(2) Under Pages, notice 3 default pages were created for this WebCenter application; error.jspx,

home.jspx, and login.jspx.

(3) Right-click on pages node and select “New”.


33

(4) A new page creation wizard opens, choose from JSF under the “Web-Tier” and select JSF Page.

(5) Click OK to continue.


34

. (6) On the Create JSF Page screen, type in a File name of products.jspx.

(7) Make sure that the option to “Create as XML Document (*.jspx)" is checked.

(8) Choose a Page Template of “Globe Page Template”.

(9) Click OK.

(10) Repeat steps 1 - 9 to create an About Us page (aboutus.jspx).

(11) Repeat steps 1 - 9 to create a Contact Us page (contactus.jspx).

(12) Repeat steps 1 - 9 to create an Announcements page (announcements.jspx).

To Add a Page to the Page Hierarchy Step-by-step Procedures

(1) For the AvitekDemo application, in Application Navigator, navigate to Portal → WebContent →

oracle → webcenter → portalapp → pagehierarchy.

(2) Expand the node “pagehierarchy”.


35

(3) Right-click and open “pages.xml”.

(4) Select the “Root” node and click the Add Page icon to add to the page hierarchy.

(5) Browse to the Pages folder and choose products.jspx.


36

(6) Click Open.

(7) Select the newly added “Products” node.

(8) By default the “Id”and “Title” are same as the page name i.e. “products”.

(9) Change the Title from products to Products. This title is reflected on the page menu in your

application.

(10) Repeat steps 4 - 9 to add the About Us page to the Page Hierarchy.

(11) Repeat steps 4 - 9 to add the Contact Us page to the Page Hierarchy.


37

(12) Select the Products node in the hierarchy, and repeat steps 4 - 9 to add the Announcements page to

the Page Hierarchy under Products.

Test the Application Step-by-step Procedures

(1) Select “index.html” and choose to “Run” to preview the effects of additional page(s) in portal.

(2) Click the Products link to navigate to your new portal page.


38

USE CASE 4 – SECURING PAGES


create a new Employee Dashboard page

add Roles, create users, and assign roles to users

set page-level security on the Employee Dashboard page

learn about Page-level and Page Hierarchy Security

WebCenter Portal Application - Page-level and Page Hierarchy Security The WebCenter Portal application is configured with ADF Security. Default login and logout pages are provided with the WebCenter Portal Application template and you can view the Login page on your AvitekDemo application. In addition, the WebCenter Portal application comes with an out-of-box security tool called the Page Hierarchy Security Editor. The Page Hierarchy security editor provides numerous benefits including:

an alternative security mechanism to page-level security for your application

a quick way to apply inherited and/or delegated security to application pages

a convenient and more manageable way to secure content for large site

an easy drag and drop style of adding pages to hierarchy nodes

Workshop Exercise Scenario In this Use Case, you will create a new secure Page called Employee Dashboard. Only users with the Employees role will be able to see the Page. Once Bob logs into the portal, he will see the new Employee Dashboard page since Bob has the Employees role.


39

The following table shows the users and roles you will create.

User Roles

bob Employees

julia Employees

joe Management

Adding Roles Step-by-step Procedures

(1) Open JDeveloper 11.1.1.4.0 from the installed location.

(2) Open the AvitekDemo application and expand “Application Resources”.

(3) Expand “Descriptors” - “META-INF” and select “jazn-data.xml”.

(4) Right click and “Open” jazn-data.xml.


40

(5) Choose “Application Roles” link.

(6) In the Roles pane, notice the 3 default roles; Administrator, anonymous-role and authenticated-role.

(7) In this lab, we will create 2 Roles: Employees and Management.

(8) Click the Add icon in the Roles pane to add new roles.


41

(9) Enter a Name of Employees and Display Name of Employees.

(10) Click the Add icon again to add a 2nd role. Choose Add New Role - at Root Level.

(11) Enter a Name of Management and Display Name of Management.

Adding Users and Assigning Roles Step-by-step Procedures

(1) In the same jazn-data.xml file, choose the Users link.

(2) In this lab we will add three users “bob”, “joe” and “julia”.

(3) Click the Add icon In the Users pane to add new users.


42

(4) Enter the “Name” as “bob”, “Password” as “welcome1”, and “Display Name” as “bob”.

(5) Click the Add icon in the Assigned Roles pane and select Application Roles.

(6) A dialogue opens with all the roles available for the AvitekDemo application; choose “Employees” as

role for “bob”.

(7) Click “OK”.


43

(8) On the jazn-data.xml file, you can see that the User “bob” has been assigned the "Employees" role.

(9) Repeat steps 1 - 7 to create the user "julia" and assign the "Employees" role. Name and Display

Name should be “Julia” and Password is “welcome1”.

(10) Repeat steps 1 - 7 to create the user "joe" and assign the "Management" role. Name and Display

Name should be “joe” and Password is “welcome1”.

Securing Pages Step-by-step Procedures

The next step in securing pages is to assign users or roles to a Page. We will create a new page called Employee Dashboard, add that page to the Page Hierarchy, then apply the security. This section will be a good practice of the previous Use Case.

Adding a New Page Step-by-step Procedures

(1) In the Application Navigator, navigate to “Portal → WebContent → oracle → webcenter →

portalapp → pages”.

(2) Right-click on pages node and select “New”.


44

(3) A new page creation wizard opens, choose from JSF under the “Web-Tier” and select JSF Page.

(4) Click OK to continue.


45

.

(5) On the Create JSF Page screen, type in a File Name of employeedashboard.jspx.

(6) Make sure that the option to “Create as XML Document (*.jspx)" is checked.

(7) Choose a Page Template of “Globe Page Template”.

(8) Click OK.

Adding Page-level Security Step-by-step Procedures

(1) In the Application Navigator, navigate to “Portal → WebContent → oracle → webcenter →

portalapp → pagehierarchy”.

(2) Expand the node “pagehierarchy”.


46

(3) Right-click and open “pages.xml”.

(4) Select the “Root” node and click the Add Page icon to add to the page hierarchy.

(5) Browse to the Pages folder and choose “employeedashboard.jspx.”

(6) Click Open.

(7) Select the newly added “employeedashboard” node.

(8) By default the “Id”and “Title” are same as the page name i.e. “employeedashboard”.


47

(9) Change the Title to Employee Dashboard. This title is reflected on the page menu in your

application.

(10) Change the Security option to “Delegate Security”.

(11) Remove the “Roles” anonymous-role and authenticated-role by selecting the role and clicking the

Remove icon. Important, please do not remove the Administrator role.

(12) Press the Add icon to add “Employees” role.

(13) Highlight the “Employees” Role and select the “Grant”, “Create”, “Delete”, "Update", "Personalize",

and "View" permissions.

(14) Press “Save All”, to save all the work.


48

Testing Page Security

(1) Right-click “index.html” and choose to “Run” to preview the effects of additional page(s) in your

portal.

(2) When the “Home” page loads, a non-authenticated user will not see “Employee Dashboard”.

Notice how the Dashboard does not appear.

(3) Login as “bob/welcome1”. Bob has access to the “Employee Dashboard” page. Notice the page

now appears.


49


50

USE CASE 5 – CREATING CONNECTIONS TO

VARIOUS SOURCES

In this Use Case, you will configure application connections to

Oracle's Universal Content Management System (UCM)

Oracle Database

Oracle WebCenter Discussion Server

It is common that users publish, display, and work with data from various sources across an organization. In the next 3 Use Cases, you will see data from various sources pulled into your AvitekDemo application. Prior to those use cases, it is essential to make connections to the various sources. The three Use Cases are listed below:

Getting Content from Oracle's Universal Content Management requires a connection to the Oracle UCM application

Adding Discussions and Announcements requires connection to the Oracle WebCenter Discussion Server

Mashups will use data predefined in the database to showcase Mashup features

.

Oracle Universal Content Management

Oracle's Universal Content Management (UCM) is a leading enterprise content management system that offers document management, web content management, digital asset management, and records and retention management features. UCM is Oracle's strategic content management platform is a part of Webcenter.

Webcenter portal users need to store, publish, and share files in their portal environment. Oracle UCM provides content management and storage capabilities for Webcenter applications, including content upload, file and folder creation and management, file check out, versioning, and so on. Oracle UCM can manage all unstructured content specific to a portal environment and across the enterprise.

To leverage UCM features, you will make a connection to Oracle UCM. Similarly, you will make a connection to an Oracle database, and a Threaded Discussion Server. The Oracle database has been installed as part of the Workshop Virtual Machine image and contains already prefilled structured data.


51

Create a Database Connection Step-by-step Procedures

(1) Open Jdeveloper 11.1.1.4.0 from its installed location.

(2) Open the “AvitekDemo” application.

(3) In the Application Navigator expand "Application Resources" and select "Connections".

(4) Right-click Connections and choose New Connection - Database.

(5) Enter Connection Name as “oradb11gR2”.


52

(6) Choose the Connection Type as “Oracle (JDBC)”.

(7) Enter the Username as “workshop” and Password as “welcome1”.

(8) Update the JDBC settings; choose the Driver as “Oracle (JDBC)”.

(9) Enter Host Name as “owcvm03” and JDBC Port as “1521”.

(10) Enter the SID as “owcdb01”.

(11) Press the “Test Connection”, in order to verify that the details entered are correct and a successful

database connection is established.

(12) Click “OK”.

(13) Choose “Neither” and click OK.

Create a UCM Connection Step-by-step Procedures

(1) Right-click Connections and choose New Connection >> Content Repository.


53

(2) This opens a “Create Content Repository connection” dialogue.

(3) Enter the Connection Name of "UCM".

(4) Select the Repository Type as “Oracle Content Server”.

(5) Enable the Set it as the primary connection for Document Service check box.

(6) Enter RIDC Socket Type as “socket”.

(7) Enter Server Host Name as “owcvm03”

(8) Enter the Content Server Listener Port as “4444”.

(9) Click the “Test Connection” button to verify you have a successful connection to Oracle Content

Server (UCM).

(10) Click “OK” to exit from the connection dialogue.


54

Create a Discussion Forum Connection Step-by-step Procedures

(1) Right-click Connections and choose New Connection - Content Repository.

(2) This opens the Discussion Forum Connection dialogue.

(3) Type in a Connection Name of "DiscussionForum".

(4) Click Next.


55

(5) Enter the URL as “http://owcvm03/owc_discussions”.

(6) Enter Admin User as “weblogic”

(7) Enter Connection Timeout as “3000”.

(8) For other fields; keep the default values.

(9) Press the “Test Connection” button, to verify the connection.

(10) Click Finish.

http://owcvm03/owc_discussions


56

USE CASE 6 – GETTING CONTENT FROM UCM


Add Content from Universal Content Management (UCM) to the Home, Products, About Us and Contact Us pages

Add navigation by modifying default-navigation-model.xml

Make a page editable at run-time

Edit Content Pages at Run-time

Oracle Universal Content Management

Oracle's Universal Content Management (UCM) is a leading enterprise content management system that offers document management, web content management, digital asset management, and records and retention management features. UCM is Oracle's strategic content management platform and is a part of WebCenter.

WebCenter portal users need to store, publish, and share files in their portal environment. Oracle UCM provides content management and storage capabilities for WebCenter applications, including content upload, file and folder creation and management, file check out, versioning, and so on. Oracle UCM can manage all unstructured content specific to a portal environment and across the enterprise.

In the previous Use Case, you made a connection to the Universal Content Management repository in JDeveloper.

Workshop Exercises In this set up exercises, you are going to be adding content to your Home page, Products page, and other pages. You will be adding a combination of .html files and images; all stored within the Universal Content Management system.

Oracle's UCM manages an HTML home page file which will be added to the Home page of your application. After these exercises, your Home Page will look like the following:


57

For the Products page, we will add the following UCM content

Product Gallery images which are stored in a UCM contribution folder called Product Gallery. Here you can choose to add all the images and choose a Carousel style template for viewing.

A set of HTML Product pages where you will add all .html files and choose a Tabbed view.

Another Reach Us.html page which will be added to the right hand side of the page


58

Adding Content from UCM Step-by-step Procedures - The Home Page

(1) In JDeveloper, open the "AvitekDemo" application.

(2) In the Application Navigator, expand “Application Resources” “Connections” “Content

Repository → UCM” node.

(3) Select the UCM node. An authentication dialogue box will appear. Enter “Username” and

“Password” as “weblogic/welcome1”.

(4) Once authenticated, navigate to Contribution Folders → AvitekFiles → HTML → Home. The content

located in these folders are stored and managed within the Universal Content Management system

Directly from JDeveloper; you have a visible view of content and can easily add content into your

application.


59

(5) Expand the Portal project folder and navigate to your project Home page (Portal → WebContent →

oracle → webcenter → portalapp → pages).

(6) Right-click and open “home.jspx”.

(7) In Application Resources, return to “Contribution Folders → AvitekFiles → CSS → HTML → Home”.

(8) Drag and drop the home.html on to the “home.jspx”. When prompted, choose “Documents –

Content Presenter”.


60

(9) Leave the defaults for Edit Task Flow Binding dialogue and Click OK.

(10) Important note, usually steps 8 and 9 works perfectly. But sometimes dropping the content on other

areas in page might cause errors. The best practice is to enable Structure View of the jspx page. This

is enabled by clicking “View” option in Jdeveloper's top menu and selecting “Structure”.

(11) Now view the Structure pane in JDeveloper.


61

(12) Make sure the UCM content shown as af:region - #{bindings.doclibxxxxx} is dropped on

cust:panelCustomizable which is found following this path “f:view → f:form → af:pageTemplate →

f:facet -content → pe:pageCustomizable → cust:panelCustomizable”.

(13) Test and Run the application. Highlight index.html, right-click and choose Run. Home page should

look like the following screen.


62

Adding Content from UCM Step-by-step Procedures - The Product Page

(1) View page 35 which describes what you will add to the Products page and how the Products page

appears after completion.

(2) Open “products.jspx” under (Portal → WebContent → oracle → webcenter → portalapp → pages).

(3) Expand “Application Resources → Connections → Content Repository → UCM” node.

(4) If asked to authenticate enter weblogic/welcome1 as User Name and Password.

(5) Navigate to “Contribution Folders → AvitekFiles → Product Gallery” folder.


63

(6) “Drag and Drop” the entire “Product Gallery” folder from the UCM Content Repository onto

products.jspx and choose “Documents – Content presenter”.

(7) In the Edit Task Flow Binding dialog, enter “Input Parameters” against “templateView” as “

${'oracle.webcenter.content.templates.default.list.carousel'} ”.

(8) Click “OK”.

(9) Click “Save All”.


64

(10) Select or highlight products.jspx.

(11) In the Structures pane for products.jspx, make sure the UCM content which appears as af:region -

#{bindings.doclibxxxxxxxx} is under the “ jsp:root → f:view → af:document → af:form →

af:pageTemplate → f:facet -content component”.

(12) Expand “Application Resources → Connections → Content Repository → UCM” node.

(13) Navigate to Contribution Folders → AvitekFiles → “Products” folder.


65

(14) Drag and drop the entire “Products” folder on the products.jspx and choose “Documents – Content

Presenter”.

(15) In the Edit Task Flow Binding dialog, enter “Input Parameters” against “templateView” as “

${'oracle.webcenter.content.templates.default.list.panel.tabbed'} ”.

(16) Select or highlight product.jspx.

(17) View the Structures pane. The UCM content should fall under the “f:facet – content” component. If

the UCM component does not fall within the “facet – content” component, drag and drop it under

the facet.


66

(18) Test your application. Right-click index.html and choose Run.

(19) View your Product page. Notice the Images added from the Products Gallery folder are presented

with the Content Presenter: Carousel View and the HTML Products files are presented with the

Content Presenter: Tabbed Panel view.

(20) You will add one more content item to the Products Page, expand “Application Resources”. Under

the “Content Repository → UCM → Contribution Folders → AvitekFiles → HTML → About Us”.


67

(21) Drag and drop the “reachus.html” on the products.jspx as “Documents – Content Presenter”.

(22) Press “Save All”.

(23) Once again, in the Structures pane for products.jspx, make sure the UCM content which appears as

af:region - #{bindings.doclibxxxxxxxx} is under the “ jsp:root → f:view → af:document → af:form →

af:pageTemplate → f:facet -content component”.

(24) In order to correctly control the display of content presented on products.jspx, it's recommended

that a table (if not present) is inserted in the jspx page. In JDeveloper, view products.jspx in source

mode. You can choose to insert Table code to help control your display. This is represented in the

Structure pane.


68

(25) Test the application, right-click on index.html and choose “Run”.

(26) View the Products page. The below picture represents the “products.jspx” page and the three areas

of the page in which content was added.

Adding Content Directly to Page Navigation Step-by-step Procedures

(1) In this section, one will learn to add the content directly to “Page Navigation” on the portal.

(2) Open default-navigation-model.xml under “Portal → WebContent → oracle → webcenter →

portalapp → navigations”.


69

(3) Add the Add new node icon to add a new node and choose “Link”.

(4) Enter an Id as “aboutus”.

(5) Choose a Type as “Content”.

(6) Click on browse icon at URL field.


70

(7) In the Choose a Resource dialog, choose “Application Resources” on the “left hand” frame.

(8) Expand the “Connections → Content Repository → UCM → Contribution Folders → AvitekFiles →

HTML → AboutUs” and select “aboutus.html”

(9) Click OK.

(10) The URL on the default-navigation-model.xml now looks like :-

“content://UCM#dDocName:ABOUTUS”

(11) Change the “Display value” in URL Attributes section to “About Us”.

(12) Click "Save All".

(13) Run the application to view it’s effect. One shall see the About Us link next to the “Products”.

Adding Content from UCM - The Contact Us Page

(1) Open jspx pages “aboutus.jspx” and “contactus.jspx” under (Portal → WebContent → oracle →

webcenter → portalapp → pages).

(2) Go to “Application Resources” in JDeveloper and expand the “Connections” node.

(3) Under the node “Content Repository → UCM → Contribution Folders → AvitekFiles → HTML →

Contact Us”.

(4) Drag and drop ContactUs.html onto the contactus.jspx page and choose "Documents - Content

Presenter".


71

Making Content Editable at Runtime Step-by-step Procedures - The About Us Page

(1) Open “aboutus.jspx”.

(2) Pages can be edited at run-time by end users. To make the “About US” page editable, the Page

Customizable component must be added to the page.

(3) In the Component Palette, choose Oracle Composer from the top drop down menu.

(4) Drag and drop the Page Customizable component onto the "aboutus.jspx".

(5) View the Structure pane for "aboutus.jspx" and view pe:pageCustomizable; which should appear

under af:form - af:pageTemplate - f:facet - content.



72

(7) Under the node “Content Repository → UCM → Contribution Folders → AvitekFiles → HTML →

About Us”.

(8) Select “AboutUs.html”, the drag and drop AboutUs.html onto the Structure pane underneath f:view

- af:document - af:PageTemplate - f:facet - content - pe:pageCustomizable -

cust:panelCustomizable and choose "Documents - Content Presenter".

(9) Press “Save All”.

(10) Add a child link under the “About Us” in default-navigation-model.xml.

(11) Select “About Us” and click Add a new node icon and choose "Link".


73

(12) Enter the Id of “aboutusedit”.

(13) Choose Type as Page.


(15) Navigate to “oracle → webcenter→ portalapp→ pages” and select “aboutus.jspx”.

(16) Change the “Display Value” under URL attributes section to “About Us (Edit)”.

(17) Similarly, add a 2nd child link under the “About Us” in default-navigation-model.xml.


74

(18) Highlight “About Us” and click the Add a new node and choose "Link".

(19) Enter an Id as ContactUs.

(20) Select a Type as Page.


(22) Navigate to oracle → webcenter→ portalapp→ pages and select “contactus.jspx”.

(23) Change the “Display Value” under URL attributes section to “Contact Us”.

(24) Right-click index.html and choose Run to test your application.

(25) View the navigation and the content from UCM on “About Us” and "About Us - About Us (Edit)", and

"About Us - Contact Us" pages. Notice About Us appears twice. Refer to next activities.


75

Modifying the default-navigation-model.xml File Step-by-step Procedures

(1) At this point in your project, the About Us page appears twice in your navigation.

(2) Open “pages.xml” under “Portal → WebContent → oracle → webcenter → portalapp → page

hierarchy”.

(3) Select About Us node and uncheck the Visible node.

(4) Select the Contact Us node and uncheck the Visible node.

(5) Now open to default-navigation-model under “Portal → WebContent → oracle → webcenter →


(6) Notice that Page Hierarchy and your previously added nodes contribute to the overall navigation in

this particular project.


76

Editing Content at Run-time Step-by-step Instructions

In WebCenter PS3 portal application, users can edit the contents of the page(s) at run-time. This option enables end users to edit content stored in UCM directly on the portal page and save it.

In the previous step-by-step procedures, you made the About Us page Editable by adding the Page Customizable component. In the next steps, you will now Edit this page on the portal. By default, the user weblogic has editing permissions.

(1) Login to AvitekDemo portal on the web-browser as “weblogic/weblogic1”. You may need to run

your application again to get the web browser or click the URL to your project in JDeveloper logs.

(2) Navigate to About Us (edit) link under the About Us page. Click to open About Us.

(3) Press “Ctrl + Shift + C” key combination. This renders the page “aboutus.jspx” in edit mode. The blue

dotted line around the About Us (Edit) page represents that page is in edit mode.

(4) Important Note:- “Ctrl+Shift+C” allows for Editing the content from the UCM or Editing HTML page

stored with in UCM”.

(5) Click on the Edit icon to edit the page.

(6) Select the version of the document.


77

(7) Once loaded; click the Edit icon again to edit. (see below)

(8) The page is rendered to an editor in a pop-up window. View your editing options and make some

changes.

(9) Click “Save and Close” to save your changes and return to previous window.


78

USE CASE 7 – CUSTOMIZE YOUR PORTAL AT

RUN-TIME WITH ORACLE COMPOSER


Modify application pages at run-time using Oracle Composer

Review scenarios where run-time customizations are beneficial

Oracle Composer Introduction The concept of design time at runtime describes an environment that provides users with the option to edit application pages at runtime. Oracle Composer provides components for controlling the application's design time at runtime features.

Typically, the tasks for creating, deploying, and using web applications are performed by different categories of users in different environments:

Application developers create applications in design time, which traditionally represents an IDE-based environment for creating or editing applications. For Oracle WebCenter, Oracle JDeveloper provides the design-time environment for creating web applications. At this point, you have become quite familiar with Oracle JDeveloper.

Application administrators deploy these applications to managed servers.

End users access the deployed applications at runtime, which represents a browser-based environment for using web applications.

Consider a dashboard-like application that displays information pertaining to the logged-in user, such as a work list, open tasks, mail, and so on. The page developer creates the dashboard page and populates it with the required components and task flows. When this application is installed at a customer site, people at different levels in the organization may want the page modified to suit their requirement. For example:

Department administrators may want to add a "Department News" task flow to the dashboard.

LOB administrators may want to add an "Expense Incurred by Self/Directs" task flow to the dashboard.

The country site administrator may want to add a task flow pertaining to the respective country's operations or rules.


79

Rather than pushing these simple modifications back onto the developer, Oracle Composer, in conjunction with Metadata Services (MDS), provides a runtime editing tool that enables business users to edit application pages. Changes made to the page at runtime are saved as metadata, separate from the base application definitions. This eliminates the need to revise the application and redeploy it to the production environment.

Making Pages Editable at Run-time

The Oracle Composer tag library provides design-time components that you can add to a page in Oracle JDeveloper to enable page editing at runtime. When you create a page with Composer components at design time, at runtime Oracle Composer provides options for entering page edit mode and modifying the page according to your requirements.

Upon creation of the page, by default, it is not customizable, i.e. user cannot press “Ctrl + Shift + E” to edit the document or page. This is made possible only by the “page customizable” component, which is available within the “Component Palette”. Adding a Page Customizable component to the page ensures that Oracle Composer is invoked when users switch to “Edit” mode of the page.


Earlier in the Workshop lab, you created an “employeedashboard.jspx” and added page level security, so that only employees of Avitek assigned the Employees role and logged in can view the page.

In the following activities, you will make the Employee Dashboard page editable, then invoke Oracle Composer to add one of the many portlets / taskflows to the page. In this particular example, you will add one of the many Content Management options.

The screen capture below depicts the “Document Manager” option which displays a list of UCM managed content with a top-level folder view.


80

Making a Page Customizable Step-by-step Procedures - The Employee Dashboard

(1) In JDeveloper, open “employeedashboard.jspx” and view page in Source mode.

(2) In the Component Palette, choose Oracle Composer from the top drop down menu.

(3) Drag and drop the “Page Customizable” component onto the content facet, <f:face

name="content">, in "employeedashboard.jspx"; <f:face name="content">.

(4) You can also view the Structure pane for "employeedashboard.jspx" and view pe:pageCustomizable;


81

which should appear under af:form - af:pageTemplate - f:facet - content.


(6) Right-click index.html and choose Run your application.

Customizing Your Portal using Composer Step-by-step Procedures

(1) Log into your portal as weblogic/weblogic1.

(2) Navigate to the Employee Dashboard page.

(3) Press CNTRL+SHIFT+E.

(4) Click the Add Content button.


82

(5) Choose Content Management.

(6) Click Add icon for Document List Viewer.

(7) Click Close.

(8) Click the first Edit; wrench icon.


83

(9) Choose the Content from a Selected Folder icon.

(10) Click the browse icon for the Starting folder path and choose the UCM - Contribution Folders -

AvitekFiles - My Documents folder and click OK.

(11) Click the Preview button to preview while still in Edit mode.

(12) Click Save and Close.

(13) If desired, you can click Add Content again to add a 2nd example to the page; maybe a view of the

managed News Releases in UCM.


84

USE CASE 8 – ADDING ANNOUNCEMENTS AND

DISCUSSIONS


Add discussions and announcements to the portal

Announcements and Discussions

Oracle WebCenter Discussion Server provides the ability to integrate discussion forums and announcements into your applications. A connection to the Discussion Server was made in the previous Use Case: Making Connections to Various Sources.

Announcements offer a quick, convenient way to create and distribute messages. The Announcements service is integrated with many WebCenter services, such as the Activity Stream, RSS, Search (to search announcement text), Instant Messaging and Presence services. You can use link announcements to other services, such as Events or Discussions. Below is an example of how you can use announcements:

Suppose your company is announcing a new product. You can use this services to announce the

availability of a new product or feature. You can link the announcement directly to a discussion

forum, where potential customers can ask other customers about the product. Or you can link to an

instant messenger to speak directly with a customer service representative to purchase the product.

Discussions enable users to post, respond to, and preserve topical information in discussion forums. Users post topics to a discussion forum, and other users post information relevant to those topics. All of this information is preserved within the forum. The Discussion Service provides a wide variety of task flows for viewing and participating in discussions ranging from Discussion Forums to watching recent and most popular topics.


The screen capture below depicts a Discussion Forum on the Avitek portal with 3 active Discussions.


85

Adding a Discussion Forum Step-by-step Procedures

(1) Open to default-navigation-model under “Portal → WebContent → oracle → webcenter →


(2) Click the Add icon and choose Link.

(3) Enter the Id as “mydiscussion” and choose Type of “TaskFlow”.

(4) Click the browse icon for the URL field. This opens dialogue window.


86

(5) Choose “Resource Palette” from the left frame on the dialogue box.

(6) Expand the node(s) “My Catalogs → WebCenter Services Catalog → Task Flows”.

(7) Scroll down and select “Discussion Forums”, click “OK” to confirm.

(8) On default-navigation-model.xml, in “URL Attributes” section change the display value to

“Discussions”. Click “Save All”.


(10) Log in as weblogic / weblogic1.

(11) Navigate to the Discussion Forum node to view Discussions and create new forums.


87

Adding Announcements Step-by-step Procedures

(1) The Announcements page( announcments.jspx) was created in the Use Case 3 - Pages and

Navigation.

(2) The Announcements page was also added to the Page Hierarchy in the same use case underneath

Products. The screen capture below shows Announcements under Products in pages.xml.

(3) In JDeveloper, open “announcements.jspx”.

(4) From the Component Palette, choose Oracle Composer and drag Page Customizable onto <f:facet

name="content">.

(5) Open Resource Palette from right-frame on JDeveloper.

(6) Scroll down “WebCenter Service Catalog → TaskFlows → Announcements”.


88

(7) Drag and drop “Announcements” taskflow on the “announcements.jspx” page, as a “Region”. Click

“OK” to confirm.

(8) The Confirm Add ADF Library dialogue appears.


89

(9) Click All Library.

(10) Click OK .

(11) The following code has been added to the Announcements.jspx page.


(13) Navigate to Products - Announcements.


90

USE CASE 9 – USING MASH-UPS


Understand the concept of mash-ups

Create a mash-up includes creating a data control, a taskflow, and adding the taskflow to a page

Mashup Introduction

Business mashups are visualizations created by gathering data from various data sources and publishing the gathered data using different layouts such as forms, tables, and graphs.

Business mashups are reusable components that you can create or edit at runtime. A mashup can be an ensemble of multiple UI widgets that interact with each other. Each component in a business mashup could be working against a different data source such as SQL, Web Services, or XML. A mashup can display data retrieved from a data source as a graph or table, or write to a data source using a form.

Oracle WebCenter provides a powerful way for developers, administrators, and power users to create mashups in the running portal or social and collaborative application without bringing the system to a halt. A fully-integrated data publisher enables you to perform the following tasks:

Create data controls to retrieve information from different data sources.

Create mashups by consuming data controls in task flows or application pages.

Provide users the flexibility to customize their view of a mashup.


You will create a mashup that queries a database and displays the data as a Read Only table with filtering and sorting options.


91

Create New Page Step-by-step Procedures

(1) Open JDeveloper from its installed location.

(2) Open application AvitekDemo.

(3) Expand nodes “Portal → Web Content → oracle → webcenter → portalapp → pages”.

(4) Right-click and create a new page “carsales.jspx”.

(5) View the page in source mode.

(6) From the “Component Palette → Oracle composer”, drag and drop “Page Customizable” component

on to <f:facet name="content"> to make the page editable at run-time.

(7) Open pages.xml Add the page to “pages.xml”, in order to make it visible and navigable at run-time.

(8) Open to pages.xml under “Portal → WebContent → oracle → webcenter → portalapp → page

hierarchy”.

(9) Add the new Car Sales page to the Page Hierarchy as seen below.


92

Create a Data-Source Step-by-step Procedures

(1) Open the WebLogic Console by browsing to URL “http://localhost:7101/console”.

(2) Login as “weblogic/weblogic1”.

(3) In Domain Structure left hand pane, navigate to Services - Data Sources.

http://localhost:7101/console


93

(4) Select “New → Generic Data Source”. It opens a wizard to create a data source.

(5) Enter “Name” of the data source as “oradb11gR2”, enter JNDI Name as “jdbc/oradb11gR2” and

choose “Database Type” as Oracle.

(6) Click “Next”.

(7) Define “Connection Properties” of Database Name as “owcdb01”, Host Name as “owcvm03”, Port as

“1521”, Database User Name and Password as “workshop/welcome1”.


94


(9) On the next screen, verify all the connection properties and click on button “Test Configuration”.

(10) Click on “Next” to continue.

(11) On the final screen, deploy the data source to the Default Server and Press Finish.


95

Creating Data-controls Step-by-step Procedures

(1) Open WebLogic Admin Console by navigating to

“http://localhost:7101/AvitekDemo/faces/admin”.

(2) On the Resources tab, click on the “Data Controls” under Mash ups.

http://localhost:7107/AvitekDemo/faces/admin


96

(3) Click “Create” button on the top.

(4) A wizard based “Create New Data Control” window opens. Choose “SQL”. The data-source

created in the weblogic console is automatically populated. Enter the password as “welcome1”.

(5) On the SQL Statement text area. Enter SQL as “SELECT CID, NAME, FORECAST, ACTUALS, FYEAR

FROM SALES”.

(6) Click “TEST” then “CREATE”.


97

(7) On the data control screen at administration console, choose “Edit → Show” option to make the

data control “Available”.

Create Task Flows Step-by-step Procedures

(1) Click on “TaskFlows” under the MashUps.

(2) Click on “Create” button to “Create New Task Flow”.

(3) Enter Name as “Car Sales TaskFlow”, Choose “Blank” taskflow (since our query does not have any

parameters).

(4) Click “Create” to continue.


98

(5) Choose “Edit → Show” to make the task-flow available.

(6) Now, do “Edit → Edit”. This enables you to add content to the task-flow based on webcenter

services.

(7) Click on “Add Content”.

(8) Choose “Mash-Ups”.

(9) Then choose “Data Controls” - “Car Sales”.


99

(10) Add “Car Sales” data-control as a table to the taskflow by pressing “Add”.

(11) This starts the “Create Table” wizard.

(12) Choose “Read-only Table”.

(13) Enable Row Selection and Sorting in Behavior options.



100


(16) Select CID column, enter a Column Header of SL NO and Display As of Output Text.

(17) Select NAME column, enter Column Header of CAR MAKE and Display As of Output Text.

(18) Select FORECAST column, enter Column Header of FORECAST and Display As of Output Text.

(19) Select ACTUALS column, enter Column Header of ACTUAL SALES and Display As of Output Text.

(20) Select FYEAR column, enter Column Header of FISCAL YEAR and Display As of Output Text.


101

(21) Click "Create".

(22) One can see the output of the same on the task-flow window.

(23) Press “Close” on right hand corner to return to administration console.

Adding A Task Flow to A Page Step-by-step Procedures

(1) On the administration console, click Pages link to view all the pages.

(2) Click on the “Car Sales” page.

(3) “Car Sales” i.e. carsales.jspx is opened in the browser.

(4) Press “Crtl + Shift + E” to edit the page at run-time.


102

(5) Click “Edit” button to edit the page.

(6) Press “Add Content” button and choose “Mash-Ups” from the Add Content pop-up.

(7) Open the “Mash-Ups” and then “Task Flows”.

(8) Open “Task Flows” and “Add” carsales task-flow.


103

(9) Click “Close”.

(10) Press “Ctrl + Shift + E” to exit the edit mode on carsales.jspx and view the page.