oracle webcenter portal 11g...page 6 of 21 11. the page will open in the visual editor. in the...

of 21

Oracle WebCenter Portal 11g Developer Workshop

Lab 04 – Creating a Content Presenter Template

of 21

Overview

In the previous lab, we used out-of-the-box components to publish documents into the portal. But let’s say we want to use a unique layout, or we want to publish content to the new portal with the same look-and-feel as the legacy portal. In this case, one option is to create Content Presenter templates. Content Presenter is an out-of-the-box Task Flow to publish content from the repository into the portal page. This component can use custom templates to display the documents in the page. The templates are JSF Fragment files (*.jsff) created in JDeveloper. These templates can use skins, images, javascript and any other web resource to present a rich experience for the portal users. In this lab, we will create the home banner for the OraHealth page. The banner will be a set of images that will alternate through javascript. These images will be placed under a folder, so users can easily make changes to the banner. At the end of this exercise, you will be able to: 1. Create a new Content Presenter Template

2. Choose the correct template definition

3. Add visual elements to represent the content items

4. Upload the template to the portal

of 21

Instructions

1. Open JDeveloper and the DesignWebCenterSpaces application.

2. Right-click the WebCenterSpacesResources project and select Project Properties.

3. Expand Project Source Paths, go to Web Application and open the Excluded tab.

4. Select the oracle\webcenter\portalapp item and click on Remove.

5. Click OK. The portalapp folder should appear in the project structure. If it doesn’t, click the Refresh button.

of 21

6. Right-click the portalapp folder and select New... -> General -> Folder.

7. Name the folder contenttemplates and click OK.

of 21

8. You can delete the txt file that was created with the folder.

9. To create the template, right-click the contenttemplates folder and select New -> JSF -> JSF Page Fragment.

10. Set the name as OHBanner.jsff and click OK.

of 21

11. The page will open in the visual editor. In the Component Palette, change the catalog to WebCenter Portal – Content Display Templates.

12. The Template Definition we will use is the Content List Template Def, because we will be working with more than one content item. For a template that will display a single content item, use the Content Template Def.

13. Drag and Drop the Content List Template Def into the jsp:root tag. Again, you can use the Structure Panel to edit the page more easily.

of 21

14. The Content List Template Def has an attribute called var. It defines the variable which holds the collection of the items that will be rendered by the template.

15. Select the Content List Template Def. In the Property Inspector, set the Var property as nodes.

16. In the Component Palette, change the catalog back to ADF Faces, expand the Layout tab and add a Panel Group Layout inside the Content List Template Def. Set the following properties to the Panel Group Layout:

o Valign: top

o Layout: vertical

o InlineStyle: width:988px; height:375px; overflow:hidden;

of 21

17. In the Operations tab of the Component Palette, drag and drop a Resource component into the Panel Group Layout. Set the following properties:

o Type: css

o Source: http://server:7777/webcenter/content/conn/ucmserver/path/Contribution%

20Folders/OraHealth/css/banner.css

18. Add a Panel Group Layout inside the Panel Group Layout – vertical. Set the following properties:

o Layout: vertical

o StyleClass: home

19. Inside the new Panel Group Layout, add a Panel Group Layout, with the properties:

o ID: banner

o Layout: vertical

o InlineStyle: margin-bottom:0px;height:375px;

20. Inside the Panel Group Layout (ID=banner) add a Panel Group Layout, with the properties:

o Layout: vertical

o StyleClass: slideshow

21. Your Structure Panel should look like this:

of 21

22. Make sure you have all the components in place before continuing.

23. In the Component Palette, expand the Operations tab, drag an Iterator component and drop it inside the Panel Group Layout (ID pgl3)

of 21

24. Set the following properties to the Iterator:

o Var: node

o Value: #{nodes}

o Rows: 0

25. Drag and Drop an Image component inside the Iterator. Set the following properties:

o Source: #{node.url.renderUrl}

of 21

26. Finally, we need to add the javascript function that will rotate the banners. Go to the Source tab and find the <dt:contentListTemplateDef var="nodes"> tag.

27. Copy and paste the following script below this tag:

<af:resource type="javascript">

//Script block

if (window.addEventListener) {

/* Modern browsers */

window.addEventListener("load", onLoad, false)

}

else if (window.attachEvent) {

/* IE */

window.detachEvent("onload", onLoad)

window.attachEvent("onload", onLoad)

}

else {

window.onload = onLoad

of 21

}

function onLoad() {

$('.slideshow').cycle({

fx: 'fade',

timeout: 30,

delay: -30

});

}

</af:resource>

28. Save the file.

29. Now we will register this template as a Portal resource. Right-click the file and select Create Portal Resource.

of 21

30. Set the name as OHBanner. Change the Category Default View to false (as this will not be a default template) and define a View ID that is unique to this template (in this case, we will use orahealth.home.banner).

31. Click OK to create the resource.

of 21

32. Right click the OHBanner.jsff page again and select Export Portal Resource.

33. Set the name and save the file to your desktop.

of 21

34. Go to the Portal, click on the Administration link, go to Shared Assets and open the Content Presenter tab.

35. Click on the Upload button to import the new Content Presenter Template.

36. Make sure to check the Available checkbox to ensure the new template will be available in the Content Presenter wizard.

of 21

37. Now we need to upload a few banners to test. First, go to the Content Server (http://server:7777/cs), expand Browse Content -> Contribution Folders -> OraHealth and click on images. In the New Item menu, select New Folder.

38. Set Folder Name as homebanners and make sure the Security Group is Public. Click Save to create the folder.

39. You will find some sample banners in the lab_assets/Lab04_CP/ohbanners folder. Checkin these files into the homebanners folder we just created.

o PS: You can copy and paste through Windows Explorer

http://server:7777/cs

of 21

40. Now we can test the template. Go to the OraHealth home page (http://server:7777/webcenter/portal/orahealth) and press Ctrl+Shift+E to enter Edit Mode.

41. Click on the Add Box Below button ( ) to create a new box.

42. In the Resource Catalog, click on Content Management, then drag & drop a Content Presenter Task Flow to the top box.

43. Click on the Edit button ( ) to access the Content Presenter wizard.

44. Go to the Content tab, select Contents Under a Folder and click the Browse button.

http://server:7777/webcenter/portal/orahealth

of 21

45. Browse to the OraHealth/images folder and select the homebanners folder we created. Click Select.

46. Go to the Template tab and select the OHBanner template. Click Save to close the wizard.

of 21

47. Save the page and click View Portal to see how the banner looks like:

of 21

48. Make sure your banner is rotating. If it is not, check the source code to make sure the javascript calls are correct.

49. Save the project and close JDeveloper.

of 21

Oracle WebCenter Portal 11g Developer Workshop – LAB 04 Creating a Content Presenter Template

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.

oracle webcenter portal 11g...page 6 of 21 11. the page will open in the visual editor. in the...

Documents