JavaFX\FXML\CSS使用

2022-11-30 10:55:29

博主纯业余，不是开发人员。

0.MVC框架

Model View Controller
经典MVC模式中，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。(-百度百科：MVC框架)

引用b站视频的评论 @东篱雪清回复 @电脑玩家Rain ：链接

8、HTML------------->FXML :结构 (美术人员)

9、CSS--------------->CSS: 外观权 (美术人员)

10、JavaScript-------->Controller.java : 行为 (开发人员）

1.选择器

JavaFX CSS文件里的选择器：
1.以#为前缀的ID选择器：
#id{ …/* 按行写的带-fx前缀的css代码格式：属性：值 */ …}
根据ID选择设置过ID的组件。
2.以.为前缀的类选择器：
.className{ …/* 按行写的带-fx前缀的css代码格式：属性：值*/ … }
同时改变一类组件。
3.给组件添加响应事件时的样式：（伪类选择器）
selector : pseudo-class {…/* 按行写的带-fx前缀的css代码格式：属性：值 */ …}
参考：
JavaFX——CSS选择器 https://blog.csdn.net/yye894817571/article/details/79416036

2.在CSS文件中指定控制器fx:controller

在CSS文件中在根结点添加指定控制器fxmlController.java语句：
fx:controller=“包名.fxmlController”
例如：

<AnchorPane fx:controller="fxControl.fxmlController" ... >

3.加载FXML文件

在Main.java文件中的start方法或stop方法中添加加载FXML文件语句：
需使用FXMLLoader对象：
FXMLLoader fxLoader = new FXMLLoader();
例如：

FXMLLoader fxLoader = new FXMLLoader();
URL url = fxLoader.getClass().getResource("fileURL");
fxLoader.setLocation(url);
AnchorPane root = (AnchorPane) FXMLLoader.load();

或等价写成：

AnchorPane root = FXMLLoader.load(getClass().getResource("fileURL"));

load()方法原型：（至少有URL参数）

public static <T> T load(URL location,
                         ResourceBundle resources,
                         BuilderFactory builderFactory)
                  throws IOException

4.引入CSS文件

在Main.java文件中的start方法或stop方法中引入CSS文件语句：
使用Scene类对象加载：
例如：

Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("/ClientTools/login_UI.css").toExternalForm());

5.关于带-fx前缀的CSS语句可以写在哪

1.单独的.css文件（写完后.需要把css文件引入java文件）
遵循CSS语法，自行搜索或参考JavaFX CSS官方文档。
2.可以直接写在java文件里的javafx组件调用的setStyle()方法里，以引号包裹。
例如：

button.setStyle("-fx-background-color: black;" +
                "-fx-text-fill:Snow;");

3.写在FXML文件里的组件的<style></style>标签里。
例如：

<AnchorPane ...>
	<Button ...>
		<style>
			-fx-background-color: black;
			-fx-text-fill:Snow;
		</style>
		...
	</Button>
	...
</AnchorPane>

参考JavaFX CSS官方文档：JavaFX CSS Reference Guide：
https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
参考Bilibili视频：JavaFX视频教程第119课，CSS的简单使用
https://www.bilibili.com/video/BV1pb411s7cd

6.SceneBuilder可视化图形编辑工具

SceneBuilder可视化图形编辑工具：
下载地址：选择对应版本下载：
（1）gluonhq.com下载：
https://gluonhq.com/products/scene-builder/
（2）www.oracle.com下载：
https://www.oracle.com/java/technologies/javafxscenebuilder-1x-archive-downloads.html
在开发工具导入：
(1)Eclipse参考：【JavaFx教程】第一部分：Scene Builder
(2)IDEA参考：IDEA中使用scene builder

7.其它

fxmlController.java中的@FXML注释标签：
简单地说，@FXML标签和FXML文件内容对应。实际上对于public 即便不加此标签也能正确执行，但private 必须用到此标签。
而遵循规范的写法应该加上@FXML标签，以便在加载时得以执行。

其他参考：
JavaFX的API文档：（当前最新是15,修改路径中的数字15可以更换版本）
https://openjfx.cn/javadoc/15/

FXML + CSS 开发登陆界面 https://blog.csdn.net/LiHaoYang11/article/details/71106755

JavaFX入门（五）：使用CSS样式美化你的UI控件 https://blog.csdn.net/theonegis/article/details/50189443

JavaFX中引用CSS文件出错的解决方法 https://blog.csdn.net/weixin_43898956/article/details/102912443?utm_medium=distribute.pc_relevant.none-task-blog-utm_term-10&spm=1001.2101.3001.4242

JavaFX - 不多数不啰嗦，开始肯定要来个HelloWorld https://www.cnblogs.com/oscar1987121/p/9019644.html

JavaFX之FXController详解 https://blog.csdn.net/wingfourever/article/details/41349855

码农公寓