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)
- 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 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
- 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>
<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>
- 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">
- 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 Siva ! The first approach works for me. Though one point is that I am not able to see changes on UI if I do some modifications in any JSP files in the new theme and then refresh the page. Though it works in PageBuilder theme if I modify the JSP files and refresh the page.
ReplyDeleteAny idea about this ?
These comments concern approach 2:
ReplyDelete1) Can you elaborate the steps needed to ensure "default.jsp conatins all logic to include your theme"
2) I notice that deployment this way does not produce a theme.html in the root of the WebDAV folder. Do you need this file?
This article has been very helpful. I followed all the steps and created a sample theme called mlsTheme but somehow I am getting error "java.io.FileNotFoundException: JSPG0036E: Failed to find resource /themes/html/mlsTheme/head.jsp". Looks like it is not picking up the changes I am making in theme_en.html under nls folder. Any help is appreciated. Thanks.
ReplyDeleteCouple of things you may need to validate , first touch the default.jsp and theme.html file and see if it pick up your change and also there is cache settings in wpconfig service validtae them.
Delete