Developing WebSphere Application Server Communication Enabled Application (CEA) widgets

The Communication Enabled Application (CEA) Dojo widgets that were first released in the IBM® WebSphere® Application Server V7 Feature Pack for Communication Enabled Applications and in IBM WebSphere Application Server V8 are now available in source code format as samples for creating your own CEA widgets. This gives you the freedom and flexibility to rebuild the widgets for whatever version of Dojo you need, and customize them to suit your application requirements. This article describes general CEA concepts and explains how you can use these widgets as a starting point for your own widget development.

Brian Pulito (brian_pulito@us.ibm.com), WebSphere Architect - SIP, IBM

Author photoBrian Pulito is the lead SIP and CEA Architect for WebSphere. He was one of the lead developers of the WebSphere CEA system application and has helped design, develop and support numerous SIP based products including Sametime and WebSphere. Brian is one of the leading advocates for SIP based technologies within IBM and has worked with many customers to help bring their SIP based applications into production.



Andrew Ivory, Software Engineer, Master Inventor, IBM

Photo of Andy IvoryAndy Ivory is an IBM advisory software engineer and architect for the Communications Enabled Applications Feature Pack. He received a Bachelor of Science degree in computer engineering from Pennsylvania State University in December 2002 and joined IBM in January 2003.



23 May 2012

Also available in Chinese Russian

Introduction

The Communication Enabled Application (CEA) Dojo widgets that were released in the IBM WebSphere Application Server V7 Feature Pack for Communication Enabled Applications and in IBM WebSphere Application Server V8 are deprecated from IBM WebSphere Application Server V8.5. This means that the CEA-specific widgets, along with the custom build of Dojo that includes the widgets, have been moved out of the WebSphere Application Server product. The underlying CEA system application that exposes the CEA REST interface remains part of WebSphere Application Server, but by releasing the widget source code and making it available to you here, you now have the freedom and flexibility to rebuild the widgets for whatever version of Dojo you need to interoperate with your Java™ EE applications. In addition, this also enables vendors to modify the widget source for whatever customizations they might need.

This article describes the CEA widgets at a high level, along with general CEA concepts, and then provides the details you need to build the CEA widgets, including information on how the widget source is organized in the download material included with this article.

What is CEA?

Communications Enabled Applications (CEA) provide the ability to add dynamic web communications to any application or business process. The CEA feature, which was originally delivered in the WebSphere Application Server V7 Feature Pack for Communications Enabled Applications and is shipped in the base WebSphere Application Server V8 product, provides a suite of integrated telephony and collaborative services that extends the interactivity of enterprise and web commerce applications.

With the CEA capability, enterprise solution architects and developers can use a single core application to enable multiple modes of communication. You do not need to have extensive knowledge of telephony or Session Initiation Protocol (SIP) to implement CEA; the CEA capability delivers call control, device notifications, and real time data communications, and provides a platform for easily integrating these capabilities into web and mobile applications.

On the back end, CEA consists of a converged system application that exposes a REST interface and communicates with SIP-based PBXs through TR 87 (CSTA over SIP) to perform third party call control. The REST interface also supports the ability to send generic data directly between two endpoints for services like co-browsing and chat.

Figure 1 shows the CEA components at a high level.

Figure 1. CEA components
Figure 1. CEA components

As you can see, the primary method for accessing the CEA REST interface is through various CEA Dojo-based widgets. These widgets encapsulate a large amount of CEA functionality, outlined in the next section.


CEA widget toolkit

The CEA widget toolkit can be used both in desktop and mobile web applications. The underlying functionality is the same for both environments, but due to different visual and interactive requirements for mobile in some cases, the desktop widget has been extended to provide a new look and feel.

Table 1. Desktop browser widgets
Widget nameDescription
CallNotification.jsThis widget provides the ability for a user to enter a phone number or SIP URI and then monitor their line for call notifications. When an incoming call is detected, the widget alerts the user and then offers basic status updates and call control facilities (such as the ability to hang up the call). Optionally, this widget can be configured to provide a CollaborationDialog, enabling the user to engage in a co-browse scenario with the caller. Separate CallNotification widgets are provided for mobile and browser environments. The CallNotification widget inherits from the EventHandler widget, below.
ClickToCall.jsThis widget provides the ability for a user to configure a caller phone number or SIP URI and enter a callee phone number or SIP URI to call, and then initiate a phone call between the user's phone and the phone number or SIP URI coded into the widgetNumber. Once the call is initiated, the widget provides basic status updates and call control. Optionally, this widget can be configured to provide a CollaborationDialog, enabling the user to engage in a co-browse scenario with the callee during their phone call. Separate ClickToCall widgets are provided for mobile and browser environments. The ClickToCall widget inherits from the EventHandler widget, below.
Cobrowse.jsThis widget provides the ability for a user to create an invitation link to send to a peer. After creating the invitation, the widget starts polling for join notification from the peer. When the peer clicks on the invitation link, this widget loads and makes the appropriate call to join the collaboration session. This widget utilizes the cea.widget.CollaborationDialog to provide a modal window to interact with the peer.
CollaborationDialog.jsThis widget provides a modal dialog that extends the cea.widget.CollaborationDataTransfer to share pages, links, and so on, with a peer. Specifically, this widget provides the event handlers to style the modal dialog and send data to the peer, as well as to the result handlers that are invoked when data is received. The CollaborationDialog widget inherits from the CollaborationDataTransfer and CollaborationDialogBrowser widgets, below.
CollaborationDialogBrowser.jsThis widget provides the basic browser history handlers for the back, forward, and refresh buttons, as well as the location bar handler.
EventHandler.jsThis is a base level widget that runs in both mobile- and browser-based run time environments. It is needed by all the other CEA widgets because it handles the underlying asynchronous communication channel with the CEA system application. Simulating an async communications channel using HTTP relies on long-polled HTTP requests through the CEA REST interface. This widget encapsulates all that functionality.

This class receives CEA events using the rest service. It also provides the basic calls to get events, add/remove event handlers, and start/stop polling for events.

CollaborationDataTransfer.jsThis widget inherits from the EventHandler widget, above. This class is used to create, join, and destroy a collaboration session with a peer. It also provides methods for sending and receiving data using the CEA REST service once the collaboration session has been created. Once the collaboration session is initialized, this widget can be used to send data to the peer or get data sent by the peer.
TwoWayForm.jsThis widget provides the ability for two users to collaborate on a form; that is, either of the connected users can provide input to the fields in a form. Optionally, fields can be designated as only editable by one of the connected users or require validation by either of the connected users.
Table 2. Mobile-specific widgets
Widget nameDescription
ClickToCall.js
CallNotification.js
Cobrowse.js
CollaborationDialog.js
These widgets each have a mobile-specific extension of the base desktop widget. These extensions modify the look, feel, and interactions of the widgets to optimize them for mobile browsers (iOS and Android). (See Table 1 for individual descriptions.)
iFrame.jsThis widget is used to make up for the deficiencies in the default iFrame implementation for iOS and Android browsers. It adds basic touch scrolling and zoom support that is needed for Cobrowsing on mobile devices.

CEA widget source

The CEA widget source code is provided with this article as a starting point for your own development, and is packaged like a typical Dojo toolkit in a file called cea-widgets-source.zip. Under the cea directory (Figure 2), you’ll find the main widget definition files in the widget directory, and the associated test case HTML files under the tests directory. The mobile-specific widgets are treated as a sub package, which you can find in the mobile directory.

Figure 2. CEA widget source code directory structure
Figure 2. CEA widget source code directory structure

Under the main widget directory is a directory for each widget that contains a JavaScript™ file (for example, ClickToCall.js) and an associated directory containing the template file (ClickToCall/ClickToCall.html) and css definitions (ClickToCall/ClickToCall.css) for the widget (Figure 3). For widgets requiring translation, there is also an associated message bundle in the nls directory (for example, nls/ClickToCall.js).

Figure 3. Widget directories
Figure 3. Widget directories

The validation and handler subdirectories contain additional sub widgets that are leveraged by the TwoWayForm feature.

The same pattern is used for the mobile widgets for defining their JavaScript, HTML template, CSS, nls, and tests (Figure 4).

Figure 4. Mobile widget directories
Figure 4. Mobile widget directories

Building CEA widgets

The ceadojo custom build packages the CEA widgets with a specific version of Dojo and eliminates the need to declare the CEA module path and "import" the widget. In WebSphere Application Server V8, a new version of Dojo 1.5.0 was pulled in to create the custom build that ships with it. The custom build leverages the Dojo Build System (Pre 1.7).

There is no expectation that the widget source included with this article will build with any version of Dojo other than the 1.5.0 version of the IBM’s Dojo Toolkit. It is likely that modifications to the source code will be required to make it compatible with whatever version of Dojo the widgets are to be packaged with.

By deprecating the CEA widgets from WebSphere Application Server and equipping you with the widget source code, you can now customize and package these widgets with whatever version of Dojo is required for your application. Because Dojo has had several releases since 1.5, you will likely want to build against a more recent version of Dojo. There are several ways to download a version of Dojo to build against. WebSphere Application Server users can access the IBM Dojo Toolkit (IDT) by downloading the latest WebSphere Application Server Feature Pack for Web 2.0 and Mobile, which includes the latest IBM source version of Dojo. Alternatively, you can download the latest Dojo source.

The ceadojo profile can be found at cea widgets/ceadojo.profile.js and defines exactly what the build system will include in the built version of Dojo. Key sections of the ceadojo profile are called out in Listings 1 through 3. Listing 4 shows the ceadojo.profile.js in its entirety.

Listing 1. Layer
dependencies = {
layers: [
{
        	name: "dojo.js",
Listing 2. Dependencies
dependencies: [
			"dojo.i18n",
			"dojo.io.iframe",
			"dojox.layout.ContentPane",
			"dijit._Templated",
			"dijit._Widget",
			"dijit.Dialog",
			"dijit.layout.LayoutContainer",
			...
			"cea.mobile.widget.CallNotification",
			"cea.mobile.widget.ClickToCall",
			"cea.mobile.widget.Cobrowse",
			"cea.mobile.widget.CollaborationDialog",
			"cea.mobile.widget.iFrame"
Listing 3. Prefixes
prefixes: [
[ "dijit", "../dijit" ],
	 	[ "dojox", "../dojox" ],
		[ "cea", "../cea" ]
]
Listing 4. ceadojo.profile.js
dependencies = {
layers: [
{
        	name: "dojo.js",
		dependencies: [
			"dojo.i18n",
			"dojo.io.iframe",
			"dojox.layout.ContentPane",
			"dijit._Templated",
			"dijit._Widget",
			"dijit.Dialog",
			"dijit.layout.LayoutContainer",
			"dijit.form.Button",
			"dijit.form.CheckBox",
			"dijit.form.ComboBox",
			"dijit.form.DateTextBox",
			"dijit.form.FilteringSelect",
			"dijit.form.MultiSelect",
			"dijit.form.HorizontalSlider",
			"dijit.form.VerticalSlider",
			"dijit.form.Textarea",
			"dijit.form.TextBox",
			"dijit.form.TimeTextBox",
			"cea.widget.CallNotification",
			"cea.widget.ClickToCall",
			"cea.widget.Cobrowse",
			"cea.widget.CollaborationDataTransfer",
			"cea.widget.CollaborationDialog",
			"cea.widget.CollaborationDialogBrowser",
			"cea.widget.EventHandler",
			"cea.widget.TwoWayForm",
			"cea.widget.handler.dijit._DateTimeTextBoxHandler",
			"cea.widget.handler.dijit._DijitWidgetHandlerFactory",
			"cea.widget.handler.dijit._MultiSelectHandler",
			"cea.widget.handler.dijit._SimpleValueHandler",
			"cea.widget.handler.dijit._ToggleHandler",
			"cea.widget.handler.WidgetHandler",
			"cea.widget.handler.WidgetHandlerFactory",
			"cea.widget.validation._DefaultValidationWidget",
			"cea.widget.validation._ValidationManager",
			"cea.widget.validation.ValidationWidget",
			"dojox.html.ext-dojo.style",
			"dojox.mobile",
			"dojox.mobile.parser",				
			"cea.mobile.widget.CallNotification",
			"cea.mobile.widget.ClickToCall",
			"cea.mobile.widget.Cobrowse",
			"cea.mobile.widget.CollaborationDialog",
			"cea.mobile.widget.iFrame"	                    
	      ]
}
		],
		prefixes: [
			[ "dijit", "../dijit" ],
		 	[ "dojox", "../dojox" ],
		 	[ "cea", "../cea" ]
]

To build the ceadojo toolkit you can use the included build script file and pass in the attributes shown in Listing 5.

Listing 5. Build attributes
profile=ceadojo
releaseName=ceadojo
version=<version-number>
action=release	
localeList=ar,ca,cs,da,de-de,el,en-gb,en-us,es-es,fi-fi,fr-fr,he-il,hu,it-it,ja-jp,ko-kr,
nl-nl,no,pl,pt-br,pt-pt,ru,sk,sl,sv,th,tr,zh-tw,zh-cn,ro
cssOptimize=comments.keepLines
scopeMap=[['dojo','ceadojo'],['dijit','ceadijit'],['dojox','ceadojox']]

Conclusion

This article provided details on how to build source code associated with IBM WebSphere Application Server’s Collaboration Enabled Applications widgets and package them with your own versions of Dojo. By making CEA widget source code available, you are now free to extend the functionality of these widgets in any way you see fit.


Download

DescriptionNameSize
Code samplescea-widgets-source.zip197 KB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Web development
ArticleID=816485
ArticleTitle=Developing WebSphere Application Server Communication Enabled Application (CEA) widgets
publish-date=05232012