Java FX 學習筆記一: 快速入門

簡介：

JavaFx平臺是一個富客戶端平臺解決方案，它能夠使用應用程序開發人員輕鬆的創建跨平臺的富客戶端應用程序。它構建在Java技術的基礎之上，JavaFX平臺提供了一組豐富的圖形和媒體API與高性能硬件加速圖形和媒體引擎,簡化開發數據驅動的企業客戶端應用程序。


基本介紹：

 場景圖：顯示在整體框架的最頂層，是整體JavaFX應用的起始點。它是一個分層次的樹狀結構的結點來表示應用用戶接口的可視化元素。它即能處理輸入也能渲染輸出。

一個場景中單獨的元素叫節點。每一個節點都有一個ID，樣式類和邊界值。除了根結點外，每一個節點都有一個父結點並且有0到多個子節點。它還可以有如下屬性：（效果，例如模糊和陰影、透明度、變換參數、事件處理、特定的應用狀態）



快速開發：

 （1）窗體佈局設計

窗體佈局可以動態的用代碼實現，代碼量會很大。

跟android開發使用layout.xml配置文件定義佈局類似，用來描述javaFX佈局的文件是fxml，實際上就是xml文件。通過在fxml文件描述控件佈局等等屬性之後再通過代碼加載配置文件，javaFX框架會自動生成控件節點以供使用。

快速設計窗體佈局可以使用oracle的JavaFX SceneBuilder GUI編輯器，通過可視化界面進行設計，不過現在oracle已經不再發布JavaFX SceneBuilder的可執行版本了，需要用戶下載源碼進行編譯。

這裏推薦一款比較好的第三方GUI編輯器：GLUON的SceneBuilder，可以在其官方網站下載可執行jar文件：（http://gluonhq.com/labs/scene-builder/)



命令行執行java -jar SceneBuilder-8.2.0.jar運行，看到如下窗口：

其中上圖右邊的fx:id在代碼中可以通過其獲取控件的實例。

將其打開,可以看到結構是這樣的:

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.Pane?>


<Pane fx:controller="xuyihao.JavaFXTest.TestMainWindowController" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="347.0" prefWidth="328.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button fx:id="button_1" layoutX="137.0" layoutY="267.0" mnemonicParsing="false" onAction="#buttonClick" text="Button" />
      <Label layoutX="134.0" layoutY="52.0" text="你好世界！" />
      <TextArea fx:id="textArea_1" layoutX="64.0" layoutY="67.0" prefHeight="200.0" prefWidth="200.0" />
   </children>
</Pane>

其中fx:id=""代表了控件的id，後面會說道代碼利用這個id可以獲取控件的實例
其中的onAction="#buttonClick"的用處是定義綁定事件的。

編輯好佈局文件之後，將fxml文件放到項目源代碼目錄中，如下圖：

（2）編寫啓動代碼

編輯好佈局文件之後，就要編寫代碼了。
首先新建一個主窗口類，繼承自javafx.application.Application類：

其中的start方法是實現Application類的啓動方法，程序啓動之後，框架會首先調用該方法。因此初始化動作應當放在該方法中執行。

Start方法編寫過程如上圖，編寫完成之後需要在定義的main方法中調用：

這樣程序就可以啓動了。

(3)獲取控件

跟android的findViewById()類似，JavaFX也是這樣通過Parent的lookup方法，根據fxml文件中定義的fx:id來獲取控件實例的。需要注意的是，控件id前面要加上#號。這是一種獲取控件的方法，另外一種通過定義Controller類進行控件事件綁定接下去會說。

（4）事件監聽綁定

針對上面說的控件獲取方式，在拿到了控件實例之後即可對控件綁定事件監聽，這裏拿Button來舉例：

只需要簡單地對Button對象設置OnAction監聽即可，EventHandler對象中的操作是在TextArea中添加一行文字。
看看效果：

OnAction代表了Button對象的鼠標左鍵單擊操作，每次單擊都會觸發事件，添加一行文本到TextArea中。


還有另外一種更加簡便的方法定義事件的動作，就是定義Controller類。下面講解：

(a)新建Controller類

(b)其中，Controller類的控件定義名稱應當與fxml文件中控件id一致，事件監聽方法名稱應當與onAction=”#xxxxx”中的xxxxx一致，並且用@FXML註解修飾。
(c)然後在fxml文件的根節點添加fx:controller="xxxxx"表示該佈局文件對應的Controller是哪一個。然後運行程序：

效果是一樣的。