JavaFX学习笔记

最新推荐文章于 2025-03-20 20:38:56 发布
最新推荐文章于 2025-03-20 20:38:56 发布
阅读量2.3k 收藏 3
点赞数 1
分类专栏： javaF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/oQianQu/article/details/40662181
版权
这篇博客详细记录了JavaFX的学习过程，从HelloWorld开始，介绍如何创建JavaFX表单，利用CSS进行界面美化，以及如何运用FXML构建用户界面。通过这些步骤，读者可以深入理解JavaFX的开发基础。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HelloWorld创世纪

完成好JavaFX的环境搭建之后，我们开始正式地编写JavaFX的代码。在Eclipse中File->New Project->JavaFx->JavaFX Application，完成项目创建。
我们看到的是这样的默认代码 
   
   
  1. /*Main.java*/
  3. package application;
  4. 	
  5. import javafx.application.Application;
  6. import javafx.stage.Stage;
  7. import javafx.scene.Scene;
  8. import javafx.scene.layout.BorderPane;
  11. public class Main extends Application {
  12. 	@Override
  13. 	public void start(Stage primaryStage) {
  14. 		try {
  15. 			BorderPane root = new BorderPane();
  16. 			Scene scene = new Scene(root,400,400);
  17. 			scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
  18. 			primaryStage.setScene(scene);
  19. 			primaryStage.show();
  20. 		} catch(Exception e) {
  21. 			e.printStackTrace();
  22. 		}
  23. 	}
  24. 	
  25. 	public static void main(String[] args) {
  26. 		launch(args);
  27. 	}
  28. }
来看看代码结构中几个关键的点：
Ⅰ. JavaFX应用中的核心类Main是继承自 javafx.application.Application的子类，Application的一个实例化对象在整个生命周期会经历以下几个过程：
  1. 构建一个指定Application类的实例化对象。
  2. 调用init()方法进行初始化工作
  3. 调用start(javafx.stage.Stage)方法
  4. 等待Application结束，即以下两种情况之一：1)调用Platform.exit()方法时 2)所有的window都被关闭，并且Platform的implicitExit参数为true。
  5. 调用stop()方法
Ⅱ.  JavaFX Application通过stage和scene来定义UI容器，其中Stage是最顶层的JavaFX容器，Scene是所有部件的容器。下图描述了一个简单的样例：

Ⅲ.  在JavaFX中，scene的部件被表示成拥有层次关系的节点。在上面例子中，根节点是StackPane root对象，Button btn则是root的子节点。
Ⅳ.   main()方法在JavaFX Application中不是必须的（在一些集成了JavaFX启动器的IDE中，会自动调用start()方法来启动JavaFX Application），但是考虑到某些情况下JavaFX启动器可能未被集成到IDE当中，或者有的时候我们是通过集成了JavaFX代码的Swing Application来启动JavaFX，所以把main()方法写出来还是很有必要的！

创建JavaFX表单

比较简单，直接上代码吧 
  
  
  1. package application;
  3. import javafx.application.Application;
  4. import javafx.event.ActionEvent;
  5. import javafx.event.EventHandler;
  6. import javafx.geometry.Insets;
  7. import javafx.geometry.Pos;
  8. import javafx.scene.Scene;
  9. import javafx.scene.control.Button;
  10. import javafx.scene.control.Label;
  11. import javafx.scene.control.PasswordField;
  12. import javafx.scene.control.TextField;
  13. import javafx.scene.layout.GridPane;
  14. import javafx.scene.layout.HBox;
  15. import javafx.scene.paint.Color;
  16. import javafx.scene.text.Font;
  17. import javafx.scene.text.FontWeight;
  18. import javafx.scene.text.Text;
  19. import javafx.stage.Stage;
  22. public class Login extends Application {
  23. 	@Override
  24. 	public void start(Stage primaryStage) {
  25. 		primaryStage.setTitle("My Form");
  26. 		GridPane grid = new GridPane();	//创建一个GridPane来布局
  27. 		grid.setAlignment(Pos.CENTER);	//GridPane在父容器中的位置
  28. 		
  29. 		//以下代码设置grid的样式
  30. 		grid.setHgap(10);
  31. 		grid.setVgap(10);
  32. 		grid.setPadding(new Insets(25, 25, 25, 25));
  33. 		Scene scene = new Scene(grid, 300, 275);	//创建scene并把grid设为root节点
  34. 		primaryStage.setScene(scene);						//把scene渲染到primaryStage。
  35. 		/**
  36. 		 * 注意一个Stage同一时间只能有一个scene，一个scene也只能被渲染到一个Stage。
  37. 		 * 如果同一个scene被渲染到两个Stage，则在新的Stage接受此scene之前会把旧Stage中对scene的引用销毁。
  38. 		 * 可以在任何时候对Stage中的scene进行调整，但是只能发生在JavaFX Application Thread中，
  39. 		 * 如果不是，则会扔出一个IllegalStateException
  40. 		 */
  41. 		
  42. 		Text scenetitle = new Text("Welcome");		//新建一个Text
  43. 		scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
  44. 		grid.add(scenetitle, 0, 0, 2, 1);						//在grid中添加scenetitle作为标题
  45. 																			//后四个参数分别表示行列的起始Index和跨度
  47. 		
  48. 		//以下代码原理相同
  49. 		Label userName = new Label("User Name:");
  50. 		grid.add(userName, 0, 1);
  51. 		TextField userTextField = new TextField();
  52. 		grid.add(userTextField, 1, 1);
  53. 		Label pw = new Label("Password:");
  54. 		grid.add(pw, 0, 2);
  55. 		PasswordField pwBox = new PasswordField();
  56. 		grid.add(pwBox, 1, 2);
  57. 		Button btn = new Button("Sign in");
  58. 		HBox hbBtn = new HBox(10);
  59. 		hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
  60. 		hbBtn.getChildren().add(btn);
  61. 		grid.add(hbBtn, 1, 4);
  62. 		final Text actiontarget = new Text();
  63. 		actiontarget.setText("Error");
  64. 		actiontarget.setVisible(false);
  65. 		actiontarget.setFill(Color.GOLD);
  66. 		HBox acHBox = new HBox(10);
  67. 		acHBox.setAlignment(Pos.BASELINE_CENTER);
  68. 		acHBox.getChildren().add(actiontarget);
  69. 		grid.add(acHBox, 0, 6, 2, 1);
  70. 		btn.setOnAction(new EventHandler<ActionEvent>() {
  71. 			@Override
  72. 			public void handle(ActionEvent arg0) {
  73. 				actiontarget.setText(pwBox.getText());
  74. 				actiontarget.setVisible(true);
  75. 			}
  76. 		});
  78. 		//grid.setGridLinesVisible(true);		//可以把GridLinesVisible设为true显示grid的行列线
  79. 		primaryStage.show();
  80. 	}
  82. 	public static void main(String[] args) {
  83. 		launch(args);
  84. 	}
  85. }
代码运行效果：


使用CSS装饰

把业务逻辑跟样式代码分开，可以利用CSS。这里我们仍然使用上述Form中的代码来做修改
正式开始之前先把把原本.java代码中关于样式的语句删除 
   
   
  1. scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));    //删除
  2. //...
  3. actiontarget.setFill(Color.GOLD);    //删除
OK，首先新建一个.css文件并在.java中关联它 
   
   
  1. scene.getStylesheets().add(Login.class.getResource("Login.css").toExternalForm());
然后为需要使用CSS修饰的部件添加ID 
   
   
  1. scenetitle.setId("welcome-text");
  2. actiontarget.setId("actiontarget");
接着开始编辑.css文件 
    
    
  1. @CHARSET "UTF-8";
  3. .root {
  4. 	-fx-background-image: url("background.jpg");/*设置背景图片*/
  5. }
  7. .label {	/*利用类选择器为label类添加样式*/
  8. 	-fx-font-size: 14px;
  9. 	-fx-font-weight: bold;
  10. 	-fx-text-fill: #333333;
  11. 	-fx-effect: dropshadow(gaussian, rgba(255, 255, 255, 0.5), 0, 0, 0, 1);
  12. }
  14. #welcome-text {		/*利用id选择器为id="welcome-text"的部件添加样式*/
  15. 	-fx-font-size: 30px;
  16. 	-fx-font-family: "Arial Black";
  17. 	-fx-fill: #818181;
  18. 	-fx-effect: innershadow(three-pass-box, rgba(0, 0, 0, 0.7), 6, 0.0, 0, 2);
  19. }
  21. #actiontarget {		/*利用id选择器为id="actiongtarget"的部件添加样式*/
  22. 	-fx-fill: FIREBRICK;
  23. 	-fx-font-weight: bold;
  24. 	-fx-effect: dropshadow(gaussian, rgba(255, 255, 255, 0.5), 0, 0, 0, 1);
  25. }
运行效果如下：


使用FXML来创建UI

JavaFX还支持使用一种FXML的语言来构建UI，以达到把UI和业务逻辑分开的目的。
下面来创建这个FXML项目。
首先，我们的项目包含以下三个文件：

作为整个Application的入口，FXMLExample.java中需载入fxml资源。
所以我们在代码中是通过javafx.fxml.FXMLLoader类来创建Parent节点的。 
   
   
  1. 	@Override
  2. 	public void start(Stage primaryStage) throws Exception {
  3. 		Parent root = FXMLLoader.load(getClass().getResource("example.fxml")); //载入example.fxml文件
  4. 		
  5. 		Scene scene = new Scene(root,300,375);
  6. 		
  7. 		primaryStage.setTitle("Hello FXML");
  8. 		primaryStage.setScene(scene);
  9. 		primaryStage.show();
  10. 	}
简单完成这一步之后就可以对example.fxml进行编辑了，完整代码如下： 
   
   
  1. <?xml version="1.0" encoding="UTF-8"?>
  3. <?import java.net.*?>
  4. <?import javafx.geometry.*?>
  5. <?import javafx.scene.control.*?>
  6. <?import javafx.scene.layout.*?>
  7. <?import javafx.scene.text.*?>
  9. <GridPane fx:controller="javaFX_FXML.FXMLExampleController"
  10. 	xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
  12. 	<padding>
  13. 		<Insets top="25" right="25" bottom="10" left="25" />
  14. 	</padding>
  16. 	<!-- <gridLinesVisible>true</gridLinesVisible> -->
  18. 	<Text text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0"
  19. 		GridPane.columnSpan="2" />
  21. 	<Label text="User Name:" GridPane.columnIndex="0"
  22. 		GridPane.rowIndex="1" />
  24. 	<TextField GridPane.columnIndex="1" GridPane.rowIndex="1" />
  26. 	<Label text="Password:" GridPane.columnIndex="0"
  27. 		GridPane.rowIndex="2" />
  29. 	<PasswordField fx:id="passwordField"
  30. 		GridPane.columnIndex="1" GridPane.rowIndex="2" />
  32. 	<HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1"
  33. 		GridPane.rowIndex="4">
  34. 		<Button text="Sign In" onAction="#handleSubmitButtonAction" />
  35. 	</HBox>
  37. 	<Text fx:id="actiontarget" GridPane.columnIndex="0"
  38. 		GridPane.columnSpan="2" GridPane.halignment="RIGHT" GridPane.rowIndex="6" />
  39. </GridPane>
来看看整个fxml的结构，首行是对版本及字符编码的定义。
然后就把需要用到的包import进来(由于默认Eclipse环境不会自动导入需要的包，暂时还不知道有没有比较方便的途径可以导入需要用到的包)。接下来是一个<GridPane> </GridPane>布局 组件，布局内部放入了需要用到的子组件，参数都是见名知意的。就不再添加注释了。
完成了在fxml中对UI的定义之后就要编辑Controller了，在FXMLExampleController.java中： 
    
    
  1. package javaFX_FXML;
  3. import javafx.event.ActionEvent;
  4. import javafx.fxml.FXML;
  5. import javafx.scene.text.Text;
  7. public class FXMLExampleController {
  8.     @FXML private Text actiontarget;
  9.     
  10.     @FXML protected void handleSubmitButtonAction(ActionEvent event) {
  11.         actiontarget.setText("Sign in button pressed");
  12.     }
  13. }
@FXML注释用来标记非public的FXML成员字段以及方法。其中字段名跟fx:id属性相关，方法则跟onAction属性相关。
当然，也可以在FXML中引用CSS。通过以下方法： 
    
    
  1. <stylesheets>
  2.     <URL value="@Login.css" />
  3.   </stylesheets>
  5. </GridPane>
然后在需要引用CSS类的组件中添加styleClass属性，例如在GridPane中添加css的root类。 
    
    
  1. <GridPane fx:controller="fxmlexample.FXMLExampleController" 
  2.     xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" 
  3.     styleClass="root">
也可以利用CSS的ID选择器来使用指定ID的样式： 
    
    
  1. <Text id="welcome-text" text="Welcome" 
  2.         GridPane.columnIndex="0" GridPane.rowIndex="0" 
  3.         GridPane.columnSpan="2"/>
更多相关文档： Introduction to FXML



Java——fx
m0_60329103的博客
05-19 830
目标 ： JavaFX 基本介绍 基本布局面板使用 登录界面制作 JavaFX基本介绍 JavaFX是用于构建富互联网应用程序的Java库。 使用此库编写的应用程序可以跨多个平台一致运行。 使用JavaFX开发的应用程序可以在各种设备上运行，如台式计算机，手机，电视，平板电脑等。 要使用Java编程语言开发GUI应用程序，程序员依赖于诸如高级窗口工具包(AWT)和Swings之类的库。 在JavaFX出现之后，这些Java程序开发就可以有效地利用丰富的类库来开发GUI应用程序。
fxml设置背景_JavaFX学习笔记（最全，最详细）
weixin_39564386的博客
12-31 2053
文章目录Java: JavaFX桌面GUI开发1、基本概念2、最小框架代码3、控件布局4，初步认识stage窗口5，stage窗口模式(StageStyle)6，screen类的使用7，Group容器的使用8，Button按钮以及简单介绍设置背景颜色和外边框等问题9，JavaFX布局(pane)(1). Pane(2). BorderPane(3). HBox(4). VBox(5) FlowPa...
JavaFX
Struts 2 的专栏
03-12 1431
1. JavaFX Programming Language   学习使用JavaFX Script 编程语言  研究语法和语义  学习它面向对象的特性  编写自己的脚本  深入理解所有的核心语言就结构 2. Building GUI with JavaFX    使用JavaFX构建GUIs  使用UI对象  创建视图对象，使用数据绑定  摆放
javaFX的使用
最新发布
m0_66349413的博客
03-20 926
主要分为四个区域元素对象选择区（元素库）、预览展示区、控件属性区域、层次结构区。
JavaFx学习笔记
zhang_ly520的专栏
02-19 131
1.脚本变量是使用 var 或 def 关键字声明的。二者之间的区别在于：在脚本的整个生命周期内都可以为 var 变量赋予新值，而 def 变量在被首次赋予新值后将保持不变。我们已经为 numOne 和 numTwo 赋予了特定的值，但 result 却未初始化，因为此变量将用来存放计算结果。 def 相当于 final var. 2.使用后跟序列名称的 sizeof 运算符来确定序列的大小 3....
JAVAFX学习笔记
m0_51539361的博客
11-19 730
首先，javafx有点像前端，我们可以把他理解为这样的结构 分别为 窗口：就是显示的窗口 场景：相当于页面，整个可操作的大小，估计可以切换不同场景 节点：就是内部各个模块，自己一个个设置 代码如下 package cc.caiguang.hello; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control
javafx 学习笔记三（表单与controller的互动，存储到配置文件）
smallboh的专栏
07-30 458
FXML <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <AnchorPane xmlns:fx="http://javafx.com/fxml" xmlns="http://javafx.com/javafx" fx:controller="palms
JavaFX学习笔记六：使用事件过滤器(Event Filter)（干货）
chuzhaozui1642的博客
09-29 2022
使用Event Filter来处理由键盘动作、鼠标动作、滚动动作以及其它用户与程序之间的交互动作所产生的事件。 Event Filter使你可以在事件处理过程中的事件捕获阶段来处理事件。一个节点可以有一个或多个Event Filter来处理一个事件。一个Event Filter可以被多个节点...
JavaFX+Jfoenix 学习笔记（一）--环境搭建及多款Hello World演示源码
07-18
在“JavaFX+Jfoenix 学习笔记（一）--环境搭建及多款Hello World演示源码”中，我们将主要探讨以下几个知识点： 1. **JavaFX环境搭建**： - 安装Java Development Kit (JDK)：JavaFX不再包含在标准JDK中，因此需要...
JavaFX+Jfoenix 学习笔记（八）--事件、监听、属性绑定源码
07-21
在“JavaFX+Jfoenix 学习笔记（八）--事件、监听、属性绑定源码”中，我们将深入探讨JavaFX中的事件处理、监听器和属性绑定。 1. **事件处理**： 在JavaFX中，事件是用户与应用程序交互时发生的动作，如点击按钮、...
JavaFX学习资料总结
08-03
JavaFX学习资料总结
JavaFX学习笔记（一）
子龙的博客
05-27 287
一、简介 √\color{#FF7D00}{√}√  用 Java 语言开发桌面应用，官网 √\color{#FF7D00}{√}√  JDK8 中自带 JavaFX 开发包，JDK11 需要手动导入 二、创建一个基础应用 GUI public class LoginWindow extends Application { public void start(Stage primaryStage) throws IOException { Parent parent = FXM
JAVAFX学习笔记一
qq_41818008的博客
07-17 350
如何在eclipse里面使用JavaFX 介绍：JavaFX拥有许多功能强大的包，但是在eclipse安装完毕的时候并没有配置，所以工欲善其事必先利其器。 在eclipse中导入JavaFX BuildPath（构建路径）→Configure Build Path（配置构建路径）→Libraries（库）→展开使用的库找到Access rules双击打开选择添加 →分辨率设置为可访问 规则...
JavaFX学习笔记——重要学习资源
weixin_40861847的博客
11-18 673
一、《Java程序设计第十版》 虽然这本书介绍得十分浅显，不如官方文档介绍的功能全面，也不如API文档值得进一步推敲 但是其他学习来源有下面几种弊病    1.官方介绍文档：用法“高端”，一个组件的示例程序中往往杂糅了过多其他非必要的API调用。使得示例虽然看上去效果很好，但是对初学者来讲代码生涩难懂，还有大量翻译别扭的专业词汇，容易让人望而生畏。    2.API文档：对于JavaFX中...
JavaFX学习笔记——重要理念的建立与辨析（九）
weixin_40861847的博客
11-18 259
事件向下派发再向上冒泡   默认条件下，一个事件触发后自stage向最底层的Node逐渐派发，再从最底层冒泡回到stage。 中间的对象使用addEventFilter进行派发过程中事件的监听,使用addEventHandler进行冒泡过程中的事件监听   因此倘若有如下代码      Circle circle = new Circle(100,100,50);         P...
JavaFX学习笔记——用法技巧总结（三）
weixin_40861847的博客
11-19 370
如何创建响应式组件 问题      在不同的分辨率下，界面的大小始终固定，导致在小屏幕下的文本图片大小适中，而在大屏幕下显得过小   解决方法      使用dimension类 Dimension screensize = Toolkit.getDefaultToolkit().getScreenSize();    //获得当前屏幕的宽度（像素点）    int width = (...
JavaFX学习笔记——用法技巧总结（一）
weixin_40861847的博客
11-19 988
如何获得子节点 问题      多个Node装入了一个Pane或者Group中，但是有时候又需要对一个Pane或Group内的Node分别做出不同的操作，而书上以及教程中只告诉我们添加子节点的步骤即                                                pane.getChildren().add(node)；   解决方法      很简单,...
JavaFX学习笔记（02）（DSL构建）
Glavo的博客
10-05 570
开始构造DSL
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值