Pagebuilder2 theme and skin setup

1. Download WebDav client - http://www.jscape.com/products/file-transfer-clients/anyclient and setup following url

http://localhost:10039/wps/mycontenthandler/dav/themelist/
http://localhost:10039/wps/mycontenthandler/dav/skinlist/
http://localhost:10039/wps/mycontenthandler/dav/fs-type1/

2. Connect webdav to http://localhost:10039/wps/mycontenthandler/dav/themelist/
3. Copy the existing theme pagebuilder2 'csa2.theme' folder to local drive
4. Rename the csa2.theme folder to folder say csa2.Mytech, the csa2.Mytech will be used as uniqueName for theme
5. Open the C:\Temp\csa2.Mytech\metadata\localized_en.properties file in the Notepad and change the value of title property
   #

#Fri Feb 24 21:49:19 IST 2012

description=Mytech PageBuilder2 Theme

title=MytechTheme

6. Now use the WebDav client to upload the csa2.Mytech folder onto WebDav store at /themelist url
7. Connect webdav to http://localhost:10039/wps/mycontenthandler/dav/skinlist/
8. Copy the existing skin 'csa2.standard' folder to local drive
9. Rename the csa2.standard folder to folder say csa2.MyTechSkin, the csa2.MyTechSkin will be used as uniqueName for skin
10. Open the C:\temp\csa2.MyTechSkin\metadata\localized_en.properties file in the Notepad and change the value of title property

#

#Wed Mar 14 11:26:40 IST 2012

description=MyTech Skin

title=MyTechSkin

11. Now use the WebDav client to upload the csa2.MyTechSkin folder onto WebDav store at / skinlist url
12. Now you should able to see the new theme (MytechTheme) new skin (MyTechSkin) in the themes and skins admin portlet. But dynamic resources are still pointing to pageBuilder2 theme.

Note - If you don't see your theme and skin name here then that means the name is cached somewhere you can either restart the server or click on Add New Theme button and create new theme from there to see your theme name.

To customize theme or skin, need to edit the theme or skin files in WebDAV. To perform administrative customization (title, description, metadata) continue to use the /themelist or /skinlist entry point. If you want to customize the templates and static resources, use the /fs-type1/ entry point.

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

a)      Create a new dynamic project 2.4 named 'MytechTheme'

b)      Copy the contents of the original PageBuilder2 theme from the directory PortalServer/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war into a new WAR directory.

c)       Change the name of the PageBuilder2 directory (in ./themes/html/) to a name MytechTheme

d)      Remove the plugin.xml file from the WEB-INF directory but do not remove the decorations.xml file or the tld directory.

e)      Change the display-name in the web.xml file to a name MytechTheme

f)       Change the attribute in the ibm-web-bnd.xmi and the ibm-web-ext.xmi files to match the above name.

g)      Package this directory into a new WAR file and deploy the war file to WebSphere Application Server with your own contextroot (/Mytechtheme) while installing, make sure to start the application after installation.

Note - there will be numerous compilation error on jsps just ignore them and deploy, it will get resolve automatically.

14. Follow the steps below to connect the theme with context root of installed WAR file

a.       Export the existing themes and skins using the attached xmlaccess script 'ExportAllSkin_Theme.xml '. Use following command ' xmlaccess -url http://localhost:10039/wps/config -in ExportAllSkin_Theme.xml -out ExportSkinTheme.xml '

                                                               i.      Find the new theme and skin created in above steps and change the active='true', context-root and resourceroot attributes to match new WAR file. Add a uniquename and defaultskinref to theme. Find the modified XMLAccess in attachment 'MytechSkin_Theme.xml '.

                                                             ii.      Ensure that the default attribute is set to false.

                                                            iii.      Remove all the other tags from the xml file and import the modified file using xmlaccess.

b.      Change all the dynamic-content spots in csa2.Mytech\theme.html and csa2.Mytech\nls\theme_en.html to point to the dynamic resources in your new WAR file.

                                                               i.      <link rel="dynamic-content" href="dyn-cs:id:head@tl:oid:csa2.theme"> replace with following   <link rel="dynamic-content" href="res:/Mytechtheme/themes/html/MytechTheme/head.jsp">

                                                             ii.      Do the same for the remaining jsp's using following path.

                res:/Mytechtheme/themes/html/MytechTheme/bannerNav.jsp
                res:/Mytechtheme/themes/html/MytechTheme/search.jsp
                res:/Mytechtheme/themes/html/MytechTheme/bannerCommonActions.jsp
                res:/Mytechtheme/themes/html/MytechTheme/status.jsp
                res:/Mytechtheme/themes/html/MytechTheme/tabNav.jsp
                res:/Mytechtheme/themes/html/MytechTheme/pageToolbar.jsp
                res:/Mytechtheme/themes/html/MytechTheme/asa.jsp
                res:/Mytechtheme/themes/html/MytechTheme/config.jsp

c.       Now use the WebDav client to upload the csa2.Mytech folder onto WebDav store at / fs-type1 url

15. Assign MytechTheme theme to page (page properties-->select this theme)

Troubleshooting

Problem:  The context-root of your new web application can't be found

Solution: Make sure you started the new enterprise application.  Also, if you are accessing the portal via the Web server then make sure you re-generated the plugin file and distributed it to the web servers.  Also, make sure you mapped the WAR module to both your Portal server and your web server.

Problem: Your xmlacces import changed the base PageBuilder2 theme

Solution: Import the XML file from the export of all themes. This should restore all themes to their original state.

Problem: Updating the theme war after initial deployment causes errors (typically with com.ibm.wps.resolver.data.exceptions.URIProcessingIOException: EJCBD0021E)
Solution: Try changing the cache.expiration for themes and skins to 30 seconds on the WP Config Service resource environment provider (stop and restart portal). For example:

filestore.cache.expiration.0.re=themes/.*
filestore.cache.expiration.0.seconds=30

filestore.cache.expiration.0.re=skins/.*
filestore.cache.expiration.0.seconds=30

Sample XML Access for ExportAllSkin_Theme - https://www.box.com/s/948cb6bb4956ad1a4018

and for registering pagebuilder2 theme and skin -  https://www.box.com/s/4a768707faa3d1aaf1c7