Theme in WPS 7.0

One of the biggest change in the WebSphere Portal Server 7.0 is that it has a new theme called PageBuilder2(CSA2) theme, which has a different architecture that allows you to write theme in .html and use webdav,.. I wanted to learn how this theme works and how different pieces fit together, and these are my notes

Until version 6.1 source code for all the different themes that were shipped with WebSphere portal used to be located in wp_profile/installedApps/localhost/wps.ear/wps.war/themes/html/ directory, so i went to check that directory first and it seems that now that directory is almost empty, this is the default content.



Now it only as Default.jsp and CloseWindow.jsp. If you open the Default.jsp you will notice its much simpler and smaller compared to previous versions and from the comment it looks like this is the fallback minimal version of theme which will get called if your actual theme does not work and it gives you chance to recover.

So i did full export of websphere portal using xmlaccess and searched for <theme> element and i can find 4 theme elements with PageBuilder2 theme set as default theme

<theme action="update" active="true" context-root="/PortalTheme" default="false" defaultskinref="ZK_CGAH47L0085810IAHU76SD20S4" 
domain="rel" objectid="ZJ_CGAH47L0085810IAHU76SD20H0" resourceroot="Portal" uniquename="ibm.portal.theme.Portal">
 <localedata locale="en">
  <title>Portal</title>
 </localedata>
 <allowed-skin skin="ZK_CGAH47L0085810IAHU76SD20S2" update="set"/>
 <allowed-skin skin="ZK_CGAH47L0085810IAHU76SD20S4" update="set"/>
 <allowed-skin skin="ZK_CGAH47L0085810IAHU76SD20S6" update="set"/>
 <parameter name="com.ibm.portal.theme.hasBaseURL" type="string" update="set"><![CDATA[true]]></parameter>
</theme>

<theme action="update" active="true" context-root="/PageBuilder2" default="true" defaultskinref="ZK_CGAH47L00OES90IAH10FQR3KJ2" 
domain="rel" objectid="ZJ_CGAH47L00OES90IAH10FQR3KJ6" resourceroot="PageBuilder2" uniquename="csa2.theme">
 <localedata locale="en">
  <title>Page Builder</title>
 </localedata>
 <allowed-skin skin="ZK_CGAH47L0085810IAHU76SD20S5" update="set"/>
 <allowed-skin skin="ZK_CGAH47L00OES90IAH10FQR3KJ2" update="set"/>
 <parameter name="com.ibm.portal.themetype" type="string" update="set"><![CDATA[CSA2]]></parameter>
 <parameter name="theme.capability.dojo" type="string" update="set"><![CDATA[1.4.3]]></parameter>
 <parameter name="theme.capability.oneUI" type="string" update="set"><![CDATA[2.1]]></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[dav:fs-type1/themes/PageBuilder2/]]></parameter>
</theme>

<theme action="update" active="true" context-root="/themes" default="false" defaultskinref="ZK_OGFLMKG108IGF0IQCG6O9610O3" 
domain="rel" objectid="ZJ_OGFLMKG108IGF0IQCG6O961045" resourceroot="defaultTheme" uniquename="com.ibm.portal.mashup.theme.defaultTheme">
 <localedata locale="en">
  <title>Breadcrumb - Free Form Layout </title>
  <description>Breadcrumb - Free Form Layout</description>
 </localedata>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O9610O1" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O9610O2" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O9610O3" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O9610O4" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O9610O5" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O9610O6" update="set"/>
 <parameter name="com.ibm.portal.themetype" type="string" update="set"><![CDATA[mashup]]></parameter>
 <parameter name="preview-url" type="string" update="set"><![CDATA[preview.png]]></parameter>
 <parameter name="com.ibm.portal.themestructure" type="string" update="set"><![CDATA[mashup]]></parameter>
 <parameter name="com.ibm.mashups.theme.body.class" type="string" update="set"><![CDATA[mashups]]></parameter>
</theme>
<theme action="update" active="true" context-root="/themes" default="false" defaultskinref="ZK_OGFLMKG108IGF0IQCG6O961041" domain="rel" 
objectid="ZJ_OGFLMKG108IGF0IQCG6O961043" resourceroot="defaultThemeColumned" uniquename="com.ibm.portal.mashup.theme.defaultThemeColumned">
 <localedata locale="en">
  <title>Breadcrumb - Column Layout</title>
  <description>Breadcrumb - Column Layout</description>
 </localedata>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O961040" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O961041" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O961042" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O961044" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O961046" update="set"/>
 <allowed-skin skin="ZK_OGFLMKG108IGF0IQCG6O9610O7" update="set"/>
 <parameter name="com.ibm.portal.themetype" type="string" update="set"><![CDATA[mashup]]></parameter>
 <parameter name="preview-url" type="string" update="set"><![CDATA[preview.png]]></parameter>
 <parameter name="com.ibm.portal.themestructure" type="string" update="set"><![CDATA[mashup]]></parameter>
 <parameter name="com.ibm.mashups.theme.body.class" type="string" update="set"><![CDATA[mashups]]></parameter>
</theme>

The xmlaccess export of the portal has 4 themes

1. Portal


2. PageBuilder


3. Breadcrumb - Free Form Layout


4. Breadcrumb - Column Layout

But if you login into WPS admin console and go to Themes and Skins portlet you will notice that it displays only 2 themes one is Portal and other is Page Builder. Also when you try to change theme of your portal page you will see only these two themes there. I guess the themes with themetype equal to mashup cannot be applied to page and it does not show up in the Theme and skin portlet



It looks like the WPS 7.0 makes use of packaging theme in separate ear concept that was introduced in the WPS 6.1. The source code for theme is distributed in 3 separate .ear files. This the mapping for the theme name to the context root.

1. Portal -> /PortalTheme


2. Page Builder -> /PageBuilder2


3. Breadcrumb - Free Form Layout -> /themes


4. Breadcrumb - Column Layout -> /themes

Also it seems that the source code for the theme is distributed at different locations and all of them are installed inside PortalServer directory which is a read only directory.

• Portal : ${WPS_HOME}/installer/wp.ear/installableApps/wps_theme.ear


• Page Builder : ${WPS_HOME}/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear


• Breadcrumb - Free Form Layout : ${WPS_HOME}/base/wp.mmi.deploy/installedApps/MashupMaker_Integration.ear/theme.war


• Breadcrumb - Column Layout : ${WPS_HOME}/base/wp.mmi.deploy/installedApps/MashupMaker_Integration.ear/theme.war