CODEWITHSUNDEEP
javajavafxswapchildren
Sidachenko Michael
Sidachenko Michael

Reputation: 79

How do I swap the children of a parent node in JavaFX?

I want to swap the Button with a TextField. How to do it?

I heard there are methods toFront () and toBack (). But then children nodes must be wrapped in a Group. Is that the truth?

Is there another way?

enter image description here

<ToolBar fx:id="toolbarForActivityPanel" layoutX="22.0" layoutY="316.0" prefHeight="0.0" prefWidth="518.0" style="-fx-background-color: black;" AnchorPane.bottomAnchor="21.0" AnchorPane.leftAnchor="21.0" AnchorPane.rightAnchor="21.0">
                      <items>
                        <Button fx:id="createOfActivityButton" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="46.0" prefWidth="48.0" style="-fx-background-color: black; -fx-border-color: white; -fx-border-insets: 0px 10px 0px 0px;">
                             <graphic>
                                <ImageView fitHeight="30.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true" style="-fx-background-color: black; -fx-border-radius: 4px;">
                                   <image>
                                      <Image url="@../../img/icons_of_activities/icons8-plus-math-48.png" />
                                   </image>
                                </ImageView>
                             </graphic>
                             <cursor>
                                <Cursor fx:constant="HAND" />
                             </cursor>
                             <opaqueInsets>
                                <Insets />
                             </opaqueInsets>
                          </Button>
                          <Button mnemonicParsing="false" prefHeight="46.0" prefWidth="48.0" style="-fx-background-color: black; -fx-border-color: white; -fx-border-insets: 0 10 0 0;">
                             <cursor>
                                <Cursor fx:constant="HAND" />
                             </cursor>
                             <graphic>
                                <ImageView fitHeight="30.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true" style="-fx-background-color: black; -fx-border-radius: 4px;">
                                   <image>
                                      <Image url="@../../img/icons_of_activities/icons8-search-filled-50.png" />
                                   </image>
                                </ImageView>
                             </graphic>
                          </Button>
                       <TextField />
                      </items>
                    </ToolBar>

Upvotes: 1

Views: 807

Answers (2)

J. Steegmans
J. Steegmans

Reputation: 1

Normally javafx when loading form an FXML-file loads and displays them in the order that they are in the file so in your case you could simply switch the <TextField /> and the first button in FXML-file.

This is not the case in some panes, such as gridpanes where you can specify the row and column in the grid of the element in the element

<GridPane>
    <Text text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2"/>

    <Label text="User Name:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>

    <TextField GridPane.columnIndex="1" GridPane.rowIndex="1"/>

    <Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>

    <PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
</GridPane>

So you could either swap the order around or switch to a differnt pane and explicitly layout its children

Upvotes: 0

James_D
James_D

Reputation: 209553

The items in a toolbar appear visually in the order in which they appear in the items list. So to re-order them you simply need to reorder the items in the list.

So you can do something like

// remove the button:
toolbarForActivityPanel.getItems().remove(createOfActivityButton);
// remove the text field (need to provide an fx:id for the text field in FXML):
toolbarForActivityPanel.getItems().remove(textField);

// add the text field as the first element:
toolbarForActivityPanel.getItems().add(0, textField);
// add the button as the third element:
toolbarForActivityPanel.getItems().add(2, createOfActivityButton);

You can manipulate the items list in any arbitrary way like this (add new elements, remove any elements, etc). The only caveat is to ensure that you never have the same item twice in the list.

Upvotes: 2

Related Questions