Вы находитесь на странице: 1из 104

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

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 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 2 Customizing Look and Feel ....................................................................................22

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 Oracle Universal Content Management ...........................................................................................................................50

Use Case 5 Creating Connections to Various Sources ...............................................................50

ii

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

iii

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

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

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.

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

PRODUCTS PAGE

ABOUT US - NEWS RELEASES

ABOUT US - CONTACT US

MANAGEMENT DASHBOARD

JOE'S DASHBOARD

10

11

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.

12

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.

13

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

14

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

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

16

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.

17

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

18

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

19

(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-Portalcontext-root/index.html. (4) View the default layout and template used in your WebCenter portal application. Notice the page includes a Login.

20

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

21

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

Workshop Exercise Scenario


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.

22

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

23

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

24

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

25

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

26

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

27

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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/AvitekDemoAppPortal-context-root/index.html (5) Upon completing these exercises, your portal now has the Avitek look and feel.

28

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

29

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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)

30

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

31

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

32

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

(5) Click OK to continue.

33

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

34

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

35

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(6) Click Open. (7) Select the newly added Products node. (8) By default the Idand 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.

36

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

37

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

USE CASE 4 SECURING PAGES


In this Use Case, you will 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.

38

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

The following table shows the users and roles you will create. User bob julia joe Roles Employees Employees 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.

39

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

40

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

41

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

42

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

43

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

(4) Click OK to continue.

44

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

45

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(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 Idand Title are same as the page name i.e. employeedashboard.

46

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

47

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

48

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

49

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

50

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

51

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

52

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

53

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

54

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

55

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

USE CASE 6 GETTING CONTENT FROM UCM


In this Use Case, you will 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:

56

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

57

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

58

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

59

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

60

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

61

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

62

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

63

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

64

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

65

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

66

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

67

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

68

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

69

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(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 its 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".

70

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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. (6) Click Save All.

71

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

72

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(12)Enter the Id of aboutusedit. (13)Choose Type as Page. (14)Click on browse icon at URL field.

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

73

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(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. (21)Click on browse icon at URL field.

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

74

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

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

75

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

76

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

77

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

USE CASE 7 CUSTOMIZE YOUR PORTAL AT RUN-TIME WITH ORACLE COMPOSER


In this Use Case, you will 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 IDEbased 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.

78

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

Workshop Exercise Scenario


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.

79

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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;

80

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

(5) Click Save All. (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.

81

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(5) Choose Content Management. (6) Click Add icon for Document List Viewer.

(7) Click Close.

(8) Click the first Edit; wrench icon.

82

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

83

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

USE CASE 8 ADDING ANNOUNCEMENTS AND DISCUSSIONS


In this Use Case, you will 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.

Workshop Exercise Scenario


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

84

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

Adding a Discussion Forum Step-by-step Procedures


(1) Open to default-navigation-model under Portal WebContent oracle webcenter portalapp navigations.

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

85

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(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. (9) Right-click index.html and choose Run to test your application. (10)Log in as weblogic / weblogic1. (11)Navigate to the Discussion Forum node to view Discussions and create new forums.

86

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

87

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

88

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(9) Click All Library.

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

(12)Right-click index.html and choose Run to test your application. (13)Navigate to Products - Announcements.

89

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

USE CASE 9 USING MASH-UPS


In this Use Case, you will 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.

Workshop Exercise Scenario


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

90

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

91

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

92

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

93

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(8) Click Next. (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.

94

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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.

95

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

96

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

97

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

98

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

(14)Click Next.

99

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

(15)Click Next.

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

100

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

101

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

102

ORACLE WEBCENTER PS3 WORKSHOP

JAN 2011

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

103

Вам также может понравиться