![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
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.
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
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.
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 name | Description |
|---|---|
| CallNotification.js | This 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.js | This 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.js | This 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.js | This 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.js | This widget provides the basic browser history handlers for the back, forward, and refresh buttons, as well as the location bar handler. |
| EventHandler.js | This 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.js | This 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.js | This 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 name | Description |
|---|---|
| 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.js | This 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. |
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
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
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
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).
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']] |
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.
| Description | Name | Size | Download method |
|---|---|---|---|
| Code samples | cea-widgets-source.zip | 197 KB | HTTP |
Information about download methods
Learn
-
Enable a collaborative experience for HTML forms
-
Extending widgets in the WebSphere Application Server Feature Pack for Communications Enabled Applications
-
Comment lines by Erik Burckart: Every application needs communications
-
Dojo Build System (Pre 1.7)
-
Build
system build script
-
IBM developerWorks WebSphere
Get products and technologies
Discuss
Brian 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.
