Please note: the following example reflects latest changes to Echo3, so please use the latest build from Echo3Go.

Sometimes it is very convenient to have a component which allows to display HTML-snippets in your application (e.g. documentation, light-weight-reports, etc.pp.). Echo3 doesn't support this out of the box (the vanilla Label quotes HTML), 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 HtmlLabel-Component for Echo3?

To use the following component, please create a package jfix.echo.html in your project and store the files below within it (exception is the last file, which needs to go into /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/html/HtmlLabel.java)

package jfix.echo.html;

import nextapp.echo.app.Component;

public class HtmlLabel extends Component {

        public static final String PROPERTY_HTML = "html";

        public HtmlLabel() {
                this("");
        }

        public HtmlLabel(String html) {
                setHtml(html);
        }

        public String getHtml() {
                return (String) getProperty(PROPERTY_HTML);
        }

        public void setHtml(String newValue) {
                setProperty(PROPERTY_HTML, newValue);
        }
}

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

package jfix.echo.html;

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 HtmlLabelPeer extends AbstractComponentSynchronizePeer {

        private static final String JFIX_HTML_LABEL = "JFixHtmlLabel";

        static {
                WebContainerServlet.getServiceRegistry().add(
                                JavaScriptService.forResource(JFIX_HTML_LABEL,
                                                "jfix/echo/html/HtmlLabel.js"));
        }

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

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

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

3. Create a client-side represantation of the component (/jfix/echo/html/HtmlLabel.js)

JFixHtmlLabel = Core.extend(Echo.Component, {

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

JFixHtmlLabel.Peer = Core.extend(Echo.Render.ComponentSync, {

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

    renderAdd: function(update, parentElement) {
        this._divElement = document.createElement("div");
        Echo.Sync.Font.render(this.component.render("font"), this._divElement);
        Echo.Sync.Color.renderFB(this.component, this._divElement);
        this._divElement.innerHTML = this.component.render("html", "");
        parentElement.appendChild(this._divElement);
    },

    renderDispose: function(update) {
        this._divElement = null;
    },
    
    renderUpdate: function(update) {
        var element = this._divElement;
        var containerElement = element.parentNode;
        this.renderDispose(update);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return false;
    }
    
});

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

jfix.echo.html.HtmlLabel                jfix.echo.html.HtmlLabelPeer

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

    Column column = new Column();
    column.add(new HtmlLabel("<h1>Echo3 is <b>cool</b></h1>"));