Replace a label with textfield in javafx at same position - javafx

Question

I have a number of Labels in my VBox and on click of a button i want to replace all these labels with textfields.

Answer 1

I wouldn't recommend using a VBox, since replacing the children will likely modify the layout causing a effect that could confuse the user.
Instead I recommend using a GridPane, which allows you to place multiple children in a single cell. This way you could put all the Labels and VBoxes in the grid, but set the visible property of the TextFields to false. This means both Label and TextField will be used for layout calculation and you can simply swap between "editing mode" and "normal mode" by inverting the visible property of all children:
FXML
<HBox xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxml.LabelReplaceController">
<children>
<GridPane fx:id="grid">
<children>
<TextField fx:id="t1" text="Hello World!" visible="false" GridPane.rowIndex="0"/>
<Label text="${t1.text}" GridPane.rowIndex="0" />
<TextField fx:id="t2" text="foo" visible="false" GridPane.rowIndex="1"/>
<Label text="${t2.text}" GridPane.rowIndex="1" />
<TextField fx:id="t3" text="bar" visible="false" GridPane.rowIndex="2"/>
<Label text="${t3.text}" GridPane.rowIndex="2" />
</children>
</GridPane>
<ToggleButton selected="false" onAction="#selectionChanged" text="edit"/>
</children>
</HBox>
public class LabelReplaceController {
#FXML
private Pane grid;
#FXML
private void selectionChanged(ActionEvent event) {
for (Node child : grid.getChildren()) {
child.setVisible(!child.isVisible());
}
}
}

Answer 2

You can iterate over your VBox and replace the:
VBox vBox = ...
int currentPos = 0;
Map<Integer, TextField> toInsert = new HashMap<>(); // map with TextFields that need to be inserted at position
for (Iterator<Node> iterator = vBox.getChildren().iterator(); iterator.hasNext(); ) {
Node child = iterator.next();
if (child instanceof Label) {
Label lbl = (Label)child;
TextField text = new TextField(lbl.getText());
iterator.remove(); // remove the label that is at index currentPos
toInsert.put(currentPos, text);
}
currentPos++;
}
for (Integer pos : toInsert.keySet()) {
TextField field = toInsert.get(pos);
vBox.getChildren().add(pos, field); // Add the Text field at the old position of the Label
}
In the first loop you remove the labels and create the replacement TextFields and remember at which position you need to insert them later on. This cannot happen in the same loop. Then in the second loop you add those TextFields to the VBox at the position you assigned them.
Edit:
Based on #fabian's valid comments the above proposed solution may cause problems. Here is an alternative approach, that creates a second VBox where all non Label nodes are copied over and the Labels are replaced with TextField. I assume that the original VBox is a child element of some Parent.
Parent parent = ... // Parent of VBox
VBox vbox = ...
// Find the index of vBox in Parent
int position = 0;
for (int i = 0; i<parent.getChildren().size(); i++) {
if (parent.getChildren().equals(vBox)) {
position = i;
break; // found our position, no need to look further
}
}
VBox copyVBox = new VBox();
for (Node child : vBox.getChildren()) {
if (child instanceof Label) {
Label lbl = (Label)child;
TextField text = new TextField(lbl.getText());
copyVBox.getChildren().add(text);
} else {
copyVBox.getChildren().add(child);
}
}
parent.getChildren().remove(vBox);
parent.getChildren().add(position, copyVBox);