java（八）javafx

---

---

一.

在JavaFX中，Stage、Scene、Root 和 Group 是用于构建和管理图形用户界面的重要组件。

1. Stage（舞台）

• Stage 是JavaFX应用程序的顶层窗口。
• 每个JavaFX应用程序都至少有一个 Stage，它是应用程序的主要窗口。

Stage 包含一个或多个 Scene 对象，可以通过 setScene() 方法来设置。

2. Scene（场景）

• Scene 是 Stage 内的一个独立的场景或视图。
• 一个 Stage 可以包含多个 Scene，但一次只能显示一个 Scene。
• Scene 包含了用户界面的所有内容，包括控件、布局和图形元素。

你可以通过 setRoot() 方法将一个 Group 或其他布局容器设置为 Scene 的根节点。

3. Root（根节点）

• Root 是 Scene 内的顶级容器，它可以包含其他图形元素。
• 根节点通常是一个 Group 或其他容器类型，用于组织和布局界面中的控件和图形元素。

4. Group（群组）

• Group 是 JavaFX 中用于组织和呈现多个图形元素的容器。
• 你可以将各种控件、图像、形状等添加到 Group 中，然后将 Group 添加到 Scene 的根节点。
• Group 通常用于创建简单的布局，但它不支持高级布局管理功能。

---

二. javafx scene graph

在JavaFX中，场景图（Scene Graph）是一种用于组织和呈现图形用户界面的层次结构，由节点（Node）组成。

在场景图中，通常有三种类型的节点，它们构成了界面的基本元素，分别是：控件节点、布局节点和形状节点。

1. 控件节点

• 控件节点是用于创建用户界面控件的节点，如按钮、文本框、标签等。
• 这些节点通常用于用户与应用程序进行交互。例如，一个按钮节点可以响应用户的点击事件。
• JavaFX提供了各种内置的控件节点，也允许开发者自定义控件。

2. 布局节点

• 布局节点是用于管理和排列其他节点的容器节点，如 VBox、HBox、GridPane 等。
• 这些节点用于定义用户界面的布局结构，可以包含控件节点和其他布局节点。
• 布局节点通过指定排列方式来控制内部节点的位置和大小。

3. 形状节点

• 形状节点是用于绘制图形和图像的节点，如矩形、圆形、直线、图像等。
• 这些节点允许你在用户界面中绘制各种形状和图像，用于数据可视化、绘图应用等领域。
• 你可以指定形状的属性，如颜色、线条宽度、填充等来定制它们的外观。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class JavaFXExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        // 创建控件节点
        Button button = new Button("Click Me");

        // 创建形状节点
        Rectangle rectangle = new Rectangle(100, 100, Color.BLUE);

        // 创建布局节点
        VBox vbox = new VBox(button, rectangle);

        Scene scene = new Scene(vbox, 300, 200);

        primaryStage.setTitle("JavaFX Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

三. Nodesa and Properties

在JavaFX中，Node 和属性（Properties）是构建用户界面的基本元素。

1. Node（节点）

Node 是 JavaFX 场景图中的基本构建块，代表用户界面的可视元素。它可以是控件、布局、形状、图像等。

Node 特征

• 它们可以包含在父节点中，从而构建出层次结构。
• 它们可以具有自己的坐标、大小和外观属性。
• 它们可以响应用户交互事件，如鼠标点击、键盘输入等。
• 通常，Node 可以被添加到 Scene 中，然后显示在 Stage 中。

2. Properties（属性）

• 属性是 Node 或其他 JavaFX 对象的特征或状态，可以用来描述它们的外观、行为和数据。
• 属性可以是可读的、可写的，或者二者兼具。属性通常用于控制节点的外观和行为。
• 例如，Node 的属性可以包括位置坐标、大小、颜色、文本内容等。这些属性可以通过相应的方法进行访问和修改。
• JavaFX 使用属性机制来实现数据绑定和响应式编程。这意味着你可以创建属性监听器，以在属性值更改时自动触发相应的操作。

四. event handling

事件处理（Event Handling）在JavaFX中是一项重要的任务，用于响应用户的交互事件，如鼠标点击、键盘输入、按钮点击等。
oracle

1. 概念

（1）事件（Event）

• 事件是在应用程序中发生的用户交互动作或系统通知。常见的事件包括鼠标点击、键盘按键、按钮点击、拖放等。
• 每个事件都有一个类型，例如，MouseEvent 表示鼠标事件，ActionEvent 表示按钮点击事件。
• 事件对象包含有关事件的信息，如事件源、事件类型、坐标等。

（2）事件源（Event Source）

• 事件源是触发事件的对象，通常是图形界面中的控件或节点。例如，按钮、文本框、画布等都可以充当事件源。
• 当用户与事件源进行交互，事件源会生成事件并将其发送到事件处理器。

（3）事件处理器（Event Handler）

• 事件处理器是用于响应特定事件类型的代码块或方法。
• 事件处理器可以附加到事件源，以指定在事件发生时应执行的操作。
• 事件处理器通常以回调函数的形式编写，当事件发生时，系统会自动调用事件处理器。

（4）事件注册（Event Registration）

为了响应事件，需要将事件处理器附加到事件源。在JavaFX中，可以使用 setOnEventType 方法来注册事件处理器，其中 EventType 是特定事件类型的名称（如 setOnMouseClicked 用于鼠标点击事件）。

（5）事件冒泡（Event Bubbling）

JavaFX中的事件通常支持事件冒泡机制，即事件可以从事件源向上传递到父容器。这允许多个控件嵌套并在它们的父级上处理事件。

（6）事件传递参数（Event Passing Parameters）

事件处理器通常接受事件对象作为参数，事件对象包含了关于事件的详细信息，如事件类型、事件源、鼠标位置等。
事件对象的类型取决于事件类型，例如，MouseEvent 包含有关鼠标事件的信息。

2. 用于响应和处理事件

（1）分支（Branches）

分支是编程中的控制结构，通常用于根据条件执行不同的代码块。例如，使用条件语句（如if语句）可以根据条件的真假执行不同的代码块。

（2）循环（Loops）

循环用于多次执行相同或类似的代码块，直到满足退出条件。循环结构可以帮助程序重复执行特定的任务，如for循环和while循环。

（3）方法（Methods）

方法是可重用的代码块，它可以在程序中被多次调用。方法允许将一组操作封装到一个单一的单位中，以便在需要时调用。

（4）事件（Events）

事件处理也是一种控制流构造，但它用于响应外部事件的发生。事件可以包括用户交互（如鼠标点击、按键输入）或系统通知。当事件发生时，相应的事件处理器会被触发执行。

事件处理与其他控制流结构不同，它通常是异步的，因为事件的发生通常是在程序的主线程之外。事件处理器的目的是响应和处理这些事件，以执行相关的操作。例如，按钮点击事件处理器可以在用户点击按钮时执行一段代码。

---

五. Architechtual Patterns

GUI（图形用户界面）架构模式是一组设计模式，用于组织和管理用户界面应用程序的结构和交互。这些模式有助于开发人员构建可维护、可扩展和易于理解的GUI应用程序。

1. MVC（Model-View-Controller）

Model（模型）：负责应用程序的数据和业务逻辑。它与数据的存储和处理有关。
View（视图）：负责呈现数据给用户。它是用户界面的可视化部分。
Controller（控制器）：处理用户输入和协调模型和视图之间的交互。
MVC模式通过将应用程序分解为三个独立的组件，使开发人员能够更容易地管理代码和实现可维护性。

2. MVVM（Model-View-ViewModel）

Model（模型）：与MVC中的模型类似，负责数据和业务逻辑。
View（视图）：与MVC中的视图相似，负责用户界面的呈现。
ViewModel（视图模型）：作为视图和模型之间的中介，处理用户输入并管理视图所需的数据。它将数据从模型转换为视图可用的格式。
MVVM模式在现代GUI应用程序中广泛使用，尤其是在使用数据绑定框架的情况下，如WPF和Angular。

3. MVP（Model-View-Presenter）

Model（模型）：与MVC和MVVM中的模型类似，负责数据和业务逻辑。
View（视图）：负责用户界面的呈现，但通常更薄，包含少量的逻辑。
Presenter（主持人）：处理用户输入，协调模型和视图之间的交互。Presenter包含了大部分业务逻辑。
MVP模式旨在降低视图的复杂性，将业务逻辑集中在Presenter中。

4. Flux

Flux是一种用于构建用户界面应用程序的体系结构，通常与React一起使用。它包括以下核心组件：
Actions（动作）：描述用户的行为，如点击按钮。
Dispatcher（分发器）：将动作分发到存储（数据层）和视图。
Stores（存储）：存储应用程序的状态和数据。
Views（视图）：呈现数据并在数据更改时更新自己。
Flux通过单向数据流的方式管理应用程序的状态，使状态管理更加可预测和可维护。

5. 关键要点

（1）分离GUI和游戏逻辑

将GUI的实现与游戏的核心逻辑分开。这意味着游戏逻辑和状态应该在模型（Model）中进行管理，而GUI应该专注于呈现和交互。

（2）不要让GUI和模型脱节

确保GUI和模型保持同步。任何与游戏状态相关的更改都应该通过事件（Event）来触发，然后修改模型（Model）。这可以确保GUI的显示与实际游戏状态一致。

（3）始终与模型核实

在更新GUI时，始终参考游戏模型。不要依赖于GUI状态来确定游戏状态，而应该通过查询模型来获取游戏状态。

（4）事件驱动

GUI应该通过事件来与游戏模型进行交互。当用户执行操作时，例如点击按钮或拖动对象，GUI应该生成相应的事件，然后将这些事件传递给游戏模型。

（5）纯粹的GUI考虑应该保持在模型之外

GUI应该关注呈现游戏状态和接收用户输入。不应该将纯粹的GUI元素，如拖动对象的位置，包含在游戏模型中。这有助于保持模型的纯净和可维护性。