Wrapping Component Contents

What do you do when you need to handle some markup contents of HST Component(s) from the client-side?

Suppose your component renders the following:

If you want to refer the rendered markup contents above, you can wrap the contents in your template (JSP or freemarker) page as follows:

So, now you can use DOM accesses or CSS Selector to refer the contents because all rendered markups are now wrapped by a span with id and css attributes.

Obviously, you do not want to add the wrapper elements manually in every JSP/freemarker template. You can do this as follows:

HstResponse interface provides the following methods:

import org.w3c.dom.Element;

public void setWrapperElement(Element element);
public Element getWrapperElement();

If you want to wrap the rendered markups of a component, you can simply set a wrapper element for the component by using HstResponse#setWrapperElement(Element);

For example, if you want to wrap every component markup content, then you could add the following codes into the #doBeforeRender() method of the base component class:

// BaseComponent.java

public void doBeforeRender(HstRequest request, HstResponse) throws HstComponentException {
    // ...
    // Sets wrapper element for each component
    Element wrapperElem = response.createElement("span");
    wrapperElem.setAttribute("class", "wrapper");
    response.setWrapperElement(wrapperElem);
    // ...
}

If your component extends the base component class above with super.doBeforeRender(...), then your component will be rendered with a wrapper element you specified in the base component even though you don't modify each template page manually.

One more minor tip is that you can set a wrapper element in the template page by using a tag library if you want:

In Freemarker template, you can use the tag like the following:

The tag library usage above is just invoking HstResponse#setWrapperElement(Element) operation. So, you can choose either approach. Because the render page template is invoked after doBeforeRender() of a component, this tag library usage could be regarded as overriding the wrapper element by re-invoking HstResponse#setWrapperElement(Element) method.