Moving your WebSphere Portal theme to mobile, Part 1: Make your WebSphere Portal 6.1.x or 7.x theme modular

How to convert a theme to the modular architecture introduced in WebSphere Portal 8.0

IBM WebSphere® Portal 8.0 introduced a modular architecture that makes theme development easier. Once you complete your migration to Portal 8.0, modularizing your custom theme is usually the first task in adding new features to your Portal site. This article walks you through the steps to convert a Portal 6.1.5 theme to the modular architecture. Included are tips and time estimates to help you plan your theme conversion.

Share:

David Nixon, WebSphere Portal Chief Programmer, IBM

author photo - david nixonDavid Nixon is the Chief Programmer for WebSphere Portal 8.0.0.1. David has worked in Portal and Portal Express for many years and has contributed code in many areas including theme development, virtual portal features, and deployment scenarios.



17 September 2013

Also available in Japanese Portuguese

Introduction

When migrating from one Portal version to another, a best practice is to separate the Portal migration from the addition of new Portal features in your theme. The goal is to migrate your custom theme from the previous Portal version to the current Portal version as is, so that nothing new is added to your theme during migration. Because many of the new Portal features are surfaced through the Portal 8.0 theme, adding features is usually a theme development activity that takes place after the overall migration is complete and successful.

Different users add features to the theme in different ways:

  • One way is to add individual features to the custom theme. For instance, you can add tagging/rating by exposing the Dojo tagging/rating widget in your existing theme skin.
  • Another way is to start from scratch using the Portal 8.0.0.1 theme as a starting point. Some users choose this if they want to give their site a completely new look and feel.
  • A middle ground between these two approaches is to modularize your existing custom theme. The advantage to this approach is that, with a minimal effort, you can add features while maintaining the basic look and feel of your existing site. This article details this approach.

Prerequisites

IBM WebSphere Portal
This article is based on WebSphere Portal Version 8.0, and the 8.0.0.1 fixpack is required. After you migrate to 8.0.0.1, you will need to enable the new features using the "enable-new-8001-features" configuration task. See the WebSphere Portal documentation for installation instructions. And see the Readme for instructions on running the enable-new-8001-features task.

Web browser
I recommend that you use the latest version of Mozilla Firefox with the Firebug extension installed. However, any browser with CSS3 support will work. Most browsers now come with their own development tools built in, but examples in this article specifically reference Firebug.

WebDAV client
To update the WebSphere Portal theme, you need a WebDAV client. We use davfs2 on Linux. You can use any WebDAV client that WebSphere Portal supports. See Connecting to the Portal WebDAV with 8.0 for details.

Linux
Theme development can be done on any platform, but this article references tools found on most Linux distributions. Similar tools exist on Windows and other operating systems as well.


Getting started

The Portal InfoCenter discusses the advantages of the modular theme framework and how it works. It decouples feature enablement from the theme code itself. You can develop themes more easily with little knowledge about the details of how the underlying code for a feature works. Logical points are provided where modules can contribute data into a theme at run time, and then you can optimize those contributions by combining them where possible. You can combine multiple disparate remote sources into one request for greater performance.

You can start with any theme, but for this article, I use the "Tab Menu – Page Builder" theme as a convenient example. (This theme is also called the "Enhanced" theme, because that's the name of the EAR file in which it is deployed.) You can download the modularized version of this theme at the end of this article.


1. Copy the Portal 8.0.0.1 theme

To complete this step, follow the instructions in the InfoCenter ("Create a copy of the theme"). This copy of the 8.0.0.1 theme is our starting point for our "Modular Tab Menu" theme.

For this step, you must:

  1. Copy the static resources for your theme
  2. Copy the static resources for your skin
  3. Copy the dynamic resources for your theme
  4. Link the static resources to the dynamic resources for your theme
  5. Modify the dynamic resource references for your theme
  6. Modify the dynamic resource references for your skin

1a. Copy the static resources for your theme

Follow the instruction for copying the 8.0.0.1 theme resource from the themelist WebDAV. In our example, the themelist was mounted like this:

Listing 1. Mounting the themelist with WebDAV
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/themelist/ /mnt/portal/dav/themelist

As instructed in the InfoCenter, use any method you like for editing the localized_en.properties files. Since there are many language files, we used a sed script to do this.

Listing 2. Setting the theme name with sed
cd /tmp/ModularTabMenu/metadata
find . -name "localized_*.properties" | xargs -n 1 sed -i "s/title=.*\$/title=Modular Tab Menu/g"

This will make the theme name "Modular Tab Menu," regardless of the browser locale setting. This name is usually seen only by Portal administrators, but if you require translation, you can add the translations to the appropriate localized property file. For example, you might set the title in the localized_fr.properties to "Modulaire Menu Tab."

TIP: Some editors and tools create temporary files in the WebDAV that are not properly deleted. Clean up these zero-length files.
Listing 3. Clean up temp files from WebDAV with find
find /mnt/portal/dav/themelist/ModularTabMenu -type f -size 0 -delete
TIP: Verify that the copy from your local system to the WebDAV completed successfully.
Listing 4. Verify the WebDAV contents with diff
diff -rq /tmp/ModularTabMenu /mnt/portal/dav/themelist/ModularTabMenu

Verify and correct any differences that are reported.

1b. Copy the static resources for your skin

Follow the instruction for copying the 8.0.0.1 "Hidden" skin from the skinlist WebDAV. In our example, the skinlist was mounted like this:

Listing 5. Mounting the skinlist with WebDAV
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/skinlist/  /mnt/portal/dav/skinlist

In our example, I use "ModularTabMenuStandard" as the name of the directory created in the skinlist directory. Similar to above, I used a sed script to edit the localized*.properties files to set the title to "Modular Tab Menu Standard." Verify the files that were copied to WebDAV.

1c. Copy the dynamic resources for your theme

To complete this step, follow the instructions in the InfoCenter ("Copy the dynamic resources for your theme").

In the Download section of this article, you'll find a EAR file for this step.

TIP: The web application in the EAR file, and examples below, use the context root of "/wps/ModularTabMenu." However, you can use any context root that makes sense in your environment. For example, you could use a context root of "/yourco/ModularTabMenu" or even "/yourco/theme" or maybe just "/theme".

To complete this step, follow the instructions in the InfoCenter ("Binding your theme to the context root of the web app").

In the Download section of this article, you'll find an xslt file that simplifies the step for editing the output.xml.

Listing 6. Trimming the output.xml file
xsltproc CustomOnly.xslt output.xml > bindTheme.xml

The resulting bindTheme.xml file is considerably smaller and clearer than the original output.xml.

Listing 7. Sample bindTheme.xml

Click to see code listing

Listing 7. Sample bindTheme.xml

<?xml version="1.0" encoding="utf-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" build="wp8001CF05_001_18" type="update" version="8.0.0.1"
xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
  <portal action="locate">
    <skin context-root="/wps/defaultTheme80" uniquename="YOUR-UNIQUENAME-HERE" objectid="ZK_J15213K0J0EPD0IVLFLIDO1SG0"
    resourceroot="Hidden" action="update" active="true" default="false" domain="rel" type="default">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the resourceroot to the directory name of your skin-->
      <!--Use the skin OID ZK_J15213K0J0EPD0IVLFLIDO1SG0 in the allowed-skin tag in your theme-->
    </skin>
    <theme context-root="/wps/defaultTheme80" uniquename="YOUR-UNIQUENAME-HERE" action="update" active="true" default="false" 
    domain="rel" objectid="ZJ_J15213K0J0EPD0IVLFLIDO10G7" resourceroot="dynamicSpots">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the allowed skin to your new custom skin!-->
      <allowed-skin skin="YOUR-SKIN-OID-HERE" update="set"/>
    </theme>
  </portal>
</request>
Listing 8. Sample bindTheme.xml after making edits for Modular Tab Menu theme

Click to see code listing

Listing 8. Sample bindTheme.xml after making edits for Modular Tab Menu theme

<?xml version="1.0" encoding="utf-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" build="wp8001CF05_001_18" type="update" version="8.0.0.1"
xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
  <portal action="locate">
    <skin context-root="/wps/ModularTabMenu" uniquename="com.ibm.skin.modtabmenu.standard" objectid="ZK_J15213K0J0EPD0IVLFLIDO1SG0"
    resourceroot="ModularTabMenuStandard" action="update" active="true" default="false" domain="rel" type="default">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the resourceroot to the directory name of your skin-->
      <!--Use the skin OID ZK_J15213K0J0EPD0IVLFLIDO1SG0 in the allowed-skin tag in your theme-->
    </skin>
    <theme context-root="/wps/ModularTabMenu" uniquename="com.ibm.theme.modtabmenu" action="update" active="true" default="false"
    domain="rel" objectid="ZJ_J15213K0J0EPD0IVLFLIDO10G7" resourceroot="dynamicSpots">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the allowed skin to your new custom skin!-->
      <allowed-skin skin="ZK_J15213K0J0EPD0IVLFLIDO1SG0" update="set"/>
    </theme>
  </portal>
</request>

1e. Modify the dynamic resource references for your theme

To complete this step, follow the instructions in the InfoCenter ("Modifying the dynamic resource references for your theme").

For our example, we used a ConfigEngine task to simplify the creation of the custom properties for the WP DynamicContentSpotMappings REP.

Listing 9. Creating custom properties
ConfigEngine.sh modify-theme-dynamic-resource-references-80
 -DCustomThemePrefixName=modularTabMenu
 -DCustomThemeContext=/wps/ModularTabMenu

The modify-theme-dynamic-resource-references-80 task is available in the Portal 8.0.0.1 cumulative fix 7 or later.

Note: The task uses default values for all of the custom properties, so if your Portal context root is not /wps, you will need to update the references to /wps/themeModules to the appropriate value on your system.

For updating the theme*.html files, we mounted the fs-type1 directory and used a sed script to update them.

Listing 10. mounting the fs-type1 with WebDAV
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/fs-type1/ /mnt/portal/dav/fs-type1
Listing 11. sed script to update custom properties references
find . -name "theme*.html" | xargs -n 1 sed -i "s/80theme_/modularTabMenu_/g"

1f. Modify the dynamic resource references for your skin

To complete this step, follow the instructions in the InfoCenter ("Modifying the dynamic resource references for your skin").

Again, I used a sed scrip to make the edits to the skin*.html file.

Listing 12. sed script to update custom properties references
find . -name "skin*.html" | xargs -n 1 sed -i "s/80theme_/modularTabMenu_/g"

2. Add features to your theme

Now that the new theme is functional, create a page and apply the new "Modular Tab Menu" theme to it. At this point, the theme looks exactly like the Portal 8.0.0.1 theme. Now the real work begins.

Getting to this point took about 4 hours of work, not counting the time it took to write the xslt or the new ConfigEngine task. I'll continue noting time requirements to help you estimate the development costs for your own custom theme.

Turn on development mode

Now is a good time to turn on theme developer mode. This mode allows you to see changes faster since it avoids server restarts to clear the server side caches.

You can enable development mode by setting the resourceaggregation.development.mode property to true within the WP ConfigService resource environment provider (REP). The WP ConfigService REP can be found within the WAS console under: Resources > Resource Environment > Resource Environment Providers.

Slice your custom theme into parts

The original "Tab Menu – Page Builder" theme had lots of its code in the Default.jsp, so this is an easy place to start. My goal is to use as much of the Portal 8.0.0.1 theme as possible but restyle it to fit the older theme. I looked at Default .jsp to find three basic parts that I wanted to slice out and define as modules.

First, I looked for jsp parts. These are parts that are implemented in 8.0.0.1 theme as a jsp. Things like navigation and the theme header and footer are defined as a jsp. In the original "Tab Menu – Page Builder," these are all in the Default .jsp. However, in the 8.0.0.1 theme, these are separate and much more logical and maintainable pieces. These logical pieces are referenced as dynamic content spots in the Portal documentation and are much more flexible than plain jsp pieces. Read a full description of dynamic content spots.

Next I looked for JavaScript pieces. The original theme had both references to external JavaScript files and inline JavaScript in the Default.jsp itself.

Lastly I looked for css files that needed to be in the new theme.

The jsp files

The biggest change I needed to make was to the navigation. The original theme has Dojo-rich navigation with drop-down menus for child pages. The 8.0.0.1 theme does not use Dojo at all in view mode, so I also needed to add the Dojo modules to the theme, but more on that later. I also found the slice of Default.jsp that dealt with the "common actions" like login, logout, and help. I moved that slice of the jsp to "commonActions_pb.jsp" which, along with the rest of the theme, is available in the Download section of this article. To get the pencil icon working from the original theme, I tweaked the pageModeToggle.jsp.

Figure 1 shows Home, Administration, Applications, etc., which form the top navigation. The Welcome, Getting Started, etc. are part of the primary navigation. On the far right are the common actions and the pencil icon that toggles the page between view and edit mode. Also in this figure are the search input box, which I did not try to copy from the original theme. The search box in the original theme was very similar to the newer box in the 8.0.0.1 theme, so I kept the newer one.

Figure 1. Theme parts
Screen capture showing the top navigation and primary navigation bars of a Portal page

The Navigation jsp files

The Portal 8.0.0.1 theme has a very clean, easy-to-understand navigation.jsp, but I was not able to reuse it completely. I created two new jsp files to handle the top navigation and primary navigation. I copied the code and styling from the original Default.jsp to create topNav.jsp and primaryNav.jsp.

I modified the corresponding dynamic content spots to point to these new jsp files. See table 1 for details.

Table 1. New dynamic spots
Dynamic spot New mapping
modularTabMenu_topNav mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/topNav.jsp,smartphone@,tablet@
modularTabMenu_primaryNav mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/primaryNav.jsp?startLevel=1,smartphone@,tablet@
modularTabMenu_commonActions mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/commonActions_pb.jsp,smartphone/tablet@res:/wps/ModulaTabMenu/themes/html/dynamicSpots/commonActions.jsp

Learn more about dynamic content spots.

You might notice in the dynamic content spots and other areas that there are reference to smartphone and tablets. A future article in this series will cover those topics and show you how to make this theme responsive.

Once all the new dynamic spots are defined, it's time to look at the theme_en.html in the new theme. I edited this file to lay out the theme to match the original theme. For instance, in the original theme, the pencil icon is next to the search bar. I adjusted the html to get the general layout right, which did not take very long. However, at this point, the new theme does not work very well or look very nice since it is missing the JavaScript and css.

The JavaScript parts

Finding the relevant JavaScript files in the original theme was by far the most tedious and error-prone part of this process. A few of the JavaScript files were included in a jsp file, and a few bits were just inline in one of the jsp files. I used the Network tab in Firebug to see all the JavaScript files that were loaded by the original theme, but I ignored everything related to Dojo. I did not try to use the older version of Dojo from the original theme. The Portal 8.0.0.1 theme uses Dojo 1.7.2, so I stuck with that in the new theme.

There are four new JavaScript files for the new theme. I copied two files directly from the original theme. One file I created is based on the inline JavaScript in the original theme. And another file is a modified version of an IBM-supplied file. See Table 2 for details.

Table 2. New JavaScript files
File Details
menu_service.js Copied from Portal 6.1.5 wp_profile/installedApps/CELLNAME/wps.ear/wps.war/menu/menu_service.js to WebDAV location for new theme.
PageBuilderTheme.js Copied from wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/js/PageBuilderTheme.js to WebDAV location for new theme.
ibmPortalEnhancedTheme-nodojo.js Modified version of ibmPortalEnhancedTheme.js, which is found in Portal 8.0.0.1 in PortalServer/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/com/ibmPortalEnhancedTheme.js
modularTabMenu.js This holds the inline JavaScript found in the original theme.

I defined a module for all of these JavaScript files and placed the modules in WebDAV in the theme's contributions folder.

Listing 13. modularTabMenu.json – JavaScript contributions
{
  "modules":[
  {
    "id":"wp_modular_tabmenu",
    "contributions":[{
      "type":"config",
      "sub-contributions":[
      {
        "type":"js",
        "uris":[{
          "value":"/js/menu_service.js"
        },
        {
          "value":"/js/menu_service.js.uncompressed.js",
          "type":"debug"
        }]
      },
      {
        "type":"js",
        "uris":[
        {
          "value":"/js/ibmPortalEnhancedTheme-nodojo.js"
        },
        {
          "value":"/js/ibmPortalEnhancedTheme-nodojo.js.uncompressed.js",
          "type":"debug"
        }]
      },
      {
        "type":"js",
        "uris":[{
          "value":"/js/modularTabMenu.js"
        },
        {
          "value":"/js/modularTabMenu.js.uncompressed.js",
          "type":"debug"
        }]
      },
      {
        "type":"js",
        "uris":[{
          "value":"/js/PageBuilderTheme.js"
        },
        {
          "value":"/js/PageBuilderTheme.js.uncompressed.js",
          "type":"debug"
        }]
      }]
    }]
  }]
}

I then added this new module to the new profile. The new profile is a copy of the profile_full.json with only the additional module shown above and a new profile name.

This profile also needs to be set as the default profile for the theme. Edit WebDAV themelist/ModularTabMenu/metadata.properties, and set the resourceaggregation.profile to the new profile.

Listing 14. Set default profile
resourceaggregation.profile=profiles/profile_modulartabmenu.json

The CSS parts

Getting the styles right was the second most time-consuming part of this work. I spent a lot of time in Firebug switching between a browser window with the original theme and a browser window with the new theme, looking for differences and fixing them. My overall strategy was to avoid changing any styles that came with Portal 8.0.0.1. Instead, I added styles to override the 8.0.0.1 styles. I copied four css files directly from the original theme, and I created one new css.

Table 3. New CSS files
File Details
base.css Modified version from Portal 6.1.5 wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/base/framework/base.css to WebDAV location for new theme.
layoutTheme.css Copied from wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/defaultTheme/framework/layoutTheme.css to WebDAV location for new theme.
default.css Modified version from Portal 6.1.5 wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/defaultTheme/defaultTheme.css
modpb.css New file. This holds miscellaneous overrides to get the right look for the theme.

Iterate … JavaScript, CSS, theme.html

I spent a lot of time in Firebug, tweaking and reloading, and tweaking and reloading, etc. Now is the time to grab your caffeine of choice and plan to spend some quality time working on your Alt-TAB keyboarding skills. This was about 6 full days of work. I spent time with an on-screen pixel ruler, too, to get the header and other elements the right size.

It's helpful to turn on the debug trace to see individual requests while you are iterating.

Listing 15. Trace string for debugging
com.ibm.wps.resourceaggregator.CombinerDataSource.RemoteDebug=all

With this trace turned on, you can see the individual JavaScript and css files in Firebug. You can set this string by going to Administration > Portal Analysis > Enable Tracing. Set the string in "Append these trace settings" and click the "+" icon. Alternatively, you can set this string in the WebSphere Application Server administration console under Logging and tracing > WebSphere_Portal > Diagnostic trace service.

Project menu

One of the new features in Portal 8 is the ability to group a set of changes together into a project. The project can have many different changes including Web Content Management changes and changes to Portal pages. This feature is presented in the header area of the Portal 8 theme, so I added this feature to the new theme, but restyled it to fit aesthetically into the Modular Tab Menu theme.

The markup for the Project Menu is inserted into the page via a dynamic content spot in the theme*.html files. In the theme_en.html file (see the Download section), that spot is included. The spot is the same in the original 8.0.0.1 theme, but just moved around a bit for this theme.

Listing 16. Project Menu dynamic content spot in theme_en.html
<!-- displays the state of the current page -->
<div class="wpthemeRight modpbPageTools">
<arel="dynamic-content"href="dyn-cs:id:modularTabMenu_projectMenu"></a>
</div>

The Project menu (Figure 2) allows site authors to switch between seeing the currently published site and the site with a particular set of changes applied.

Figure 2. Project menu
Screen capture of a Portal project menu, where authors can switch views of the site

Edit mode

The original theme had its own edit mode, which allowed styles to be set and page layouts to change, etc. I made no attempt to convert this mode. Instead, my strategy was to use the edit mode from the new theme. The new edit mode has all of the Portal 8.0.0.1 features built in, so this is a perfect way to make them available. Unlike in the Project menu, I made almost no attempt to style the shelf to aesthetically fit the original theme. Since this is an authoring mode, rather than a mode that site visitors would see, I don't think it's important for the shelf to look like the original theme.

Like the Project menu above, edit mode is a dynamic content spot that is in the original 8.0.0.1 theme.

Listing 17. Edit Mode (universal toolbar) dynamic content spot in theme_en.html
<!-- inserts the universal toolbar -->
<a rel="dynamic-content" href="dyn-cs:id:modularTabMenu_toolbar"></a>

Figure 3 shows how the edit mode in the Portal 8.0.0.1 theme slides open between the top navigation and the primary navigation. For our Modular Tab Menu theme, I want to do something similar.

Figure 3. Edit mode in Portal 8.0.0.1 theme
Screen capture of an unrevised Portal page, showing edit mode

The Edit Mode shelf has the same grey styling as it does in the Portal 8.0.0.1 theme. I did make some minor spacing adjustments to allow the shelf to fit properly, as shown in Figure 4.

Figure 4. Edit mode in Modular Tab menu theme
Screen capture of a revised Portal page, showing edit mode with improved spacing

You can also easily customize the contents of the Edit mode tabs. For instance, the Style tab of the original theme contains a different list of color choices than the Portal 8.0.0.1 theme. I updated the system/styles.json to match the colors found in the original theme.

Learn more about Creating a theme style.


3. Tidy up

After the theme was working as I expected, I spent a full day working on miscellaneous final tasks to tidy things up. I used the Dojo ShrinkSafe to compress any of the JavaScript that needed it. I also compressed the css files that I added. I updated all the theme_*.html files based on the completed version of theme_en.html. I used a diff tool to merge changes from theme_en.html into the other language version, being careful not to overwrite language-specific parts. I also turned off the debug tracing and ran through my test suite again.


Full list of changes

Table 4. WebDAV – comparing the WebDAV/fs-type1/themes/Portal8.0 to WebDAV/fs-type1/themes/ModularTabMenu
FILE Change
ModularTabMenu/contributions/modularTabMenu.json New module defining JavaScript contributions
ModularTabMenu/css Several folders removed (black, blue, gold, green, orange, purple, and white)
ModularTabMenu/css Several folders added. Copied from Portal 6.1.5 wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/
(blueTheme, greenTheme, greyTheme, lightGreenTheme, lightGreyTheme, orangeTheme, pinkTheme, purpleTheme)
ModularTabMenu/css/default/default.css* Removed body styles
/ModularTabMenu/css/default/icon.gif Changed to match original theme
ModularTabMenu/css/default/modpb_mobile.css* place holder
ModularTabMenu/css/images Copied many images from Portal 6.1.5
ModularTabMenu/css/pagebuilder New css files. Some copied / tweaked from Portal 6.1.5
ModularTabMenu/css/widgets
ModularTabMenu/css/master.css* Add references to new JavaScript
ModularTabMenu/images/favicon.ico Use the favicon from the original theme
ModularTabMenu/js/ibmPortalEnhancedTheme-nodojo.js* Modified version of Portal 8.0.0.1 PortalServer/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/com/ibmPortalEnhancedTheme.js with dojo references removed.
ModularTabMenu/js/menu_service.js* Copied from Portal 6.1.5
ModularTabMenu/js/PageBuilderTheme.js* Copied from Portal 6.1.5
ModularTabMenu/js/modularTabMenu.js* Derived form Portal 6.1.5 Default.jsp
ModularTabMenu/nls/sidenav/* Update dynamic spot references
ModularTabMenu/profiles/profile_modulartabmenu.json New default profile for the theme. Copied from profile_full.json and renamed.
ModularTabMenu/system/styles.json Updated edit mode style tab to match original theme
ModularTabMenu/nls/theme_*.html Modified html to match original layout.
Table 5. EAR – comparing the ModularTabMenu.ear to the PortalServer/theme/wp.theme.themes/default80/installedApps/DefaultTheme80.ear
FILE Change
themes/html/dynamicSpots/commonActions.jsp Not used in new theme
themes/html/dynamicSpots/commonActions_pb.jsp Implements common actions
themes/html/dynamicSpots/crumbTrail.jsp Uninteresting tweaks to escape the class name
themes/html/dynamicSpots/mobileNavigation.jsp Not used in new theme but tweaked to remove references to blank.gif
themes/html/dynamicSpots/pageBuilderModularConfig.jsp New jsp to hold logic needed to initialize the theme. Copied from pieces of original Default.jsp.
themes/html/dynamicSpots/pageModeToggle.jsp Tweaked to show pencil icon
themes/html/dynamicSpots/primaryNav.jsp New jsp to generate primary navigation. Copied from pieces of original Default.jsp.
themes/html/dynamicSpots/status.jsp Removed references to blank.gif
themes/html/dynamicSpots/topNav.jsp New jsp to generate top navigation. Copied from pieces of original Default.jsp.
themes/html/bootstrap.jspf Added an variable needed in navigation.

Performance comparison

I did not do a full performance comparison between the original theme and the new modularized theme. However, I did compare the requests and download size of the two themes when applied on a blank page.

Table 6. Partial performance comparison
Original theme in Portal 6.1.5 Modularized Tab Menu theme
Requests 38 25
Total bytes 2.5 MB 1.5MB

ModularThemeExploit.zip

There are three files in the zip available in the Download section. I used a graphical diff tool (Beyond Compare or meld both work) to compare the contents of the zip to the contents found in WebDAV.

Listing 18. Comparing WebDAV to contents of ModularTabMenu-webdav.zip

Click to see code listing

Listing 18. Comparing WebDAV to contents of ModularTabMenu-webdav.zip

unzip ModularTabMenu-webdav.zip -d /tmp/ModularTabMenu
bcompare /mnt/portal/dav/themelist/ModularTabMenu/ /tmp/ModularTabMenu/themelist/ModularTabMenu/
bcompare /mnt/portal/dav/skinlist/ModularTabMenuStandard/ /tmp/ModularTabMenu/skinlist/ModularTabMenuStandard/
bcompare /mnt/portal/dav/fs-type1/themes/ModularTabMenu/ /tmp/ModularTabMenu/fs-type1/themes/ModularTabMenu/

Resolve any important differences that you find.


Summary

I spent a total of 9.5 works days on this. In that time, I was able to modularize a Portal 6.1.5 theme and take advantage of the new features of Portal 8. At the same time, I was able to maintain the look and feel of my original theme. As a bonus, my new theme is smaller and makes fewer server requests than the original.


Download

DescriptionNameSize
Modularized version of our sample themeModularThemeExploit.zip3310KB

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Mobile development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Mobile development, WebSphere
ArticleID=944395
ArticleTitle=Moving your WebSphere Portal theme to mobile, Part 1: Make your WebSphere Portal 6.1.x or 7.x theme modular
publish-date=09172013