Page 1 of 27

Oracle WebCenter Portal 11g Developer Workshop

Lab 10 – Creating a Custom Portlet

Page 2 of 27

Overview

WebCenter Portal offers a few different development strategies for transactional features; portlets and Task Flows being the most common. This workshop will go over the development and deployment of both portlets and Task Flows, so you can see the different characteristics of each technology. Both have the same goal: to enable development of transactional resources that will be published in a portal page. But both have very different characteristics. In this lab, you will see how to develop and deploy a portlet. Some of the characteristics of portlets are: Portlets are developed with industry standards; Task Flows are an Oracle standard. Portlets are deployed as WAR applications to a managed server. A portlet runs on a remote server so it can be consumed by several portals. Portlets have static look-and-feel (they do not share the CSS of the portal page). Because portlets run on separate servers, they usually have a slower performance

than Task Flows. At the end of this exercise, you will be able to: 1. Develop a new Portlet

2. Use Business Components to map database tables

3. Use visual components to display information

4. Deploy the portlet and register it to Portal

Page 3 of 27

Instructions

1. In JDeveloper, create a new application. Select the Oracle WebCenter Portlet Producer Application template.

2. Set the Application Name as OHPortlet.

3. Add the following templates to the application:

o ADF Business Components

o ADF Faces

Page 4 of 27

4. Right-click the Portlets project and select New… ADF Business Components -> Business Components from Tables.

5. Create a new connection to the HR schema.

Page 5 of 27

6. In the Entity Objects screen, click Query and select the Patient and Medication tables. Move them to the Selected column and click Next.

7. In the Updatable View Objects window, move all tables to the Selected column and click Next. Click Finish to close the wizard.

8. You can test if the relationship between the tables is being used by the Business Components that were created by right-clicking the AppModule and selecting Run.

9. Double click the MedicationPatientLink1 component. This component implements the master-detail relationship between the Patient and Medication tables. That way, we can see medications by patient.

Page 6 of 27

10. If your environment doesn’t have these master-details components, review your database tables before continuing. Close this window.

11. Right-click the Portlets project and select New… Portlets -> Standards-based Java Portlet (JSR 286).

Page 7 of 27

12. Define portlet name as PatientInfo. Uncheck the “Enable users to edit portlet content” checkbox. Click Next.

13. Set Portlet Title as Patient Information. Click Next.

Page 8 of 27

14. Select the view node and check the “Generate ADF-Faces JSPX” option.

15. Leave the remaining settings with their default values. Click Next until you reach the last window of the wizard and click Finish to create the portlet.

16. Double click the view.jspx file to edit it.

Page 9 of 27

17. In the Component Palette, expand the Layout tab and drag & drop a Panel Stretch Layout component to the page. This component has several pre-defined facets, but for this lab we will only use the top and center facets. Set the following properties for this component:

o StartWidth: 0px

o EndWidth: 0px

o TopHeight: 50px

o BottomHeight: 0px

o InlineStyle: height:450.0px;

18. Add a Panel Group Layout in the top facet and another Panel Group Layout in the center facet. Set the following properties for each:

o Panel Group Layout (center)

Halign: start

Valign: top

Layout: scroll

StyleClass: AFStretchWidth

InlineStyle: height:400.0px;

o Panel Group Layout (top)

Halign: center

Valign: middle

Layout: vertical

StyleClass: AFStretchWidth

19. Add an Output Text component to the Panel Group Layout – top facet.

20. Set the following properties:

o Value: Patient Information

o Color: Navy

o Font Family: Tahoma

o Font Size: x-large

o Font Weight: bold

o Vertical Align: middle

o Text Align: center

21. In the Panel Group Layout – center facet, add a Panel Group Layout (vertical), and inside this one, add another Panel Group Layout (horizontal). Set the StyleClass property of both as AFStretchWidth and InlineStyle as height:400.0px;.

Page 10 of 27

22. Inside the Panel Group Layout – horizontal, add 2 Panel Group Layout components (both vertical). Set the width property of the first Panel Group Layout component as 500px, and the second as 400px. Set the height property to both as 400px.

23. Your Structure Panel should look like this:

24. In the Panel Group Layout – vertical (ID pgl6), add a Panel Splitter component. Set the following properties:

o Orientation: vertical

o Splitter Position: 100

o Disabled: True

o InlineStyle: width:400px; height:400px;

25. In the Panel Group Layout – vertical (ID pgl5), add a Panel Box component. Set the Text property as Patient Data. Set the InlineStyle as height:400px;.

Page 11 of 27

26. Expand the Data Controls tab, select the PatientView1 data control, drag and drop it into the Panel Box component. Select Form -> ADF Form.

27. In the Edit Form Fields screen, change the PatientId, PatientFirstName and PatientLastName to be ADF Output Text w/ Label. Also, remove the PatientPicture field and check the Include Navigation Controls option. Click OK.

Page 12 of 27

28. Set the labels according to the field. PS: Make sure to edit the Label property, not the Value. Expand the Input Text for the balance fields, select the convertNumber function and set the Type to currency.

29. In the Data Controls tab, expand the Operations folder and drag & drop the Commit operation next to the Last button. Select ADF Button.

Page 13 of 27

30. Select the Commit button and set the property Disabled to false.

31. In the Data Controls tab, select the MedicationView2 (located inside the PatientView1 data control), drag and drop it into the first facet of the Panel Splitter component. Select Table -> ADF Read-Only Table.

32. Configure the table like the image below and click OK.

Page 14 of 27

33. Set the labels and widths of the fields to see how they can best fit in the available space. If you’d like, you can also increase the width. For that you will need to configure the width parameter for the Table, Panel Splitter and Panel Group Layout components.

34. You can also remove the PatientID and DoctorID columns.

35. Drag and drop the MedicationView2 data control to the second facet and select Form -> ADF Form. Check the Include Navigation Controls option and click OK.

Page 15 of 27

36. Remove the First and Last buttons, drag and drop the Commit operation as an ADF Button, set the Label property as Save and the Disabled property as false.

37. In the MedicationView2 data control, expand the Operations folder and drag & drop the CreateInsert operation next to the Save button. Select ADF Button. Change the Text parameter to Create.

38. Don’t forget to set the labels in the form. Set the StyleClass property as height:210.0px;.

Page 16 of 27

39. We are now ready to test our portlet. Right-click the Portlets project and select Project Properties.

40. Go to the Java EE Application tab and change the Java EE Web Application Name and Context Root to ohportlet. Click OK.

41. Start the embedded server through the Run -> Start Server Instance menu. If this is the first time you execute the embedded WLS, a configuration screen will appear.

Page 17 of 27

42. Wait until the <Server started in RUNNING mode> appear in the log. You

can display the log through the View -> Log menu.

43. Right-click the view.jspx page and select Run.

44. The page will be displayed in the web browser.

Page 18 of 27

45. Browse through the records to test the navigation. Try creating a new medicine

for one the patients. Click the Save button to commit changes to the database. Make sure everything is working before continuing.

Preparing the Data Source

46. Before being able to deploy the portlet, we need to reconfigure the database connection (the app will need to use a Data Source for DB connection). Right click the AppModule and select Configurations…

47. Click on the Edit button and change the Data Source to jdbc/HRDS. Click OK.

Page 19 of 27

48. Select the AppModuleShared, click on Edit and change the Data Source to jdbc/HRDS. Click OK and OK again to close the configuration window.

49. Now we need to create the Data Source on WLS. Open Weblogic Console by browsing to http://server:7777/console/

50. Expand the Services node and click on Data Sources. In the data source list, click on New -> Generic Data Source.

Page 20 of 27

51. Set the Name as HRDS and the JNDI Name as jdbc/HRDS.

52. Click Next. Select the Oracle’s Driver (Thin) for Instance…

Page 21 of 27

53. Set the Connection information according to the image below:

Page 22 of 27

54. Click on the Test Configuration button. A Test Successful message should appear.

55. Set the targets as AdminServer, WC_Portlet and WC_Spaces.

56. Now the portlet is ready for deployment.

Page 23 of 27

Deploying the Portlet

57. Right-click the Portlets project and select Deploy -> New Deployment Profile.

58. Select WAR File from the list and click OK.

59. Set the name as ohportletwar and click OK.

60. Click OK and OK to close the configuration windows.

61. Right-click the Portlets project and select Deploy -> ohportletwar…

62. Select Deploy to Application Server and click Next.

63. If your server is not on your list, create a connection to it.

64. Select Deploy to selected instance…, and select WC_Portlet.

65. Click Next and Finish to deploy the portlet.

66. In the confirmation window, select Yes to deploy as a portlet container.

Page 24 of 27

67. Check the log window to see if the deployment was successful.

68. You can test the portlet by browsing to http://server:8889/ohportlet/

69. In this page, click on the WSRP v2 WSDL link. Keep the browser tab open.

Registering the Portlet

70. The portlet can be registered through WebCenter Portal. Login as weblogic and go to the Administration page.

71. Go to the Tools and Services tab, select Portlet Producers and click on the Register button.

Page 25 of 27

72. Set the Name as OHPortlet and the WSDL URL as:

o http://server:8889/ohportlet/portlets/wsrp2?WSDL

73. Click on Test to check the connection and OK to save the producer configuration.

Consuming the Portlet

74. Edit the OraHealth portal and create a page called Patient Info below Our Patients. Edit this page.

75. In the Resource Catalog pane, click on UI Components. Then, click on Portlets, and OHPortlet. Drag the Patient Information portlet to the page.

Page 26 of 27

76. Save the page and click on View Portal to view the page

77. Save the project and close JDeveloper.

Page 27 of 27

Oracle WebCenter Portal 11g Developer Workshop – LAB 10 Creating a Custom Portlet

September, 2014

Author: Denis Abrantes

Oracle Corporation

World Headquarters

500 Oracle Parkway

Redwood Shores, CA 94065

U.S.A.

Worldwide Inquiries:

Phone: +1.650.506.7000

Fax: +1.650.506.7200

oracle.com

Copyright © 2014, Oracle. All rights reserved.

This document is provided for information purposes only and the

contents hereof are subject to change without notice.

This document is not warranted to be error-free, nor subject to any

other warranties or conditions, whether expressed orally or implied

in law, including implied warranties and conditions of merchantability

or fitness for a particular purpose. We specifically disclaim any

liability with respect to this document and no contractual obligations

are formed either directly or indirectly by this document. This document

may not be reproduced or transmitted in any form or by any means,

electronic or mechanical, for any purpose, without our prior written permission.

Oracle, JD Edwards, PeopleSoft, Fatwire and Siebel are registered trademarks of Oracle

Corporation and/or its affiliates. Other names may be trademarks

of their respective owners.