JavaFX入門（二）：JavaFX和FXML

在我的JavaFXML系列博客第一篇《JavaFX入門（一）：我的第一個JavaFX程序 》中我們用純Java代碼寫了一個很簡單的JavaFXML程序，這一節中我們使用FXML編寫程序界面，然后用Java書寫后台邏輯完成上一節中的程序，實現相同的功能。

通俗的理解FXML：FXML是一種以XML的格式表示JavaFX界面對象的文件，FXML文件中的每一個元素可以映射到JavaFX中的一個類，每個FXML元素的屬性或者其子元素都可以映射為該對應JavaFXML類的屬性。

我們在Eclipse創建一個簡單的Java工程。一個最簡單的工作包括：一個Java文件（HelloApplication.java，主程序入口），一個FMXL文件（MainPanel.fxml，主界面布局）和一個Controller文件（MainPaneController.java，Controller文件就是一個普通的Java類文件，用於控制界面交互事件的處理）。新建工程的截圖如下：

 

 首先，我們利用FMXL文件MainPanel.fxml編寫界面：

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

<!--導入JavaFXML類-->
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<!--布局控件BorderPane，fx:controller屬性用於聲明事件處理的Controller，值為Controller類的類全名-->
<!--xmlns用於聲明默認命名空間，這里的聲明隨着你安裝的Java JDK版本號的不同可以不同，但是最好不要比你安裝的JDK版本高-->
<BorderPane fx:controller="cn.tzy.fx.MainPaneController" xmlns="http://javafx.com/javafx/8.0.31" xmlns:fx="http://javafx.com/fxml/1">
   <center>
       <!--聲明一個Button元素，fx:id用於給該Button一個標示，用於和Controller類中的Button實例進行綁定-->
       <!--onAction用於綁定Button的點擊事件，handleButtonAction前面的#用於和Controller中處理函數進行綁定-->
      <Button fx:id="btnHello" text="Hello World!" BorderPane.alignment="CENTER" onAction="#handleButtonAction">
          <!--這里我修改了Button默認的字體及其大小-->
         <font>
            <Font name="Arial" size="14.0" />
         </font>
      </Button>
   </center>
</BorderPane>

可以看到FXML文件中的元素BorderPane ，Button對應這JavaFX中的布局類或者控件類，Center是BorderPane的屬性，而Font是Button的屬性。所以，一般地，FXML文件中的每一個元素可以映射到JavaFX中的一個類，每個FXML元素的屬性或者其子元素都可以映射為該對應JavaFXML類的屬性。

然后，我們編寫主類HelloApplication.java進行界面元素的加載：

package cn.tzy.fx;

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

public class HelloApplication extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        try {
            // 這里的root從FXML文件中加載進行初始化，這里FXMLLoader類用於加載FXML文件
            BorderPane root = (BorderPane)FXMLLoader.load(getClass().getResource("MainPane.fxml"));
            Scene scene = new Scene(root, 500, 500);
            primaryStage.setScene(scene);
            primaryStage.setTitle("Hello World");
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }

    }

    public static void main(String[] args) {
        launch(args);
    }
}

可以看到程序的大體部分和我們上一節是類似的，不同的是Scene中的控件都是在FXML文件中進行聲明的，然后使用FXMLLoader類進行了加載。這樣帶來的好處就是前台設計和后台邏輯的分離。

最后，我們在Controller文件MainPaneController.java編寫事件處理的代碼：

package cn.tzy.fx;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;

public class MainPaneController {
    <!--這里的Button對象有需要加@FXML注解，然后變量的名稱為你剛才在FXML文件中聲明的Button的id屬性-->
    @FXML
    private Button btnHello;

    <!--這里的handleButtonAction方法為我們在FXML文件中聲明的onAction的處理函數-->
    @FXML
    protected void handleButtonAction(ActionEvent event) {
        btnHello.setText("Hello World, I am JavaFX!");
    }

}

@FXML注解用於說明該變量或者方法可以在FXML文件中進行訪問。官方對@FXML的說明為：Annotation that tags a class or member as accessible to markup。handleButtonAction()方法在FXML文件中說明，為Button的onAction的屬性值，我們在handleButtonAction()方法中進行點擊按鈕的處理邏輯。

我們運行程序，點擊按鈕結果如下：

 

 

總結一下：

JavaFX程序中我們可以使用FXML文件編寫前台界面，使用FXMLLoader類將FXML文件綁定到主程序。
使用一個Controller類和@FXML注解將操作的邏輯綁定到FXML文件中的界面元素。
在FXML文件中使用fx:id屬性聲明界面元素的id，在Controller類中以相同的名稱定義該元素。onAction屬性值給定以#號開頭的事件處理函數名稱，在Controller類中實現該函數。
下一節中說說如何使用Eclipse插件以及SceneBuilder輔助我們編寫JavaFX程序：JavaFX入門（三）：使用Eclipse開發JavaFX程序 。