【JavaFX-1】JavaFX概述

「已注销」

已于 2023-09-13 09:24:28 修改

阅读量1.5k

点赞数 2

文章标签： java ui web安全

于 2023-09-13 00:17:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33331244/article/details/132827149

版权

一、简介

JavaFX是用于构建富互联网应用程序的Java库。使用此库编写的应用程序可以跨多个平台运行。使用JavaFX开发的应用程序可以在各种设备上运行，如台式计算机、手机、电视、平台电脑等。
JavaFX提供了一组丰富的图形和媒体API，并通过硬件加速图形利用现代图形处理单元。JavaFX还提供了接口，开发人员可以使用他们组合图形动画和UI控件。

二、`JavaFX`的特性

使用Java语言编写- JavaFX库都是使用Java编写的。
FXML- JavaFX采用了被称为FXML的语言，这是一种类似声明式标记语言的HTML。这种语言的唯一目的是定义用于界面。
Scene Builder- javaFX提供一个名为Scene Builder（场景生成器）的应用程序。在讲此应用程序集成到IDE中时，用户可以拖放设计界面，用于开发FXML应用程序。
Swing互操作性-在JavaFX应用程序中，可以使用Swing Node类嵌入Swing内容。同样，可以使用javaFX功能更新现有的Swing应用程序。
内置UI控件- JavaFX库UI控件使用它可以开发一个全功能的应用程序。
类似CSS的样式- JavaFX提供样式的CSS。通过它，可以使用CSS改进应用程序的设计。
画布和打印API- JavaFX提供Canvas，即使模式样式的渲染API。在包javafx.scene.canvas中，它包含一组用于canvas的类，可以使用它们直接在JavaFX场景的一个区域内绘制。JavaFX还在javafx.print包中提供用于打印目的的类。
丰富的API集合- JavaFX库提供了一组丰富的API来开发GUI应用程序，2D和3D图形等。这台API还包括Java平台的功能。因此，使用此API，可以访问Java语言的功能，如通用、注释、多线程和Lambda表达式。
集成图形库- JavaFX为2D和3D图形提供类。
图形管道- JavaFX支持基于硬件加速图形管道的图形。

三、JavaFX的历史

JavaFX最初由Chris Oliver开发，当时他正在为一家名为See Beyond Technology Corporation的公司工作，在2005年，这家公司被Sun Microsystems收购。

最初，这个项目被命名为F3（表单跟随函数），他的开发旨在为开发GUI应用程序提供更丰富的界面。
Sun Microsystems于2005年6月收购了See Byond公司，将F3项目改造为JavaFX。
在2007年，JavaFx正式在Java One会议上宣布。
在2008年，JavaFX与Net Beans集成。同年，JavaFX1.0的Java标准开发工具包发布。
在2009年，Oracle公司收购了Sun Microsystems，并在同一年发布下一个版本的JavaFX1.2。
在2010年，JavaFX1.3开发完成并发布，并在2011年JavaFX2.0发布。
JavaFX8，在2014年3月18日作为Java的一个组成部分一起发布。

四、`Stage`（舞台）

Stage是JavaFX应用程序的外部框架。Stage通常对应一个窗口。在JavaFX可以在浏览器中运行的早期阶段，Stage还可以指网页内JavaFX用于绘制自身的区域。
由于Java浏览器插件的弃用，JavaFX主要用于桌面应用程序。JavaFX应用程序可以打开多个窗口。每个窗口都有自己的Stage。每个Stage都由JavaFX应用程序中的一个对象表示。JavaFX应用程序有一个由JavaFX运行时创建的主对象primaryStage。如果JavaFX应用程序需要打开其他窗口，可以创建其他对象，如：对话框、向导等。

五、`Scene`（场景）

要在JavaFX应用程序的舞台上显示内容，需要一个Scene。一个Stage一次只能显示一个Scene，但可以在运行时交换Scene。JavaFX中的Stage对象可以在JavaFX应用程序的生命周期内显示多个Scene（一次一个）。

六、 `Scene Graph`（场景图）

所有的视觉组件（控件、布局等）都必须附加到要现实的Scene中，并且该Scene必须附加到Stage才能使整个Scene可见。附加到Scene的所有空间、布局等总对象称为场景图。

七、 `Node`（节点）

附加到Scene Graph的所有组件都被称为节点。所有节点都是JavaFX类的子类，称为javafx.scene.Node。
有两种类型的节点：分枝节点和叶节点。

八、控件

JavaFX控件是JavaFX的组件，它们在JavaFX应用程序中提供某种控制功能。如：按钮、单选按钮、表格、树等。
为了使控件可见，必须附加到某个Scene对象的场景图中。
常见控件：

Button**按钮：**交互控件，用户点击按钮可以触发事件

Button button = new Button("按钮");

在这里插入图片描述

Label**标签：**用于显示文本信息，用户不能直接与其进行交互

Label label = new Label("标签");

在这里插入图片描述

TextField**文本字段：**允许用户输入一行文本

TextField textField = new TextField();

在这里插入图片描述

TextArea**文本区域：**允许用户输入多行文本

TextArea textArea = new TextArea();

在这里插入图片描述

CheckBox复选框：允许用户选择多个选项

CheckBox checkBox = new CheckBox("选我");

在这里插入图片描述

RadioButton单选按钮：允许用户从多个选项中选择一个

RadioButton radioButton = new RadioButton("选择我");

在这里插入图片描述
8. ComboBox**组合框：**允许用户从下拉列表中选择一个选项

ComboBox<String> comboBox = new ComboBox<>();
comboBox.getItems().addAll("选项1", "选项2", "选项3");
comboBox.setValue("选项1");//设置默认值为“选项1”

在这里插入图片描述

Slider滑动条：允许用户通过滑动选择一个值

Slider slider = new Slider();

在这里插入图片描述

ProgressBar**进度条：**用于显示任务的进度

ProgressBar progressBar = new ProgressBar();

在这里插入图片描述

DatePicker日期选择器:允许用户选择一个日期

DatePicker datePicker = new DatePicker();

在这里插入图片描述

九、布局（Parent）

JavaFX布局是其中包含其他组件的组件。布局组件管理嵌套在其中的组件的布局。JavaFX布局组件有时也被称为父组件，因为它们包含子组件，而且布局组件是JavaFX类的子类javafx.scene.Parent。布局组件必须附加到某个Scene对象的场景图才能可见。
布局组件：

Pane基本布局:没有特定的布局模型，可随意设置子节点的位置

Pane pane = new Pane();
Button button = new Button("按钮");
pane.getChildren().add(button);

在这里插入图片描述 2. AnchorPane😗*锚定布局：**允许将节点锚定到面板边缘，可将创建的根节点改变位置

AnchorPane anchorPane = new AnchorPane();
Button button = new Button("Button");
AnchorPane.setTopAnchor(button, 10.0);//将按钮锚定到AnchorPane的顶部，距离为10.0单位
AnchorPane.setRightAnchor(button, 10.0);//将按钮锚定到AnchorPane的右侧，距离为10.0单位。
anchorPane.getChildren().add(button);

在这里插入图片描述 3. HBox**水平布局：**将子节点水平排列

HBox hbox = new HBox();
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
hbox.getChildren().addAll(button1, button2);

在这里插入图片描述 4. VBox垂直布局： 将子节点垂直排列

VBox vbox = new VBox();
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
vbox.getChildren().addAll(button1, button2);

在这里插入图片描述
5. GridPane**网格布局：**将子节点防止在网格中

// 创建一个新的GridPane对象
GridPane gridPane = new GridPane();
// 创建一个新的按钮，标签为"Button 1"
Button button1 = new Button("Button 1");
// 创建一个新的按钮，标签为"Button 2"
Button button2 = new Button("Button 2");
// 在GridPane的第一行第一列（索引从0开始）添加button1
gridPane.add(button1, 0, 0);
// 在GridPane的第一行第二列添加button2
gridPane.add(button2, 1, 0);

在这里插入图片描述 6. FlowPane**流布局：**将子节点按行或列排列，当空间不足时，会自动换行或换列

FlowPane flowPane = new FlowPane();
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
flowPane.getChildren().addAll(button1, button2);

在这里插入图片描述 7. BorderPane边界布局：将子节点分布在顶部、底部、左侧、右侧和中心五个区域

BorderPane borderPane = new BorderPane();
Button topButton = new Button("Top");
Button bottomButton = new Button("Bottom");
Button leftButton = new Button("Left");
Button rightButton = new Button("Right");
Button centerButton = new Button("Center");
borderPane.setTop(topButton);
borderPane.setBottom(bottomButton);
borderPane.setLeft(leftButton);
borderPane.setRight(rightButton);
borderPane.setCenter(centerButton);

在这里插入图片描述 8. StackPane**堆栈布局：**将子节点堆叠在一起，位于顶部的节点会覆盖其他节点

StackPane stackPane = new StackPane();
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
stackPane.getChildren().addAll(button1, button2);

在这里插入图片描述 9. TilePane**瓷砖布局：**将子节点按行或按列排列，所有节点的大小相同

TilePane tilePane = new TilePane();
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
tilePane.getChildren().addAll(button1, button2);

在这里插入图片描述

十. 图表（Charts）

JavaFX带有一组内置的即用型图表组件，用户可避免每次在需要基本图表时，重复编写图标。
图表：

LineChart折线图

package cn.xiaokp7.ui;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class LineChartSample extends Application {

    @Override
    public void start(Stage stage) {
        stage.setTitle("折线图示例"); // 设置窗口标题

        // 定义x轴和y轴
        final NumberAxis xAxis = new NumberAxis(); // 创建x轴
        final NumberAxis yAxis = new NumberAxis(); // 创建y轴
        xAxis.setLabel("月份"); // 设置x轴标签

        // 创建一个折线图，并传入x轴和y轴
        LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);

        lineChart.setTitle("公司年度收益报告"); // 设置折线图标题

        // 定义一个系列
        XYChart.Series series = new XYChart.Series(); // 创建系列
        series.setName("我的公司"); // 设置系列名称

        // 添加数据到系列
        series.getData().add(new XYChart.Data(1, 23)); // 添加数据点1
        series.getData().add(new XYChart.Data(2, 14)); // 添加数据点2
        series.getData().add(new XYChart.Data(3, 15)); // 添加数据点3
        series.getData().add(new XYChart.Data(4, 24)); // 添加数据点4
        series.getData().add(new XYChart.Data(5, 34)); // 添加数据点5
        series.getData().add(new XYChart.Data(6, 36)); // 添加数据点6
        series.getData().add(new XYChart.Data(7, 22)); // 添加数据点7
        series.getData().add(new XYChart.Data(8, 45)); // 添加数据点8
        series.getData().add(new XYChart.Data(9, 43)); // 添加数据点9
        series.getData().add(new XYChart.Data(10, 17)); // 添加数据点10
        series.getData().add(new XYChart.Data(11, 29)); // 添加数据点11
        series.getData().add(new XYChart.Data(12, 25)); // 添加数据点12

        // 创建一个场景，并将折线图添加到场景中
        Scene scene = new Scene(lineChart, 800, 600); // 设置场景大小
        lineChart.getData().add(series); // 将系列添加到折线图中

        // 设置窗口的舞台，并显示窗口
        stage.setScene(scene); // 设置舞台场景
        stage.show(); // 显示窗口
    }

    public static void main(String[] args) {
        launch(args); // 启动应用程序
    }
}

在这里插入图片描述
2. BarChart柱状图

package cn.xiaokp7.ui;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

// 定义一个BarChartSample类，继承自Application类
public class BarChartSample extends Application {
    // 定义五个字符串常量，表示柱状图中的五个类别
    final static String itemA = "A";
    final static String itemB = "B";
    final static String itemC = "C";
    final static String itemD = "D";
    final static String itemE = "E";

    // 重写start方法，该方法是JavaFX应用程序的入口点
    @Override public void start(Stage stage) {
        // 设置窗口标题
        stage.setTitle("柱状图示例");
        // 创建一个CategoryAxis对象，用于表示x轴（类别）
        final CategoryAxis xAxis = new CategoryAxis();
        // 创建一个NumberAxis对象，用于表示y轴（数值）
        final NumberAxis yAxis = new NumberAxis();
        // 创建一个BarChart对象，用于绘制柱状图
        final BarChart<String,Number> bc =
                new BarChart<String,Number>(xAxis,yAxis);
        // 设置柱状图的标题
        bc.setTitle("产品销售报告");
        // 设置x轴的标签
        xAxis.setLabel("产品");
        // 设置y轴的标签
        yAxis.setLabel("销售额");

        // 创建一个XYChart.Series对象，用于存储柱状图的数据
        XYChart.Series series1 = new XYChart.Series();
        // 设置数据系列的名称为"2003"
        series1.setName("2003");
        // 向数据系列中添加数据点
        series1.getData().add(new XYChart.Data(itemA, 25601.34));
        series1.getData().add(new XYChart.Data(itemB, 20148.82));
        series1.getData().add(new XYChart.Data(itemC, 10000));
        series1.getData().add(new XYChart.Data(itemD, 35407.15));
        series1.getData().add(new XYChart.Data(itemE, 12000));

        // 创建另一个数据系列，名称为"2004"
        XYChart.Series series2 = new XYChart.Series();
        series2.setName("2004");
        // 向数据系列中添加数据点
        series2.getData().add(new XYChart.Data(itemA, 57401.85));
        series2.getData().add(new XYChart.Data(itemB, 41941.19));
        series2.getData().add(new XYChart.Data(itemC, 45263.37));
        series2.getData().add(new XYChart.Data(itemD, 117320.16));
        series2.getData().add(new XYChart.Data(itemE, 14845.27));

        // 创建一个场景对象，用于容纳柱状图
        Scene scene  = new Scene(bc,800,600);
        // 将两个数据系列添加到柱状图中
        bc.getData().addAll(series1, series2);
        // 设置窗口的场景
        stage.setScene(scene);
        // 显示窗口
        stage.show();
    }

    // 定义程序的入口方法
    public static void main(String[] args) {
        // 启动JavaFX应用程序
        launch(args);
    }
}

在这里插入图片描述 3. PieChart饼图

package cn.xiaokp7.ui;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.stage.Stage;

// 创建一个名为PieChartSample的类，继承自Application类
public class PieChartSample extends Application {
    @Override // 重写start方法，该方法是JavaFX应用程序的入口点
    public void start(Stage stage) {
        // 创建一个Scene对象，用于存放图形元素
        Scene scene = new Scene(new Group());
        // 设置窗口标题
        stage.setTitle("饼图示例");
        // 设置窗口宽度
        stage.setWidth(500);
        // 设置窗口高度
        stage.setHeight(500);

        // 创建一个可观察的列表，用于存储饼图的数据
        ObservableList<PieChart.Data> pieChartData =
                FXCollections.observableArrayList(
                        new PieChart.Data("Sun", 20),
                        new PieChart.Data("IBM", 12),
                        new PieChart.Data("HP", 25),
                        new PieChart.Data("Dell", 22),
                        new PieChart.Data("Apple", 30));
        // 创建一个饼图对象，并将数据添加到饼图中
        final PieChart chart = new PieChart(pieChartData);
        // 设置饼图标题
        chart.setTitle("电脑市场份额");

        // 将饼图添加到场景中
        ((Group) scene.getRoot()).getChildren().add(chart);
        // 设置场景到舞台
        stage.setScene(scene);
        // 显示舞台
        stage.show();
    }

    // 主方法，用于启动JavaFX应用程序
    public static void main(String[] args) {
        launch(args);
    }
}

在这里插入图片描述

十一、 2D图形

JavaFX 包含可以轻松在屏幕上绘制 2D 图形的功能。

直线Line
矩形Rectangle
椭圆Oval
多边形Polygon
路径Path
一组图形Group

十二、 3D图形

JavaFX 包含可以轻松在屏幕上绘制 3D 图形的功能。

立方体（Box）
球体（Sphere）
圆锥体（Cone）
圆柱体（Cylinder）
金字塔（Pyramid）
椭球体（Ellipsoid）
螺旋体（Helix）
弹簧（Spring）
箭头（Arrow）
多面体（Polygon）

十三、音频（`Audio`）

JavaFX 包含使在 JavaFX 应用程序中播放音频变得容易的功能。这通常在游戏或教育应用中很有用

音频剪辑（AudioClip）
音频缓冲区（AudioBuffer）
音频输入流（AudioInputStream）
音频输出流（AudioOutputStream）
音频格式转换器（AudioFormatConverter）
音频混音器（AudioMixer）
音频特效处理器（AudioEffect）
音频事件处理器（AudioEvent）

十四、视频（`Video`）

JavaFX 包含使在 JavaFX 应用程序中播放视频变得容易的功能。这通常在流媒体应用程序、游戏或教育应用程序中很有用。

视频剪辑（Media）
视频缓冲区（VideoBuffer）
视频输入流（MediaStream）
视频输出流（MediaStreamAudioOutput）
视频格式转换器（MediaCodec）
视频渲染器（MediaView）
视频播放器（MediaPlayer）
视频录制器（MediaRecorder）

十五、网页视图（`webview`）

JavaFX 包含一个WebView能够显示网页（HTML5、CSS 等）的组件。JavaFXWebView组件基于 WebKit - Chrome 和 Safari 使用的网页渲染引擎。
该WebView组件使得将桌面应用程序与 Web 应用程序混合成为可能。

WebView：用于在 JavaFX 应用程序中显示 HTML5 内容。WebView 提供了一个基于浏览器引擎的视图空间，可以加载和显示网页，支持 JavaScript、CSS 和 HTML5 等技术。
WebEngine：与 WebView 类似，WebEngine 也是一个基于浏览器引擎的视图空间，可以加载和显示网页。不同之处在于，WebEngine 是 JavaFX 8.0 之后引入的新的 API，它提供了更好的性能和更多的功能。
WebViewTextField：用于在 JavaFX 应用程序中显示文本框。WebViewTextField 提供了一个基于文本输入框的视图空间，可以在其中显示用户输入的文本，并支持基本的文本编辑功能。
WebEngineViewable：用于在 JavaFX 应用程序中显示可编辑的内容。WebEngineViewable 提供了一个基于可编辑文本框的视图空间，可以在其中显示用户输入的文本，并支持基本的文本编辑功能。
WebViewPage：用于在 JavaFX 应用程序中显示网页。WebViewPage 提供了一个基于浏览器引擎的视图空间，可以加载和显示网页，支持 JavaScript、CSS 和 HTML5 等技术。与 WebView 相比，WebViewPage 提供了更好的性能和更多的功能。
WebEnginePage：与 WebViewPage 类似，WebEnginePage 也是一个基于浏览器引擎的视图空间，可以加载和显示网页。不同之处在于，WebEnginePage 是 JavaFX 8.0 之后引入的新的 API，它提供了更好的性能和更多的功能。
WebViewPrintFormatter：用于在JavaFX应用程序中打印网页 WebViewPrintFormatter 提供了一个基于打印机输出的视图空间，可以将网页打印到打印机上。
WebEnginePrintFormatter：与 WebViewPrintFormatter 类似，WebEnginePrintFormatter 也是一个基于浏览器引擎的视图空间，可以加载和显示网页。不同之处在于，WebEnginePrintFormatter 是 JavaFX 8.0 之后引入的新的 API，它提供了更好的性能和更多的功能。