RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Echo2: Turn Java into AJAX Without Touching JavaScript or JSP : Page 2

Get to know Echo2, a pure Java framework for developing AJAX-based web applications. Using Echo2 typically does not require any HTML or JavaScript coding, unless you are extending the 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.


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 OK
Button b = new Button("OK");
//create a layout component
Row r = new Row();
//add the component to the row


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 OK
Button b = new Button(“OK”);
//add an action listener
b.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.


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 OK
Button b = new Button(“OK”);

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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date