Predefined Widgets

The {@link oajr.widget} package contains predefined reusable widgets.

- {@link oajr.widget}
  - {@link oajr.widget.Widget}
    - {@link oajr.widget.MenuItemWidget}
      - {@link oajr.widget.ContentTypeMenuItem}
      - {@link oajr.widget.QueryMenuItem}
      - {@link oajr.widget.ThemeMenuItem}
    - {@link oajr.widget.PoweredByJuneau}
  - {@link oajr.widget.Tooltip}

##### MenuItemWidget

{@link oajr.widget.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 two methods:

- {@link oajr.widget.MenuItemWidget}
  - {@link oajr.widget.MenuItemWidget#getLabel(RestRequest) getLabel(RestRequest)} - The menu item label.
  - {@link oajr.widget.MenuItemWidget#getContent(RestRequest) getContent(RestRequest)} - The menu item content.

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 getLabel() { return Html5Builder.div("Surprise!").style("color:red"); };

The HTML content returned by the {@link oajr.widget.MenuItemWidget#getHtml(RestRequest) getHtml(RestRequest)} method is added where the "$W{...}" is referenced in the page.

##### ContentTypeMenuItem

{@link oajr.widget.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:

@RestMethod( name=GET, path="/", widgets={ ContentTypeMenuItem.class, }, htmldoc=@HtmlDoc( navlinks={ "up: ...", "options: ...", "$W{QueryMenuItem}", "$W{ContentTypeMenuItem}", "$W{ThemeMenuItem}", "source: ..." } ) ) public Collection<Pet> getPets() {

It renders the following popup-box:

##### QueryMenuItem

{@link oajr.widget.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 {@link oajr.converters.Queryable} converter, although implementations can process the query parameters themselves if they wish to do so by using the {@link oajr.RequestQuery#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:

@RestMethod( name=GET, path="/", widgets={ QueryMenuItem.class, }, htmldoc=@HtmlDoc( navlinks={ "up: ...", "options: ...", "$W{QueryMenuItem}", "$W{ContentTypeMenuItem}", "$W{ThemeMenuItem}", "source: ..." } ), converters=Queryable.class ) public Collection<Pet> 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 {@link oajr.converters.Queryable} class knows how to perform these filters against collections of POJOs.

##### ThemeMenuItem

{@link oajr.widget.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:

@RestMethod( name=GET, path="/", widgets={ ThemeMenuItem.class, }, htmldoc=@HtmlDoc( navlinks={ "up: ...", "options: ...", "$W{QueryMenuItem}", "$W{ContentTypeMenuItem}", "$W{ThemeMenuItem}", "source: ..." } ) ) public Collection<Pet> getPets() {

##### PoweredByJuneau

{@link oajr.widget.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:

@RestResource( path="/addressBook", widgets={ PoweredByJuneau.class }, htmldoc=@HtmlDoc( footer="$W{PoweredByJuneau}" )

It renders the following image:

##### Tooltip

{@link oajr.widget.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"), "')")) ) ) ) ); } }