Develop desktop applications using JavaFX

Note: I was one of the beginner JAVA FX, in their own learning when to step on a lot of pits, Chinese English information check a lot, but think FX technology and technology compared to other popular, tutorials, or too little. Here we try to do it a little tiny contribution

Use of the environment

Note: I wrote this only to illustrate the environment, and I do not use the same understanding of the environment in this tutorial time and there is no problem, such as using the Windows platform, using Oracle JDK (so you do not need to install a separate component FX , you can not MAVEN), using Oracle's SceneBuilder. Comparison of the effects may only experience is not to use IDEA but the use of the eclipse

Ubuntu18.04LTS
OpenJDK 1.8
IDEA (with MAVEN): FX using MAVEN installation environment (OpenJDK does not come with FX environment)
SceneBuilder (glounhq): This is a visual design environment fxml, C # is better to use, but at least more than a hundred times stronger design commands pure

JAVA FX built environment

下载IDEA、OpenJDK1.8、SceneBuilder(glounhq).

SceneBuilder Download: https: //gluonhq.com/products/scene-builder/#download
In the IDEA in association SceneBuilder. The purpose of the association is to quickly open after SceneBuilder to design your pages from IDEA

IDEA-> File-> Settings-> Language-> Java FX-> Enter the path SceneBuilder

If Linux environment, you will find this path also easy to find, I use the locate SceneBuildercommand found, the path is:/opt/SceneBuilder/SceneBuilder

FX environment OpenJDK because there is no need to install our own. For ease of administration, we are here to use MAVEN

Creating a Java FX project in IDEA
Right on the project name, select 'Add framework support', select MAVEN

Add the following dependence in pom.xml file:

<dependencies>
        <!-- https://mvnrepository.com/artifact/org.openjfx/javafx-controls -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-controls</artifactId>
            <version>13</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.openjfx/javafx-fxml -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-fxml</artifactId>
            <version>13</version>
        </dependency>
    </dependencies>

Design Flow

Here I have only to write out to explore the design process, if there is something wrong, please point out -

After the first created in the Resources in fxml file (under the Resources folder on the reason why, in order to facilitate load time, later to see), created on the file name right click and select 'Open in SceneBuilder', then you can for the visual design of the SceneBuilder. To pay attention to the design, to the fx under the bar code on the responsive element: id set id, so that after the call. After the design is completed Ctrl + s to save the file

Design a loaded interface. The inlet can be placed under the main method java class, for example:

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{

        Parent root = FXMLLoader.load(getClass().getClassLoader().getResource("Entry.fxml"));//从Resources中获取资源
        primaryStage.setTitle("Course Registration System");
        primaryStage.setScene(new Scene(root, 800, 600));
        primaryStage.show();
    }

Design Trigger:

For each Panel, we want to specify a trigger class, this is on the fxml file, such as IDEA default is AnchorPane objects created, it can be found in the line: fx:controller="sample.MainController"This is MainController I created a class

After that, we can design the various controls under the panel reflect the triggering event, this can fill in SceneBuilder, the following Code in the column. After the design, it will trigger the next class we specify that this method of finding, if not, you will be prompted to create IDEA

Note that the trigger may create a plurality of classes, which is more manageable, decouple
Gets the object fxml in the trigger

Sometimes, we need to get the value of the corresponding object in the event, for example, click on the 'Submit' button when the sign-in page design, we need to know the string input box. At this time we can get these elements in a trigger, provided that we have entered into these controls fx: id, it is global, not allowed to repeat. For example, we can declare:
```
   @FXML
    private TextField username;
    @FXML
    private TextField password;
```
Gets the value at two TextField objects:
```
usernameString=username.getText();
passwordString=password.getText();
```

Jump pages

We need to design a Java class for each page, for example, I designed a SignIn_Student.java:

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class SignIn_Student extends Application{
    private  String usernameString;
    private  String passwordString;
    @Override
    public void start(Stage stage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getClassLoader().getResource("SignIn_Student.fxml"));//加载页面
        Scene anotherScene=new Scene(root);
        stage.setTitle("Please log in");
        stage.setScene(anotherScene);
        stage.show();
    }

}

TableView use

This control is really a bit of trouble with them. Toss for a long time.

We definitely need to add this TableView in one fxml page, and enter the Table and it TableColumn each of fx: the above mentioned id .
We need to create a controller class file is fxml have TableView alone, would later say why

We need to create a class to represent the data to be stored, for example, I have here created a Courses.class :( following get and set methods are automatically generated IDEA)

package sample;

import javafx.beans.property.*;

import java.time.LocalDate;
import java.time.LocalTime;

public class Courses {

    private final StringProperty department;
    private final StringProperty lecturer;
    private final ObjectProperty<LocalDate> Time;
    private final StringProperty location;
    private final IntegerProperty ID;

    public Courses(String name, String department, String lecturer, LocalDate time, String location, Integer ID) {
        this.name = new SimpleStringProperty(name);
        this.department = new SimpleStringProperty(department);
        this.lecturer = new SimpleStringProperty(lecturer);
        this.Time = new SimpleObjectProperty<LocalDate>(time);
        this.location = new SimpleStringProperty(location);
        this.ID = new SimpleIntegerProperty(ID);
    }
    //String,String,String, Date,String,Integer
    private final StringProperty name;

    public String getName() {
        return name.get();
    }

    public StringProperty nameProperty() {
        return name;
    }

    public void setName(String name) {
        this.name.set(name);
    }

    public String getDepartment() {
        return department.get();
    }

    public StringProperty departmentProperty() {
        return department;
    }

    public void setDepartment(String department) {
        this.department.set(department);
    }

    public String getLecturer() {
        return lecturer.get();
    }

    public StringProperty lecturerProperty() {
        return lecturer;
    }

    public void setLecturer(String lecturer) {
        this.lecturer.set(lecturer);
    }

    public LocalDate getTime() {
        return Time.get();
    }

    public ObjectProperty<LocalDate> timeProperty() {
        return Time;
    }

    public void setTime(LocalDate time) {
        this.Time.set(time);
    }

    public String getLocation() {
        return location.get();
    }

    public StringProperty locationProperty() {
        return location;
    }

    public void setLocation(String location) {
        this.location.set(location);
    }

    public int getID() {
        return ID.get();
    }

    public IntegerProperty IDProperty() {
        return ID;
    }

    public void setID(int ID) {
        this.ID.set(ID);
    }
}

We need to realize the effect that, when loading the page, the table automatically load the data. Fill in our controller class is created as follows:

package sample;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;

import java.time.LocalDate;

public class MainController {
    @FXML
    private TextField username;
    @FXML
    private TextField password;
    @FXML
    private TableView<Courses> allCoursesTable;
    @FXML
    private TableColumn<Courses,String> CourseNameAttribute;
    @FXML
    private TableColumn<Courses,String> DepartmentAttribute;
    @FXML
    private TableColumn<Courses,String> LectureAttribute;
    @FXML
    private TableColumn<Courses, LocalDate> TimeAttribute;
    @FXML
    private TableColumn<Courses,String> LocationAttribute;
    @FXML
    private TableColumn<Courses,Number> CourseIDAttribute;
    @FXML
    private void initialize() {
        ObservableList<Courses> data= FXCollections.observableArrayList(new Courses("MACHINE LEARNING","COMPUTER","ZHANGYI",LocalDate.of(2012,01,01),"A101",4011));//创建ObservableList对象，将数据装进去
        CourseNameAttribute.setCellValueFactory(cellData->cellData.getValue().nameProperty());
        DepartmentAttribute.setCellValueFactory(cellData->cellData.getValue().departmentProperty());
        LectureAttribute.setCellValueFactory(cellData->cellData.getValue().lecturerProperty());
        TimeAttribute.setCellValueFactory(cellData->cellData.getValue().timeProperty());
        LocationAttribute.setCellValueFactory(cellData->cellData.getValue().locationProperty());
        CourseIDAttribute.setCellValueFactory(cellData->cellData.getValue().IDProperty());
        allCoursesTable.setItems(data);//加载数据
    }
}

That is why to use a separate controller class, otherwise initialize method will have to load every time the page is created once, and only one page of these Tabel Column object and we say, will complain.

Write a method to jump to the page.

This is the introductory tutorial FX, with these basic methods, I believe a little bit more complicated design of desktop applications is not a problem.