Sometimes it is very convenient to have a component which allows to display srollbars around another component which would otherwise demand too much space. For an general example of what is meant have a look at http://www.domedia.org/oveklykken/css-div-scroll.php. Echo3 supports scrollbars for Pane-Components, but Pane-Components cannot be added to a Grid, Column or Row etc.pp.. So you have to create your own simple component for this task. Below is an example which should guide you through the process of creating an Echo3-component.

How to create a ScrollArea-Component for Echo3?

To use the following component, please create two packages jfix.echo and jfix.echo.resource in your project and store the files below as mentioned within these packages (exception is the last file, which needs to go into a special folder /META-INF/... of your classpath).

Please note: Depending on your IDE / build-process, ALL files mentioned below must end up in directories below /WEB-INF/classes/.

1. Create a Java-Component (/jfix/echo/ScrollArea.java)

package jfix.echo;

import nextapp.echo.app.Component;
import nextapp.echo.app.Extent;

public class ScrollArea extends Component {

        public static final String PROPERTY_WIDTH = "width";
        public static final String PROPERTY_HEIGHT = "height";

        public ScrollArea() {
                setWidth(new Extent(100, Extent.PERCENT));
                setHeight(new Extent(100, Extent.PERCENT));
        }

        public ScrollArea(Extent width, Extent height) {
                setWidth(width);
                setHeight(height);
        }

        public ScrollArea(Component component, Extent width, Extent height) {
                add(component);
                setWidth(width);
                setHeight(height);
        }

        public Extent getWidth() {
                return (Extent) get(PROPERTY_WIDTH);
        }

        public void setWidth(Extent newValue) {
                set(PROPERTY_WIDTH, newValue);
        }

        public Extent getHeight() {
                return (Extent) get(PROPERTY_HEIGHT);
        }

        public void setHeight(Extent newValue) {
                set(PROPERTY_HEIGHT, newValue);
        }

        public boolean isValidChild(Component child) {
                return getComponentCount() == 0 || indexOf(child) != -1;
        }

}

2. Create a server-side-peer for the component, which synchronizes the state of the component to the client-side (/jfix/echo/ScrollAreaPeer.java)

package jfix.echo;

import nextapp.echo.app.Component;
import nextapp.echo.app.util.Context;
import nextapp.echo.webcontainer.AbstractComponentSynchronizePeer;
import nextapp.echo.webcontainer.ServerMessage;
import nextapp.echo.webcontainer.WebContainerServlet;
import nextapp.echo.webcontainer.service.JavaScriptService;

public class ScrollAreaPeer extends AbstractComponentSynchronizePeer {

        private static final String JFIX_SCROLL_AREA = "JFixScrollArea";

        static {
                WebContainerServlet.getServiceRegistry().add(
                                JavaScriptService.forResource(JFIX_SCROLL_AREA,
                                                "jfix/echo/resource/ScrollArea.js"));
        }

        public void init(Context context, Component component) {
                super.init(context, component);
                ServerMessage serverMessage = (ServerMessage) context
                                .get(ServerMessage.class);
                serverMessage.addLibrary(JFIX_SCROLL_AREA);
        }

        public Class getComponentClass() {
                return ScrollArea.class;
        }

        public String getClientComponentType(boolean shortType) {
                return JFIX_SCROLL_AREA;
        }
}

3. Create a client-side representation of the component (/jfix/echo/resource/ScrollArea.js)

if (!Core.get(window, [ "JFix", "Sync" ])) {
        Core.set(window, [ "JFix", "Sync" ], {});
}

JFix.ScrollArea = Core.extend(Echo.Component, {

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

        componentType :"JFixScrollArea"
});

JFix.Sync.ScrollArea = Core.extend(Echo.Render.ComponentSync, {

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

        renderAdd : function(update, parentElement) {
                this.divElement = document.createElement("div");
                this.divElement.id = this.component.renderId;
                this.divElement.style.overflow = "auto";
                this.divElement.style.width = Echo.Sync.Extent.toCssValue(
                                this.component.render("width", "100%"), true, true);
                this.divElement.style.height = Echo.Sync.Extent.toCssValue(
                                this.component.render("height", "100%"), false, true);

                Echo.Sync.Color.renderFB(this.component, this.divElement);
                Echo.Sync.Font.render(this.component.render("font"), this.divElement);

                if (this.component.getComponentCount() == 1) {
                        Echo.Render.renderComponentAdd(update, this.component
                                        .getComponent(0), this.divElement);
                }

                parentElement.appendChild(this.divElement);
        },

        renderUpdate : function(update) {
                var divElement = this.divElement;
                var parentNode = divElement.parentNode;
                Echo.Render.renderComponentDispose(update, update.parent);
                parentNode.removeChild(divElement);
                this.renderAdd(update, parentNode);
                return true;
        },

        renderDispose : function(update) {
                delete this.divElement;
        }
});

4. Create mapping between component and peer (/META-INF/nextapp/echo/SynchronizePeerBindings.properties)

Please note: this path/file needs to be in your class-path. Don't create META-INF in your Web-Application-Root or within your WEB-INF-folder. /META-INF/... needs to land in WEB-INF/classes when your application gets deployed.

jfix.echo.ScrollArea            jfix.echo.ScrollAreaPeer

5. Now you can use the ScrollArea-component in your application like any other component

    Column column = new Column();
    for(int i=0;i<25;i++) {
        column.add(new Label("Test - " + i));
    }
    add(new ScrollArea(component, new Extent(100, Extent.PERCENT), new Extent(250, Extent.PX)));