Java桌面應用-JavaFX01-Hello World

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就開發完了