Best practice for using dojo dijit in WebSphere Portal 6.1

WebSphere Portal ships with IBM's Dojo Toolkit. This version is based on Dojo 1.1.1 but has some additional fixes and features that are added by IBM. Also IBM can update or move to different version of Dojo framework in future fixes. You can find IBM Dojo Toolkit 1.1.1 in the theme



Important Note As per IBM support team, they wont support changing the version of Dojo that is shipped with WPS. It means that if you replace the Dojo version that is shipped with IBM's WebSPhere Portal and break the client side code then IBM wont support you.

One of the common requirements is that what if i want to use a Dijit Widget which was introduced in say Dojo 1.2.3 framework. THere are three options

1. Replacing the Dojo Framework shipped with WPS with version 1.2.3: Biggest problem with this case is that IBM wont support you, Second issue is that WPS has close to 20000 lines of code, how would you test it with new version of dojo. And third issue is that IBM has built quite lot of logic for CSA theme as well as client side API(User Profile, Portlet preference access on client side) using Dojo framework modules. Replacing DOjo version might break this logic


2. Including multiple versions of DOjo on page: As per Infocenter you cannot have multiple versions of Dojo on one page. I tried following Multiple Versions of Dojo on Page instructions but it did not work for me


3. Back port your widgets: This is the preferred option, try implementing the Dojo widget that you want using IBM's Dojo Framwork. You should be able to copy the template file and .js file widget as it is

Using Dijit widgets in WebSphere Portal 6.1

Starting from Version 6.1 the Dojo framework is shipped with IBM WebSphere Portal Server. As a result you can assume that Dojo framework would be available on every page. If you want to use Dijit widgets in your portlet or theme code you will have to take some precautions. I did built a sample portlet to demonstrate how you can use Dijit widgets in your portlet.

This is how my sample portlet looks like. It has one dijit.form.Button button.



This is the dijitpage.jsp that i am using to generate markup for the view mode

<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" session="false"%>
<%@taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%@taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model" prefix="portlet-client-model"%>
<%@taglib uri="http://java.sun.com/portlet" prefix="portletx"%>
<portlet-client-model:init>
 <portlet-client-model:require module="ibm.portal.xml.*" />
 <portlet-client-model:require module="ibm.portal.portlet.*" />
</portlet-client-model:init>
<portlet:defineObjects />
<script> 
 dojo.require("dojo.parser");
 dojo.require("dijit.form.Button");
 dojo.addOnLoad( function (){ 
         console.log("Inside dojo.addOnLoad()");
  dojo.parser.parse( "portletWidgetContainer"); 
 });
 function call_function(){
  console.log("Inside the button event handler");
  alert("Inside the button event handler")
 }   
</script>
<div id="portletWidgetContainer">
<button dojoType="dijit.form.Button" onclick="call_function">
                Hi I am the One !!
</button>
</div>

You should follow these guidelines in your portlets

• You should enclose the markup of your portlet or the markup that is using Dijit widget in div or someother enclosing element


• Add dojo.addOnLoad() function inside your code and call the dojo.parser.parse(<enclosingelementid>) to parse the markup of the portelt for dijit widgets


• Dojo framework would be included by theme on the page so dont include it explicitly. Trying to override dojo included by theme might break your theme

You can download the sample DijitPortlet from here