JavaFX工具怎样开发用户界面？( 二 ) _JavaFX

（4）创建并编辑
FXMLExampleController.java文件。在Main.java文件同级目录下创建一个名为FXMLExampleController的事件处理类，然后在该文件中编写事件处理方法，如文件3所示。
文件3
FXMLExampleController.java
import javafx.event.ActionEvent;import javafx.fxml.FXML;import javafx.scene.text.Text;public class FXMLExampleController {// 与fxml_example.fxml文件中的登录提示框fx:id一致@FXML private Text actiontarget;// 为fxml_example.fxml文件中的登录按钮编写事件处理@FXML protected void handleSubmitButtonAction(ActionEvent event) {actiontarget.setText("点击了登录按钮");}}文件3中，
FXMLExampleController.java类专门用于编写事件处理方法，其中使用@FXML注解用来表示actiontarget文本属性和handleSubmitButtonAction()方法可以被fxml格式文件访问，同时handleSubmitButtonAction()的方法名与文件2中第23行代码onAction="#handleSubmitButtonAction"中标记的名称需要相同，actiontarget属性名与文件2中第26行代码fx:id="actiontarget"的id名也要相同。
完成上述4步操作后，运行主程序Main类，结果如图2所示。

文章插图
【JavaFX工具怎样开发用户界面？】图2 JavaFX项目初步效果图
（5）为fxml_example.fxml图形布局文件引入外联的CSS样式文件。
● 先在fxml_example.fxml文件最后的</GridPane>标签之前引入名称为application.css的样式表文件，示例如下所示：

<!-- 加入名为application.css的样式表文件--><stylesheets><URL value=https://www.isolves.com/it/cxkf/yy/JAVA/2021-05-14/"@application.css" />

● 如果要为GridPane面板组件根元素设置样式，需要在<GridPane>标签中添加一个styleClass="root"的属性，示例如下所示：

<GridPane fx:controller="fxmlexample.FXMLExampleController"xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" **styleClass="root"**>

● 同时可以为某个组件所在标签添加一个id，为该id所在组件设置样式，比如为text="Welcome"的<Text>标签所在组件添加一个id，示例如下所示：
<Text **id="welcome-text"** text="Welcome"GridPane.columnIndex="0" GridPane.rowIndex="0"GridPane.columnSpan="2"/>（6）编辑application.css样式文件。打开application.css样式文件，为图8-37所示的JavaFX图形用户接口项目编写CSS样式，如文件4所示。
文件4 application.css

/* 为GridPane面板组件根元素添加背景图片 */.root {-fx-background-image: url("background.jpg");}/* 为label标签组件设置大小、颜色、展示效果 */.label {-fx-font-size: 12px;-fx-font-weight: bold;-fx-text-fill: #333333;-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );}/* 为id为welcome-text的组件设置大小、字体、颜色、展示效果 */#welcome-text {-fx-font-size: 32px;-fx-font-family: "Arial Black";-fx-fill: #818181;-fx-effect: innershadow( three-pass-box ,rgba(0,0,0,0.7),6, 0.0 , 0 , 2 );}/* 为id为actiontarget的组件设置大小、颜色、展示效果 */#actiontarget {-fx-fill: FIREBRICK;-fx-font-weight: bold;-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );}/* 为button标签组件设置大小、颜色、展示效果 */.button {-fx-text-fill: white;-fx-font-family: "Arial Narrow";-fx-font-weight: bold;-fx-background-color: linear-gradient(#61a2b1, #2A5058);-fx-effect: dropshadow( three-pass-box ,rgba(0,0,0,0.6),5, 0.0 , 0 , 1 );}/* 设置当鼠标移到button按钮时的大小、颜色、展示效果 */.button:hover {-fx-background-color: linear-gradient(#2A5058, #61a2b1);}

在文件4中，application.css文件专门用于封装文件样式，在上一步中为fxml_example.fxml图形布局文件引入了该外联的CSS样式文件，<GridPane>根组件的background.jpg背景图片位于该文件所在同级目录中。其中，对fxml_example.fxml文件中某个名称的标签进行样式设置时，可以使用点号+标签名（如.button）的形式进行设置；对某个id所对应的标签组件进行样式设置时，可以使用井号+id（如#welcome-text）的形式进行设置。
当编写完并引入application.css样式文件成功后，再次启动主程序入口Main类中的main()方法，结果如图3所示。