Echo3 New Features

The following provides an overview of some major new features present in Echo3 (compared to Echo2). This list is not yet complete.

Server-Side Java Features

  • Component Framework Backward Compatibility: The Echo3 and Echo3Extras Java libraries are MOSTLY backward compatible with Echo2. Some porting work is required: the most notable issue is that the base package name has been changed form "nextapp.echo2" to "nextapp.echo". The first step in porting is thus a global search-and-replace. XML Stylesheets must be translated to a new format (a translator is provided). Additionally, EchoStudio3 provides a complete project translation utility. The only significant work in porting is with custom components which render their own HTML and JavaScript: such components must be ported to a new API (which is far more straightforward and automated than the Echo2 equivalent).

Developer Experience Improvements

  • Automatic Serialization: Data objects sent between client and server can be automatically serialized between Java, XML, and JavaScript. The serialization architecture is extensible--serialization code for new object types may be added by the developer.
  • Simplified Client/Server Synchronization Peers: Serializing components and commands between client and server is performed automatically using the built-in serialization architecture. The component developer only need specify which properties should be sent (for components, all local style properties are automatically sent).

User Experience Improvements

  • Improved Layout Engine: Echo3 features an improved layout engine which can automatically size components to their content (e.g., WindowPanes and SplitPanes.
  • Reduced Bandwidth: Echo3 uses approximately 30-40% of the bandwidth of a comparable Echo2 application. StyleSheet information is sent to the client only once (the entire stylesheet is serialized to the client at boot).
  • Reduced Server Load: Due to the fact that the server is no longer rendering HTML, it has quite a bit less work to do. The reduced bandwidth usage means less server CPU and memory utilization for rendering.
  • Keyboard Navigation / Focus Management: Focus amongst components is now fully tracked. Echo does away with the practice of using sequential tab index numbers to control focus order, instead presenting next/previous element focus events to components for a more intuitive user interface. Components that have multiple "focus points" especially benefit from this feature.

Client-Side Application Framework Features

  • Client-Side Application Framework: The entirity of the Echo framework has been ported to JavaScript, such that applications may be developed entirely in JavaScript and function entirely without any server round trips. The API of the client-side version is similar to the server-side framework. (Server-side Java application development is supported as well. The Server-side framework makes use of a derivative of the client-side framework to render the state of the server-side application remotely.)
  • Delayed Batch Rendering: The client application framework renders changes to its component hierarchy in batches, much in the same fashion as the client/server version of the Echo framework. This strategy increases rendering efficiency and eliminates potential screen flickering issues.
  • Application Rendered Components (ARCs): Client-side component synchronization peers may render components to HTML by creating a container HTML element (e. g., a <DIV>) and then loading a new client-side-only Echo application within the DIV. The Echo3Extras Rich Text Editor uses this feature to display a MenuBarPane, WindowPane-based dialogs, ColorSelects, toolbars and other UI elements. By writing the Rich Text Editor as a client-side Echo application, much time was saved and the editor is far more feature rich. Additionally an application rendered component can pull style data from the parent application's stylesheet, such that the appearance of its rendered Echo components will mimic that of the containing application.

Client-Side JavaScript / DOM / HTML Features (CoreJS Library)

Echo3 is built atop the CoreJS JavaScript Library, which provides cross-platform APIs for building JavaScript objects and interfacing with web browser features (CSS/DOM).

  • Class-based JavaScript Inheritance: The CoreJS module provides the capability to use class-based (rather than instance-based) inheritance in JavaScript.
  • Abstract JavaScript Properties: The CoreJS system of class definition allows for the declaration of abstract methods, ensuring concrete implementations define them.
  • Virtual and Final JavaScript Properties: The class definition system enables JavaScript properties to be declared as either virtual or final, thus allowing reservation of property names and preventing derived classes from overriding internal variables found in base classes.
  • Method References: The CoreJS module defines a concept of "method references" for callbacks which are used throughout the client-side framework. Method references can be used when registering event listeners on components, DOM elements, and arbitrary script objects such that generated events will be fired to a method of a specific object instance.
  • DOM Event Processor: All DOM events are now handled by the CoreJS DOM event processor, enabling the use of capturing event listeners on all platforms (Internet Explorer does not natively support capturing listeners).
  • Scheduler: The CoreJS module provides a window.setTimeout/Interval()-based scheduling system to invoke tasks repeatedly, after a delay, or after the current JavaScript context has completed. The scheduler supports method references, such that methods may be invoked on specific objects.
  • Off-screen Rendering: Infratstructure is available to provide off-screen rendering to the DOM, such that sizing calculations may be performed on rendered HTML before placing it onscreen. This method is used by the WindowPane component, for example, to automatially size title bar height.

New Components

  • (Extras) RichTextArea: Provides a highly customizable rich text editing implementation.
  • (Extras) Tree: Provides a model-based Tree/TreeTable implementation.
  • (Extras) Group: Provides a bordered region with an optional title.
  • (Extras) ToolTipContainer: Provides capability to apply tooltips to arbitrary components.