The continued innovation in browser-based user interfaces has resulted in nearly everyone wanting these kinds of capabilities in the Web sites with which they interact. Ajax development is an exciting opportunity for you to create new and innovative approaches for delivering content to your users. At the same time, you might wonder how you can achieve this in the context of today's J2EE™ applications? This article looks at technology you can apply to achieve these objectives, using the new Feature Pack for Web 2.0 for IBM WebSphere Application Server.
Ajax: A brief overview
Figure 1. A typical Web architecture
An Ajax design pattern enables the shifting of the balance of the user interface to the browser client. The creation of the viewable content can be shared between the browser and server. Some Web applications have the majority of the presentation performed within the browser. An example of this is Google Docs Beta, which provides spreadsheet, documentation, and presentation functionality in a form that you might otherwise expect to find running on a local operating system. These applications mix customized widget code that executes on the client with static HTML. Figure 2 shows how Ajax can impact the typical Web based application.
Figure 2. An Ajax-enhanced Web architecture
A closer look at the feature pack
The IBM WebSphere Application Server Feature Pack for Web 2.0 is an IBM-supported solution for creating Ajax-based applications and mashups on WebSphere Application Server. The feature pack is available for WebSphere Application Server Versions 6.1 and 6.0.2 and for WebSphere Application Server Community Edition V2.0. The feature pack's functionality is intended to provide developers and architects with resources to create Ajax-styled Web applications and architectures, and includes both client-side runtime and server-side functionality. Figure 3 shows the installation panel for the feature pack.
Figure 3. Feature pack installation panel
The client runtime software included with the feature pack consists of the technologies that run on the browser-client. These include the open source Dojo Toolkit and a set of IBM extensions to the Dojo Toolkit to support additional functionality:
Dojo Toolkit 1.0
The Dojo Toolkit provided with the feature pack is divided into five sections:
- Base is the kernel of the Dojo Toolkit and consists of dojo.js. The file is designed to be compact and optimized so as not take long to download to the browser. The Base contains useful utilities, such as bootstrapping and event notification, to name just a few.
- Core contains a wide variety of GUI widgets and the IO Transport for XHR requests to the server.
- Dijit builds on the Base and Core by providing a rich set of additional widget controls. These controls are internationalized and accessibility-enabled.
- Dojox contains experimental aspects of the Dojo Toolkit and represents innovative material that could eventually move into the base or Dijit modules. Dojox is an incubator of sorts and could be considered a preview of new features. Dojox modules include charting, offline storage, and grid, to name a few.
- Util contains a testing harness for Dojo and can be used to test the widgets that are provided with the Dojo Toolkit.
The best way to start getting a feel for the Dojo Toolkit is to experiment with the test samples that are provided. The samples can be opened directly within your browser and offer a glimpse of the incredible flexibility and creativity available for you to use right from the toolkit, or for creating your own custom widgets. The samples can be found in the test directories located in both the dojo and dijit sections. For dojoX, the samples are located in each sub-component directory. (For example, the charting widget has a tests directory that contains code to get you started.)
IBM Extensions to the Dojo Toolkit
- ATOM feed widget
The ATOM library is a client-side widget that can be used to render and use ATOM syndication feeds. The library contains sample components to help you utilize ATOM feeds with your code:
- The AppStore, an implementation of the dojo.data APIs, that provides a data storage solution supported by an application server.
- IBM Gauge widgets
The Gauge library includes a pair of widgets for displaying numerical data in a graphically rich way. Using Scalable Vector Graphics (SVG) or Vector Markup Language (VML), depending on the browser, the AnalogGauge and BarGraph widgets display numerical data with customizable ranges, tick marks, and indicators at any size. The Gauge widget can be used to create dynamically self-updating graphical displays and dashboards. As with the ATOM library, the Gauge library comes with several examples and test cases to demonstrate its capabilities. Figure 4 shows an example.
Figure 4. IBM gauge and bar graph widgets
- IBM SOAP
The IBM SOAP extension can be used to connect a client-side browser widget to an existing SOAP-based service. The overhead of creating a SOAP envelope is handled by the extension. Remote procedure calls to invoke the SOAP service are also handled by the extension.
- IBM Open Search library
The IBM Open Search extension makes it easy to invoke any Open Search-compliant service and to bind search results to widgets within your Ajax application.
Server-side libraries and connectivity
The feature pack also provides a rich set of libraries and connectivity features on the server to assist in client development. These features include:
- Ajax proxy
The feature pack provides a servlet-based forward proxy that can be used in the aggregation of content from different sites. To provide control, the proxy contains a white-listing configuration file that can be used to define the sites the proxy can access. Additionally, the proxy can filter on HTTP headers, cookies, and mime-types to provide a level of control over the sites that a browser-based client can access.
- Web-remoting for Java™ components
- Apache Abdera libraries
Apache Abdera is an open source project that provides feed syndication support. Abdera addresses both the ATOM syndication format and the ATOM publishing protocol. You can use the Abdera libraries on the server to read syndication feeds from other sources or to generate your own feed content for use by your widgets.
The JSON4J library is an implementation of a set of JSON handling classes for use within Java environments. The library can be used to derive your own JSON data streams, and provides:
A simple Java model for constructing and manipulating data to be rendered as JSON.
A fast transform for XML-to-JSON conversion. JSON4J can be used to convert an XML reply from a Web service into a JSON structure for easy use in an Ajax application. The advantage of the transformation is that Ajax-patterned applications can handle JSON-formatted data without having to rely on ActiveX objects in Microsoft® Internet Explorer XML transformations or other platform-specific XML parsers. In addition, JSON-formatted data tends to be more compact and efficient to transfer.
A JSON string and stream parser that can generate the corresponding JSONObject, which represents that JSON structure in Java.
- Ajax messaging
The Ajax messaging service uses a publish and subscribe pattern to connect the browser to the WebSphere Application Server Service Integration Bus (SIBus) for server-side event push to the browser. Client-server communication is achieved through the Bayeux protocol. This protocol is JSON-based and is used as the publish/subscribe mechanism for event delivery. On the server, you can consider the Ajax messaging service a Comet server implementation with the Dojo Toolkit providing client-side support.
The Ajax messaging service bridges browser-clients to the SIBus, enabling a Web service or any other item connected to the bus to publish events to Web-based clients. You can use the Ajax messaging service in a new or existing application by placing a utility file library JAR in an application Web module, setting up a simple configuration file, and configuring servlet mapping. Ajax messaging is included and demonstrated in the Quote Streamer sample application, included in the feature pack.
This article introduced you to the IBM WebSphere Application Server Feature Pack for Web 2.0 with a high level look at the functions you can use to create Ajax-style architectures. The feature pack is available for WebSphere Application Server Versions 6.0.2 and 6.1, and for WebSphere Application Community Edition V2.0.
- Dojo Toolkit Web site
- Dojo Toolkit documentation
- Apache Abdera, an opensource library for creating and agregatting web feeds.
- Build enterprise SOA Ajax clients with the Dojo toolkit and JSON-RPC
- Wikipedia: Comet definition
- IBM WebSphere Application Server Feature Pack for Web 2.0 Information Center
- IBM developerWorks WebSphere Application Server zone
- IBM developerWorks Web development zone
Get products and technologies
- Download IBM WebSphere Application Server Feature Pack for Web 2.0, includes product information
Dig deeper into WebSphere on developerWorks
Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.
Keep up with the best and latest technical info to help you tackle your development challenges.
Software development in the cloud. Register today to create a project.
Evaluate IBM software and solutions, and transform challenges into opportunities.