Java桌面應用-JavaFX01-Hello World

JavaFX是基於Java語言強大的圖形和多媒體處理工具包集合，它比Swing好用很多，它允許開發使用FXML來設計和佈局介面，跟Qt和Android的佈局有點類似

1.JavaFX UI層級關係

1.stage（視窗）: # 頂層
  2.scene（場景）: # 放在視窗內
    3.container（容器）: # 放在場景內（佈局）
      4.controller（控制元件）: # 放在容器中

2.第一個JavaFX應用

繼承Application類，實現start方法

package com.godfrey.javafx;

import javafx.application.Application;
import javafx.stage.Stage;

/**
 * @author godfrey
 * @since 2021-10-14
 */
public class App extends Application {
    @Override
    public void start(Stage stage) {
        stage.show();
    }

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

效果圖：

3.新增自己的控制元件

JavaFX允許使用FXML來設計和佈局介面，各模組也支援按MVC進行劃分，即control(控制層)、 model(模型層)和view(檢視層)。
下面按MVC這種模式，分別建立控制層、檢視層、和模型層。

控制層：AppUI

控制層將view(檢視層)的控制元件text通過bindBidirectional將其text屬性跟model(模型層)的text屬性繫結，這樣就可以通過設定model的text來達到改變view的text屬性的效果。

package com.godfrey.javafx.ui;

import javafx.fxml.Initializable;
import javafx.scene.control.Label;

import java.net.URL;
import java.util.ResourceBundle;

/**
 * @author godfrey
 * @since 2021-10-14
 */
public class AppUI implements Initializable {
    public Label text;
    private AppModel model;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        text.textProperty().bindBidirectional(model.textProperty());
        model.setText("Hello JavaFX!!!");
    }
}
 

模型層：AppModel

模型層主要的作用是資料載體，在控制層將檢視層的控制元件跟模型層的屬性繫結，以達到改變模型就改變檢視。（這一點和前端MVVM思想有點類似）

package com.godfrey.javafx.ui;

import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;

/**
 * @author godfrey
 * @since 2021-10-14
 */
public class AppModel {
    private StringProperty text = new SimpleStringProperty();

    public String getText() {
        return text.get();
    }

    public StringProperty textProperty() {
        return text;
    }

    public void setText(String text) {
        this.text.set(text);
    }
}
 

檢視層：AppUI.fxml

檢視層採用JavaFX的FXML來佈局介面，這裡簡單的使用BorderPane作為容器，裡面只放了一個Label控制元件

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.172-ea"
            xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.godfrey.javafx.ui.AppUI">
    <center>
        <Label fx:id="text" BorderPane.alignment="CENTER"/>
    </center>
</BorderPane>

根據層級關係組織JavaFX應用

控制元件（Label）放在容器（BorderPane）裡面，容器放在場景裡面，場景放在窗口裡面即可。

package com.godfrey.javafx;

import com.godfrey.javafx.ui.AppUI;
import javafx.application.Application;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 * @author godfrey
 * @since 2021-10-14
 */
public class App extends Application {
    @Override
    public void start(Stage stage) {
        Parent root = AppUI.load();
        Scene scene = new Scene(root);
        stage.setTitle("JavaFX Hello World");
        stage.setScene(scene);
        stage.show();
    }

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

這樣一個最簡單的完整JavaFX就開發完了