he web is experiencing a rapid trend towards AJAX and rich Internet applications (RIAs). With AJAX as a tool for RIAs, developers can now deliver much richer content over the web and produce much more sophisticated user experiences. At the same time, a lot of frameworks that hide the inherent complexities of writing AJAX-based web applications are emerging.

These frameworks are broadly classified into client-side or server-side products. Echo2, a complete server-side AJAX framework, translates pure Java code into HTML and all the required AJAX components on the fly. This article introduces Java developers to the power and simplicity of Echo2 and provides a simple AJAX-based web application for demonstration.

Introduction to Echo2

Echo2 is a pure Java framework for developing AJAX-based web applications that can run in any servlet container. Developers using Echo2 typically do not need to know or touch any HTML or JavaScript code, unless they are extending the framework. As a purely server-side product, Echo2 processes all client interactions on the server and sends results back to the browser in a DOM format. The Echo2 client engine then transforms the DOM into HTML.

Because it is based on pure Java, Echo2 abstracts from the developer all the nuances of HTML, JavaScript, and traditional JSP-based application development. This allows Java programmers to build web applications quickly and easily. Echo2 also instantly introduces AJAX capabilities into the application; the developer doesn’t have to worry about the plumbing of the AJAX communication.

Echo2 delivers these capabilities thanks to its rich feature set:

• It supports all AJAX features, including partial page update, asynchronous processing, and server push.
• It is easy to debug with remote debugging tools, just like a normal Java application.
• It is easy to unit test.
• It is extensible. Developers can extend the framework easily to create more UI components.

Along with these advantages, however, Echo2’s sever-side nature makes it slower than equivalent client-side frameworks. For this reason, many argue that Echo2 is better suited for intranet applications that don’t require speed and bandwidth as much. Yet benchmark tests have shown that Echo2 performance is optimized to such a degree that it can serve all kinds of web applications. (Click here for a comparison of Echo2 and the Java-based, client-side Google Web Toolkit (GWT) framework.)

The Basics of Echo2

Echo2 provides a set of component classes for displaying HTML elements within a browser and laying those elements out to achieve a certain look and feel. These components can listen to events sent to the server side, where they process those events and then send the desired outcome back to the browser. Also, the framework takes care of the underlying AJAX communication details for client/server interaction.

Components

Echo2 provides two types of components, which are represented as Java classes and extend from the parent Component class:

• UI interaction components such as buttons and text fields
• Layout components such as columns and split panes

Interaction components can be laid out within layout components using layout data. For example, a developer can place a text field and a button in a row, or place two buttons within a column to create a vertical menu, and apply defined spacing (padding in HTML terminology) between the buttons.

Layout components are hierarchical (e.g., a parent row component can hold any number of child components), and one layout component can hold another layout component (e.g., one column can hold multiple rows). Developers can add or remove child components from the hierarchy using the Component class. Of course, only layout components allow for child components. Echo2 will throw a runtime error if you try to add a text field to a button.

More sophisticated widget-like UI components, which allow for rich user experiences, are available within Echo2 as well, such as table, date picker, or modal dialogue.

All components support a set of attributes to control their behaviors or their appearances on the screen (layout data). For example, you can set the width of a button and dictate what text will be displayed. You can define a column of width of 300 pixels with a background color of gray as well. The following code snippet helps demonstrate the creation and layout of components:

//create a button with a text OKButton b = new Button("OK");//create a layout componentRow r = new Row();//add the component to the rowr.add(b);

Events

Echo2 is an event-driven framework that processes all events on the server side and sends the responses back to the browser in a DOM format. So all client interactions, such as the user pressing a button, are captured as events that are propagated to the server. The response from the server causes a state change in the browser and the user sees the desired outcome of his or her action. Hence, Echo2 provides mechanisms to attach or detach event listeners to any component.

For example, a button component can register an ActionListener, which will receive an ActionEvent when a user clicks the button:

//create a button with a text OKButton b = new Button(“OK”);//add an action listenerb.addActionListener(new SomeActionListener());

Echo2 provides XXXListener interfaces, where the event-processing logic should reside. Every handwritten event listener class must implement an XXXListener interface and provide an implementation of the actionPerformed() method within that interface.

public class SomeActionListener implements ActionListener{  public void actionPerformed(ActionEvent event) {     //event-processing logic goes here  }}

Layout Data

The layout data are mechanisms to control the visual appearances of components on the screen. Each layout component provides its own layout data. To control a component’s appearance, a developer can supply layout data to any child components he or she has added to the layout component. For example, a button added to a row can could be represented with a RowLayoutData. The forthcoming sample application will provide an example of this, but for now it suffices to know that layout data are equivalent to CSS attributes.

Styles

Echo2 supports a few options for styling components:

1. Set properties and other attribute values on each component using the API. This approach is tedious when applying the same style across many components in a large application..
2. Define styles within a program as constants using Style classes and apply the predefined styles to components.
3. Externalize the style to an XML file (not to a .css file). The XML style file will have Echo2-specific syntax, which is close to HTML CSS syntax.
4. Use pure HTML templates and CSS to create the layout and look. This is an advanced technique.

This article demonstrates Option 1. For example, using Option 1, a developer can set the height and width of a button like this:

//create a button with a text OKButton b = new Button(“OK”);b.setWidth(24);b.setHeight(20);

Where Do Layout Components Go?

So you know that for Echo2 layout you have to create a layout component and then add other interaction components to it. But where do you add the layout components? The answer is the pane components, Echo2’s high-level parent containers for all other components. These components span the entire browser screen and allow you to add components by specifying layout information.

Some examples of pane components include:

• ContentPane: This simplest of the pane components covers the entire browser area.
• SplitPane: This component divides the whole browser area into two parts, either vertically or horizontally.
• WindowPane: This component is a movable window that overlays the browser area. Of course, a window pane needs a parent container to overlay so it can be added only to a content pane.

In the following section, you will build an application to see how it all hangs together.

Building the Sample Application

Building a very simple Echo2 web application from scratch should complete your understanding of the framework. To begin, you must create the following two Java classes, from which other Java class must extend:

• ApplicationInstance: This class represents a user state throughout the application. Each user gets his or her own instance of ApplicationInstance, and Echo2 maintains the application instances per user in the HTTP session.
• WebContainerServlet: This class handles the HTTP requests and creates new application instances as needed.

In addition to these, you can create different content pane and component instances, use different layout options, register events, and implement ActionListeners to develop a functional web application.

The sample application provides a menu for viewing existing items and then adding items to a database. The existing items will be displayed in a table format with the item name and price. The add item screen will display the existing items, present a modal window to add a new item name and price, and then dynamically update the list of existing items without refreshing the whole page.

1. Main Screen: Begin by building a main screen to add to the browser window. The main screen will be divided vertically into two parts, menu and content, by using a split pane. Listing 1 shows the code for the main screen.
2. Menu Screen: Next, create a separate menu screen that will hold the menu items and allow the user to view existing items and to add new items. Listing 2 shows the code for the menu screen.
3. Item Screen: Next comes the item screen, which will handle the display of items. It will use a table to display the item data. Listing 3 shows the code for the item screen.
4. SampleAppInstance: Extend the ApplicationInstance class to create your own class for the application. Set the main screen as the default screen for the application:

   public class SampleAppInstance extends ApplicationInstance {     ContentPane parentContentPane = null;     public Window init() {           //the default browser window          Window window = new Window();          window.setBackground(Color.BLACK);          //create main screen          parentContentPane = new MainScreen();          //set it as default screen          window.setContent(parentContentPane);          return window;     }     }

Figure 1. Diagram of the Completed Echo2 Web Application: This is a diagram of a simple Echo2 web application.

5. SampleServlet: Now extend the WebContainerServlet class and create a new instance of SampleAppInstance that creates and returns a new application instance for every new user:

   public class SampleServlet extends WebContainerServlet{    public ApplicationInstance newApplicationInstance() {        //return a new application instance        return new SampleAppInstance();     }}

Figure 1 shows a diagram of the completed application.

More to Learn

You should now have a better understanding of the power and simplicity of Echo2 for Java developers. It’s worthwhile exploring some more advanced areas such as styling and HTML template techniques. These techniques use HTML and CSS to create a custom look and feel. You can then use Echo2 components in specific areas of your templates. Happy exploring!