Switching views/fxml on gluon Application

Question

I am developing a gluon application with JavaFX but i can't understand very well how to switch scene (or view?) by clicking a button. If i click the button "load from file" in the image below, my code should perform some tasks, and then it should change the view, loading a new fxml, that i've added to the app manager. Screenshoot

main class that extends Application:

package com.knnapplication;

import com.knnapplication.views.ExampleView;
import com.knnapplication.views.PrimaryView;
import com.knnapplication.views.SecondaryView;
import com.gluonhq.charm.glisten.application.AppManager;
import com.gluonhq.charm.glisten.visual.Swatch;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.stage.Stage;

import static com.gluonhq.charm.glisten.application.AppManager.HOME_VIEW;

public class KNNApplication extends Application {

    public static final String PRIMARY_VIEW = HOME_VIEW;
    public static final String SECONDARY_VIEW = "Secondary View";
    public static final String EXAMPLE_VIEW = "Example View";

    private final AppManager appManager = AppManager.initialize(this::postInit);

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

        DrawerManager.buildDrawer(appManager);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        appManager.start(primaryStage);
    }

    private void postInit(Scene scene) {
        Swatch.BLUE.assignTo(scene);

        scene.getStylesheets().add(KNNApplication.class.getResource("style.css").toExternalForm());
        ((Stage) scene.getWindow()).getIcons().add(new Image(KNNApplication.class.getResourceAsStream("/icon.png")));
    }

    public static void main(String args[]) {
        launch(args);
    }
}

event that handles the button click

 @FXML
    void LoadFile(ActionEvent event) {

        //connection to server
        InetAddress addr;
        try {
            addr = InetAddress.getByName("127.0.0.1");

        } catch (UnknownHostException e) {
            System.out.println(e.toString());
            return;
        }

        Client c;
        try {
            c=new Client("127.0.0.1", 2025, label);
            /*
            HERE I SHOULD SWITCH VIEW
             */

            AppManager.getInstance().switchView("EXAMPLE_VIEW");


        }  catch (IOException e) {
            label.setText(e.toString());
            System.out.println(e.toString());
            return;
        } catch (NumberFormatException e) {
            label.setText(e.toString());
            System.out.println(e.toString());
            return;
        } catch (ClassNotFoundException e) {
            label.setText(e.toString());
            System.out.println(e.toString());
            return;
        }

        //label.setText("KNN caricato da file");
    }

Searching on the web i've found this kind of method, using this line of code " AppManager.getInstance().switchView("EXAMPLE_VIEW");", but it still not work and i can't understand very well how does it works.

I hope you can help me. Thank you so much!

Answer 1

To load a new view you should make a view object and load the FXML/ the nodes on it. Then you can switch to that view by calling home.getAppManager().switchView("your view here"). like in the following example:

FloatingActionButton fab = new FloatingActionButton(MaterialDesignIcon.ADD.text,
            e -> home.getAppManager().switchView(ADDHUB_VIEW));
    fab.showOn(your view);

also you need to add this view to the app manager in init in main

appManager.addViewFactory(YOUR_VIEW, () -> new YourView().getView());