FREE ELECTRONIC LIBRARY - Thesis, documentation, books

Pages:   || 2 |

«Type of Submission: Article Title: Developing an IBM Content Navigator Plug-in using non-Dojo Javascript Widget library such as jQuery UI Subtitle: ...»

-- [ Page 1 ] --

Type of Submission: Article

Title: Developing an IBM Content Navigator Plug-in using non-Dojo Javascript

Widget library such as jQuery UI

Subtitle: Developing ICN Plug-in using jQuery UI

Keywords: IBM Content Navigator, IBM Case Mananger, plugin, non-dojo, jQuery,


Author: Chad Lou

Job Title: Senior Software Engineer, IBM Case Manager and Enterprise Content


Email: chadlou@us.ibm.com

Bio: Senior Software Engineer of the IBM Case Manager Client.

Company: IBM

Author: Brett Morris Job Title: Senior Technical Staff Member, IBM Enterprise Content Management Client Development Email: bwmorris@us.ibm.com Bio: Architect of IBM Content Navigator experience platform Company: IBM Abstract: This article describes a jQuery plug-in to extend IBM Content Navigator and IBM Case Manager using non-Dojo javascript library Developing an IBM Content Navigator Plug-in using non-Dojo Javascript Widget library such as jQuery UI Chad Lou, Brett Morris Introduction This is Part II of our research into using non-Dojo toolkit assets in IBM Content Navigator and IBM Case Manager.

In Part I, we described how to use the IBM Content Navigator JavaScript API from a standalone web page created using the jQuery toolkit. This standalone web page was added to a sub-directory of the IBM Content Navigator web application. The Dojo Toolkit is shipped with IBM Content Navigator. The jQuery toolkit was copied separately onto the Navigator web application. The standalone web page loads jQuery from the same web application on the same application server host. It uses a combination of Dojo and jQuery to execute IBM Content Navigator JavaScript APIs.

While the standalone web page shows that we can mix jQuery API calls, such as AJAX calls, with Dojo-based APIs there are more features that come with jQuery. One major aspect of jQuery is jQuery UI. The jQuery UI is a set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

What we did in Part I:

• Loaded jQuery from Dojo

• Mixed Dojo and jQuery

• Made IBM Content Navigator API calls from Dojo and jQuery

Limitations in Part I:

• It is a standalone web page, and not integrated with IBM Content Navigator

• It only utilized the jQuery library, not the jQuery UI widgets The standalone web page provides a good playground and a good starting point for enabling jQuery in IBM Content Navigator. However, the only supported mechanism for extending IBM Content Navigator is via an IBM Content Navigator plug-in. In this article, we will describe how to leverage jQuery UI assets within an IBM Content Navigator plug-in.

Creating an IBM Content Navigator Plug-in To create an IBM Content Navigator plug-in, you can use Eclipse along with the IBM Content Navigator Eclipse extension. The eclipse extension will create an IBM Content Navigator plug-in project and provide a build.xml for packaging the plug-in extensions into a JAR file.

For this article, I used the Eclipse extension provided with the IBM Content Navigator Redbook, to create a new IBM Content Navigator Plug-in project in Eclipse.

We will call our plug-in JQueryPlugin. The corresponding jar file will be JQueryPlugin.jar.

The core and the entry point of the plug-in is JQueryPlugin.js.

The UI after adding a jQuery menu into IBM Content Navigator.

Here is the code listing for the initial, basic implementation. Later on, we will make it object-oriented, and further on; we will contain the UI modification in an IBM Content Navigator feature.

require(["dojo/_base/declare", "dojo/_base/connect", "dojo/_base/lang", "dojo/_base/array", "dojo/dom-class", "ecm/model/Desktop" ], function(declare, connect, lang, array, domClass, Desktop) { connect.connect(Desktop, "onLogin", function() { var jQueryVersion = "jquery-2.1.1";

var jQueryUiVersion = "jquery-ui-1.11.1";

require({paths: {"jquery":"../plugin/JQueryPlugin/getResource/jQuery/" + jQueryVersion, "jqueryui": "../plugin/JQueryPlugin/getResource/jQuery/" + jQueryUiVersion + "/jquery-ui"}}, ["jquery", "jqueryui", "dojo/dom", "dojo/request/xhr"], function(jquery, jqueryui, dom, xhr) {

–  –  –

console.log("jQuery ready");

$('head').append('link rel="stylesheet" type="text/css" href="./plugin/JQueryPlugin/getResource/jQuery/' + jQueryUiVersion + '/jquery-ui.css"');

var menuId = "menu1";

$(".launchBarContentArea").prepend( 'div id="hello"/div' + 'div id="actions"/div' //'spanul id="' + menuId + '" style="display: inline; width:

120px;"limenu1/lilimenu2/lilimenu3/li/ul' );

$("#hello").html("h3Hello, world from jquery/h3");





It executes the main logic and performs the setup in the IBM Content Navigator Desktop’s onLogin function.

One thing to point out is that we don't actually need to make a Dojo xhr call to the server to get the security_token. After login the security_token is saved on the static Request model object, so we can just get it from the Request directly. We leave the implementation as above only to illustrate how to call between jQuery and Dojo.

Packaging of jQuery and jQuery UI

The jQuery components can be setup in a different location on the server, or be included as part of the plug-in. If it’s at a different location on the server, it should be copied to a sub-directory under the /navigator application. Including jQuery as part of the plug-in makes it modular and self-contained and you can easily change the versions of jQuery being used.

For the ease of future expansion, we define the version of jQuery and the version of jQuery UI.

For jQuery, here we used “jquery-2.1.1”, which is the latest jQuery version to date. For jQuery UI, we used “jquery-ui-1.11.1”, which is also the latest jQuery UI version at the present time. The latest jQuery can be downloaded from http://www.jquery.com. The latest jQuery UI can be downloaded from http://ui.jquery.com.

When newer version of jQuery or jQuery UI becomes available, you can update the jQuery versions in the plug-in by copying the latest jQuery file to replace the WebContent/jQuery/jquery-2.1.1.js. After downloading the latest jQuery UI, it can be unzipped to replace the jQuery UI folder in our Plug-in.

After downloading and replacing the latest jQuery and/or jQuery UI, update the JQueryPlugin.js to reflect the version of jQuery that you used.

var jQueryVersion = "jquery-2.1.1";

var jQueryUiVersion = "jquery-ui-1.11.1";

Loading jQuery and jQuery UI For loading jQuery, we define the path of “jQuery”, which is “../plugin/JQueryPlugin/getResource/jQuery/” + jQueryVersion. The “..” is added because the path is relative to Dojo. This results in loading jQuery from the following absolute URL – http://server:9080/navigator/plugin/JQueryPlugin/getResource/jQuery/jquery-2.1.1.js Similarly, we load jQuery UI from “../plugin/JQueryPlugin/getResource/jQuery/” + jQueryUiVersion + “/jquery-ui”, which corresponds to the absolute URL of http://server:9080/navigator/plugin/JQueryPlugin/getResource/jQuery/jqu ery-ui-1.11.1/jquery-ui.js

Then we define two javascript functions:

1. dojoApi, which is implemented using Dojo javascript library

2. jqueryApi, which is implemented using jQuery API.

Both functions do an Ajax xhr call to the Navigator server API. The dojoApi function fetches the security token from the server. This is a valid token after user logs in to the IBM Content Navigator server.

The jQueryApi() function fetches all the available actions from the IBM Content Navigator server. After fetching the actions, it parses the actions that are returned in JSON format. It then constructs a “ul” list consisting of the first 5 IBM Content Navigator actions. Then it creates a jQuery UI menu widget, by calling $(“#” + menuId).menu(). Finally it calls the jQuery width() function to set the width of the menu to 200px.

Loading the CSS resource

There are two CSS resources to be loaded. One is that of the plug-in CSS file, which is setup by the Eclipse extension. We will modify the plug-in CSS file later on for our feature pane. The other CSS resource is the jQuery UI CSS. We load the jQuery UI CSS dynamically by creating an entry in the head tag of the IBM Content Navigator web page. This is a stylesheet. It’s loaded with a link of “./plugin/jQueryPlugin/getResource/jQuery/’ + jQueryUiVersion + “/jquery-ui.css”, which corresponds to http://server:9080/navigator/plugin/jQueryPlugin/getResource/jQuery/jqu ery-ui-1.11.1/jquery-ui.css Showing the jQuery UI widget For illustration, we add the jQuery UI widget to the launch bar content area. This corresponds to the element at $(”.launchBarContentArea”). We use the prepend() function to insert anchor elements at the beginning of the launch bar content area.

We then add a hello world message to the beginning of the area, and call the DojoApi function, which then call the jQueryApi function asynchronously, which then shows the jQuery UI menu widget asynchronously.

Using jQuery for IBM Content Navigator/IBM Case Manager Mobile IBM Case Manager is a product based on IBM Content Navigator. The mobile application is a hybrid application.

While jQuery has its own mobile packages for developing applications, jQuery can also be used in a hybrid application for developing IBM Content Navigator or IBM Case Manager. The screenshot below shows how the jQuery code works and looks on the iPad, in the IBM Case Manager feature of the Navigator application.

Object-oriented Refactoring Everything works so far, but Dojo and jQuery are all mixed in a single JQueryPlugin.js. This certainly helps to illustrate how Dojo and jQuery are combined, but for enterprise development, we want to have a clean separation of Dojo modules and jQuery modules.

Now we refactor the code to include 3 javascript files:

1. JQueryPlugin.js

2. jQueryPlugin/DojoModule.js

3. jQueryPlugin/JQueryModule.js After refactoring, the main plug-in file will be simple, and it consists of only a few lines, to include DojoModule, and to instantiate JQueryModule.

require(["dojo/_base/declare", "dojo/aspect", "ecm/model/Desktop", "jQueryPlugin/DojoModule", "jQueryPlugin/JQueryModule" ], function(declare, aspect, Desktop, DojoModule, JQueryModule) { aspect.after(Desktop, "onDesktopLoaded", function() { jQueryPlugin.jQueryModule = new JQueryModule();


console.log("Load jQuery with jquery UI version: " + jQueryPlugin.jQueryModule.jQueryUiVersion);



The Dojo module The Dojo module contains logic written in Dojo. Here we include the async function.

define(["dojo/_base/declare", "dojo/request/xhr"], function(declare, xhr) { var DojoModule = declare("jQueryPlugin.DojoModule", [], {

–  –  –

_EOF: null });

jQueryPlugin.dojoModule = new DojoModule();

return jQueryPlugin.dojoModule;


The jQuery Module In JQueryModule, we encompass all logic in jQuery, after declaring it using Dojo declare.

define(["dojo/_base/declare"], function(declare) { var JQueryModule = declare("jQueryPlugin.JQueryModule", [], { jQueryVersion: "jquery-2.1.1", jQueryUiVersion:"jquery-ui-1.11.1",

–  –  –

_loadJQueryCSS: function() { $('head').append('link rel="stylesheet" type="text/css" href="./plugin/JQueryPlugin/getResource/jQuery/' + this.jQueryUiVersion + '/jquery-ui.css"');


–  –  –

callDojoFunction: function(jQueryCallback) { var dojoModule = jQueryPlugin.dojoModule;

// note that we avoid using dojo.hitch() in jQuery module //return dojoModule.retrieveSecurityTokenAsync(dojo.hitch(this, jQueryCallback));

return dojoModule.retrieveSecurityTokenAsync(jQueryCallback.bind(this));

}, initializeICNUI: function() { $("#hello").html("h3Hello, world from jquery/h3");

$("#jQueryVersion").html("h4jQuery version: " + this.jQueryVersion + "/h4");

$("#jQueryUiVersion").html("h4jQuery UI version: " + this.jQueryUiVersion + "/h4");


–  –  –

Calling jQuery API from Dojo This example demonstrates calling jQuery API from Dojo in JQueryPlugin.js. After instantiating the JQueryModule, we can access its members and functions.

jQueryPlugin.jQueryModule = new JQueryModule();


console.log("Load jQuery with jquery UI version: " + jQueryPlugin.jQueryModule.jQueryUiVersion);

Calling Dojo API from jQuery This example also demonstrates calling Dojo API from jQuery in JQueryModule.js.

callDojoFunction: function(jQueryCallback) { var dojoModule = jQueryPlugin.dojoModule;

//return dojoModule.retrieveSecurityTokenAsync(dojo.hitch(this, jQueryCallback));

return dojoModule.retrieveSecurityTokenAsync(jQueryCallback.bind(this));

}, Here we avoided using the dojo hitch function by using the generic bind function.

Creating an IBM Content Navigator Feature plug-in A proper way to extend IBM Content Navigator would be to create an IBM Content Navigator feature for the third-party javascript library. We can confine all the functionality of the third-party library within this feature pane. While the main pane is dojo-driven, this new feature pane can be jQuery-driven.

There are several steps involved when creating an IBM Content Navigator feature.

• Create a new Java class JQueryPluginFeature.java

• Return a PluginFeature array in the main JQueryPlugin.java public PluginFeature[] getFeatures() { return new PluginFeature[] { new JQueryPluginFeature()};


• Create a feature icon for the feature under WebContent/images/. Feature icons should be created as a scalable vector graphics file according to the IBM Content Navigator documentation: http://wwwibm.com/support/knowledgecenter/SSEUEX_2.0.3/com.ibm.developingeuc.doc/eucso014.htm

• Create a Feature Pane in javascript, jqueryPlugin/JQueryFeaturePane.js, along with the associated template file as jQueryPlugin/templates/JQueryFeaturePane.html

• Create a Feature configuration pane, FeatureConfigurationPane.js, along with the associated template file as jQueryPlugin/templates/FeatureConfigurationPane.html

Pages:   || 2 |

Similar works:

«FAKULTÄT FÜR INFORMATIK DER TECHNISCHEN UNIVERSITÄT MÜNCHEN Bachelorarbeit in Informatik Konzeption und Implementierung einer C2X-basierten dynamischen Routenführung für die mikroskopische Verkehrssimulation VISSIM Design and implementation of a V2X-based dynamic routing assistance for the microscopic traffic simulation VISSIM Bearbeiter: Michael Müller Aufgabensteller: Univ.-Prof. Dr. Hans-Joachim Bungartz Betreuer: Dipl.-Inf. Dirk Pflüger Dipl.-Inf. Mathias Baur Abgabedatum: 15....»

«Technical journal of Mechanical Engineering Society (MES) Department of Mechanical Engineering BRCM College of Engineering & Technology Bahal 127 028, Dist. Bhiwani, Haryana www.brcm.edu.in B. Tech. (Mechanical Engineering) Final Year Students, with Faculty MECHANICAL ENGINEERING SOCIETY EXECUTIVE COMMITTEE FOR 2013 – 14 CHIEF PATRON Shri. H. K. Chaudhary, Chairman, BRHD CT PATRON Dr. S. K. Sinha, Director, BHRD CT Dr. B.C.Sharma, Principal BRCM CET CHAIRMAN Shri A. K. Mishra, HOD Mechanical...»

«Arch. Hist. Exact Sci. 53 (1998) 147–180. c Springer-Verlag 1998 Gibbs, Einstein and the Foundations of Statistical Mechanics LUIS NAVARRO Communicated by J. Z. BUCHWALD Contents Abstract 1. Introduction.......................................................... 148 2. Premises and objectives................................................ 149 2.1 GIBBS.....................»

«Psychology of Social Engineering: Training to Defend John G. O’Leary, CISSP Computer Security Institute Abstract Historically, Social Engineering has been nontechnical, but most insidious, playing upon our workers' sincere desire to get the job done and help others to do the same. The use of phishing via e-mail and phony websites and redirections, etc., adds a technical component to this psychological attack. A clever social engineer can make a target trust him or her to such an extent that...»

«Unification of Compiled and Interpreter-Based Pattern Matching Techniques Technical Report submitted by Gergely Varró, Anthony Anjorin, Andy Schürr Real-Time Systems Lab Department of Electrical Engineering and Information Technology (FB18) Adjunct Member Department of Computer Science (FB20) Merckstr. 25 64283 Darmstadt www.es.tu-darmstadt.de email: {gergely.varro,anthony.anjorin,andy.schuerr}@es.tu-darmstadt.de Please cite this document as: URN:urn:nbn:de:tuda-tuprints-29220...»

«3GPP TS 24.008 V3.20.0 (2005-12) Technical Specification 3rd Generation Partnership Project; Technical Specification Group Core Network; Mobile radio interface layer 3 specification; Core Network Protocols; Stage 3 (Release 1999) R GLOBAL SYSTEM FOR MOBILE COMMUNICATIONS The present document has been developed within the 3rd Generation Partnership Project (3GPP TM) and may be further elaborated for the purposes of 3GPP. The present document has not been subject to any approval process by the...»

«SYSTEMS INTEGRATION IN THE FORESTRY DOMAIN by RAJESH K. KOMMINENI (Under the direction of Dr. Walter D. Potter) ABSTRACT The change in the user requirements over the years, has underscored the need for the integration of multiple information sources into a single viable source. In Information technology, legacy systems and data are those that have been inherited from languages, platforms and techniques earlier than the current technology. Integration of such heterogeneous applications is a...»

«Specification and Optimization of Analytical Data Flows vorgelegt von M.Comp.Sc Fabian Hüske aus Soest von der Fakultät IV Elektrotechnik und Informatik der Technischen Universität Berlin zur Erlangung des akademischen Grades Doktor der Ingenieurwissenschaften Dr. Ing. genehmigte Dissertation Promotionsausschuss: Vorsitzender: Prof. Dr. Uwe Nestmann Gutachter: Prof. Dr. Volker Markl Prof. Dr. Odej Kao Prof. Dr. Rainer Gemulla Datum der wissenschaftlichen Aussprache: 14. Dezember 2015 Berlin...»

«PATIENTS B R I T T B E R R E T T COME PAUL SPIEGELMAN SECOND LEADING CHANGE by CHANGIN the W A Y G YOU LEAD Published by Greenleaf Book Group Press Austin, Texas www.gbgpress.com Copyright ©2013 Paul Spiegelman All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the copyright holder. Distributed by Greenleaf Book Group LLC For...»

«© Copyright, Princeton University Press. No part of this book may be distributed, posted, or reproduced in any form by digital or mechanical means without prior written permission of the publisher. Ubiquitous Clicks and How It All Started I think the press has a tendency to pick a person and paint them 10 feet tall. In fact, each of us does a little piece and I’ve done one thing, people add on that and then another. So you get credit for doing the whole damn thing, and that’s not so....»

«Aktuelle Treiber auf Telekommunikationsmärkten und ihre Auswirkungen auf Geschäftsmodelle und Erlösquellen festnetzbasierter Carrier Arnold Picot1), Dr. Christian Wernick2), Nico Grove3) Management Summary: Die Entwicklung auf den Telekommunikationsmärkten ist seit jeher stark mit technologischen Errungenschaften verknüpft. Aktuell ist zu beobachten, dass benachbarte Kommunikationsfelder und datenorientierte Anwendungen zunehmend mit der traditionellen sprachorientierten Telekommunikation...»

«Technical Assistance Consultant’s Report Technical Assistance 7148-IND February 2013 India: Promoting Inclusive Urban Development in Indian Cities Prepared by Giovana Beltrão Canada For Ministry of Housing and Urban Poverty Alleviation (MoHUPA) This consultant’s report does not necessarily reflect the views of ADB or the Government concerned, and ADB and the Government cannot be held liable for its contents. (For project preparatory technical assistance: All the views expressed herein may...»

<<  HOME   |    CONTACTS
2016 www.thesis.xlibx.info - Thesis, documentation, books

Materials of this site are available for review, all rights belong to their respective owners.
If you do not agree with the fact that your material is placed on this site, please, email us, we will within 1-2 business days delete him.