Skip to main content link. Accesskey S
  • Log In
  • Help
  • IBM Logo
  • IBM Digital Experience wiki
  • All Wikis
  • All Forums
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > WebSphere Portal > Developing > Developing Themes for WebSphere Portal > Achieving Dojo loading optimization across various IBM WebSphere Portal themes
  • New Article
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileIBM contributorJyoti Rani
Contribution Summary:
  • Articles authored: 22
  • Articles edited: 0
  • Comments Posted: 0

Recent articles by this author

11.2 Configuring search collections

This section describes configuring search collections to use a seedlist framework to crawl and index all of the IBM Connections data locally on a WebSphere Portal server.

11.1 Integrating Connections and Portal search overview

This section describes options of integrating IBM Connections and IBM WebSphere Portal search.

11 Searching your social website

This section covers search topic for your social website.

8.7 When you stay within Portal and when you need to step out of Portal

This section describes how to control navigation behavior from Portal to Connections.

8.2.6 Using list and detail portlet

This section describes how to use List and Details portlets.
Community articleAchieving Dojo loading optimization across various IBM WebSphere Portal themes
Added by IBM contributorJyoti Rani | Edited by IBM contributorLeslie Gallo on October 8, 2012 | Version 4
  • Edit
  • More Actions Show Menu▼
Rate this article 1 starsRate this article 2 starsRate this article 3 starsRate this article 4 starsRate this article 5 stars
expanded Abstract
collapsed Abstract
Learn how to achieve Dojo loading optimization across various IBM WebSphere Portal themes to improve performance of Portal applications.
ShowTable of Contents
HideTable of Contents
  • 1 Introduction
  • 2 Understanding Dojo packaging in themes
  • 3 Determining which Dojo modules your application needs
  • 4 Adding the identified modules to the theme profile
  • 5 Capability filters
  • 6 Conclusion
  • 7 Tell us what you think
  • 8 Resources
  • 9 About the author

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:
  1. Connect your Web-based Authoring and Versioning (WebDAV) client, such as WebDrive or AnyClient, to http://<host>:<port>/wps/mycontenthandler/dav/fs-type1/themes
  2. Navigate to Portal 7.0.0.2 theme/profiles/.
  3. Copy the profile_deferred.json file to your local hard drive.
  4. Rename the JSON profile and open it in a text editor.
  5. 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:
  1. Log in as Administrator and navigate to Administration --- Manage Pages.
  2. Locate your page and click Edit Page Properties.
  3. Go to Advanced Options and click “I want to set parameters.”
  4. Add a new parameter, resourceaggregation.profile, with a value of profiles/myCustomProfile.json
  5. Click OK on each window, to save.
To apply the profile to a theme:
  1. Connect your WebDAV client to http://<host>:<port>/wps/mycontenthandler/dav/themelist/
  2. Copy the metadata.properties file to your local hard drive, add/edit the entry resourceaggregation.profile=profiles/myCustomProfile.json, and save.
  3. Copy the update file back to the theme folder.
  4. 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:
http://www.surveymonkey.com/s/9Q6ZKGN

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.

  • Edit
  • More Actions Show Menu▼


expanded Attachments (0)
collapsed Attachments (0)
Edit the article to add or modify attachments.
expanded Versions (4)
collapsed Versions (4)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (4)Oct 8, 2012, 12:17:15 PMLeslie Gallo  IBM contributor
3Oct 8, 2012, 12:10:39 PMLeslie Gallo  IBM contributor
1Oct 8, 2012, 11:33:38 AMJyoti Rani  IBM contributor
1Oct 8, 2012, 11:47:05 AMLeslie Gallo  IBM contributor
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • FacebookIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • Wiki design feedback
  • Content feedback
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use