...

Also of note: pressing the T key will toggle the "theme" between light and dark:

Now that we have our application built and our custom view installed, let's take a look at the code that makes this happen...

Custom Views in Brief

To create a custom view requires both client-side and server-side resources; the client-side consists of HTML, JavaScript, and CSS files, and the server-side consists of Java classes.

• The HTML file defines the structure of the custom view, and indicates to Angular where directives (behaviors) values need to be injected.
• The JavaScript file creates the Angular controller for the view, and defines code that drives the view.
• The CSS file defines custom styling.
• The server-side Java code:
  • registers the view with the GUI framework
  • receives requests from the client, fetches
  (and formats)
  • data, and sends the information back to the client
  .

Description of Template Files - Server Side

...

This is the base class for UI functionality. The salient features to note are introduced briefly belowbelow.

(1) Reference to the UiExtensionService:

@Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY)
protected UiExtensionService uiExtensionService;

Provides access to the UI Extension Service, so that we can register our "view".

(2) List of application view descriptors, defining which category the view appears under in the GUI navigation pane (if not a hidden view), the internal identifier for the view, and the display text for the link:

 // List of application viewsprivate static final String VIEW_ID = "sampleCustom";
private static final String VIEW_TEXT = "Sample Custom";
...
private final List<UiView> uiViews = ImmutableList.of(
        new UiView(UiView.Category.OTHER, "sampleCustom", "Sample Custom"VIEW_ID, VIEW_TEXT)
);

(3) Declaration of a UiMessageHandlerFactory to generate message handlers on demand. The example factory generates a single handler each time, AppUiMessageHandler, described below:

...