Echo Web Framework

This guide previously introduced the practice of rendering components by directly modifying the client-side DOM, i.e., adding HTML elements to the displayed hierarchy that represent a component's state. Echo3 provides an additional means of rendering: a component can be rendered as an embedded client-side Echo application. This strategy is useful with higher-level components, for example, Echo3's "Extras" add-on library uses this feature to render the RichTextArea, a component that contains pull-down menus, toolbars, and displays dialog boxes of its own. Rendering such features by hand (using DOM manipulation) for such high-level components would be impractical.

Components that use this approach are referred to as Application Rendered Components.

Creating an Application Rendering Component

The difference between DOM-rendered and application-rendered components is not seen in the component class. As is the case throughout Echo, only the synchronization/rendering peer can be concerned with how the component is rendered. The following Echo.Component class will be used for example purposes, but wouldn't look any different if it used DOM-based rendering:

ArcExample.ExampleComponent = Core.extend(Echo.Component, {

    componentType: "ArcExample.ExampleComponent",
    
    $load: function() {
        Echo.ComponentFactory.registerType("ArcExample.ExampleComponent", this);
    }
});

Synchronization peers for application-rendered components will look a bit different. Instead of being derived from Echo.Render.ComponentSync, they are derived from Echo.Arc.ComponentSync. The following code shows an example application-rendered component synchronization peer:

ArcExample.ExampleComponentSync = Core.extend(Echo.Arc.ComponentSync, {

    $load: function() {
        Echo.Render.registerPeer("ArcExample.ExampleComponent", this);
    },

    createComponent: function() {
        return new Echo.Label({
            text: "This is a ARC-rendered label: " 
                    + this.component.getRenderProperty("text")
        });
    }
});

An Echo.Arc.ComponentSync implementation must only provide an implementation of the createComponent() method. This method should return the root of the component hierarchy representing the rendered state of the component. In the case of this example, the component returns a new Label whose text partially contains the value of the text property of the ArcExample.ExampleComponent component itself.

Echo.Arc.ComponentSync is derived from Echo.Render.ComponentSync. Implementations of the required abstract render???() methods are provided.