Sometimes it is 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 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/HtmlLabel.java)

package jfix.echo;

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) get(PROPERTY_HTML);
        }

        public void setHtml(String newValue) {
                set(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/HtmlLabelPeer.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 HtmlLabelPeer extends AbstractComponentSynchronizePeer {

        private static final String JFIX_HTML_LABEL = "JFixHtmlLabel";

        static {
                WebContainerServlet.getServiceRegistry().add(
                                JavaScriptService.forResource(JFIX_HTML_LABEL,
                                                "jfix/echo/resource/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 representation of the component (/jfix/echo/resource/HtmlLabel.js)

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

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

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

        componentType :"JFixHtmlLabel"
});

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

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

        renderAdd : function(update, parentElement) {
                this.divElement = document.createElement("div");
                this.divElement.id = this.component.renderId;
                parentElement.appendChild(this.divElement);
                this.renderUpdate(update);
        },

        renderUpdate : function(update) {
                this.divElement.innerHTML = this.component.render("html", "");
                Echo.Sync.Font.render(this.component.render("font"), this.divElement);
                Echo.Sync.Color.renderFB(this.component, this.divElement);
                return false;
        },

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

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

jfix.echo.HtmlLabel             jfix.echo.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 <i>rocks</i></h1>"));