Echo Web Framework

Echo components support the ability to be navigated and focused using keyboard control.

The Component Object

To allow a component to be focusable, its Echo.Component-derived implementation must have its focusable property set to true. This is done simply by adding the property to the object definition, as in the following case for our spin button example:

SampleComponents.SpinButton = Core.extend(Echo.Component, {

    $load: function() {
        Echo.ComponentFactory.registerType("SampleComponents.SpinButton", this);
    },

    componentType: "SampleComponents.SpinButton",
    focusable: true
});

The Synchronization Peer

To allow a synchronization peer to support focus management, EchoRender.ComponentSync provides an optional method, renderFocus(). This method is invoked on a peer whenever the application's focus changes to its supported component. Only peers of components that have their focusable property set to true will ever receive such an event.

A renderFocus() implementation should set the focus of the browser to the first focusable DOM element of the component. The Core.Web.DOM.focusElement() provides a cross-platform means of doing this, as there are several browser quirks related to focusing. The following renderFocus() implementation will allow the spin button example to be focusable:

renderFocus: function() {
    Core.Web.DOM.focusElement(this._inputField);
}

The tabIndex property: Echo does NOT make use of a DOM element's tabIndex property. The tabIndex property should not be used. Such a property is fairly incompatible with the idea of dynamic applications, given that tab indices would have to be potentially reassigned every time an application changed state. The Echo client instead installs keyboard listeners for Tab/Shift-Tab keypresses and dispatches focus to the appropriate component when these event listeners are notified.