Switch between panes in JavaFX

Question

I'm trying to make a Java program in JavaFX using FXML. However i'm having trouble with the layout management. I want to switch between Panes, just as i'm used to with CardLayout in swing, but i can't seem to get it.

I googled around and didn't find any answers.

Is there any CardLayout equivalent in JavaFX? and if so, can you provide me of an example? That would help my evening a lot!

Here is my FXML code

    <AnchorPane id="anchorPane" prefHeight="324.0" prefWidth="530.0" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication2.SampleController">
  <children>
    <Pane fx:id="mainScreen" layoutX="6.0" prefHeight="324.0" prefWidth="518.0">
      <children>
        <Button layoutX="254.0" layoutY="37.0" mnemonicParsing="false" text="Button" />
      </children>
    </Pane>
    <Pane fx:id="loginScreen" prefHeight="324.0" prefWidth="530.0">
      <children>
        <TextField id="password" fx:id="username" layoutX="142.0" layoutY="106.0" prefWidth="200.0" />
        <TextField fx:id="password" layoutX="142.0" layoutY="140.0" prefWidth="200.0" />
        <Label fx:id="label" layoutX="126.0" layoutY="120.0" minHeight="16.0" minWidth="69.0" />
        <Button fx:id="button" layoutX="213.0" layoutY="196.0" onAction="#handleButtonAction" onKeyPressed="#handleButtonAction" text="Login" />
      </children>
    </Pane>
  </children>
</AnchorPane>

Answer 1

Non-animated transitions

If you don't need animated transitions between your panes, then you can:

1. Replace the whole scene by creating a new scene and set that scene on your Stage OR
2. Replace just a specific pane in a parent layout, by removing the old pane from it's parent and adding your new pane (by manipulating the parent's children list) OR
3. Place all your Panes in a StackPane and move the pane you want to display to the top of the stack's child list.

---

Animated transitions

If you would like animated transtions between your panes, then see Angela Caicedo's two part series on managing multiple screens in JavaFX:

• Part I
• Part II

Angela's solution is to use a StackPane with a separate custom ScreenController class for managing Transitions or animations between panes in the stack.

---

Frameworks

Frameworks like JFXFlow and WebFX can also provide a browser style interface for your app, allowing users to switch back and forth between screens using back and forward buttons and a history list.

Update 2017

I think development on both referenced frameworks above is now defunct. Other frameworks which are under development are:

• TornadoFX
• JRebirth
• afterburner.fx

And numerous others (I won't provide a comprehensive list here).

---

Related

• Loading new fxml in the same scene