The View

Next, create the basic FXML file src/main/resources/ui/main.fxml:

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

<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.control.Button?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1"
            xmlns="http://javafx.com/javafx/8"
            fx:controller="hello.Controller">
  <center>
    <Button text="Hello" onAction="#helloClicked"/>
  </center>
</BorderPane>

What's happening here

  1. We add the standard XML header specifying version and encoding.
  2. Add two imports for the BorderPane and the Button element.
  3. Add a BorderPane as the root element for the view.
    • The BorderPane receives the hello.Controller class as its controller attribute. A view may have only one controller and it will always be defined on the root element. If you want to use multiple controller classes you have to extract a sub-view from your view in a separate file.
    • A BorderPane divides its contents on five zones. We add the <center> zone: In this zone we add a Button with a greeting text and an action handler: By starting the value for the onAction handler with a '#' we state that we specify a member of the controller class. In this case the function helloClicked() of the hello.Controller class.

Continue with the controller.