The Gluon JavaOne App: Building the UI with Gluon Mobile

As we announced early this week here, we have been working for the past four months on the Gluon application for JavaOne.

This project makes use of Gluon Mobile, Gluon CloudLink and Gluon Charm Down.

This is the first of a series of blog posts about how we built the application. We’ll explain with a little bit of detail how we used Gluon Mobile to create the UI.

Gluon JavaOne App: Building the UI

While using the Gluon Plugin on your favorite IDE gives you a head start on creating a mobile project, when dealing with complex projects (in terms of number of views, services, back-end connections,…) there are things that require a few iterations to ease the way to the developers team, so they can start putting all the pieces together in perfect harmony.

In this post, we’ll cover a few of them.

Easing View creation

With the View concept in mind, and using the afterburner.fx framework, each view is defined by an fxml file and its presenter class. Each view usually requires access to a service (i.e. to access data from the backend using Gluon CloudLink), which can be done via injection, and probably access to other views.

We define an abstract GluonPresenter, that will be extended by all the presenters:

public abstract class GluonPresenter {

    private final T app = (T) MobileApplication.getInstance();

    protected T getApp() {
        return app;
    }

}

And it also comes in handy defining a GluonView, that avoids defining an empty view class for each view:

public class GluonView extends FXMLView {
    private final Class presenter;

    public GluonView(Class> presenter) {
        this.presenter = presenter;
    }
 
    @Override public View getView() {
        return (View) super.getView();
    }
}

Doing so, a view like the speakers view can be now created easily, with its fxml file, that includes just the View container and a CharmListView control, and its presenter, where the list items are retrieved from the injected service:

public class SpeakersPresenter extends GluonPresenter {
    @FXML
    private View speakers;

    @FXML
    private CharmListView speakersListView;
    
    @Inject
    private Service service;

    public void initialize() {
        speakersListView.setItems(service.retrieveSpeakers());
    }
}

Managing all the views

The OTNView, our views manager, is an enum that collects all the view presenters, along with some icons and titles for the drawer, and some flags. A bunch of useful methods for each view are added, like registerView, switchView or getMenuItem.

public enum OTNView {

    ACTIVITY_FEED (ActivityFeedPresenter.class, MaterialDesignIcon.ANNOUNCEMENT, SHOW_IN_DRAWER, HOME_VIEW, SKIP_VIEW_STACK),
    SESSIONS      (SessionsPresenter.class, MaterialDesignIcon.DASHBOARD, SHOW_IN_DRAWER),
    SESSION       (SessionPresenter.class, MaterialDesignIcon.RECORD_VOICE_OVER),
    SPEAKERS      (SpeakersPresenter.class, MaterialDesignIcon.SPEAKER, SHOW_IN_DRAWER),
    SPEAKER       (SpeakerPresenter.class, MaterialDesignIcon.SPEAKER),
    ...

    OTNView(Class> presenterClass, MaterialDesignIcon menuIcon, OTNViewFlag... flags ) {
        ...
    }

    public void registerView(MobileApplication app) {
        app.addViewFactory(id, () -> {
            GluonView view = new GluonView(presenterClass);
            view.getView().setName(id);
            return view.getView();
        });
    }
  
    public Optional