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就开发完了