Javafx : Navigate to Pages

Question

I am trying a JavaFX2.0 application in reference to Ensemble sample. Like Ensemble, I also want to show different pages but based on clicks made on center page. I don't have any Tree, Toolbar, etc. Just want a set of pages to be displayed based on a particular selection. Example: my main page may have 6 buttons, on clicking btn1 I want Page1, Page2 on btn2 click and so on. On Page1, I will again have some buttons and a Return to return back to the previous page. In normal Java, we could achieve this easily using CardLayout. Add all paged to cards and show the desired page.

Looking at Enemble project, I saw that all the samples pages like "AnchorLayout, ColorButton, etc" they all extend Sample. And Pages class has members of AllPagesPage, SamplesPage, DocPage, etc which all are shown in TreeView on left side.

I added Sample that extends Pane, create another class DataPane that extends Sample. A 3rd class that has the reference of all Panes :

public class AllPagesPage {
HashMap<String, Sample> pages = null; 
private static String DATAPANE = "DATAPANE";

public AllPagesPage() {
    pages = new HashMap<String, Sample>();
    addPages();
}

private void addPages() {
    pages.put(DATAPANE, (Sample)new DataPane());
}

public Sample getPage(String page) {
    if (pages.containsKey(page))
        return (Sample) pages.get(page);

    return null;

}

}

To store the refernce based on name I have used HashMap. Now in my application class, how do I setup the page as DataPane ?

    @Override
public void start(Stage primaryStage) {
    primaryStage.setTitle("Hello World");
    Group root = new Group();
    Scene scene = new Scene(root, 300, 250);
    /*
    Button btn = new Button();
    btn.setLayoutX(100);
    btn.setLayoutY(80);
    btn.setText("Hello World");
    btn.setOnAction(new EventHandler<ActionEvent>() {

        public void handle(ActionEvent event) {
            System.out.println("Hello World");
        }
    });
    root.getChildren().add(btn);
    * 
    */

    primaryStage.setScene(scene);
    primaryStage.show();
}

// Should be called as gotoPage(AllPagesPage.DATAPANE), 
// on this command everythign else should be removed and contents of DataPane should come up.      
public void goToPage(String page) {

}

DataPane just contains code from AnchorPaneSample in Constructor. Nothing more or no other functions - ONLY constructor.

How should I get the stage and set pages on call to gotoPage(String page) method ???

Answer 1

Just create an area where you want to see your panes and change them:

public class Main extends Application {

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

    private Pane pagesArea;
    private AllPagesPage pages = new AllPagesPage();

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World");
        VBox root = new VBox();
        Scene scene = new Scene(root, 300, 250);

        Button btn = new Button();
        btn.setText("Open DataPane");
        btn.setOnAction(new EventHandler<ActionEvent>() {

            public void handle(ActionEvent event) {
                goToPage(AllPagesPage.DATAPANE);
            }
        });
        root.getChildren().addAll(btn, pagesArea = new StackPane());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public void goToPage(String page) {
        Pane pane = pages.getPage(page);
        if (pane != null) {
            pagesArea.getChildren().clear();
            pagesArea.getChildren().add(pane);
        }
    }
}

You may want to update your AllPagesPage class:

• validation in getPage() is redundant, HashMap will do it for you
• instead of static Strings you may want to use enum for better flexibility (it will allow iteration, plain comparison, easier refactoring and other)