Combining Dojo and jQuery for ICN ICM

Type of Submission: Article
Title: Combining Dojo and jQuery for IBM Content Navigator and
IBM Case Manager
Subtitle: Utilizing ICN APIs with jQuery
Keywords: jQuery, non-Dojo javascript library for ICN, ICM, ICN, Case Manager,
Content Navigator
Author: Chad Lou
Job Title: Senior Software Engineer, IBM Case Manager and Enterprise Content
Management
Email: [email protected]
Bio: Senior Software Engineer of the IBM Case Manager Client.
Company: IBM
Combining Dojo and jQuery for IBM Content Navigator and IBM Case Manager
Chad Lou
Introduction
This article is the first of a two-part series describing our research into using non-Dojo
Javascript toolkits in IBM Content Navigator and IBM Case Manager. The first part will
focus on how to use the IBM Content Navigator JavaScript model API with jQuery. The
second part will describe how to leverage jQuery within an IBM Content Navigator plugin. Although this article will focus on jQuery, the approach described in this article could
be used to leverage other popular JavaScript toolkits with IBM Content Navigator and
IBM Case Manager, such as AngularJS, CanJS, Backbone, etc.
Both Dojo and jQuery are cross-platform Javascript library designed to simplify the
client-side scripting of HTML. Dojo is the javascript technology developed and used in
IBM. jQuery is more popular on the web. While Dojo has a strong support of
internationalization and accessibility, jQuery is used by over 60% of the 10,000 most
visited websites.
IBM Content Navigator (ICN) is the standard User Interface solution for IBM Enterprise
Content Management (ECM) system. It is the foundation for IBM ECM. A number of
IBM products, including IBM Case Manager (ICM), are built on top of ICN, utilizing its
repertoire of numerous APIs, powerful features and friendly user-interface.
ICN is implemented in Dojo. It is widely adopted among IBM customers. However, some
of the customers use jQuery as their inhouse javascript library. They may not have a lot
of exposure to Dojo. These are customers who are jQuery experts and would like to
utilize ICN API and libraries in Dojo. On the other hand, there are also customers who
are Dojo experts and wish to utilize ICN using jQuery.
In this article, we are going to explore ways to use jQuery and Dojo on the same web
page at the same time, and how to utilize ICN APIs from jQuery. We are looking to build
a bridge between Dojo and jQuery, two of the most popular Javascript libraries.
It is assumed that the reader is familiar with the concepts of javascript, and has a basic
understanding of Dojo and jQuery.
Dojo and jQuery
Coming from a Javascript background, it would be easy to learn either Dojo or jQuery.
They both try to accomplish the same objective, they just do it in slightly different ways.
For example, to access a DOM element with an id of “myelement”, Dojo uses the
syntax of dojo.byId(“myelement”), while jQuery uses the syntax of $(“#
myelement”).
There have been a lot of questions and discussions on the web about whether it is
possible to mix Dojo and jQuery together. From our experience, the answer is Yes.
Let’s first see how we can mix jQuery and Dojo. Then we will see how to modify the
code to work with ICN API.
There are two ways to load a Javascript library.
1. through a public CDN (Content Delivery Network), such as Google, or another
website. This way is good for testing out the javascript library.
2. to load Dojo or jQuery from a local directory under your web application. This is
recommended for production.
There are also two ways to load jQuery.
1. Load through a script tag on a page.
2. Load jQuery from Dojo.
The first way is more standard. The second way is preferred when you are developing a
Javascript application without access to a static html page, such as when developing a
plugin for IBM Content Navigator.
In our example, we will first load Dojo. Then we load jQuery from Dojo. The latest
version of jQuery can be downloaded from jQuery.com. For illustration, we use jquery2.1.1.js.
Listing 1. Code that mix Dojo and jQuery
<html>
<head>
<script type="text/javascript" src="../dojo/dojo.js"
data-dojo-config="async: false, parseOnLoad: true, isDebug: true,
packages: [ {name: 'idx', location: '../../idx_1.4/idx' }
]">
</script>
<script>
require({paths:{ "jquery":"../js/jquery-2.1.1" }}, ["jquery",
"dojo/ready"], function(jquery, ready) {
ready(function() {
console.log("dojo ready");
dojo.byId("test").innerHTML = "hello, world from Dojo";
console.log("jquery ready");
$("#jtest").html("hello, world from jquery");
});
});
</script>
</head>
<body>
<div id="test">
dojo hello world</div>
<div id="jtest">
jquery hello world</div>
</body>
</html>
The above code performs the following tasks:
1. loads Dojo
2. loads jQuery via Dojo’s require API
3. manipulates DOM elements using Dojo API and jQuery API
Require is a Dojo API, that loads a Dojo module. Here jQuery is loaded via require.
Ready is another Dojo mechanism. Dojo/ready registers a function to run when the
DOM is ready. When the DOM finishes loading, then the function body in ready()
{…} will be executed.
We see that Dojo and jQuery can manipulate DOM elements using its corresponding
APIs without interference with each other. So Dojo and jQuery can co-exist on the same
page.
Utilizing both Dojo and jQuery with ICN
Now that we see that both Dojo and jQuery can co-exist with each other, let’s exapand
our example to mix them to work with an ICN server.
You use the IBM Content Navigator Java API to create plug-ins to implement the
functionality that you want to add to the web client. You use the IBM Content Navigator
JavaScript™ API to create custom widgets to use with the plug-ins.
The result
• It uses Dojo to call getDesktop.do API to get a security_token
• It then uses jQuery to make another call to getActions using the security_token to
get a list of actions
• It displays the list of ICN actions on the browser.
The setup:
On the Websphere server where ICN is deployed:
-
cd navigator.ear
mkdir navigator.war/js
cp jquery-2.1.1.js navigator.war/js
cp dj.htm navigator.war/js
Access the code via http://server1:9080/navigator/js/dj.htm
Pre-requisite:
The user user should login to ICN first - http://server1:9080/navigator
In case the user has not already logined, the script will redirect the user to the login page.
The script is attached at the end of this article. It illustrates the use of the following API
calls:
Dojo
- dom.byId()
- dojo/query/xhr
- dojo.fromJson
jQuery
- $("#id")
- $.each()
- $.ajax()
ICN API
- /navigator/getDesktop.do
- /navigator/getActions.do
Conclusion
As far as DOM manipulation using Ajax and Javascript, it is safe to mix and match Dojo
and jQuery together. It is possible to develop ICN plugin using jQuery. It should be easy
to modify the script to be of plugin style, and to wrap the code in on(desktop,
"login", function(){}).
Dojo dijit and jQuery UI widgets are not in the scope of the experiment. There might be
issues with Dojo shrinksafe if the javascript application is to be packaged and
compressed, but should work fine with ICN plugin, by loading jQuery module
dynamically.
Since ICM is based on ICN, technology that is applicable to ICN is also applicable to
ICM, in a similar fashion.
If customers can develop their ICN plugin using the jQuery technology that they are
familiar with, they can get up to speed with ICN more quickly, and can more easily
integrate with ICN and ICM.
Listing 2. Code that utilizes both Dojo and jQuery Ajax calls
<html>
<head>
<script type="text/javascript" src="../dojo/dojo.js"
data-dojo-config="async: false, parseOnLoad: true, isDebug: true,
packages: [ {name: 'idx', location: '../../idx_1.4/idx' } ]">
</script>
<script>
require({paths:{ "jquery":"../js/jquery-2.1.1" }}, ["jquery",
"dojo/ready", "dojo/dom", "dojo/request/xhr"], function(jquery, ready,
dom, xhr) {
var dojoApi = function() {
var postData = "{}";
var url = "/navigator/getDesktop.do";
xhr(url, {
data: postData,
method: "POST",
handleAs: "text"
}).then(function(data){
data = dojo.fromJson(data.substring(4));
console.log("dojo xhr success");
//console.log(data);
var security_token = data.security_token;
if (security_token) {
dom.byId("token").innerHTML = "security token: " +
security_token;
jqueryApi(security_token);
}
else dom.byId("message").innerHTML = "please login to
navigator first";
}, function(error){
console.log(error);
});
};
var jqueryApi = function(security_token) {
var url = "/navigator/getActions.do";
var postData =
"action_id=allActions&sorted=true&includeCustomActions=false&security_t
oken=" + security_token;
$.ajax({
type: "POST",
url: url,
//dataType: "json",
data: { action_id: "allActions", sorted: "true",
includeCustomActions: false,
security_token: security_token}
})
.done(function( msg ) {
msg = msg.substring(4); // have to skip the leading {}&&
otherwise jquery error
var value = jQuery.parseJSON(msg);
if (value.errors) {
$("#message").html(value.errors[0].explanation + " : "
+ value.errors[0].userResponse);
return;
}
$("#message").html("jquery ajax returns actions: " +
//msg);
value.actions.length);
$("#actions").append("<ul>");
$.each(value.actions, function (i, val) {
$("#actions").append("<li>" + val.id + "</li>");
});
$("#actions").append("</ul>");
})
.fail(function() {
console.log("jquery post failed:\n");
});
};
ready(function() {
console.log("dojo ready");
dom.byId("test").innerHTML = "hello, world from Dojo";
console.log("jquery ready");
$("#jtest").html("hello, world from jquery");
dojoApi();
});
});
</script>
</head>
<body>
<div id="test">
dojo hello world</div>
<div id="jtest">
jquery hello world</div>
<div id="token">
</div>
<div id="message">
</div>
<div id="actions">
</div>
</body>
</html>

Download Report