JavaFX- 1.2 JavaFX起步:简单示例应用（四）使用FXML创建UI界面

使用FXML创建UI界面

本教程展示了使用JavaFX FXML的好处，JavaFX FXML是一种基于XML的语言，它提供了用于构建与代码的应用程序逻辑分离的用户界面的结构。

如果从头开始阅读本系列文档，那么已经了解了如何仅使用JavaFX创建登录应用程序。 在这里，将使用FXML创建相同的登录用户界面，将应用程序设计与应用程序逻辑分开，从而使代码更易于维护。

本小节教程同样创建一个跟上一个教程一样的登陆界面。

创建工程

1. 新建包JavaFX02_LoginFormWithCSSAndFXML
2. 新建类：LoginController、LoginForm，从JavaFX02_LoginFormWithCSS包复制login.css、background.jpg文件到JavaFX02_LoginFormWithCSSAndFXML包中。
3. 修改LoginForm.java 将LoginForm类添加继承Application并实现start方法，具体代码如下

    public class LoginForm extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("LoginForm.fxml"));
   
        Scene scene = new Scene(root, 300, 275);
   
        primaryStage.setTitle("FXML Welcome");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
   }
   

4. 在Main方法添加 launch(JavaFX02_LoginFormWithCSSAndFXML.LoginForm.class);并注释先前代码

至此我们就搭建好了工程代码的框架

编辑FXML文件添加布局与控件

将自动生成在fxml文件中的AnchorPane修改成GridPane并修改fx:controller属性定位到我们新建的LoginController。

<GridPane xmlns="http://javafx.com/javafx"
          xmlns:fx="http://javafx.com/fxml"
          fx:controller="JavaFX02_LoginFormWithCSSAndFXML.LoginController"
          prefHeight="400.0" prefWidth="600.0" alignment="CENTER" hgap="10" vgap="10">
<padding><Insets top="25" bottom="25" right="25" left="25"/></padding>
</GridPane>

对比我们在之前的教程中使用代码的方式创建GridPane以及设置其属性。其实就是住在语法和写法上的差异：

        gridPane.setAlignment(Pos.CENTER);
        gridPane.setHgap(10);
        gridPane.setVgap(10);
        gridPane.setPadding(new Insets(25,25,25,25));

添加密码框和文本

    <Text text="Welcome"
          GridPane.columnIndex="0" GridPane.rowIndex="0"
          GridPane.columnSpan="2"/>
    <Label text="User Name:"
           GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField
            GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <Label text="Password:"
           GridPane.columnIndex="0" GridPane.rowIndex="2"/>
    <PasswordField fx:id="passwordField"
                   GridPane.columnIndex="1" GridPane.rowIndex="2"/>

利用对应的标签进行创建控件并设置其属性，而且观察发现FXML设置的属性基本就是代码编写的时候的方法参数。我们再次对比之前用代码创建的过程：

        Text sceneTitle = new Text("Welcome");
        sceneTitle.setId("welcome");
        gridPane.add(sceneTitle,0,0,2,1);
        Label userName = new Label("User Name:");
        gridPane.add(userName, 0, 1);

        TextField userTextField = new TextField();
        gridPane.add(userTextField, 1, 1);

        Label pw = new Label("Password:");
        gridPane.add(pw, 0, 2);

        PasswordField pwBox = new PasswordField();
        gridPane.add(pwBox, 1, 2);

添加按钮

按照同样的方式，我们添加一个按钮和一个显示消息的文本

<HBox spacing="10" alignment="bottom_right" 
        GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button text="Sign In"     
        onAction="#handleSubmitButtonAction"/>
</HBox>

<Text fx:id="text"
       GridPane.columnIndex="0" GridPane.columnSpan="2"
 GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>

在次我们关注到一个新的属性 onAction，该属性设置按钮的响应处理事件，我们可以将鼠标放置在handleSubmitButtonAction上并按键盘alt+enter根据提示在LoginController.java中新建对应处理方法，同时我们可以在fx:id后面按键盘alt+enter根据提示在LoginController.java生成对应属性:

public class LoginController {
    public Text text;
    public PasswordField passwordField;

    public void handleSubmitButtonAction(ActionEvent event) {
	 	text.setText("Sign in button pressed");	
    }
}

至此，我们可以尝试运行一下我们的程序：

使用CSS 美化界面

接下来我们将使用先前的css文件对界面进行美化。

为了在FXML中绑定一个CSS文件，我们需要在FXML文件中GridPane的结束标签前面添加stylesheets标签：

<stylesheets>
    <URL value="@login.css" />
 </stylesheets>

记得导包哦！！该标签与下面代码等价

        scene.getStylesheets().add(LoginFormWithCSS.class.getResource("login.css").toExternalForm());

接下来需要为两个不同样式的Text控件添加id

运行

大功告成， 我们现在可以运行得到跟上一教程一样的UI界面了