February 16, 2019
Hot Topics:

Understanding Echo

  • May 22, 2006
  • By Mugdha Vairagade
  • Send Email »
  • More Articles »

With this article you will gain an understanding of Echo by reviewing its benefits, discovering how it works, and learning how to build an application. The material is meant for Web developers who are looking for better/free/Open Source/Java-based Web development tools & APIs. Knowledge of Java programming (JDK 1.3 or higher) and Servlets would be helpful to understand this article.

Developing an application for the Web has many advantages. Web applications have a short development cycle and are low cost. Also, Web applications are ideal for multi-user scenarios (due to zero-cost-per-client advantage), where many users access a central application through the Internet or an intranet using a Web interface (for example, timesheet recording at offices, customer care help desks, collaboration tools, and so forth). Now, even traditional rich-client (desktop-based) applications for tasks such as word processing, spreadsheets, and presentation making are also available online as Web applications.

Limitations of Web Applications

Web applications score heavily on many counts over rich-client applications that are complex, take lots of time to build, and are costly. But, Web applications do have a few serious drawbacks that force developers to move towards rich-client applications.

Web applications are page-based and non-modular. This makes modifications and upgrading difficult because developers have to go through a maze of Web pages to make necessary changes.

Because the Web is essentially stateless, developers have to do some extra work to save state—session/user-specific data for each Web page viewed, to maintain continuity (return to page viewed last)—or user-specific customization as in rich client applications. A significant amount of code is devoted simply for saving state data.

To make a Web application interactive, a sophisticated event generation and handling mechanism is required; it is available only through scripting (written in JavaScript, VBScript, PHP, CGI, and so on). Complex scripting must be embedded in the desired Web pages to add event-based functionality (for example, displaying sub options on selection of form elements, pre-submission form data validation, and the like), thus increasing page size and coding time. These scripts are mostly non-modular and non-reusable. This drawback also makes developing multi-window/multi-frame web applications difficult because tracking events across multiple windows/frames is highly error-prone.

Web applications send user input (form data) to the server, encoded as HTTP request parameters. Server-side scripting is used to parse and validate these parameters for each HTTP request. In case of multiple forms, a corresponding number of server-side scripts is required, one script for each form. Thus, a significant part of application code is dedicated to this repetitive task.

To create a Web application that is feature-rich and multi-modal such as a rich client application, developers must overcome these limitations. Echo, a free Java-based Open Source framework, helps to do just that.

What Echo Has to Offer Web Developers

The Echo framework is basically an API that provides ready-made components for developing Web applications. The Echo framework consists of two separate tiers, The Component Framework and The Application Container. These two tiers separate the concern of event-driven Web interface development from actual coding requirements to represent the same in a browser environment.

The component framework

The Component Framework tier, which is an API, provides a user interface toolkit (similar to the Java SWING API) for developing a Web user interface or Web UI, which is feature-rich and event-driven like a rich client application. Just like SWING, this toolkit contains ready-made and reusable UI components. Developers can put together these components, such as Window, ContentPane, Button, and so forth, or create custom components by deriving from these components to create a Web UI rapidly. Developers can also "add" Listeners to any such UI component to listen to and handle any events generated by the component (again, like SWING).

The application container

Whereas the Component Framework helps put together an event-driven UI for the Web application, the Application Container takes care of translating the same UI into its browser representation at the client-side, with a rich-client–like look-and-feel.

The Application Container dynamically generates one peer object for each UI component included in the Web UI. Now, these peer objects are responsible for synchronizing the current state of client-side browser representation with a server-side Web UI model. They follow a two-way approach to do so, involving the following tasks:

  1. Rendering and re-rendering browser representation at the client side according to the current state of the server-side Web UI model, using appropriate HTML-JavaScript code. This coding also lends event-based functionality and rich-client–like look-and-feel to the client-side browser representation.
  2. Firing appropriate events to corresponding server-side UI components, to keep their state updated, in response to any changes made by the end user in relevant parts of the client-side browser representation (for example, opening/closing of windows, changing scrollbar positions, and input submission from multiple forms).

This approach has obvious advantages for developers. It enables the developers to work directly with the server-side component-based UI model, instead of worrying about coding of underlying HTML and JavaScript necessary to implement the same in a client browser. Any modifications made in the server-side UI model are immediately reflected in the client browser. This approach also lends modularity and hence maintainability to the resulting Web application.

At the client side, any changes in browser representation made by the end-user are recorded by using invisible form elements inside a hidden "controller" frame, which is automatically attached to each application window being rendered in the client browser by the Application Container. This controller frame's job is to record all these changes until the client browser needs to send an HTTP request to the server (usually on form data submission). Then, the controller frame submits all changes at once to the server, encoded as parameters of an outgoing HTTP request. This approach helps reduce the server load by minimizing server interaction.

At the server-side, the Application Container receives and processes such HTTP requests. The Application Container takes care of parsing and validating parameters of every HTTP request and, in response, fires appropriate events to server-side UI components modified by the end user in the client browser. Now, the corresponding event handlers ensure that the server-side components are synchronized with their updated state in the client browser representation.

Echo also provides state-saving functionality through its abstract class, EchoInstance. Every Echo application must extend this EchoInstance class. For every new user, an EchoInstance object is created by the Application Container and stored in the user's session. This stateful object now is used to store application-wide state information for each end-user—such as user name, references to open transactions, last visited page, and so forth.

The Echo framework takes care of all the underlying and repetitive work while allowing developers to concentrate on a higher level of application development and giving end users a rich-client–like experience from Echo-based Web applications.

Setting up Echo

After getting acquainted with Echo, you are ready to build an application with Echo. But first, you need to set up Echo by following these steps:

  1. Download the compressed latest stable version (1.1.4) of the Echo framework source code (in zip or .tar.gz format), from the Echo Web site.
  2. Note: Running Echo will also require that the following are installed:

    • JDK 1.3 or higher (because Echo is Java-based).
    • A Servlet Container compliant with Servlet specification v2.2 or higher; for example, Jakarta Tomcat 4.0+, JRUN 3.0+, Resin 1.1+, and the like. Under the hood Echo applications are Servlets and need a servlet container to run them.
    • Optionally, a Java build tool to compile application code and create a deployable Web Archive (.war) file; for example, Apache Ant or Maven.
  3. Uncompress the Echo source and save the resulting Echo directory in any desired location. Now, locate the Echo.jar and EchoServer.jar files inside the lib subdirectory. Either include the absolute path of these two files in the CLASSPATH of the Web application being developed; or for a Web application to be deployed as a Web archive, copy both files in the WEB-INF/lib directory of the Web application's project.

Now, you are ready to build applications over the Echo Framework.

Page 1 of 3

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

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