Echo1 White Paper

Echo: The next-generation in Web application development.

Introduction

Web applications are traditionally built upon frameworks that simplify the tasks of processing HTTP requests and rendering HTML pages. Applications that require rich-client interactivity can be prohibitively difficult to implement using such a page-centric design. The open-source Echo framework takes a radically different approach by providing an application-centric platform for J2EE Web-based development. A translation layer resides beneath Echo's component toolkit that translates the state of a server-side application into the HTML and JavaScript required to display it on a remote client browser. Echo is capable of supporting multi-window, multi-frame applications with a degree of control closer to that of a GUI toolkit than a Web framework. The overall effect, from both the developer's and end-user's perspective is of working with a desktop application.

Business Objectives

  • Increase user-acceptance of Web-based applications.
  • Increase capabilities of Web-based applications.
  • Improve quality, reliability and security.
  • Decrease developer training costs
  • Decrease development time.
  • Decrease application support costs.

Technical Objectives

  • Provide an object-oriented and event-driven framework.
  • Require no developer knowledge of HTML, HTTP, and/or JavaScript.
  • Allow precise control of application appearance.
  • Support applications with multiple windows and frames.
  • Minimize server load and network traffic.
  • Actively synchronize client browser state with application state.
  • Operate on HTML4/JavaScript1.3 compliant browsers, including Internet Explorer 5.5, Mozilla, and Mozilla-based browsers, e.g. Netscape 6.2.1.
  • Require no plug-ins, Applets, or ActiveX controls.
  • Deploy applications to any Java Servlet Container (versions 2.2 and higher).

The Page-Based Problem

Many platforms exist today for the development of Web applications: Java Servlets and JSPs, ColdFusion, ASP, PHP, and CGI/Perl, to name a few. These technologies are all built on a page-based paradigm for application development: an application consists of a collection of procedures that service HTTP requests. Each procedure is required to compose an HTML document and send it back in response to a browser client's request.
The "page-based" paradigm is radically different from the generally accepted object-oriented and event-driven paradigm used for developing user interfaces. It is not necessarily different in a good way, either:

  • Page-based applications require developers to have knowledge of HTML and HTTP, in addition to the server-side technology in which the application is developed. For more interactive or complex applications, developers must also know JavaScript. These technologies can quickly become exponentially more difficult to work with as the complexity of an application increases.
  • Page-based applications require the client to send data to the server using HTTP requests, and responses must be in the form of HTML documents. The application is responsible for parsing and validating the parameters of each HTTP request.
  • Page-based applications take a very odd approach to remembering their state: The developer can pass arguments back and forth between pages and the server using HTTP parameters, and can store a collection of global data for each user session on the server.
  • It is often difficult and is sometimes nearly impossible to create HTML and JavaScript that will work well in the diverse browser environments that applications will be deployed to.
  • Creating multi-window applications using a page-based architecture is best avoided when possible. The state of a multi-window application can easily be corrupted by the browser since the server will get no notification if windows are closed.
  • Large sections of application code is dedicated to generating HTML and JavaScript documents. Creating source code that generates source code in another language can be time-consuming, difficult, and error-prone.

The Echo Solution

Echo releases the developer from handling the busywork of interacting directly with the Web browser and server and instead provides him a framework with which to solve business problems quickly. The Echo framework handles all HTTP request parsing and HTML/Javascript generation automatically. Echo applications are notified of user actions through events, just like a Java Swing application. User interfaces are built using a powerful library of visual components that can be combined to produce very intricate interfaces, but without the need to code a single line of HTML.

Features and Benefits

Object-Oriented and Event-Driven Framework

The standard for developing desktop applications using Java is to use the Swing and AWT libraries. These libraries provide all the capability necessary to create desktop applications using an entirely object-oriented and event-driven approach. With this approach, any user action is described by an event that is sent to event-listening objects that have requested to hear about it. Desktop applications have full control over their environment. They may open and close windows and change their content without difficulty.

The norm for the development of web-based applications using Java is to use a combination of the Java Servlet and JSP technologies in addition to HTML and JavaScript. Web-based user interfaces developed under these technologies are not very object-oriented and are not event-driven. This model is "page-based": each JSP page or Servlet hyperlinks to another. Clicking on hyperlinks will result in a query being passed to the server, which will process that query and replace the visible page in the client browser with a response page. Any notable user-action results in an HTTP request. The response to any user-action must be in the form of another HTML document.

Echo provides an entirely object-oriented and event-driven framework for the development of Web-based applications. When a user performs an operation that the application needs to know about, the appropriate object in the application will receive an event. The application may then determine what action, if any, to take as a result of that event occurring.

Precise Layout Control

Echo has many features for building creative and distinct user interfaces. Echo allows for precise positioning and appearance of user interface components across all of its supported browser platforms.

Applications may divide windows into multiple independently scrollable panes. Echo's Grid and Filler components allow for precise layout of content within panes. Every component has settings for adjusting its font and foreground and background colors.

Multiple Window Applications

As is the norm for desktop applications, Echo applications may display content in multiple windows. When a user attempts to close a window, the application is notified.

Undetermined Actions

Page-based applications require that every user action has a predefined result. Clicking a link MUST either load a new Web page or execute JavaScript code. It requires significant additional time to create a page-based application where the result of a user action will not be determined until after the server has been notified of the user's action.
Echo applications are notified of user actions as they happen. When a user action occurs, the application can alter the state of the user interface in any way it needs to (the contents of windows and panes can be changed, and windows may be opened and closed). When the application has finished handling the event, the Echo server will update the client's browser to reflect the changes it made.

Rollover Support

Buttons (including toggle buttons) have built-in rollover support. The developer may specify an alternate color and image for a button when the user places the mouse cursor over it.

Improved Toggle Buttons

Standard HTML check boxes and radio buttons have a deficiency in that to toggle a check box or select a radio button a user must actually click on the check box or radio button icon itself. Clicking the text label that identifies it will have no effect.
Echo allows the developer to assign a label with text and/or an icon to a check box or radio button, that when clicked, will toggle the button's state. You can optionally listen for action events on these buttons, causing the server, and therefore your application to be immediately notified if they are clicked.

Dynamic Image Capabilities

There are several ways to display images within an Echo application. In most cases, Echo applications will use images that are retrieved from a Web server in the same manner as any other Web application. In the case where an Echo application needs to create or modify an image, it can create a java.awt.Image object and have it appear within an application without any additional difficulty. Images that are in the form of byte arrays or output streams may also be displayed.

Custom Components and Events

Custom components and events can be created to handle common user interface functionality.

For example, you could create a component called "LoginBox" that displayed two text entry fields, one for a user login and another for a password, along with a "Login" button. The custom component could even fire custom "LoginEvent" events when the user pressed the "Login" button, that had the properties "login" and "password" associated with them. You could then use this functionality across many applications.

Active Client Synchronization

Each time the client makes a request to the server, it sends a snapshot of the state of the client browser. The Echo server will determine if anything is not as intended, and send instructions to the Web browser to automatically resynchronize if necessary. When you are developing an Echo application, you are guaranteed that what you intend users to see is what users will see.

Minimum Server Load and Network Traffic

Every time a user's action requires the server to be notified, the browser client will notify the server of any information that has changed on the client. The server will then notify the application of changes through events. If the application makes any changes to the appearance of the user interface, the server will then instruct the browser to refresh modified frames and open or close windows if necessary. Data that has not changed is not resent.

No HTML, HTTP, or JavaScript knowledge required.

The only prerequisite knowledge for developing with Echo is a working knowledge of the Java programming language. HTML and JavaScript experience is not required.

Modular Design

Echo is built from two distinct components: the core and the server. The core contains all the functionality that Echo applications can use, such as Labels, TextFields, Windows, and Buttons. The server is used to translate whatever components are being used by the application into HTML and JavaScript. The core code has no dependency on the server code.

Open-Source Licensing

Echo is distributed under the terms of the GNU LGPL license. This license gives you the freedom to modify Echo and distribute modified versions of it. The LGPL license gives you complete freedom to develop closed-source, commercially marketed applications that depend on the Echo framework. The only condition is that if you actually modify the source code of the Echo framework itself, then you must provide the source code of the changes you make to it. Please see the copy of the GNU LGPL license on our Web site at http://www.nextapp.com/products/lgpl_license.html