dojo version 1.0 websphere 6 workable sample

Using the Dojo Toolkit with WebSphere Portal

Adding sizzle to your portal application user interface

Karl Bishop (kfbishop@us.ibm.com), Senior Software Engineer, IBM

Doug Phillips (dougep@us.ibm.com), Advisory Software Engineer, IBM

November, 2007

© Copyright International Business Machines Corporation 2007. All rights reserved.

This article describes how to use and leverage the Dojo toolkit in portal applications.

Dojo is a JavaScript™ based toolkit that you can use to enhance your portal with a rich

portal applications sizzle!

1

Table of contents

Introduction .......................................................................................................................... 3

Integrating Dojo into your portal applications ..................................................................... 4

Using a cross domain build of Dojo ................................................................................ 4

Custom Dojo enabled theme ............................................................................................ 4

Bundling Dojo with your portlets .................................................................................... 5

Instantiating Dojo ................................................................................................................. 5

Step 1 - Define Dojo dijit theme style ............................................................................. 5

Dojo specific considerations .............................................................................................. 10

AJAX communications .................................................................................................. 10

Internationalization ............................................................................................................ 13

Dojo events .................................................................................................................... 15

Styling dijits ................................................................................................................... 15

Custom modules ................................................................................................................. 16

Step 1 - Create folder structure ...................................................................................... 17

Step 2 - Create module files ........................................................................................... 17

Step 3 - Register your module's package with Dojo ...................................................... 18

Step 4 - Instantiate your object ...................................................................................... 18

Project: DojoPortal_Theme ........................................................................................... 23

Files: DojoPortalInit.jspf and DojoXDPortalInit.jspf ................................................ 24

File: js/ibm/portal/Portal.js ........................................................................................ 25

Project: DojoPortal_Service ........................................................................................... 26

Project: DojoPortal_Portlets .......................................................................................... 26

File: DojoPortletInit.jspf ............................................................................................ 27

File: js/ibm/portlet/Portlet.js ...................................................................................... 28

Servlet: PortletService ............................................................................................... 30

Portlet: LoggingPortlet ............................................................................................... 30

Portlet: I18NPortlet .................................................................................................... 31

2

Introduction

user interface and interactivity features. Until recently, you had to use proprietary plug-

ins or secondary languages such as Java™, ActiveX, or Flash to add Rich Internet

Application (RIA) features to a Web site. These languages tend to be heavyweight, to

require additional installation from the user, and are often problematic in cross-browser

and cross-platform environments.

With the explosion of Asynchronous JavaScript and XML (AJAX) toolkits, you can now

provide full-featured applications on the browser using native and cross-browser

JavaScript. There are several great AJAX toolkits available, and many of them are open

source. This article focuses on the Dojo toolkit, which has a strong architecture, helpful

accessibility and internationalization features, and general feature set. If you hold

This article dives right into getting things done with Dojo inside portal applications. It

does not teach you how to use all of the widgets and features of Dojo; however, you will

get a nice jump start if this is your first foray into the Dojo toolkit.

Enter the Dojo toolkit

The Dojo toolkit (http://dojotoolkit.org) has

undergone a rapid and extreme evolution. The

latest release (as of this writing) is 1.0.0, which

went live on 5 November 2007. This release is a

complete rewrite of the previous versions. It is

lean and fast, and is much easier to use than

• The Dojo extras (dojox) package. This final package contains experimental features

and widgets, which might not be fully "baked", so they are not yet ready for inclusion

into the main packages.

3

As you will see later in this article, you can also create your own Dojo-based modules to

include in your application.

The primary source of information on Dojo is the online Book of Dojo, and the API

reference (see Resources for links). You are strongly advised to read (or even re-read)

both of these to gain a strong foundation of the capabilities available in the Dojo Toolkit.

Both of these are located on the Dojo Toolkit Web site.

Integrating Dojo into your portal applications

The first thing you need to determine is how you will embed Dojo into your portal

application. You have a few options, and your decision will determine how you start.

Your first decision is if you want to embed Dojo into a custom theme or if you want to

load it from each portlet. Either technique will work fine; however, from an architectural

standpoint, it is much cleaner to use a Dojo-enabled theme. The only reason you would

not be able to use a custom theme is if you are not in control of the portal instance. For

You learn more about these options later in this article when we explore the merits and

pitfalls of each. All the example code in this article uses the common cross domain build

of Dojo.

Using a cross domain build of Dojo

Obviously, the easiest way to install "something" is to simply not install it at all! No, this

is not as obtuse as it seems in this networked world. Dojo now provides a special build

that can be hosted on a central server within your organization and accessed from any

application, no matter what is the source URL. Previous versions of JavaScript toolkits

and earlier versions of Dojo required that AJAX calls be within the same domain URL.

With a cross domain build of Dojo, this limitation, as it relates to Dojo and its specific

portlets.

4

included modules.

portlet to instantiate Dojo.

Having a common Dojo base from the theme is a valuable feature. If each portlet defines

its own instance of Dojo, then the first portlet and, therefore, the first Dojo instance

loaded, would take precedence over all other portlets on the page. This could cause some

painful debugging when your portlet is expecting a certain version of Dojo, and a portlet

loaded earlier in the page aggregation instantiated a different version.

The size issue does not apply if you use a cross domain build of Dojo. Other than these

considerations, there is no harm in instantiating Dojo from within your portlets.

Instantiating Dojo

To use Dojo, you follow these steps, which are described in more detail below:

1. Define Dojo dijit theme styles .

2. Define the Dojo configuration (djConfig) variable .

3. Load the core Dojo object.

4. Include additional modules and start something !

These steps differ slightly depending on whether you use a local instance of Dojo or a

5