Oracle WebCenter Portal 11g Developer Workshop Lab 04 Creating a Content Presenter Template Page 1 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 Page 2 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. Page 3 of 21
6. Right-click the portalapp folder and select New... -> General -> Folder. 7. Name the folder contenttemplates and click OK. Page 4 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. Page 5 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. Page 6 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; Page 7 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: Page 8 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) Page 9 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} Page 10 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 Page 11 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. Page 12 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. Page 13 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. Page 14 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. Page 15 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 Page 16 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. Page 17 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. Page 18 of 21
47. Save the page and click View Portal to see how the banner looks like: Page 19 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. Page 20 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. Page 21 of 21