FXML - Text Field Moves To The Right Upon Button Click

问题

I am trying to make a program about managing reservations in a restaurant, but I have an enduring glitch that I have not been able to fix so far.

Look at these pieces of code:

Customer.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<GridPane xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" prefWidth="300" prefHeight="300">
    <padding>
        <Insets top="25" right="25" bottom="10" left="25"/>
    </padding>

    <Label GridPane.rowIndex="0" GridPane.columnIndex="0" text="Name"/>
    <Label GridPane.rowIndex="1" GridPane.columnIndex="0" text="ID"/>
    <Label GridPane.rowIndex="2" GridPane.columnIndex="0" text="Phone Number"/>
    <Label GridPane.rowIndex="3" GridPane.columnIndex="0" text="Bringing..."/>

    <TextField GridPane.rowIndex="0" GridPane.columnIndex="1" fx:id="name"/>
    <TextField GridPane.rowIndex="1" GridPane.columnIndex="1" fx:id="id"/>
    <TextField GridPane.rowIndex="2" GridPane.columnIndex="1" fx:id="phonenumber"/>
    <TextField GridPane.rowIndex="3" GridPane.columnIndex="1" fx:id="bringing"/>

    <Button GridPane.rowIndex="4" GridPane.columnIndex="0" text="Assign Table" fx:id="notedetails"/>
    <HBox GridPane.rowIndex="4" GridPane.columnIndex="1" alignment="BASELINE_RIGHT">
        <Button text="Back" fx:id="back"/>
    </HBox>
    <Text GridPane.rowIndex="5" GridPane.columnIndex="0" fx:id="noted"/>
</GridPane>

CustomerController.java

@FXMLController(value = "/fxml/customer.fxml", title = "Customer Details")
public class CustomerController {
    @FXML
    private TextField name;

    @FXML
    private TextField id;

    @FXML
    private TextField phonenumber;

    @FXML
    private TextField bringing;

    @FXML
    @ActionTrigger("notedetails")
    private Button notedetails;

    @FXML
    @BackAction
    private Button back;

    @FXML
    private Text noted;

    @Inject
    private Restaurant restaurant;

    @ActionMethod("notedetails")
    public void notedetails() {
        noted.setText("Your details have been noted!");
        String customerName = name.getText();
        String customerID = id.getText();
        String customerPhoneNumber = phonenumber.getText();
        int customerBringing = Integer.parseInt(bringing.getText());
        Customer customer = new Customer(customerName, customerID, customerPhoneNumber, customerBringing);
        restaurant.addCustomer(customer);
    }
}

When I run the Main class, I went to the customers window, and after filling in the details, the text fields moved to the right! I checked my code, and just to double-check, I told my teacher about the problem, but he could not find anything wrong with the code.

I am surprised that no one else here asked about this problem, so it might be something I have done. Please help me find if I missed something in my code, or else find a way to fix it.

回答1:

I think below part of the code is interfering here where the alignment of the back button has been defined. :-

HBox GridPane.rowIndex="4" GridPane.columnIndex="1" alignment="BASELINE_RIGHT">
        <Button text="Back" fx:id="back"

The compiler might be assigning the same alignment to the text fields also.

Suggestion , assign the alignment to each row of the label. Below is just an example :-

<TextField alignment="BASELINE_RIGHT" GridPane.rowIndex="0" GridPane.columnIndex="1" fx:id="name"/>
<TextField alignment="BASELINE_RIGHT" GridPane.rowIndex="1" GridPane.columnIndex="1" fx:id="id"/>
<TextField alignment="BASELINE_RIGHT"GridPane.rowIndex="2" GridPane.columnIndex="1" fx:id="phonenumber"/>
<TextField alignment="BASELINE_RIGHT"GridPane.rowIndex="3" GridPane.columnIndex="1"fx:id="bringing"/>

来源：https://stackoverflow.com/questions/27613679/fxml-text-field-moves-to-the-right-upon-button-click

标签

java

intellij-idea

javafx

fxml