ShowTable of Contents
Introduction
Dojo is bundled as part of the IBM® WebSphere® Portal theme and can be used by any portlet application running in Portal. Typically if portlet applications use any Dojo features, they rely on Dojo being loaded by the theme when run in Portal rather than packaging the Dojo in the portlet .war file.
However, for improved performance, it is important to load Dojo resources in an optimized way by combining multiple files into a single request rather than multiple requests for each individual Dojo file/resource. This article focuses on how to achieve this optimization across various themes and Dojo versions in Portal.
Understanding Dojo packaging in themes
The version of Dojo packaged in the theme differs with the different Portal versions. For example, Page builder theme uses Dojo 1.4.3, Portal 7002 theme uses Dojo 1.6, and Portal 8 default theme uses Dojo 1.7. The way in which optimization is achieved across different theme also varies.
Portal 7 Page builder theme
In the Portal 7 Page builder theme, there exists a pre-built Dojo layer named “portletLayer.js” under:
<Portal server install root>\PortalServer\theme\wp.theme.dojo\installedApps\dojo.ear\dojo.war\v1.4.3\ibm
This single layer encapsulates all the Dojo resources and must be referenced for optimized Dojo loading in the Page builder theme. This should be the very first reference in the portlet code that uses Dojo, before any Dojo resources are used, as in the following code line:
dojo.require("ibm.portletLayer", true);
where the second argument “true” is to avoid throwing errors if this layer doesn't exist (for example, while running the same code against different theme where this layer doesn’t exist).
Portal 7.0.0.2 and later themes
As of Portal version 7.0.0.2, however, things have changed. By design the Portal 7.0.0.2 theme does not load Dojo when you are in View mode of the Portal page. This is one of the factors that make the 7.0.0.2 theme render much faster when compared with Page builder or other themes.
The Portal 7.0.0.2 theme provides Dojo packages as modules that contain a logical grouping of multiple individual Dojo files. Refer to the Portal wiki product documentation topics, “
Modules provided with the WebSphere Portal theme” and “
Dojo Classes provided by the Dojo Modules” for more information.
You can choose which modules to include or exclude by updating a simple JavaScript Object Notation (JSON) file that defines the "theme profile". That profile directs the Portal as to which modules it should include at render time.
After doing so, that module is loaded as well into the theme but does not incur an additional HTTP request. Instead, it will be combined with the other resources that are already being loaded, similar to pushing more water through the same pipe instead of installing a new pipe.
The Portal 7.0.0.2 theme comes with three such profiles out of box (OOB): profile_deferred.json, profile_lightweight.json, and profile_full.json, with profile_deferred.json as default.
Profile_deferred.json contains the list of modules needed the for theme to render properly and doesn’t include Dojo in View mode. As a result, any portlet that requires Dojo (or some other capability that is not loaded by the theme default profile) would need to load the correct modules for their theme profile in order for the portlet to function correctly.
Listing 1 shows a snapshot of the profile_deferred.json theme profile.
Listing 1. Snapshot of the profile_deferred.json
{
"moduleIDs" : [
"wp_portal",
"wp_theme_portal_7002",
"wp_portlet_css",
"wp_legacy_layouts",
"wp_layout_windowstates",
"wp_client_main",
"wp_client_ext",
"wp_theme_menus",
"wp_one_ui_21",
"wp_theme_edit"
],
"deferredModuleIDs" : [
"wp_theme_widget",
"wp_pagebuilder_base",
"wp_pagebuilder_ui",
"wp_pagebuilder_controls",
"wp_pagebuilder_debug",
"wp_pagebuilder_data",
"wp_pagebuilder_dnd",
"wp_pagebuilder_shelf",
"wp_tagging_rating",
"wp_analytics",
"mm_builder",
"mm_enabler",
"mm_open_ajax_hub",
"mm_page_toolbar",
"mm_customize_shelf",
"mm_new_page_dialog",
"mm_builder_wiring",
"mm_builder_dialogs",
"mm_move_page",
"mm_delete_page",
"mm_delete_control",
"mm_page_sharing",
"dojo_16",
"dojo_app_16",
"dojo_data_16",
"dojo_dom_16",
"dojo_dnd_basic_16",
"dojo_dnd_ext_16",
"dojo_fmt_16",
"dojo_fx_16",
"dijit_layout_basic_16",
"dijit_menu_16",
"dijit_theme_tundra_16",
"dijit_tree_16",
"dojox_aspect_16",
"dojox_collections_16",
"dojox_data_basic_16",
"dojox_fx_16",
"dojox_io_16",
"dojox_layout_basic_16",
"dojox_string_16",
"dojox_uuid_16",
"dojox_xml_16",
"wp_portal_client_utils",
"wp_portlet_client_model",
"wp_portal_client_rest_utils"
]
}
The modules listed under moduleIDs are those that are always loaded when in View mode; however, deferredModuleIDs are loaded only when needed, such as when switching to Edit mode of the Portal page.
Determining which Dojo modules your application needs
Use the following two techniques to determine which Dojo modules your applications need to include in your theme profile.
Technique 1: Search the source code
1. Locate the custom JavaScript files used by your code.
2. Search the files for these strings:
dojo.require("
dojo["require"]
3. Make a list of the required classes, starting with "dojo", "dijit" or "dojox".
4. Use the list in the
Dojo Classes provided by the Dojo Modules topic to determine which modules contain the required Dojo classes.
5. Add the modules to your theme's profile.
Technique 2: Watch the HTTP traffic
1. Go to the Portal page with your application deployed.
2. Look at the HTTP traffic, using a program such as Fiddler or Firebug.
3. Make a list of all missing Dojo classes by looking at requests to http://<host>:<port>/wps/portal_dojo/v1.x/. For example, you may see a request to http://<host>:<port>/wps/portal_dojo/v1.7/dijit/Dialog.js. This means dijit.Dialog is required, but its module is not included on the page.
4. Use the list in the
Dojo Classes provided by the Dojo Modules topic to determine which modules contain the requested Dojo classes from Step 3.
5. Add the modules to your theme's profile.
Adding the identified modules to the theme profile
You can edit the existing theme profile or create your custom profile and use that with the theme by following these steps:
- Connect your Web-based Authoring and Versioning (WebDAV) client, such as WebDrive or AnyClient, to http://<host>:<port>/wps/mycontenthandler/dav/fs-type1/themes
- Navigate to Portal 7.0.0.2 theme/profiles/.
- Copy the profile_deferred.json file to your local hard drive.
- Rename the JSON profile and open it in a text editor.
- Make changes to the profile; you can:
- Remove modules from the moduleIDs or deferredModuleIDs array
- Add modules to the moduleIDs or deferredModuleIDs array
- Change the localized titles and descriptions for the profile
- Copy the new profile JSON into the profiles folder in WebDAV.
6. Apply the new profile
The newly created profile can be applied to specific pages in Portal or at the theme level for all pages in Portal.
To apply the profile to specific Portal page:
- Log in as Administrator and navigate to Administration --- Manage Pages.
- Locate your page and click Edit Page Properties.
- Go to Advanced Options and click “I want to set parameters.”
- Add a new parameter, resourceaggregation.profile, with a value of profiles/myCustomProfile.json
- Click OK on each window, to save.
To apply the profile to a theme:
- Connect your WebDAV client to http://<host>:<port>/wps/mycontenthandler/dav/themelist/
- Copy the metadata.properties file to your local hard drive, add/edit the entry resourceaggregation.profile=profiles/myCustomProfile.json, and save.
- Copy the update file back to the theme folder.
- Restart Portal to activate the new profile.
The Portal 8 default theme is similar to the Portal 7.0.0.2 optimized theme in that the Dojo is not loaded by the theme by default, and the theme profile should be updated to load the required modules for the respective application.
Capability filters
Another feature in WebSphere Portal 8 is called capability filters with which a portlet can specify what capabilities it requires to function properly, for example, Dojo; if the same is missing in the Portal environment, then the administrator or page editor won’t be able to add the portlet to the page and will be notified that the required capabilities are missing.
This feature informs the administrator about the capabilities needed for the portlet, and hence administrator can modify the theme accordingly to work with the portlet. For more details, refer to the
Capability Filters topic.
Conclusion
You should now be familiar with how portlet applications running in WebSphere Portal environments use the Dojo packaged in the theme in an optimized way to improve performance; that is, load when needed, load only what's needed, and reduce the overall Dojo loading time to improve performance across various Portal themes.
Tell us what you think
Please visit this link to take a one-question survey about this article:
Resources
Participate in the discussion forum:
http://www.ibm.com/developerworks/forums/forum.jspa?forumID=168
WebSphere Portal Server Version 8.0 Product Documentation:
http://www-10.lotus.com/ldd/portalwiki.nsf/xpDocViewer.xsp?lookupName=IBM+WebSphere+Portal+8+Product+Documentation#action=openDocument&content=catcontent&ct=prodDoc
developerWorks WebSphere product page:
http://www.ibm.com/developerworks/websphere/zones/portal/About the author
Jyoti Rani is based at IBM's India Software Labs, working within IBM Collaboration Solutions for the past eight years. Her technical expertise lies in the WebSphere Portal platform and application development on WebSphere Portal using Web Experience Factory. You can reach her at
jyotirani10@in.ibm.com.