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

The {@link oajr.widget.Widget} class allows you to add arbitrary HTML, CSS, and Javascript to HTML pages.
They are registered in the following location:

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:

The HTML content returned by the {@link oajr.widget.Widget#getHtml(RestRequest,RestResponse) getHtml(RestRequest,RestResponse)} method is added wherever the "$W{...}" variable is used.

The CSS returned by {@link oajr.widget.Widget#getScript(RestRequest,RestResponse) getScript(RestRequest,RestResponse)} is added to the style section in the page header.

The Javascript returned by {@link oajr.widget.Widget#getScript(RestRequest,RestResponse) 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 {@link oajr.annotation.Rest#staticFiles() @Rest(staticFiles)}):

| public class MyWidget extends Widget { | | @Override /* Widget */ | public String getHtml(RestRequest req) throws Exception { | UriResolver resolver = req.getUriResolver(); // API used for resolving URIs. | return "<img class='myimage' onclick='myalert(this)' src='"+resolver.resolve("servlet:/htdocs/myimage.png")+"'>"; | } | | @Override /* Widget */ | public String getScript(RestRequest req) throws Exception { | return "" | + "\n function myalert(imageElement) {" | + "\n alert('cool!');" | + "\n }"; | } | | @Override /* Widget */ | public String getStyle(RestRequest req) throws Exception { | return "" | + "\n .myimage {" | + "\n border: 10px solid red;" | + "\n }"; | } | }