Websphere portal Tutorials: custom theme

This config engine task is used to deploy theme static resources to webdav folders without actually using webdav client. (useful when promoting from dev to test or prod environments for administrators).

To deploy theme using Configuration task create a zip file with all your static resources organized by type in to folders. lets call it testtheme.zip

and copy this zip file to a temp folder on your server.

and execute the following command based on your operating system.

./ConfigEngine.sh webdav-deploy-zip-file -DTargetURI=dav:/fs-type1/themes/

     -DZipFilePath=/tmp/testtheme.zip

./ConfigEngine.bat webdav-deploy-zip-file -DTargetURI=dav:/fs-type1/themes/

     -DZipFilePath=/tmp/testtheme.zip

 you should also pass

WasUserid The WebSphere® Application Server user ID
WasPassword The WebSphere Application Server password
PortalAdminId The portal administrator user ID
PortalAdminPwd The portal administrator password

 as parameters if these values are not already specified in wkplc.properties file.

webdav-deploy-zipfile task by default will replace the existing contents of the specified

target folder with the contents in the zip file. if you want to avoid accidentally deleting

any of the necessary files/folders use optional UpdateMode paramater with value as merge

so that this taks will merge the contents of the zip file with the content thats already

there in the target folder.

the resulting command should me something like this.

./ConfigEngine.sh webdav-deploy-zip-file -DTargetURI=dav:fs-type1/themes 
-DZipFilePath=/tmp/testTheme.zip -DUpdateMode=merge

this task can also be used to deploy skins,iwidgets and layouts also using these

below values for  -DTargetURI

dav:fs-type1/layout-templates/

dav:fs-type1/iwidgets/myWidget/

dav:fs-type1/skins/

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"?>








<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.

Websphere portal Tutorials

Thursday, October 24, 2013

Deploy Theme static resources using configengine with out using webdav client

Friday, December 16, 2011

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