Predefined Widgets

The org.apache.juneau.rest.widget package contains predefined reusable widgets.

org.apache.juneau.rest.widgetWidget MenuItemWidget ContentTypeMenuItem QueryMenuItem ThemeMenuItem PoweredByJuneau Tooltip

MenuItemWidget

MenuItemWidget is an abstract class for rendering menu items with drop-downs. It defines some simple CSS and Javascript for enabling drop-down menus in the nav section of the page (although nothing keeps you from using it in an arbitrary location in the page). The script specifies a menuClick(element) function that toggles the visibility of the next sibling of the element.

Subclasses implement the following methods:

MenuItemWidgetgetLabel(RestRequest,RestResponse) getContent(RestRequest,RestResponse) getHtml(RestRequest,RestResponse)

For example, to render a link that brings up a simple dialog in a div tag:

@Override
public String getLabel() {
    return "my-menu-item";
};

@Override
public Div getContent() {
    return Html5Builder.div("Surprise!").style("color:red");
};

The HTML content returned by the getHtml(RestRequest,RestResponse) method is added where the $W{...} is referenced in the page.

ContentTypeMenuItem

ContentTypeMenuItem is a predefined Widget that returns back a list of hyperlinks for rendering the contents of a page in a variety of content types. The variable it resolves is $W{ContentTypeMenuItem}.

An example of this widget can be found in the PetStoreResource in the examples that provides a drop-down menu item for rendering all other supported content types in plain text:

@RestGet(path="/")
@HtmlDocConfig(
    widgets={
        ContentTypeMenuItem.class,
    },
    navlinks={
        "up: ...",
        "options: ...",
        "$W{QueryMenuItem}",
        "$W{ContentTypeMenuItem}",
        "$W{ThemeMenuItem}",
        "source: ..."
    }
)
public Collection getPets() {

It renders the following popup-box:

QueryMenuItem

QueryMenuItem is a predefined Widget that returns a menu-item drop-down form for entering search/view/sort arguments. The variable it resolves is $W{QueryMenuItem}.

This widget is designed to be used in conjunction with the Queryable converter, although implementations can process the query parameters themselves if they wish to do so by using the RequestQueryParams.getSearchArgs() method to retrieve the arguments and process the data themselves.

An example of this widget can be found in the PetStoreResource in the examples that provides search/view/sort capabilities against the collection of POJOs:

@RestGet(
    path="/",
    converters=Queryable.class
)
@HtmlDocConfig(
    widgets={
        QueryMenuItem.class,
    },
    navlinks={
        "up: ...",
        "options: ...",
        "$W{QueryMenuItem}",
        "$W{ContentTypeMenuItem}",
        "$W{ThemeMenuItem}",
        "source: ..."
    }
)
public Collection getPets() {

It renders the following popup-box:

Tooltips are provided by hovering over the field names.

When submitted, the form submits a GET request against the current URI with special GET search API query parameters. (e.g. ?s=column1=Foo*&v=column1,column2&o=column1,column2-&p=100&l=100). The Queryable class knows how to perform these filters against collections of POJOs.

ThemeMenuItem

ThemeMenuItem is a predefined Widget that returns back a list of hyperlinks for rendering the contents of a page in the various default styles. The variable it resolves is $W{ThemeMenuItem}.

An example of this widget can be found in the PetStoreResource in the examples that provides a drop-down menu item for rendering all other supported content types in plain text:

@RestGet(path="/")
@HtmlDocConfig(
    widgets={
        ThemeMenuItem.class,
    },
    navlinks={
        "up: ...",
        "options: ...",
        "$W{QueryMenuItem}",
        "$W{ContentTypeMenuItem}",
        "$W{ThemeMenuItem}",
        "source: ..."
    }
)
public Collection getPets() {

PoweredByJuneau

PoweredByJuneau is a predefined Widget that places a powered-by-Juneau message on a page. The variable it resolves is $W{PoweredByJuneau}. It produces a simple Apache Juneau icon floating on the right. Typically it's used in the footer of the page, as shown below in the AddressBookResource from the examples:

@Rest(path="/addressBook")
@HtmlDocConfig(
    widgets={
        PoweredByJuneau.class
    },
    footer="$W{PoweredByJuneau}"
)

It renders the following image:

Tooltip

Tooltip is a predefined template for adding tooltips to HTML5 bean constructs, typically in menu item widgets.

The following examples shows how tooltips can be added to a menu item widget.

public class MyFormMenuItem extends MenuItemWidget {

    @Override
    public String getLabel(RestRequest req) throws Exception {
        return "myform";
    }

    @Override
    public Object getContent(RestRequest req) throws Exception {
        return div(
            form().id("form").action("servlet:/form").method(POST).children(
                table(
                    tr(
                        th("Field 1:"),
                        td(input().name("field1").type("text")),
                        td(new Tooltip("(?)", "This is field #1!", br(), "(e.g. '", code("Foo"), "')"))
                    ),
                    tr(
                        th("Field 2:"),
                        td(input().name("field2").type("text")),
                        td(new Tooltip("(?)", "This is field #2!", br(), "(e.g. '", code("Bar"), "')"))
                    )
                )
            )
        );
    }
}