Sample XML for deploying custom Themes and Skins

Custom Theme and Skins creation involves creation of WAR file and then importing theme xml so that portal should have your theme entry under Themes and Skins section of portal. Once it is done, you can then apply thems to portal pages.

My first article on themes and skin was Creating custom Thems and Skins in WebSphere Portal
This article is second part to that because importing of theme xml comes after deployment of theme WAR.

Use this below xml to import your theme into portal.
P.S -  In below xml MyTheme referes to theme name which is actually a folder name under your theme project/<WebContent>/themes/html/MyTheme.

<?xml version="1.0" encoding="UTF-8"?>
<request
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="PortalConfig_6.1.0.xsd"
type="update" create-oids="true">

<portal action="locate">
<!--
Sample for deploying themes and skins in an XML script. Note that this
created only the database entries;
you still need to provide the rendering JSPs under the resource root
directories specified in the XML.
-->
<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="ibm.portal.theme.MyTheme"
resourceroot="MyTheme"
context-root="/MyTheme">
<localedata locale="en">
<title>MyTheme</title>
</localedata>

<!--
 There's only one skin that can  be combined with this theme.
-->
<allowed-skin skin="NoSkin" update="set"/>
</theme>
</portal>
</request>

Creating custom themes and skin in WebSphere Portal 6.1.x

Creating custom themes and skins in websphere portal are easy but we should aware of which is best practice and easy to maintain.
I had an experience of creating theme by manually creating a new folder ( of desired name for new theme) under

was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/markup

directory and then copy existing theme content to new theme folder and then finally make changes to required jspf, css, images as per business need.

But, creating a new theme by this approach doesn't come under best practice, because it requires you to export wps.war, update the war.war file and then again deploying the updated wps.war file.
So anytime if you want to make any changes, you will require to update and redeploy wps.war file.This made developing and managing custom themes and skins difficult.

Best Practise for creating custom themes and skins
With WebSphere portal 6.1, new themes and skins should be packaged in their own war file, or optionally ear file.Once you are done with packaging your theme into a war file, the theme war is deployed to WebSphere_Portal application server or cluster via WebSphere admin console.

So, here i am writing steps to create basic custom theme just to have header and footer. (You can later on enhance your theme as needed.)

1) In RAD, create a Dynamic Web Project.

2) Crate folder called themes and skins under webcontent

3) create html folder under themes.

4) create folder for your new theme ( ex:- MyTheme)

5) Create basic 3 jsp called Default.jsp, Header.jsp and Footer.jsp

6) Put your required css, images and js files on your file system and include them in your default.jsp.
( In actual dev, stag or prod portal, these css, images and js files should be placed on WebServer and then make change to path of img,css,js in default.jsp accordingly)

7) Put your header html section in Header.jsp and required footer html to Footer.jsp

8) Include, Header.jsp and Footer.jsp into Default.jsp.
( put tag <portal-core:screenRender/> in default.jsp, in between inclusion of header and footer jsp to render your portlets)

9) Export your project as war.

10) Deploy war to WebSphere Portal Application Server.
( Be sure to select WebSphere Portal in "Map modules to servers" step.
Once it is deployed, start your theme application and if it's clustered env, don't forget to sync your nodes.)

11) Next step will require to tell portal about new theme.
Go to PortalServer/doc/xml-samples/DeployThemeFromWebModule.xml
Make changes to DeployThemeFromWebModule.xml and import it back to portal from Portal Administration.

12) Verifying new theme. You should now see you new theme entry inside Themes and Skins section in portal admin.
and that's it, you are good to go. Create a new page and apply your theme.

Feel free to post comment if you have face any trouble in creating and deploying custom theme.

How to reflect theme changes immediately on WPS ?

You are creating a new theme and skins, making changes to your theme and skin jsp's, and want to see those changes immediately on portal?
You can do this by forcing application server and reflect your changes immediately.

For this, you will require to enable automatic JSP reloading..

Here you go....
1) Open file "ibm-web-ext.xmi", located under

<wp-profile>/config/cells/<cell-name>/applications/wps.ear/deployments/wps/wps.war/WEB-INF/ibm-web-ext.xmi

2) Find the following entry in above file

<?xml version="1.0" encoding="UTF-8"?>
<com.ibm.ejs.models.base.extensions.webappext:WebAppExtension xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:com.ibm.ejs.models.base.extensions.webappext="webappext.xmi" xmi:id="IBM_WPS_Ext" reloadInterval="3" reloadingEnabled="false" fileServingEnabled="true" directoryBrowsingEnabled="false" serveServletsByClassnameEnabled="false" preCompileJSPs="false">

3) Make reloadingEnabled value to true

4) Save the file and

5) Restart portal server.

After making these changes, you should be able to see your theme and skin change immediately...

Important :- To see changes to your JSP's that is being included by another(parent) JSP, you should make a change(you can simply enter and save jsp) to parent JSP to tell the sever that reload parent as well.

For example:- you can see that, head.jspf is included in your default.jsp
<%@ include file="./head.jspf" %>

Now, if you are making changes to head.jspf, and want to see your changes, you will also require to make a change in parent jsp, which is default.jsp.

Important Point:-
Enable automatic JSP reloading should be done for testing and development purpose only and should always be disabled for Production environment for performance issues.

Retrieving logged in user in theme

In WPS Portal, you might require to get logged in user in any of the theme jsp, like default.jsp.
Portal tag lib provides a tag to get logged in user

<portal-fmt:user attribute="value"/>

If the user is logged in, this tag returns one of the specified user attributes, value can be any user attribute defined to Member Manager.

But in some situations, you might require to get logged in user id in a java string and pass to some method call for further processing.
Here is the code snippet to get logged in user in any of theme jsp

<%
com.ibm.portal.puma.User portalUser= (com.ibm.portal.puma.User)request.getAttribute(com.ibm.portal.RequestConstants.REQUEST_USER_OBJECT);
String loggedInUser = (String) portalUser.get("uid");
%>