Javafx Stackpane show similar CardLayout Java Swin

Question

I use three buttons to display each child panel in stackpane,but when I click the button,it displays different panels per click

Example

btn0-> pane 0,pane 1and pane 2

btn1-> pane 0,pane 1and pane 2

btn2-> pane 0,pane 1and pane 2

I just want it to display a specific panel for specific buttons in java swing cardLayout should I do?

btn0-> pane 0

btn1-> pane 1

btn2-> pane 2

Please help me!

@FXML
void btn0(ActionEvent event) {
    stackConsole.getChildren().get(0).toFront();
}

@FXML
void btn1(ActionEvent event) {
    stackConsole.getChildren().get(1).toFront();
}

@FXML
void btn2(ActionEvent event) {
    stackConsole.getChildren().get(2).toFront();
}

Answer 1

Depending on your needs you may be interested in the TabPane class.

Of course implement similar funtionality in the controller class. Calling toFront() for a child will not have the desired effect however, since

1. All children remain in the stackConsole
2. toFront just moves the Node it is called for to the last child position of the parent.

What you're trying to achieve however seems to be replacing the children of stackConsole. This can be done by injecting the different children to the controller class and using ObservableList.setAll to replace the contents. The <fx:define> tag can be used for children not initially shown in the scene.

Example

FXML

<BorderPane xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxml.ReplaceController">
    <center>
        <StackPane fx:id="stackConsole">
            <children>
                <!-- use multiply blend mode to demonstrate other children are not present
                     (result would be black otherwise) -->
                <Region fx:id="r0" blendMode="MULTIPLY" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: red;" />
                <fx:define>
                    <Region fx:id="r1" blendMode="MULTIPLY" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: blue;" />
                    <Region fx:id="r2" blendMode="MULTIPLY" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: green;" />
                </fx:define>
            </children>
        </StackPane>
    </center>
    <left>
        <VBox prefHeight="200.0" spacing="10.0" BorderPane.alignment="CENTER">
            <children>
                <Button mnemonicParsing="false" text="1" onAction="#btn0"  />
                <Button mnemonicParsing="false" text="2" onAction="#btn1" />
                <Button mnemonicParsing="false" text="3" onAction="#btn2" />
            </children>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </VBox>
    </left>
</BorderPane>

Controller

public class ReplaceController {
    @FXML
    private Region r1;
    @FXML
    private Region r2;
    @FXML
    private Region r0;
    @FXML
    private Pane stackConsole;

    @FXML
    private void btn0(ActionEvent event) {
        stackConsole.getChildren().setAll(r0);
    }

    @FXML
    private void btn1(ActionEvent event) {
        stackConsole.getChildren().setAll(r1);
    }

    @FXML
    private void btn2(ActionEvent event) {
        stackConsole.getChildren().setAll(r2);
    }

}