{title:'Predefined Widgets', updated:'9.0.0'}

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,RestResponse) getLabel(RestRequest,RestResponse)}
  - {@link oajr.widget.MenuItemWidget#getContent(RestRequest,RestResponse) getContent(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 {@link oajr.widget.MenuItemWidget#getHtml(RestRequest,RestResponse) getHtml(RestRequest,RestResponse)} 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:

| @RestGet(path="/") | @HtmlDocConfig( | widgets={ | ContentTypeMenuItem.class, | }, | 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.converter.Queryable} converter, although implementations can process the query parameters themselves if they wish to do so by using the {@link oajr.httppart.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<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.converter.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:

| @RestGet(path="/") | @HtmlDocConfig( | widgets={ | ThemeMenuItem.class, | }, | 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:

| @Rest(path="/addressBook") | @HtmlDocConfig( | widgets={ | PoweredByJuneau.class | }, | 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"), "')")) | ) | ) | ) | ); | } | }