How to create a custom page builder theme for websphere portal 7

Background Info:-
Page Builder theme is introduced in WebShere Portal Version 7. It leverages both client side  and server side aggregation.

Objective:- 

The main objective of this article is
1) To create a simple custom theme based on Page builder theme
2) Package it as War and and deploy it to Web sphere application server  using WAS Admin console
3) Register the theme with WPS using XML Access.


Assumptions:-

Web Sphere Portal is installed
WebDAV client is installed

Implementaion

Start the Portal sever and connect to the server using any webdav tool .
I downloaded BitKinex and installed .

start BitKinex and do a quick connect connect to the server as shown below.

http://[hostname]:[portnumber]/[portalContextroot]/mycontenthandler/dav/fs-type1/
user:- wpsadmin
password:- wpsadminpwd


wps is the default context root.



 once you are connected successfully  webdav will show the portal folders and your localfolders in to panes as shown in the below figure .




create a folder temp in your local c drive
In webdav  navigate to themes .
select PageBuilder2 theme and copy it to the temp folder on your local machine.

This gives you all the Static files like HTML,CSS,JS and Images  needed for the theme.

Now log on the Portal server and navigate to

Your {wp_install root}\PortalServer\theme\wp.mashup.cc.theme\installedApps\wp.mashup.cc.theme.ear\
and copy PageBuilder2.war folder to your local machine. 




Now we have the PageBuilder code and necessary static resources to build our theme. 


Deletion:-
since page builder theme already has skins installed we are going to make use of the same skins. so go ahead and delete skins folder inside PageBuilder2.war   folder. 
also delete plugin.xml file from WEB-INF folder


Changes:-

change  the name of the folder under \temp\PageBuilder2.war\themes\html from PageBuilder2 to ‘name of your theme’  say MyTestTheme


Change the id and display-name of the theme in web.xml. It should look somewhat like this. 

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="MyTestTheme" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
   
    <display-name>MyTestTheme</display-name>    
</web-app>

Now select open the pagebuilder2 folder which has all the static content , copy everything  under pagebuilder2 folder to  /PageBuilder2.war/themes/html/MyTestTheme\

Merge and copy all the folders if you get any warning message


Now we need to change the references to all the dynamic content spots in theme_[locale].html in  \PageBuilder2.war\themes\html\MyTestTheme\nls\



replace

<link rel="dynamic-content" href="dyn-cs:id:tabNav@tl:oid:csa2.theme">

  with

<link rel="dynamic-content" href="res:/MyCustomTheme/themes/html/ MyCustomTheme /tabNav.jsp">

do the same with all the other jsps

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

except for

<a rel="dynamic-content" href="dyn-cs:id:layout@tl:oid:csa2.theme"></a> 

now
Open config.jsp in \PageBuilder2.war\themes\html\MyTest\ and change

<r:dataSource uri="dyn-cs:id:configGlobal@tl:oid:csa2.theme" escape="none"> 

to 

<r:dataSource uri="res:/ MyCustomTheme/themes/html/ MyCustomTheme/configGlobal.jsp?max-age=-1" escape="none">

and 

<r:dataSource uri="dyn-cs:id:configDynamic@tl:oid:csa2.theme" escape="none"/>

To

<r:dataSource uri="res:/ MyCustomTheme/themes/html/ MyCustomTheme/configDynamic.jsp" escape="none"/>   

 now start making customizations to the theme to change the look and feel of it.


Package the Theme as War and Deploy to WAS

Navigate to PageBuilder2.war folder.

select all files under PageBuilder2.war and create a zip file and name it as MyTestTheme.zip
rename the zip file as MyTestTheme.war.


Login to was admin console using   https://localhost:10032/ibm/console/logon.jsp

navigate to Applications -> New Application

 Click New Enterprise Application 

 Browse to you WAR file and click Next

 Choose Fast Path and click Next

In Select Installation Options screen, type MyTestTheme_war as application name, leave everything as default and click Next

 In Map modules to servers screen select Websphere_Portal as server, check the checkbox next to you WAR and click Next

 In next screen type context root as /MyTestTheme

 In next screen just click Finish

 After the process finishes check whether you application is ‘started’. If not then start it

 Register the Theme with Portal Server

now that the theme is installed we have to make it available to portal using xmlaccess.


create a file like  DeployTheme.xml and add the below xml in the file.

copy the file to {wp_profileroot}/PortalServer/bin



<?xml version="1.0" encoding="UTF-8"?>
<!-- IBM WebSphere Portal/7.0 build wpnext_528_01 exported on Mon Dec 12 21:08:02 EST 2011 from subbupc/192.168.1.4 -->
<!-- 1 [skin ZK_CGAH47L008LG50IAHUR9Q330S4] -->
<!-- 2 [skin ZK_CGAH47L008LG50IAHUR9Q330S2] -->
<!-- 3 [skin ZK_CGAH47L008LG50IAHUR9Q330S6] -->
<!-- 4 [theme ZJ_CGAH47L008LG50IAHUR9Q330H0] -->
<!-- 5 [skin ZK_CGAH47L000CS30IAH1044E1KJ1] -->
<!-- 6 [skin ZK_CGAH47L008LG50IAHUR9Q330S5] -->
<!-- 7 [theme ZJ_CGAH47L000CS30IAH1044E1KJ5] -->
<request build="wpnext_528_01" type="update" version="7.0.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0.xsd">
    <portal action="locate">
        <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S4" uniquename="ibm.portal.skin.IBM"/>
        <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S2" uniquename="wps.skin.thinSkin"/>
        <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S6" uniquename="wps.skin.noSkin"/>
        <skin action="locate" domain="rel" objectid="ZK_CGAH47L000CS30IAH1044E1KJ1" uniquename="csa2.standard"/>
        <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S5" uniquename="csa2.noskin"/>
        <theme action="update" active="true" context-root="/MyTestTheme" default="false" defaultskinref="ZK_CGAH47L000CS30IAH1044E1KJ1" domain="rel"  resourceroot="MYTestTheme" uniquename="MyTestTheme">
           
            <localedata locale="en">
                <title>My Test Theme</title>
            </localedata>
           
            <allowed-skin skin="ZK_CGAH47L000CS30IAH1044E1KJ1" update="set"/>
            <allowed-skin skin="ZK_CGAH47L008LG50IAHUR9Q330S5" update="set"/>
            <parameter name="com.ibm.portal.themetype" type="string" update="set"><![CDATA[CSA2]]></parameter>
            <parameter name="theme.capability.oneUI" type="string" update="set"><![CDATA[2.1]]></parameter>
            <parameter name="theme.capability.dojo" type="string" update="set"><![CDATA[1.4.3]]></parameter>
            <parameter name="com.ibm.portal.layout.template.href" type="string" update="set"><![CDATA[dav:fs-type1/layout-templates/2ColumnEqual/]]></parameter>
            <parameter name="theme.capability.mashups.enabler" type="string" update="set"><![CDATA[2.4]]></parameter>
            <parameter name="com.ibm.portal.theme.template.ref" type="string" update="set"><![CDATA[res:MyTestTheme/themes/html/MyTestTheme/]]></parameter>
        </theme>
    </portal>
    <status element="all" result="ok"/>
</request>

Now run the following script in command prompt to import theme through xmlaccess

xmlaccess.bat -user wasadmin -password wasadmin –url http://localhost:10039/wps/config -in DeployTheme.xml -out ThemeOut.xml

once this command is run successfully you should see  <status element="all" result="ok"/>

at the end if the import is successful..

   Restart the Portal Server -> Login to Portal and navigate to Administration->Portal User Interface->Themes and Skins and you should see your new theme in the list.