Widgets

The Widget class allows you to add arbitrary HTML, CSS, and Javascript to HTML pages.

Looking for the declarative widget beans?

This page covers the $W{...} HTML widgets in the org.apache.juneau.rest.server.widget package (singular). The typed ModalDef, FormDef, CalendarDef and stats beans in juneau-console-widgets are a different, unrelated API; see Declarative Widgets.

They are registered in the following location:

HtmlDocConfigwidgets

Example

@RestGet(...)
@HtmlDocConfig(
    widgets={
        MyWidget.class
    },
    navlinks={
        "$W{MyWidget}"
    },
    aside={
        "Check out this widget:  $W{MyWidget}"
    }
)

The Widget class is composed of the following methods:

WidgetgetHtml(RestRequest,RestResponse) getStyle(RestRequest,RestResponse) getScript(RestRequest,RestResponse)

The HTML content returned by the getHtml(RestRequest,RestResponse) method is added wherever the $W{...} variable is used.

The CSS returned by getStyle(RestRequest,RestResponse) is added to the style section in the page header.

The Javascript returned by getScript(RestRequest,RestResponse) is added to the script section in the page header.

The following examples shows how to associate a widget with a REST method and then have it rendered in the links and aside section of the page. It shows an example of a widget that renders an image located in the htdocs static files directory in your classpath (see @Rest(staticFiles)):

public class MyWidget extends Widget {

    @Override /* Widget */
    public String getHtml(RestRequest req, RestResponse res) {
        UriResolver resolver = req.getUriResolver(); // API used for resolving URIs.
        return "<img src='" + resolver.resolve("servlet:/htdocs/myimage.png") + "' class='myimage'>";
    }

    @Override /* Widget */
    public String getScript(RestRequest req, RestResponse res) {
        return ""
            + "\n function myalert(imageElement) {"
            + "\n 	alert('cool!');"
            + "\n }";

    }

    @Override /* Widget */
    public String getStyle(RestRequest req, RestResponse res) {
        return ""
            + "\n .myimage {"
            + "\n 	border: 10px solid red;"
            + "\n }";

    }
}