javaFX——基于FXML创建用户界面

时间：2021-12-06 14:29:10

        前面我们使用javaFX代码创建了一个用户界面，并用css装点了这么界面，现在在介绍一下在javaFX中另一种创建用户界面的形式——FXML。这种方式其实就是利用xml技术，搭建我们的用户界面，学过android的朋友可能会感到非常的亲切，因为和android的界面布局很像。采用这种方式是很有好处的，就是可以彻底的把应用程序和后台逻辑分离开来，方便明确的分工合作。好啦！废话不多，代码走起。

界面效果还是之前的登录界面，这里就不放上来了。只不过实现不一样罢了。

        首先：我们在eclipse中创建一个javaFX应用，File——>new——>other——>(如果你安装过javaFX插件，你会找到javaFX文件夹的)展开来看到javaFX project 点击创建即可。

eclipse会自动帮我们生成一些代码，src下会创建好一个application包，里面有一个Main.java 和 aplication.css文件。看过前面文章的朋友应该会知道这两个文件是干什么的。我们直接修改Main.java文件，删除start()方法里面的代码，此外在aplication包下，创建一个fxml文件。创建方法任然是右键——>other——>找到javaFX文件夹，可以看到里面有一个new  fxml document 点击它，创建即可，创建的时候命名为fxml_example，点击finish。

    下面现将我们创建好的fxml文件引入到代码中。在之前的start方法中加入如下代码：

<span style="font-size:14px;">@Override
    public void start(Stage stage) throws Exception {
       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();
    }</span>
这里一开始我们就通过FXML加载器将我们的fxml文件引入进来，这里表示通过这个fxml创建一个界面布局。然后将这个元素加入Scene场景中，下面的代码就是设置舞台的标题，设置舞台场景，让舞台显示出来。很简单没什么难度。现在我们主要关心fxml_example.fxml中的内容。

打开之前创建的fxml文件，删去里面自动生成的一些东西，不过xml声明不要也删了。之后再下面加上如下内容：

<span style="font-size:14px;"><?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?></span>
这里，这些东西其实就是java里面的导包。这些也可以再下面编写的时候通过alt+/快捷创建出来，再次由于是官网的例子还是先这么做下吧！等做完之后在自行体会。


创建一个GridPane Layout

<span style="font-size:14px;"><GridPane fx:controller="application.FXMLExampleController" 
    xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
<padding><Insets top="25" right="25" bottom="10" left="25"/></padding>

</GridPane></span>
在这个应用中，该GridPane作为一个root元素，它有两个关键属性：

fx:controller:当你想要处理一些事件控制的时候，这个属性是必须的。稍后你将会看到。

xmlns:fx:该属性指定了fx的命名空间，这也是必须的。

后面的三个属性，看过之前例子的朋友应该很容易就明白了。

alignment：是给该GridPane相对于父元素居中呈现。

hgap和vgap是设置该网格布局的水平行和垂直列的间距。这里是10个像素

<padding>标签是这只该网格的四周填充距离，这个和之前的代码其实是一样的形式。不做解释了


添加一些文本信息和Field

<span style="font-size:14px;">    <Text id="welcome-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"/></span>
将这些内容加入到</GridPane>标签之前，这些标签也很容易理解吧！是不是和android里面很像呢？这里简单说一下标签里面的GridPane.columnIndex...属性：这些属性是表示该文本标签或Field在该网格布局里面放置在第几行和第几列。其中在PasswordField标签中还有一个fx:id的属性，该属性是给该标签设置一个id好方便在代码里获取直接使用。

Welcome标体中的id是为了后面再css文件中使用#获取样式使用的。


添加一个按钮和一个文本，将下面代码放入上面代码之后

<span style="font-size:14px;"><HBox spacing="10" alignment="bottom_right" 
        GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button text="Sign In"     
        onAction="#handleSubmitButtonAction"/>
</HBox>

<Text fx:id="actiontarget"
       GridPane.columnIndex="0" GridPane.columnSpan="2"
 GridPane.halignment="RIGHT" GridPane.rowIndex="6"/></span>
这里也采用了HBox这也是一个布局，至此细心的朋友会发现，这些标签是不是和在代码中写的类一模一样呢？其实这些东西就是代码中我们写的那些东西。如果之前第一步你不导包的话，你会发现在那块，自动生成了好多东西，就是一个个的包名加类名，在fxml中其实就和在代码中思路都是一样。上面的Button标签中有一个onAction属性，该属性就是设置该按钮的触发事件用的，#handleSubmitButtonAction就是触发按钮事件的时候要执行的方法名。那么该方法在何处定义呢？别急继续往下看你就明白了。


添加按钮事件

还记得之前我们在一开始写GridPane的时候的第一个属性么fx:controller,它的值是application.FXMLExampleController，这个值是包名+类名的写法。现在我们就要去编写FXMLExampleController类了。该类用来处理一些这个界面的控制事件。在application包下创建一个类并命名为FXMLExampleController。该类的内容如下：

<span style="font-size:14px;">package fxmlexample;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;

public class FXMLExampleController {
    @FXML private Text actiontarget;

    @FXML protected void handleSubmitButtonAction(ActionEvent event) {
        actiontarget.setText("Sign in button pressed");
    }

}</span>
该类中有个属性，属性名必须要和fxml中定义的fx:id一直,并加上@FXML注解。这个注释标志着保护或私有类成员访问FXML.后面是一个方法该方法名要和fxml中定义的处理方法名一致。方法中就是简单的让提示文本显示一点信息。

这个类就是该界面的控制类。

至此，其实已经可以运行我们的程序了。出来的界面就和最开始的一致没有样式的。下面我们就来添加我们的样式。任然是在fxml中,把css样式引入进来。


加载CSS样式

我们打开application包下的application.css文件，在找到我们之前做过那个登陆表单的css文件，将里面的类容复制其中，保存。

然后在GridPane标签中加入如下子标签：

<span style="font-size:14px;"><stylesheets>
    <URL value="@application.css" />
  </stylesheets></span>
其中@符号表面当application.css和该fxml文件在同一目录下的时候，使用@获取该样式文件。

使用stylesheets标签引入样式文件。URL标签加载级联样式表。

现在，在运行一次程勋，漂亮的界面就出来了。

关于更多的fxml，请移步至该网站阅读相关文档：fxml-document

                                                                                                                                           To be continue ... ...






标签：

相关文章