「部落格搬家」 原地址: 簡書 原發表時間: 2017-05-21
有一個專案，需要模擬數千臺裝置的工作情況，這數千個裝置分為若干組，每組 100 臺。故需要設計一款 GUI 程式，包含 100 個自定義控制元件，模擬一組裝置的工作情況，通過 ListView 對裝置組進行選擇，即可成功模擬數千臺裝置。
由於 Java 擁有豐富的第三方庫，便於專案的底層實現，故基於最新的 Java GUI 框架「JavaFX 8」實現該 GUI 介面，該應用程式需使用 100 個相同的自定義控制元件，故需要使用流皮膚 (FlowPane) 對這些自定義控制元件進行有效佈局。
最終實現效果如下圖所示：
FlowPane 佈局皮膚中包含的自定義控制元件會在水平方向上按行連續地平鋪放置，並且會在邊界處自動換行，點選左側 ListView 中的 Item，右側的自定義控制元件組會顯示選定裝置組的狀態資訊。綜上，該設計可實現預定目標。
1. Java FX 8 基本說明
可以使用這篇「JavaFX 8 教程」作為 JavaFX 8 的入門使用，擁有 GUI 設計經驗的開發人員均可快速入門 Java FX 8，
1.1 介面生成方式
Java FX 8 與大多數現代 GUI 開發相同，使用者介面有兩種建立方式：
- XML檔案定義
- java程式碼建立
本文為了更加清晰直觀，採用兩種介面佈局方法相結合的方式。
1.2 問題說明
由於 Java FX 8 並不主流，遇到問題很難在中文網站上找到解決方法，故有許多坑需要填補，所以本文遇到一些坑時不進行說明，而是在另一篇文章中列出了這些坑的填補方法。
2. 介面根佈局的設計
使用「Scene Builder」開啟 FXML 佈局檔案，在如圖所示左下角，填入一個自定義 Class 作為控制器類，啟用需要操作的控制元件，在右側「fx:id」處填入 Class 的 Field，下方填入事件處理方法，之後通過 View -> Show Sample Controller skeleton 可檢視填入 Controller 中的程式碼示例。
在程式的入口類中填入如下程式碼：
public class Main extends Application {
//入口方法已隱式實現，故可刪除
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("bitkyApp");
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("sample.fxml"));
AnchorPane anchorPane = fxmlLoader.load(); //返回型別設定為佈局檔案根節點型別
Controller controller = fxmlLoader.getController(); //可獲取該佈局的 Controller 類
BorderPane rootLayout = FXMLLoader.load(getClass().getResource("rootLayout.fxml"));
rootLayout.setCenter(anchorPane);
primaryStage.setScene(new Scene(rootLayout, 800, 650));
primaryStage.show();
}
}
複製程式碼該方法為教程中的方法，為了實現 Controller 和外部的互動，將 FXML 佈局檔案和 Controller 均耦合在了外部類中，顯得較為繁瑣。故可採用自定義控制元件的方式簡化外部的程式碼呼叫。
3. 自定義控制元件的設計
JavaFX 2 版本之後，FXML 提供 fx:root/ 寫法，此時要求 Controller 必須繼承自 FXML 節點物件，使用 FXMLLoader 載入時，必須呼叫 setRoot() 方法。
不要在 FXML 中指定 Controller，通常情況下一個 FXML 可以對應多個 Controller，為了靈活性，我們應當在 FXMLLoader 中指定 Controller。
根據具體實踐，可以採用如下方式：
Scene Builder 左下角的 Controller 皮膚中，勾選使用 fx:root 構造，並且不應該填入 Controller 類，如圖，此時 fx:root/ 作為根節點，：
此時在 FXML 檔案中的程式碼例如：
<fx:root xmlns:fx="http://javafx.com/fxml/1"
type="TabPane"
xmlns="http://javafx.com/javafx/8.0.111">
......
</fx:root>
複製程式碼此時，Controller 類繼承根節點的型別，例如「TabPane」。可選實現「Initializable」介面進行控制元件生成之後的初始化操作，程式碼示例如下：
//Controller 類繼承 FXML 佈局檔案的根節點型別「TabPane」
public class DeviceView extends TabPane implements Initializable {
public DeviceView() {
loadFxml();
}
private void loadFxml() {
FXMLLoader loader = new FXMLLoader(getClass().getResource("device_view.fxml"));
loader.setRoot(this);
loader.setController(this);
try {
loader.load();
} catch (IOException e) {
e.printStackTrace();
}
}
//該方法在構造方法執行完畢後執行
@Override
public void initialize(URL location, ResourceBundle resources) {
}
}
複製程式碼此時，在主佈局對應的 Controller 中，直接生成該類「DeviceView」的物件作為自定義控制元件，通過 FlowPane 控制元件的引用新增該物件為 FlowPane 的子控制元件，即可實現設計目的，具體程式碼如下：
for (int i = 1; i <= 100; i++) {
//在 FlowPane 中新增自定義控制元件「DeviceView」
DeviceView deviceView = new DeviceView(i);
deviceFlowPane.getChildren().add(deviceView);
//使用觀察者模式新增子控制元件「DeviceView」的監聽器
deviceView.setListener((status -> {
if (listener != null) listener.btnChanged(status);
}));
}
複製程式碼4. 使用自定義控制元件的方式簡化主介面的外部呼叫程式碼
綜上所述，最終實現的主介面程式碼示例如下：
public class MainView extends BorderPane implements Initializable {
private static MainView mainView;
private MainView() throws IOException {
FXMLLoader loader = new FXMLLoader(getClass().getResource("rootLayout.fxml"));
loader.setRoot(this);
loader.setController(this);
loader.load();
}
public static MainView getInstance() {
if (mainView == null) {
try {
mainView = new MainView();
} catch (IOException e) {
e.printStackTrace();
}
}
return mainView;
}
@Override
public void initialize(URL location, ResourceBundle resources) {
}
}
複製程式碼此段程式碼使用了自定義控制元件的方式，並且使用了單例模式中的懶漢式方便外部呼叫，外部呼叫程式碼如下：
public class MainLauncher extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
startApp(primaryStage);
}
private void startApp(Stage primaryStage) {
primaryStage.setTitle("裝置模擬客戶端");
primaryStage.setScene(new Scene(MainView.getInstance()));
primaryStage.setMaximized(true);
primaryStage.show();
}
}
複製程式碼