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

通过前面小节的学习，已经了解到使用JAVAFX工具可以实现图形用户界面开发，接下来，就通过一个用户登录的案例来演示JavaFX的基本使用。
JavaFX有什么显著特征？
（1）创建JavaFX项目。打开Eclipse，并在Eclipse中依次选择“File”->“New”->“Others..”->“JavaFX Project”选项，创建一个名称为“javaFX”的项目，项目创建成功后，如图1所示。

文章插图
图1 JavaFX项目默认结构
从图1可以看出，创建成功的JavaFX项目默认在Application包下有两个文件：Main.java（程序的入口）和application.css（图形用户界面样式文件）。其中，Main.java文件中使用JavaFX工具初始化了一个图形界面，直接运行该文件，会得到一个空白窗口。
（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工具中用来表示整个图形工具界面窗口的类，在该类中需要加入一个Scene（场景）来进行填充，而所有的组件、元素都是构建在Scene中的。另外，在JavaFX 8中支持代码与布局和样式分离，所以在文件中通过FXMLLoader的load()方法引入了一个外联的fxml_example.fxml文件，在此fxml文件中就可以专心编写图形界面布局和组件相关功能了。
（3）创建fxml_example.fxml文件。在Main.java文件同级目录下依次选择“File”→“New”→“Others..”→“New FXML Document”选项，创建一个名称为“fxml_example”的fxml格式文件，如文件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文档类似。其中第1行代码用来引入fxml文件约束；第3~7行代码用于引入JavaFX工具相关类；第9~29行代码使用<GridPane>标签创建了一个网格式的面板组件，然后通过各种子标签和属性向该面板组件中进行填充。另外在<GridPane>标签中使用fx:controller="
application.FXMLExampleController"引入了application包下的FXMLExampleController事件控制类，并且在第23行中，使用onAction="#handleSubmitButtonAction"注册了FXMLExampleController类中的监听器方法handleSubmitButtonAction() 。