JavaFX\FXML\CSS使用

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

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

上一篇:关联 JavaFX 和 FXML 和 CSS 文件介绍


下一篇:温度转换小程序--JavaFX