fxml: How to handle button action in the controller?

Question

I have a minimal example: Controller, main, fxml file with one button and two textArea(s), one input, the other output. When button is pressed, the input prints in the output. When I insert the action of the button inside the fxml (onAction="#printOutput") it works fine. I want to know how (and why not please) I can execute the same action in the controller WITHOUT having to deal with fxml. Note: I am coming from Android where I avoid to implement the same in xml since it is very difficult for debugging, plus it does not provide flexibility. Files are following:

Controller

public class FxFXMLController {
    @FXML private TextField inputText;
    @FXML private TextArea outputText;
    @FXML private Button okBtn;

    //Do I connect here an okBtn.setAction() with printOutput? if not, where?
    public FxFXMLController() {
        // Nothing
    }

    @FXML
    private void printOutput() {
        // insert this into outputText in fxml file: onAction="#printOutput"
        outputText.setText(inputText.getText());
    }
}

Main

public class FxFXMLExample3 extends Application {
    public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader loader = new FXMLLoader();
        VBox root = (VBox) loader.load((getClass().getResource("FxFXMLExample3.fxml")));
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.setTitle("A FXML Example with a Controller");
        stage.show();
    }
}

FXML

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

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

<VBox fx:id="vbox" layoutX="10.0" layoutY="10.0" prefHeight="250.0" prefWidth="300.0" spacing="10" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.FxFXMLController">
    <style>
        -fx-padding: 10;
        -fx-border-style: solid inside;
        -fx-border-width: 2;
        -fx-border-insets: 5;
        -fx-border-radius: 5;
        -fx-border-color: blue;
    </style>

    <Label fx:id="inputLbl" alignment="CENTER_LEFT" cache="true" cacheHint="SCALE" prefHeight="30.0" prefWidth="200.0" text="Please insert Your Input here:" textAlignment="LEFT" />
    <TextField fx:id="inputText" prefWidth="100.0" />
    <Button fx:id="okBtn" alignment="CENTER_RIGHT" contentDisplay="CENTER" mnemonicParsing="false" text="OK" textAlignment="CENTER" />
    <Label fx:id="outputLbl" alignment="CENTER_LEFT" cache="true" cacheHint="SCALE" prefHeight="30.0" prefWidth="200.0" text="Your Input:" textAlignment="LEFT" />
    <TextArea fx:id="outputText" prefHeight="100.0" prefWidth="200.0" wrapText="true" />
</VBox>

You can use the [`Initialize method`](https://stackoverflow.com/questions/34785417/javafx-fxml-controller-constructor-vs-initialize-method). Inside side of it do `okBtn.setOnaction(t->{outputText.setText(inputText.getText());});` — SedJ601, Dec 17 '19 at 08:14
Thank you, understood. Philosophical question: What are the pros/cons between dealing with GUI elements in the controller vs main? — George Violettas, Dec 17 '19 at 11:02
What's "main"? If that's the application class then the cons of dealing with GUI elements there is that you don't have easy access to them; the controller gives you direct access to all the GUI elements you need. — Slaw, Dec 17 '19 at 11:40

score 2 · Answer 1 · answered Dec 17 '19 at 15:25

You can make use of initialize function to register an new event listener on your button and then you do what ever you want in that listener. This is the code :

public class FxFXMLController {
    @FXML private TextField inputText;
    @FXML private TextArea outputText;
    @FXML private Button okBtn;

    @FXML
    public void initialize() {
       okBtn.setOnAction(event -> {
        this.printOutput();
      });
    }

    public FxFXMLController() {
        // Nothing
    }

    @FXML
    private void printOutput() {
        // insert this into outputText in fxml file: onAction="#printOutput"
        outputText.setText(inputText.getText());
    }
}

I would remove the `@FXML` on the `printOutput` method. – SedJ601 Dec 17 '19 at 15:26 — SedJ601, Dec 17 '19 at 15:26

fxml: How to handle button action in the controller?

1 Answers1