A look at the WebSphere Application Server Feature Pack for Web 2.0

This article provides an overview of the IBM® WebSphere® Application Server Feature Pack for Web 2.0, including descriptions of Ajax-styled architectures and the contents of the feature pack. This information is intended for developers and architects looking for client-side and server-side solutions that can be used to create their own Ajax-styled architectures. This content is part of the IBM WebSphere Developer Technical Journal.

Kevin Haverlock (kbh@us.ibm.com), Software Development, IBM

Author photoKevin Haverlock is a software engineer for IBM in Research Triangle Park, NC. He has worked on various portions of WebSphere Application Server dating back to 5.0. His most recent assignment was the Web 2.0 Feature Pack for WebSphere. Kevin is currently working on web development tooling to help customers enhance their serviceability of WebSphere Application Server.



27 February 2008

Introduction

Asynchronous JavaScript and XML (Ajax) represents the next step in the evolution of Web development that lends itself to the creation of rich user interface presentations on the browser. The dividing line between the capabilities of a heavyweight graphical user interface (GUI) application running on the native operating system and the richness that is possible within today's browsers is becoming blurred. You don't have to look much further than Google Maps or the newly renovated Yahoo! Mail to see how Ajax technology is bearing out.

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 shows a typical Web-based application pattern that is very common in a Web development scenario. In this example, the server accepts requests from the browsers and issues a response back to the client. In the case of a browser client, the browser sends the request and waits for the response. The response is typically HTML, which is nothing more than metadata containing the presentation information of how the page should be formatted in the browser. There might be additional page styling that is returned in the form of Content Style Sheets (CSS). The creation of the content is performed on the server and returned to the browser. The content of the page is often aggregated from a number of backend sources, which could be additional Web services requests to other domains or content from persistent data stores such as IBM DB2®, Derby, or MySql. While there might also be JavaScript™ present in the page returned to the server, this is usually used in a supporting role to make the page seem more interactive.

Figure 1. A typical Web architecture
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
Figure 2. An Ajax-enhanced Web architecture

In an Ajax model, creation of content in the browser is performed locally by the browser. In JavaScript, this is done by manipulating the Document Object Model (DOM) that the browser maintains to describe the document the user is viewing. Updates to the DOM are immediately reflected in the presentation that the user sees within the browser. On the browser side, the constructs are known as widgets and are used to described self-contained code that can be used to manipulate the presentation, react to user input, or asynchronously communicate back to the server.

With aspects of the presentation delegated to the browser, the browser now needs a way to communicate back to the server to derive information. As an example, the widget might have a Web table to update with the data representing rows in a database server. In JavaScript, XMLHttpRequest (XHR) is a powerful API that can be used for this. An XHR request enables the establishment of an independent communication channel between the server and the browser page that the user is viewing. The API enables the transfer of XML or other text information using HTTP. The server treats the request from the client as it would a normal request, and returns a response, which can contain the data the widget needs to display in the browser.


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
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 1.0 is a powerful open source JavaScript library that can be used to create rich and varied user interfaces running within a browser. The library requires no browser-side run time plug-ins and runs natively on all major browsers. This is boon for JavaScript developers, since it helps abstract away the eccentricity of different browser implementations.

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:

    • A base library that supplies utility functions, an implementation of the ATOM data model as JavaScript objects, and a wrapper object to handle two-way communication with an ATOM feed.
    • 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
    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

    A challenge in combining Ajax-based architectures and J2EE solutions is mapping client-side runtime to J2EE constructs. As an example, consider a JavaScript widget that displays information in a table that is dynamically created using JavaScript. The data needed for the table exists on the server and is accessible using EJB components -- so how do you access those EJB constructs?

    The feature pack provides a Remote Procedure Call Adapter (RPCAdapter) that is provided as a JAR library that can be embedded into a server-side Web application. The RPCAdapter can be used to accept HTTP requests, such as POST and GET, and map the requests directly to user-created classes. One of the powerful aspects of RPCAdapter is the ability to serialize EJB session and collection data to a JSON (JavaScript Object Notation) or XML stream returned to the browser client. The JSON and XML data can contain the information to be displayed by the widget.

  • 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.

  • JSON4J

    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.


Conclusion

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.

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=291169
ArticleTitle=A look at the WebSphere Application Server Feature Pack for Web 2.0
publish-date=02272008