Gluon mobile app NavigationDrawer back button issu

Question

I'm working with a multiple view project with FXML, generated by the Gluon plugin for IntelliJ.

When I navigate to the secondary view, coming from the primary view, and I push the back button on my physical android device, the view changes back to the primary view. This is normal behavior.

The problem is that the NavigationDrawer stays on the secondary view. You can observe this because you won't be able to navigate to the secondary view. When you push secondary in the navigation pane, nothing happens. This behavior is similar to trying to navigate to the page that you're currently on, which does also nothing.

Does anyone know a solution? Is this a bug? What's the best way to report bugs for Gluon because they wan't to move all support to SO?

Answer 1

The NavigationDrawer basically is a popup with a list of items, where usually each of these items allows the selection of a View.

If views can only be accessed through the drawer, then you won't have any issue, given that always the selected item will be related to the active view.

The issue you are having occurs when you access views by other means, like the back button.

By default, the drawer list doesn't track the active view to auto select the related item. If later, you try to select an item that is already selected, the listener won't fire the switch of views.

While this could be done internally by the control (incoming versions will probably manage that), it's easy to achieve.

Just add a listener to viewProperty() on your main class, and whenever the view changes, update the selected item on the drawer. Since this will trigger a change in the navigationDrawer.selectedItemProperty(), before updating the selection, we need to remove the listener, and add it again.

public static final String PRIMARY_VIEW = HOME_VIEW;
public static final String SECONDARY_VIEW = "Secondary View";
public static final String MENU_LAYER = "Side Menu";

private Item primaryItem;
private Item secondaryItem;

private final ChangeListener listener = (obs, oldItem, newItem) -> {
        hideLayer(MENU_LAYER);
        switchView(newItem.equals(primaryItem) ? PRIMARY_VIEW : SECONDARY_VIEW);
    };

@Override
public void init() {
    addViewFactory(PRIMARY_VIEW, () -> new PrimaryView(PRIMARY_VIEW).getView());
    addViewFactory(SECONDARY_VIEW, () -> new SecondaryView(SECONDARY_VIEW).getView());

    NavigationDrawer drawer = new NavigationDrawer();

    primaryItem = new Item("Primary", MaterialDesignIcon.HOME.graphic());
    secondaryItem = new Item("Secondary", MaterialDesignIcon.DASHBOARD.graphic());
    drawer.getItems().addAll(primaryItem, secondaryItem);

    primaryItem.setSelected(true);
    drawer.selectedItemProperty().addListener(listener);

    addLayerFactory(MENU_LAYER, () -> new SidePopupView(drawer));

    viewProperty().addListener((obs, ov, nv) -> {
        drawer.selectedItemProperty().removeListener(listener);
        if (nv.getName().equals(PRIMARY_VIEW)) {
            primaryItem.setSelected(true);
            secondaryItem.setSelected(false);
            drawer.setSelectedItem(primaryItem);
        } else {
            primaryItem.setSelected(false);
            secondaryItem.setSelected(true);
            drawer.setSelectedItem(secondaryItem);
        }
        drawer.selectedItemProperty().addListener(listener);
    });
}