Technical Blog Post
Abstract
Using the IBM Content Navigator JavaScript model API with jQuery in ICN Plug-in development
Body
Author: HongLin Guo
Refer link: http://ibm.co/1LgUHTv
Introduction
This article is the extension of a series of articles written by Chad Lou and Brett Morris. Refer Part I and Part II of the articles included below. The authors investigated the possibility of using Non-Dojo JavaScript toolkits such as jQuery to interact with Dojo for developing IBM Content Navigator plug-in. This article includes examples of how to mix the Dojo and jQuery method and utilize both Dojo and jQuery Ajax calls such as dojo/query/xhr and $.ajax() to do something.
Based on this, we share another example that details how to use jQuery to call ICN JavaScript model API directly instead of Dojo and jQuery Ajax calls. In this example, the code in Part II was re-factored to remove the Dojo module because we do not have to call the server to get the security token. We put the main business logic in JQueryModule.js. The developers who are jQuery experts thus need to know only about Dojo AMD and they have to write jQuery module completely with their own business logic.
This example is a pure jQuery plug-in, which calls ICN JavaScript model API (will introduce them in brief in the following sector) to get the current desktop and repository and display them. Then it retrieves the available classes from the current repository and displays the top ten classes in select menu widgets of jQuery UI. This example also highlights the available attributes of the first class by default or attributes of the selected class in the menu widget of jQuery UI.
ICN JavaScript modeling library introduction
IBM Content Navigator provides JavaScript and Java application programming interfaces (APIs) so that users can create custom applications. The JavaScript API includes the classes for the visual widget library and the modeling library. The classes in the modeling library provide the business logic and data for IBM Content Navigator. These classes are used by the widgets to access and represent data in the content servers and in the IBM Content Navigator configuration.
The following diagram shows the hierarchy of the primary classes in the modeling library:
Figure 1. The hierarchy of the primary classes in the modeling library.
As shown in this diagram, an instance of the Desktop class encompasses the other objects in the model. The Desktop object specifies the repositories, features, actions and viewers to which a set of users will have access.
An instance of the Repository class represents a specific repository. The repository can be an IBM Content Manager or IBM Content Manager OnDemand server, or an IBM FileNet Content Engine object store.
The Repository object gives users the ability to access and conduct actions on the objects in repository. These objects are also represented by classes in the modeling library.
The Content Class represents a document or folder class in an IBM FileNet P8 repository or an item type in an IBM Content Manager repository. A Content Class object gives users the ability to access an item and to edit the properties and attributes of the item.
Each property or attribute is represented by an instance of the Attribute Definition class that contains information about the property or attribute, such as type and allowed values.
Creating an IBM Content Navigator plug-in
We created an ICN plug-in with the ICN Eclipse extension following the Part II of the article introduction. In this new plug-in, we add the main logic code in JQueryModule.js and other logic codes are essentially the same with the plug-in introduced in Part II of the article. So we will mainly introduce the logic code in JQuery Module in this part.
The plug-in will get the current desktop and repository and display them. ecm.model.desktop represents the current desktop object, getDefaultRepository() method returns an instance of ecm.model.Repository. Class ecm.model Repository represents a single repository on the server. For an IBM FileNet P8 content server, this class represents a single object store.
Then it retrieves the available classes from the current repository. ecm.model. Repository has one method retrieveContentClasses() and it retrieves an array of ecm.model.ContentClass objects. It can be added Parameter callback. A callback function will be called when the classes have been retrieved and passed an array of ecm.model.ContentClass objects as a parameter.
Listing 1. Code retrieves the available classes from the current repository
var repository = ecm.model.desktop.getDefaultRepository();
repository.retrieveContentClasses(function(contentClasses){…})
The plug-in displays the top ten classes in the select menu widget from jQuery UI. Select menu is one jQuery UI widget. It duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control.
Listing 2. Code displays the top ten classes in the select menu widget from jQuery UI
var selectmenuId = this.selectmenuId;
$("#classes").append("<select id='" + selectmenuId + "'></select>");
$.each(contentClasses, function (i, val) {
if (i >= 10) return;
$("#" + selectmenuId).append("<option value='" + i + "'>" + val.id + "</option>");
});
$("#" + selectmenuId).selectmenu({…});
The plug-in displays the available attributes of the first class by default, or displays attributes of the selected class in the menu widget of jQuery UI. Class ecm.model.ContentClass represents a single class of items in the repository. The type of class that is represented depends on the repository. For an IBM FileNet P8 content server, this class represents Class.
Class ecm.model.HasAttributesMixin provides methods that are used to handle content class attributes. ContentClass and SearchContentClasses mixes in _HasAttributesMixin. It has one method retrieveAttributeDefinitions() which retrieves detailed attribute information for the content class. It can be added to Parameter callback that is invoked when the retrieval completes. The attribute definitions are passed to this function as an array of ecm.model.AttributeDefinition objects.
As the retrieved attributes contain system attributes and hidden attributes, we can filter the attributes using its system and hidden properties, but let customer attributes to be shown.
Listing 3. Code displays the attributes of a selected class in the menu widget of jQuery UI
change: function( event, data ) {
var contentClass = contentClasses[data.item.value];
contentClass.retrieveAttributeDefinitions(function(attributes){
var menuId = "menu1";
$("#message2").html("<h3>Dojo model returns "+ attributes.length+" attributes.</h3>" );
$("#attributes").empty();
$("#attributes").append("<ul id='" + menuId + "'></ul>");
$.each(attributes, function (i, val) {
if(!val.system && !val.hidden){
$("#" + menuId).append("<li>" + val.id + "</li>");
}
});
$("#" + menuId).menu();
$("#" + menuId).width("600px");
});
},
Figure 2. The new plugin UI in IBM Content Navigator.
Listing 4. The JQueryModule JavaScript file
jQueryPlugin/JQueryModule.js
define(["dojo/_base/declare",
"ecm/model/Desktop"],
function(declare,Desktop) {
var JQueryModule = declare("jQueryPlugin.JQueryModule", [], {
jQueryVersion: "jquery-2.1.1",
jQueryUiVersion:"jquery-ui-1.11.1",
selectmenuId: "selectmenu1",
menuId: "menu1",
loadJQuery: function(callback) {
var _this = this;
require({paths: {"jquery":"../plugin/JQueryPlugin/getResource/jQuery/" + this.jQueryVersion,
"jqueryui": "../plugin/JQueryPlugin/getResource/jQuery/" + this.jQueryUiVersion + "/jquery-ui"}},
["jquery", "jqueryui", ], function(jquery, jqueryui) {
_this._loadJQueryCSS();
console.log("jQuery ready");
if(callback) {
callback();
}
});
},
_loadJQueryCSS: function() {
$('head').append('<link rel="stylesheet" type="text/css" href="./plugin/JQueryPlugin/getResource/jQuery/' + this.jQueryUiVersion + '/jquery-ui.css">');
},
execute: function() {
console.log("assuming jQuery has loaded");
this.showClassesAndAttributes();
},
showClassesAndAttributes: function() {
//get the current desktop and repository
var repository = ecm.model.desktop.getDefaultRepository();
//it retrieves the available classes from current repository
repository.retrieveContentClasses(function(contentClasses){
$("#hello").html("<h3>Hello, world from jquery</h3>");
$("#desktop").html("<h3>Desktop Login: " + ecm.model.desktop.name + "</h3>");
$("#repository").html("<h3>Repository Login: " + repository.id + "</h3>");
$("#message").html("<h3>Dojo model returns "+ contentClasses.length+" classes.</h3>" );
var selectmenuId = this.selectmenuId;
//displays the top 10 classes in select menu widget from jQuery UI
$("#classes").append("<select id='" + selectmenuId + "'></select>");
$.each(contentClasses, function (i, val) {
if (i >= 10) return;
$("#" + selectmenuId).append("<option value='" + i + "'>" + val.id + "</option>");
});
$("#" + selectmenuId).selectmenu({
//displays the attributes of selected class in menu widget of jQuery UI
change: function( event, data ) {
var contentClass = contentClasses[data.item.value];
//retrieves detailed attribute information for the content class
contentClass.retrieveAttributeDefinitions(function(attributes){
var menuId = "menu1";
$("#message2").html("<h3>Dojo model returns "+ attributes.length+" attributes.</h3>" );
$("#attributes").empty();
$("#attributes").append("<ul id='" + menuId + "'></ul>");
$.each(attributes, function (i, val) {
//filter the attributes and let customer attributes shown
if(!val.system && !val.hidden){
$("#" + menuId).append("<li>" + val.id + "</li>");
}
});
$("#" + menuId).menu();
$("#" + menuId).width("600px");
});
},
//displays the available attributes of first class by default
create: function( event, data ) {
var contentClass = contentClasses[0];
if(contentClass){
// retrieves detailed attribute information for the content class
contentClass.retrieveAttributeDefinitions(function(attributes){
var menuId = "menu1";
$("#message2").html("<h3>Dojo model returns "+ attributes.length+" attributes.</h3>" );
$("#attributes").empty();
$("#attributes").append("<ul id='" + menuId + "'></ul>");
$.each(attributes, function (i, val) {
////filter the attributes and let customer attributes shown
if(!val.system && !val.hidden){
$("#" + menuId).append("<li>" + val.id + "</li>");
}
});
$("#" + menuId).menu();
$("#" + menuId).width("600px");
});
}}
});
});
},
EOF: null
});
return JQueryModule;
});
Listing 5.The associated template file for the Feature Pane
jQueryPlugin/templates/JQueryFeaturePane.html
<div class="ecmjQueryPane">
<div id="hello"></div>
<div id="desktop"></div>
<div id="repository"></div>
<div id="message"></div>
<div id="classes"></div>
<div id="message2"></div>
<div id="attributes"></div>
</div>
Conclusion
The plug-in uses methods in ICN JavaScript model API to get the current desktop and repository and displays them. The plug-in retrieves the available classes from the current repository and displays the top ten classes in the select menu widget from jQuery UI. The plug-in displays the available attributes of the first class by default or attributes of the selected class in the menu widget of jQuery UI.
What we did in this article:
- Utilized methods in ICN JavaScript model API to call ICN server
- Utilized primary classes in ICN JavaScript modeling library
- Removed Dojo module and added the main logic code to the jQuery Module
- Used select menu jQuery UI widget
This article demonstrates that we can use ICN JavaScript model API directly instead of Dojo and jQuery Ajax calls to call ICN server.
Reference
- IBM Content Navigator API reference http://www-01.ibm.com/support/knowledgecenter/SSEUEX_2.0.3/com.ibm.developingeuc.doc/eucrf000.htm?lang=en
- Part I - Developing ICN ICM Plugin using non-Dojo Javascript library such as jQuery
- Part II - Developing an IBM Content Navigator Plug-in using non-Dojo Javascript Widget library such as jQuery UI
UID
ibm11281082