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

Answer 2

Here's how I do it: (In this example, I have created two FXML documents with their corresponding controllers. They are called FXMLLogin.fxml, and Home.fxml, respectively).

So, to go from FXMLLogin to Home,

In this example, I created a method within the FXMLLoginController which responds to the "login" button on that form being pressed:

@FXML private void login(javafx.event.ActionEvent event) throws IOException {     if(pwf1.getText().equals("alphabetathetagamma"))     {             Parent blah = FXMLLoader.load(getClass().getResource("Home.fxml"));             Scene scene = new Scene(blah);             Stage appStage = (Stage) ((Node) event.getSource()).getScene().getWindow();             appStage.setScene(scene);             appStage.show();     }     else     {             label1.setText("Password is incorrect. Please Try Again");     } } 

Note that the @FXML is extremely important.

If I understood your question correctly, then this should do the trick.

Switching between panes is not at all obvious, and is not outlined clearly on any tutorial on the web that I have found. I had to google extensively myself before I figured it out for the first time. Luckily, it's actually quite simple once you get the hang of it.

I hope I did not misunderstand your question? Let me know if this is what you need:)