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"), "')"))
| )
| )
| )
| );
| }
| }