Sunil's Notes: 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