CUSTOM THEME CREATION WEBSPHERE PORTAL CF5

Transcription

1 CUSTOM THEME CREATION WEBSPHERE PORTAL CF5 With CTC integration and social rendering Michele Buccarello 5/3/2013 This document describe how to create a custom theme for portal with CTC modules and Social Rending features.

2 Table of Contents ENVIROMENT CHECK... 2 Install Portall CF Install CTC V Enable Inline editing and rendering features... 2 EXTRACT THEME DYNAMIC AND STATIC PART... 3 Extract Dynamic part... 3 Extract Static part... 4 Preparing RAD for packaging the theme... 7 Preparation for dynamic part... 7 Preparation for static part Create the war in project Setting the access in web.xml Preparing the EAR for deployment CREATING DYNAMIC CONTENT SPOTS Manualy Creation Automatic Creation Install the Theme and Register in Websphere Portal Install the ear in console Register the theme in websphere portal Creating the xmlaccess script Using My Custom Script Testing the theme in a new page Author:Michele Buccarello Page 1

3 ENVIROMENT CHECK This guide coverage the creation of custom theme for websphere Portal 8 with CTC4 and social rendering feature. For create correctly the theme you need: 1) Have a local or remote installation with portal (I suggest to install CF05) 2) Install the CTC V4 3) Enable Inline Editing and Social Rending feature Install Portall CF05 For this part you must follow the documentation in the portal wiki at this link Install CTC V4 For this part you must follow the documentation in the portal wiki at this link Enable Inline editing and rendering features For this part you need run this two config engine: For inline editing go to in wp_profile_root/configengine and enter the following command: Windows: ConfigEngine enable-new-8001-features -DWasPassword=<password> - DPortalAdminPwd=<password> Linux, Unix, IBM, i z/os:./configengine.sh enable-new-8001-features -DWasPassword=<password> - DPortalAdminPwd=<password> For social rendering go to in wp_profile_root/configengine and enter the following command: Windows: ConfigEngine.bat action-enable-social-rendering -DPortalAdminId=portal_user_id - DPortalAdminPwd=portal_user_password -DWasUserid=was_user_id - DWasPassword=was_user_password Linux, Unix, IBM, i z/os:./configengine.sh action-enable-social-rendering -DPortalAdminId=portal_user_id - DPortalAdminPwd=portal_user_password -DWasUserid=was_user_id - DWasPassword=was_user_password Author:Michele Buccarello Page 2

4 EXTRACT THEME DYNAMIC AND STATIC PART The Websphere Portal theme is divided in two part: - Static Files located in webdav store - Dynamic Files located in the Default80 theme You need to copy this two type of files in two separated folders. For more organization I suggest to create a folder named CUSTOM THEME CF5 and in this folder you need to create two folder: - custom theme dynamic - custom theme static Extract Dynamic part The dynamic part in my case is located in: C:\IBM8\WebSphere\PortalServer\theme\wp.theme.themes\default80\installedApps\DefaultTheme80.ear \DefaultTheme80.war In this folder you see: You need to copy only the folders : - skins - themes - WEB-INF In the WEB-INF folder you need only the folder tld and the file decorations.xml, below the screenshoot of my Dynamic folder files. Author:Michele Buccarello Page 3

5 Extract Static part Download via webdav client or via url this folders: - Themes - Skins - Common-resources You can use these urls Author:Michele Buccarello Page 4

6 after you get the zip files you need to unzip in the static folder directory, see the images below. Go in the skinlist folder rename all folders by removing the part ibm.portal.80 and for every folder you need to delete : - Metadata properties folder - Metadata.properties file See the image below for the folder Hidden after renaming BEFORE Author:Michele Buccarello Page 5

7 AFTER Author:Michele Buccarello Page 6

8 Preparing RAD for packaging the theme In this part we make an EAR with two WAR, one for static part and one for dynamic part. Preparation for dynamic part 1) Create new web project select simple and Java EE and then press next Author:Michele Buccarello Page 7

9 2) Select as target runtime WebSphere Portal v8.0, web module version 3.0 and click on Add project to an EAR and write the name of the EAR, I use Custom8001ThemeCF5 3) Click on Web Module and click on Generate web.xml Author:Michele Buccarello Page 8

10 4) Now copy the resources located in the dynamic folder in the webcontent directory of the dynamic war, below you see the screenshot and a map of the file location : skins WebContent/skins themes WebContent/themes WEB-INF/decorations.xml WebContent/WEB-INF/decorations.xml WEB-INF/tld WebContent/WEB-INF/tld Author:Michele Buccarello Page 9

11 Preparation for static part In this part you need to create the WAR and setting the access in the web.xml file for static resources. Create the war in project 1) Create new web project select simple and Java EE and then press next Author:Michele Buccarello Page 10

12 2) Select as target runtime WebSphere Portal v8.0, web module version 3.0 and click on Add project to an EAR and write the name of the EAR, I use Custom8001ThemeCF5 3) Click on Web Module and click on Generate web.xml 4) Now copy the resources located in the static folder in the webcontent directory of the dynamic war, below you see the screenshot and a map of the file location : skinlist/hidden WebContent/skinlist/Hidden Author:Michele Buccarello Page 11

13 skinlist/ NoSkin WebContent/skinlist /NoSkin skinlist/ Standard WebContent skinlist /Standard NOTE: in the skinlist folder and themes folder I have the folder mobile 80, I have it only for e future expansion of this article. Setting the access in web.xml In this part you need to add the line highlighted for enable the access for anonymous user to the static files. <?xml version="1.0" encoding="utf-8"?> <web-app id="webapp_id" version="3.0" xmlns=" xmlns:xsi=" xsi:schemalocation=" <display-name>custom8001themestatic</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <context-param> <description>a regular expression that defines which of the resources in the WAR file can be served by the portal war datasource. </description> <param-name>com.ibm.portal.whitelist</param-name> <param-value>.*</param-value> </context-param> <context-param> Author:Michele Buccarello Page 12

14 <description>a regular expression that defines which of the resources in the WAR file cannot be served by the portal war datasource.</description> <param-name>com.ibm.portal.blacklist</param-name> <param-value>web-inf/.*</param-value> </context-param> </web-app> Preparing the EAR for deployment Right-click on the EAR project (in my case is Custom8001ThemeCF5) and select Java EE -- Prepare for deployment. 1. Create a new Dynamic Content Spot as per the instructions given in the table below : CREATING DYNAMIC CONTENT SPOTS In this part I describe two mode to create the dynamic content spots and new mode based on a jython script. I explain the Manualy creation for understand how the jython script work. Manualy Creation Log on to the WebSphere Integrated Solutions Console and follow this steps: - Go to Resources -> Resource Environment -> -> Resource environment providers -> WP DynamicContentSpotMappings. - Select Custom Properties. - Select New - Add the custom properties listed below to Name=CustomTheme8001CF5_head value=res:/customtheme8001dynamic/themes/html/dynamicspots/head.jsp At the link below you find the official documentations for creating the dynamic content spots 10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=V8+Update%3A+Supplemental+Document ation#action=opendocument&res_title=creating_a_dynamic_content_spot_wp8001&content=pdcontent At the link below you find all properties you need to create manualy 10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=V8+Update%3A+Supplemental+Document ation#action=opendocument&res_title=working_with_dynamic_content_spots_wp8001&content=pdcont ent Author:Michele Buccarello Page 13

15 Automatic Creation Edit the jython script attached with your own context root and your own name, for my understating I use this naming conventions: - CustomThemePortalVersionname_of_the_normal_spots, for example 80theme_head became CustomTheme8001CF5_head After you complete to edit the jython script you can simply run the script using the wsadmin console using this command: - Wsadmin.(sh bat) user adminuser password passworduser -f path_to_jython_script After complete registration of dynamic content spots you need to reboot the portal Install the Theme and Register in Websphere Portal In this part is described the installation process of the theme and the registration process in websphere portal via xmlaccess. Install the ear in console Follow the images below Author:Michele Buccarello Page 14

16 Click on Install button Click on select file and press next (depend if your portal is local or remote) Author:Michele Buccarello Page 15

17 Press next Press next Author:Michele Buccarello Page 16

18 Map the Websphere_Portal server and the webserver if you install the webserver. Press next Press finish Author:Michele Buccarello Page 17

19 Press save Start the application Author:Michele Buccarello Page 18

20 Author:Michele Buccarello Page 19

21 Register the theme in websphere portal In this part you register the theme via xmlaccess, you can create manualy the xmlaccess or use my custom xmlaccess script. Creating the xmlaccess script For create the xmlacces script you can follow this article: lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=IBM+WebSphere+Portal+Express+ 8+Product+Documentation#action=openDocument&res_title=Bind_your_theme_to_the_context_r oot_of_the_web_app_exp8&content=pdcontent Using My Custom Script For using mycustom xmlaccess script you need: 1) Modify all context-root= parameter with the correct context root of your ear 2) Modyfy the parameter name="com.ibm.portal.layout.template.href" for pointing to your layout directory 3) Modyfy the parameter name=" com.ibm.portal.theme.template.ref" for pointing to your theme directory 4) Run the script via command line or via graphic interface RegisterTheme8001.xml Command line: Open the command line or the shell and go in portal_server_root/bin in my case I go in this folder c:\ibm8\websphere\portalserver\bin and I run this command xmlaccess.bat -user wpsadmin -password wpsadmin -url -in..\doc\xml-samples\registertheme8001.xml out result.xml in the result.xml you need to see this line at the bottom of the file. <status element="all" result="ok"/> Author:Michele Buccarello Page 20

22 Graphic Interface Login as portal administrator on websphere portal and go in the administration tab then click on Import Xml link and click on Choose File. After you choose the RegisterTheme8001.xml click on import and verify the output Author:Michele Buccarello Page 21

23 Testing the theme in a new page It is important to test the custom theme in a specific page to do this you need to: - Create a page - Setting the custom theme - Testing if the page work correctly Author:Michele Buccarello Page 22

24 See the screen below Author:Michele Buccarello Page 23

25 Verify the if the edit mode works and if you are able to see the ctc portlets section Author:Michele Buccarello Page 24