基於JavaFX開發桌面程式

注：我也是JAVA FX的初學者之一，自己在學習的時候踩了許多的坑，中文英文的資料查了不少，但是覺得FX技術和其他熱門技術相比，教程還是太少了。這裡就儘量做一點微小的貢獻吧

使用環境

注：寫這個只是為了說明我的環境，使用和我的不一樣的環境在理解這篇教程的時候並沒有什麼問題，例如使用Windows平臺、使用Oracle JDK(這樣就不需要再單獨安裝FX元件了，可以不用MAVEN)、使用Oracle的SceneBuilder。可能唯一一個比較影響體驗的就是不使用IDEA而是使用eclipse了

• Ubuntu18.04LTS
• OpenJDK 1.8
• IDEA(with MAVEN)：使用MAVEN安裝FX環境（OpenJDK不附帶FX環境）
• SceneBuilder(glounhq)：這是一個fxml視覺化設計環境，使用上不如C#，但起碼比純命令設計強一百倍

搭建JAVA FX環境

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

SceneBuilder下載地址：https://gluonhq.com/products/scene-builder/#download

在IDEA中關聯SceneBuilder.關聯的目的是為了之後可以從IDEA快速開啟SceneBuilder來設計頁面

IDEA->File->Settings->Language->Java FX->輸入SceneBuilder的路徑

如果是Linux環境，你會發現這個路徑還不好找，我是使用locate SceneBuilder命令找到的，路徑是： /opt/SceneBuilder/SceneBuilder

因為OpenJDK沒有FX環境，需要我們自己安裝。為了便於管理，我們在這裡使用MAVEN

在IDEA中建立一個Java FX專案

在專案名上右鍵，選擇'Add framework support',選擇MAVEN

在pom.xml檔案中加入以下依賴：

<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>

設計流程

這裡只寫一些我已經探索出來的設計流程，如果有不對的請指出～

先在Resources中建立fxml檔案（之所以放在Resources資料夾下，是為了載入的時候方便，之後能看到），建立完成後在檔名上右擊，選擇'Open in SceneBuilder'，之後就可以在SceneBuilder中進行視覺化設計了。設計時要注意，對有響應的元素要在code欄下的fx:id中設定id,以便於之後的呼叫。設計完成後Ctrl+s儲存檔案

設計第一個載入的介面。這個可以放在入口的java類的main方法下，舉個例子：

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();
  }

設計觸發器：

對於每一個Panel，我們要指定一個觸發器類，這個是放在該fxml檔案中的，例如IDEA中預設建立的就是AnchorPane物件，在它那一行就能找到:fx:controller="sample.MainController",這個MainController就是我建立的一個類

之後，我們可以對該panel下各個控制元件設計觸發事件後的反映，這個可以在SceneBuilder中填寫，在Code那一欄下面。設計了之後，它就會到我們指定的那個觸發器類下尋找這個方法，如果沒有的話IDEA會提示你建立

注意，觸發器類可以建立多個，這樣更便於管理，降低耦合度

在觸發器中獲取fxml中的控制元件物件

有時候，我們需要在事件相應中獲取物件的值，例如設計登入頁面時點選'提交'的按鈕，我們需要知道輸入框的字串。這時候我們可以在觸發器中獲取這些元素，前提是我們為這些控制元件輸入了fx:id,它是全域性性的，不允許重複。例如我們可以通過宣告：

  @FXML
  private TextField username;
  @FXML
  private TextField password;

獲取兩個TextField物件下的值：

usernameString=username.getText();
passwordString=password.getText();

頁面跳轉

我們需要為每一個頁面設計一個Java類，例如我設計了一個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的使用

這個控制元件用起來著實有點麻煩。折騰了好久。

我們肯定需要在某一個fxml頁面中加入了這個TableView，並且輸入了Table和它每一個TableColumn的fx:id.

我們需要為有TableView的fxml檔案單獨建立一個控制器類，之後會說為什麼

我們需要建立一個類來表示要儲存的資料，例如我這裡建立了一個Courses.class:（下面的get和set方法是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,Date,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);
  }
}

我們需要實現的效果是，在載入這個頁面時，表格中自動載入資料。填寫我們建立的控制器類如下：

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);//載入資料
  }
}

這就是為什麼要用單獨的控制器類了，否則initialize方法會在每次建立頁面的時候都載入一次，而只有某一個頁面有我們說的這些Tabel和Column物件，會報錯的。

寫一個方法來跳轉到這個頁面。

如何實現頁面之間的傳參呢？

對於要傳參的頁面，我們就不能直接獲取parent物件了，而是先要獲取FXMLLoader物件：

FXMLLoader fxmlLoader = new FXMLLoader(getClass().getClassLoader().getResource("MainPanel.fxml"));
Parent root = fxmlLoader.load();
MainController mc=fxmlLoader.getController();

注意這個MainController是我為這個頁面寫的控制器類

獲取了Controller物件後，我們就可以呼叫方法，將引數傳進去了：

    mc.setPassword(pass);
    mc.setUsername(user);
    mc.handleAllCourses();

我在MainController這個類中是這樣寫的：

  public void setUsername(String username){
    usernameString=username;
  }
  public void setPassword(String password){
    passwordString=password;
  }

這就是入門的FX教程了，有了這些基本的方法，相信設計一個稍微複雜一點的桌面應用程式已經不是問題了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。