JavaFX application using FXML

JavaFX allows to construct a UI layer in MVC concept.

The View is FXML file declaring the UI layout with the css file that declare the styling of the view.
 
The controller is the bounded controller.

The modal is acollection of data  containers that are shared between the FXML and to the controller.

Loading and displaying the FXML file.
The following code loads an FXML file construct a scene (The inner of the window)from it and attach the scene to the primary stage (The main window ).

Parent root = FXMLLoader.load(getClass().getResource("FXML.fxml"));
primaryStage.setScene(new Scene(root));
primaryStage.show();

The following is a simple FXML file
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication1.FXMLController">
    <stylesheets>
        <URL value="@fxml.css"/>
    </stylesheets>
<children>
    <TabPane>
        <tabs>
            <Tab text="first Tab" >
            <Pane>
    <Button id="button" layoutX="126" layoutY="90" text="Click Me!" onAction="#handleButtonAction" fx:id="button" />
    <Label id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" prefHeight="16" prefWidth="69" fx:id="label" />
    <ListView  fx:id="myList"  id="myList" layoutX="200" layoutY="200" minWidth="100" minHeight="140"   />
            </Pane>
            </Tab>
            <Tab text="Second Tab" fx:id="SecondTab" ></Tab>
        </tabs>
    </TabPane>
</children>
</AnchorPane>

Note:The attaching of the css file
  <stylesheets>
        <URL value="@fxml.css"/>
    </stylesheets>

The attaching of the controller  is using xml declaration :
fx:controller="javafxapplication1.FXMLController"

The  panels and the widgets are ordered in hierarchical structure. using the  children member of the panels.

The button declare a callback for clicking event onAction="#handleButtonAction" the implementation of this event should be in the controller.

A Widget declaration  may contain an id for en example :fx:id="SecondTab" in order to allow the controller to access it.

Controller
The controller is a simple java file the constract by the fxml view
An exmple for a controller :
package javafxapplication1;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.Tab;

public class FXMLController implements Initializable {

    @Override
    public void initialize(URL url, ResourceBundle rb) {

        ObservableList<String> items =FXCollections.observableArrayList (
        "Single", "Double", "Suite", "Family App");
        myList.setItems(items);
        myList.setPrefWidth(100);
        myList.setPrefHeight(70);
       
    }   
    @FXML
    private Tab SecondTab;
   
    @FXML
    private ListView myList;
   
    @FXML
    private Label label;

    @FXML
    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        label.setText("Hello World!");
    }
}

Note: In order to create a member in the controller that is attached to a widget in the FXML view .a member with a type of the relevent control should be declared with @FXML attribute decorate it.

The controller is implementing the Initializable interface .The initialize method is called when the view is loaded.

The Initialize method declare the item observation list that is part of the modal.
The list can be updated and its items are reflected in the view immediately