java界面开发工具 java图形界面代码生成工具
通过上一节的学习，我们了解到使用JavaFX工具可以实现图形用户界面开发。接下来，我们将通过一个用户登录的案例来演示JavaFX的基本使用。JavaFX的显著特点是什么？（1）创建JavaFX项
通过上一节的学习，我们了解到使用JavaFX工具可以实现图形用户界面开发。接下来，我们将通过一个用户登录的案例来演示JavaFX的基本使用。
JavaFX的显著特点是什么？
（1）创建JavaFX项目。打开Eclipse，并在Eclipse中依次选择“File”->“New”->“Others..”->“JavaFX Project”选项，创建一个名称为“javaFX”的项目，项目创建成功后，如图1所示。
(1)创建一个JavaFX项目。打开Eclipse，在Eclipse中选择“文件”->“新建”->；“其他人..”->“javaFX项目”选项创建一个名为“JavaFX”的项目。项目成功创建后，如图1所示。
图1 Java FX项目的默认结构
从图1中可以看出，一个成功的JavaFX项目在应用包下默认有两个文件:Main.java(程序入口)和application.css(图形用户界面样式文件)。其中，图形界面是用JavaFX工具在Main.java文件中初始化的。如果直接运行文件，会得到空白窗。
(2)编辑Main.java文档。在自动生成的Main.java文件中编写JavaFX项目的主程序代码，如文件2所示。
1份Main.java文件
import javafx.application.*; import javafx.fxml.*; import javafx.stage.*; import javafx.scene.*; public class Main extends Application { public void start(Stage stage) throws Exception { // 使用FXMLLoader加载器，加载名为“fxml_example.fxml”的fxml文件 Parent root = FXMLLoader.load( getClass().getResource("fxml_example.fxml")); // 创建一个场景 Scene scene = new Scene(root, 300, 275); // 为图形界面窗口设置标题 stage.setTitle("FXML Welcome"); // 为图形界面窗口设置场景 stage.setScene(scene); // 将图形界面窗口设置为可见 stage.show(); } public static void main(String[] args) { // 通过Application抽象类的launch()方法启动程序 launch(args); } }
在文件1中，Main类继承了Application抽象类，并重写了start()方法。在此方法中，Stage是用于在JavaFX tools中表示整个图形工具界面窗口的类。这个类需要添加一个场景(Scene)来填充，所有组件和元素都构建在场景中。另外，JavaFX 8支持代码与布局和样式的分离，所以通过FXMLLoader的load()方法在文件中引入了一个外部的fxml_example.fxml文件，在这个文件中你可以专心的编写图形界面的布局和组件的相关功能。
(3)创建fxml_example.fxml文件。选择文件→新建→其他..→在Main.java文件的同级目录下新建fxml文档，创建一个fxml格式文件，命名为fxml_example，如文件2所示。
文件2 fxml_example.fxml
<?xml version="1.0" encoding="UTF-8"?> <!-- 引入JavaFX工具相关类 --> <?import java.net.*?> <?import javafx.geometry.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <?import javafx.scene.text.*?> <!-- 创建一个GridPane网格式面板组件 --> <GridPane fx:controller="application.FXMLExampleController" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"> <!-- 通过相关标签创建一个模拟登录的“用户名”和“密码”的组件 --> <Text text="Welcome" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2" /> <Label text="用户名:" GridPane.columnIndex="0" GridPane.rowIndex="1" /> <TextField GridPane.columnIndex="1" GridPane.rowIndex="1" /> <Label text="密 码:" GridPane.columnIndex="0" GridPane.rowIndex="2" /> <PasswordField GridPane.columnIndex="1" GridPane.rowIndex="2" /> <!-- 通过HBox嵌入一个可调控位置的盒子组件--> <HBox spacing="10" alignment="bottom_right" GridPane.columnIndex="1" GridPane.rowIndex="4"> <!-- 在HBox盒子中装入一个 Button登录按钮，同时注册监听器 --> <Button text="登 录:" onAction="#handleSubmitButtonAction" /> </HBox> <!-- 作为登录按钮的提示框 --> <Text fx:id="actiontarget" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.halignment="RIGHT" GridPane.rowIndex="6" /> </GridPane>
2、编码风格类似于XML文档。第一行代码用于引入fxml文件约束；第3~7行用于介绍JavaFX工具相关类；第9~29行使用<>；标签创建一个类似网格的面板组件，然后用各种子标签和属性填充它。此外，在
(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 & # 8221id名称也应该相同。
完成上述4步操作后，运行主程序Main类，结果如图2所示。
完成以上四个步骤后，运行主程序Main类，结果如图2所示。
图2 Java FX项目的初步效果图
(5)为fxml_example.fxml的图形布局文件引入外部CSS样式文件
●首先，在fxml_example.fxml文件的末尾
<!-- 加入名为application.css的样式表文件 --><stylesheets><URL value="@application.css" /></stylesheets>
●如果要为GridPane面板组件的根元素设置样式，需要在中设置样式
<GridPane fx:controller="fxmlexample.FXMLExampleController" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" **styleClass="root"**>
●同时，可以在组件的标签上添加一个id，并用该id为组件设置样式，如text = & # 8221欢迎”
<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样式文件。
当编写完并引入application.css样式文件成功后，再次启动主程序入口Main类中的main()方法，结果如图3所示。
成功编写并引入application.css样式文件后，再次启动主程序入口的main类中的Main()方法，结果如图3所示。
图3 Java FX项目的最终效果图
