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>
1
21
4/23/2013 6:35:24 PM

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:

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:

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


Related

33
5/23/2017 12:03:05 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon