Consolidated Steps for Creating Custom Themes in WP7

Abstract

ShowTable of Contents

HideTable of Contents

0.1 Approach 1: Using WebDav and separate WAR file
0.2 Approach 2: Using single WAR file

Noticed no where given consolidated steps to create Custom theme in WebSphere Portal 7, Following article gives consolidated steps to create custom theme.

Following are the two ways we can build the custom themes in the WP7.

Approach 1: Using WebDav and separate WAR file

Connect webdav client (like BitKinex or windows webfolders) to http://localhost:10039/wps/mycontenthandler/dav/themelist/
Copy the existing theme pagebuilder2(csa2.theme) folder to local drive
Change the theme title in the localized_en.properties file under the metadata folder and rename the entire folder (like customTheme)
Copy that entire folder back to the http://localhost:10039/wps/mycontenthandler/dav/themelist/ (Make sure localized_en.properties file is updated on WebDav after copying and that nls/theme_en.html exists)
Now you should able to see the new theme (customTheme) in the themes and skins admin portlet. But dynamic resources are still pointing to pageBuilder2 theme
Create war file based on the pagebuilder.war (location is \IBM\WebSphere\PortalServer\theme\wp.mashup.cc.theme\installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war ) make sure to change the "pagebuilder2" references
Deploy the war file to WebSphere Application Server with your own contextroot (/customTheme) while installing, make sure to start the application after installation
Connect to http://localhost:10039/wps/mycontenthandler/dav/themelist/customTheme/ using webDav client(customTheme folder is the one copied in step 3)
Follow the steps below to connect your theme with context root of installed WAR file
1. Export the existing theme using the following xmlaccess script

	<?xml version="1.0" encoding="UTF-8"?>

	<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0.xsd" type="export" create-oids="true">

	<portal action="locate">

	<theme action="export" objectid="*" />

	</portal>

	</request>

1. update the "customTheme" definition in exported results xml file as below (update the context root, resource root, and uniquename)

	<theme action="update" active="false" context-root="/customTheme" default="false" domain="rel" objectid="ZJ_618LOIP300NI60IE2H5GHD3001" resourceroot="customTheme" uniquename="customTheme">

1. Import the updated results xml file back to portal using xmlaccess.

Change the theme.html file (by copying it to local drive , modify and copy back to webdav) . Assuming customTheme is your context root and name of theme

	<link rel="dynamic-content" href="dyn-cs:id:head@tl:oid:csa2.theme"> replace with following   <link rel="dynamic-content" href=" res:/customTheme/themes/html/customTheme/head.jsp">

Do the same for the remaining jsp's using following path.

res:/customTheme/themes/html/customTheme/bannerNav.jsp

res:/customTheme/themes/html/customTheme/search.jsp

res:/customTheme/themes/html/customTheme/bannerCommonActions.jsp

res:/customTheme/themes/html/customTheme/status.jsp

res:/customTheme/themes/html/customTheme/tabNav.jsp

res:/customTheme/themes/html/customTheme/pageToolbar.jsp

res:/customTheme/themes/html/customTheme/asa.jsp

res:/customTheme/themes/html/customTheme/config.jsp

Note : you may need to do the same changes in nls/theme_en.html file to take your changes effect.

Now you theme is pointing to JSP's from the your custom WAR file and static resources from the webDav store, you can change the static resources directly using the WebDav directly.
Assign this theme to any portal page (page properties-->select this theme)

Approach 2: Using single WAR file

Create war file based on the pagebuilder.war (location is \IBM\WebSphere\PortalServer\theme\wp.mashup.cc.theme\installedApps\wp.mashup.cc.theme.ear\PageBuilder2.war ) . Make sure default.jsp conatins all logic to include your theme (like including the navigation and layout)

Deploy the war file with your own contextroot (/customTheme) while installing, make sure to start the application after installation

Run following XML using the xmlaccess to import the theme into portal

	<?xml version="1.0" encoding="UTF-8"?>

	<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0.xsd" type="update" create-oids="true">

	<portal action="locate">

	<skin action="update" active="true" objectid="NoSkin" uniquename="wps.skin.noSkin" resourceroot="NoSkin" >

	<localedata locale="en">

	<title>NoSkin</title>

	<description>A skin with no skin</description>

	</localedata>

	</skin>

	<theme action="update" active="true" defaultskinref="NoSkin" uniquename="custome.sivasecondtheme" resourceroot="sivasecondtheme" context-root="/sivasecondtheme">

	<localedata locale="en">

	<title>sivasecondtheme</title>

	</localedata>

	<allowed-skin skin="NoSkin" update="set"/>

	</theme>

	</portal>

	</request>

Assign this theme to any portal page (page properties-->select this theme)

Thanks & Regards
Siva R Vaka
Senior Websphere Portal & WCM Consultant
Siva R Vaka's Blog

Article information

Category:

Best Practices for WebSphere Portal, Deployment Scenarios for WebSphere Portal, Developing, IBM WebSphere Portal 7 Product Documentation, WebSphere Portal,

Tags:

custom theme, creating own theme, theme in WP7, creating theme using webDav

This Version:

Version 6

December 14, 2011

1:06:33 PM

by William D Jones

Attachments (0)

Versions (6)

Comments (10)

Submitted by Dinesh B Kumar on Jan 2, 2012 7:22:33 AM

Re: Consolidated Steps for Creating Custom Themes in WP7

Hi honghui lin,

I'm also facing the same issue for the custom theme. Can you please tell me how you fixed the issue for wp7.0.0.1?

Thanks in advance,

-Dinesh

Submitted by honghui lin on Oct 8, 2011 1:06:02 PM

Re: Consolidated Steps for Creating Custom Themes in WP7

hi,

I fix the problems

We should update portal to v7.0.0.1 and WebDAV service of portal will be more stable. And pagebuilder2 has different structure from v7.0.0.0, it has no configGlobal.jsp and configDynamic.jsp.

BTW, it is so difficult to customise theme.html because it container complex css. I think v6.x is more easy to customise.

Submitted by honghui lin on Oct 6, 2011 2:29:48 AM

Re: Consolidated Steps for Creating Custom Themes in WP7

Hi Siva, I met some problems following the first approach.

1. when I create new page with customer theme, the browser show javascript error,

消息: 'com.ibm.pb.themes' 为空或不是对象 (message: 'com.ibm.pb.themes' is null or is not a object)

行: 44 (line: 44)

字符: 1

代码: 0

URI: http://192.168.160.128:10039/wps/myportal/!ut/p/b1/pZDLCsIwEEU_aSbmZZZBaBIIhZSKNhvJQiSlj434_Vpx22Th7AbOGe4diDBIJZgkRBC4QlzSKz_SM69LmrY9itvJaMukRzx6w9Fpe-5UoNR4_ABDAegORb-t-viXj4HV8l8gFpGtQRnAH4A7o7F84RuyCGhaydBzaO0636GPcr8sr_1yjlPTKJfdyMIbfF0gMw!!/dl4/d5/L0lDU0lKSWdrbUNTUS9JUFJBQUlpQ2dBek15cXpHWUEhIS80SkNpRG9NTnRCanRCSGZsQ0dkaC9aN19DR0FINDdMMDA4TEc1MElBSFVSOVEzM0dMNS9ibkV6OjExNjExOTIyL3NhLk9L/

2.If I don't modify this url of the config.jsp, it will throw exception in the page when i use the page created with customer theme, JSPG0036E: can not found resource /themes/html/PageBuilder2/configGlobal.jsp and JSPG0036E: can not found resource /themes/html/PageBuilder2/configDynamic.jsp. Then I changed the uri to res:/saatheme/themes/html/saatheme/configGlobal.jsp and res:/saatheme/themes/html/saatheme/configDynamic.jsp, it will throw exception in the log, [11-10-6 14:20:38:765 CST] 0000003a ExceptionLogg W com.ibm.wps.logging.ExceptionLogger logThrowable(th) Enable traces for [com.ibm.wps.logging.ExceptionLogger=all] to see the exception stack trace for exception: [EJCBD0021E: can not process URI [spa:Z6_37KOTKG108NQ70I9BV4KTU3080/html/undefined] and parameter []]：[EJPEI0088E: can not found resource [undefined]。]].

and the browser will show java script error, null or not a object,

消息: 'this.eventService' 为空或不是对象 (is null or is not a object)

行: 3 (line: 3 )

字符: 401742

代码: 0

URI: http://192.168.160.128:10039/portal_dojo/layerLoader.jsp?path=v1.4.3/com/ibm/themes/PageBuilder2&name=theme&locale=zh

消息: 'com.ibm.pb.contextMenu' 为空或不是对象

行: 537

字符: 1

代码: 0

URI: http://192.168.160.128:10039/wps/myportal/!ut/p/b1/pY_LDoIwEEW_xS-YW1soXVYTSgPBQMBHN4aFMRgeG-P3C8QtZeHsJnPO5F5ydJMqFJKxkNGV3NB82mfzbseh6ebdhXcu01OVGoYoLySsOpxFWtUcESbgNgFHoxMhMyDKTACrk7pUBeem3C_-2jnf9PGXj0J4_Qx0IedF5gZ-AD8AK6Ph_7CE9AKab2SoAsqTsX9Q77o4Vra1L7H7AuZ5pD8!/dl4/d5/L2dBISEvZ0FBIS9nQSEh/

消息: 'com.ibm.data.Resolver' 为空或不是对象

行: 178

字符: 1

代码: 0

URI: http://192.168.160.128:10039/wps/mycontenthandler/!ut/p/digest!f2FtVmfhNgk8_sf-ySBsuA/dav/fs-type1/themes/saa.theme/js/init.js

消息: 'com.ibm.pb.themes' 为空或不是对象

行: 43

字符: 1

代码: 0

So what's wrony? thank you.

Submitted by dhanashree sathe on Jul 22, 2011 8:58:13 AM

Re: Consolidated Steps for Creating Custom Themes in WP7

I am facing the same problem, the config.jsp causes problems.I get a javascript error "com.ibm.themes" is null or not an object and my portlet vanishes. All the other jsp's in the custom theme can be referenced except for config.jsp.Has anyone got a solution for this ?

Submitted by anand k pathak on Apr 26, 2011 10:10:42 PM

Re: Consolidated Steps for Creating Custom Themes in WP7

Thanks Siva. The first approach works for me.

Though following changes are also required:

1) config.jsp points to 2 more resources:

> configGlobal.jsp

> configDynamic.jsp

like this

they must be made to point to your custom theme's files as mentioned by Siva ( using res:/../..)

2) web.xml

3) ibm-web-bnd.xmi

4) ibm-web-ext.xmi

Submitted by Vinoth P on Mar 17, 2011 7:12:04 PM

Re: Consolidated Steps for Creating Custom Themes in WP7

Hi, thanks for looking into it. i found what the issue was. i changed the resource root wrong.

i changed the folder name in main war folder to customTheme. However, i did not change it in the folder under themes/html. So it was looking like

/customTheme/themes/html/myTheme/*.jsp

i got the res link right.....

res:/customTheme/themes/html/myTheme/bannerNav.jsp

But, I had not changed the resourceroot in the xmlaccess theme update.....

default="false" domain="rel" objectid="ZJ_618LOIP300NI60IE2H5GHD3001"

resourceroot="customTheme" uniquename="customTheme">

It should have been

resourceroot="myTheme" uniquename="customTheme">

I resolved it and it worked.

Thanks.

Submitted by Vinoth P on Mar 17, 2011 5:22:43 PM

Re: Consolidated Steps for Creating Custom Themes in WP7

Hi Siva,

It worked for me on one server, after I tried deploying the custom war a couple of times. But, it is not working on other servers now.

What is happening is the portlets are not displaying. Just the tabs are displaying. There are no actual errors in the page.

But, Here are a couple of errors I found using Firebug Console

uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame ::

/portal_dojo/v1.4.3/dojo/dojo.js :: anonymous :: line 16" data: no]

com.ibm.pb is undefined

com.ibm.data is undefined

I can provide the specific steps I did in detail if necessary, if you can help me fix it.

Thanks in advance.

Submitted by siva r vaka on Mar 16, 2011 9:49:58 PM

Re: Consolidated Steps for Creating Custom Themes in WP7

Hi Vinoth, what error do you see when include the config.jsp from the custom theme(it works for me). Could you try to change the plugin id in plugin.xml under the customTheme/ webcontent/WEB-INF/ like id="com.ibm.portal.commontheme.customTheme" and see.

Submitted by siva r vaka on Mar 16, 2011 9:48:20 PM

Re: Consolidated Steps for Creating Custom Themes in WP7

Submitted by Vinoth P on Mar 15, 2011 4:21:21 PM

Re: Consolidated Steps for Creating Custom Themes in WP7

Hi, this has been a very useful article to develop and deploy a custom PageBuilder war.

By following Approach 1, I tried and changing the dynamic content url to res:/customTheme/themes/html/customTheme/*.jsp works for all but config.jsp. Pointing config.jsp to the custom war url does not load the portlets.

In Approach 1, point 6, make sure to change the "pagebuilder2" references. Can you point out the references to pagebuilder2 in the theme war, since config.jsp also points to it and changing it did not help.

Thanks in advance.

Copy and paste this wiki markup to link to this article from another article in this wiki.

Link:

Version ComparisonCompare version with version
	Version	Date	Changed by	Summary of changes
	This version (6)	Dec 14, 2011 1:06:33 PM	William D Jones	clarified step 7 of deploying to WAS.
	5	Mar 16, 2011 9:24:41 PM	siva r vaka
	4	Feb 23, 2011 4:10:16 AM	siva r vaka
	3	Feb 23, 2011 3:57:24 AM	siva r vaka
	2	Feb 23, 2011 3:48:11 AM	siva r vaka
	1	Feb 23, 2011 3:44:23 AM	siva r vaka