介绍
在使用JavaFX的过程中,除了通过代码定义用户界面,我们还可以通过FXML的形式。FXML是JavaFX创建的一种基于XML的用户界面标记语言。相比于Java代码,FXML由于结构层级明显,更加便于书写(然而xml格式很啰嗦),并且可以在程序运行过程中动态修改(在Maven JavaFX插件中并不能)并且更好的分离了界面和功能;但是它的缺点就是无法实现复杂的逻辑(如循环),并且载入速度相比Java代码较慢(微妙的慢一点点),以下就是一段JavaFX代码。
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">
<center>
<Button text="Hello" />
</center>
</BorderPane>
其中第一行是xml声明,不多介绍。第三到四行是import标签,它的作用与Java的import是一样的,在例子中我就导入了JavaFX的Button和BorderPane类。从第六行开始就是FXML的主体部分,用于描述各Node的属性和它们之间的层级关系。例子中的代码等同于如下的Java代码。
BorderPane root = new BorderPane();
Button helloBtn = new Button("Hello");
root.setCenter(helloBtn);
运行的结果如下图所示。
书写FMXL
如果我们想要用FXML写一个JavaFX的按钮(Button),我们只要写一个Button元素就可以了。
<Button />
如果想要给按钮加上文字,我们就需要调用Button类的setText函数。在fxml我们可以通过给元素加属性就可以实现。对于setText(),我们要给Button元素加上text属性。同理也可以加上一些别的东西。
<Button text="This is a button" prefWidth="200" prefHeight="100" />
需要注意的是,以属性格式书写的函数的参数只能为一些常见的类,如setText(String value)使用的String,和setPrefHeight(double value)的Double,或者枚举类,比如Button的setTextAlignment(TextAlignment value)。对于一些参数是复杂类的函数,我们需要使用嵌套的方式来书写。比如Button.setGraphic(Node value),在以下代码中我在按钮上添加了一个复选框,并且将文字对齐变为右对齐。
<Button text="This is a button" textAlignment="RIGHT">
<graphic>
<CheckBox />
</graphic>
</Button>
如果对象拥有getChildren()之类返回值为List的函数,也可以通过嵌套的方式在该对象下的<children>元素中添加其他对象。
<StackPane>
<children>
<Button text="This is button 1" />
<Button text="This is button 2" />
</children>
</StackPane>
有一些JavaFX对象拥有一种固定格式的静态函数,如StackPane类的StackPane.setAlignment(Node node, Pos value)以及StackPane.setMargin(Node node, Insets value)两个函数,它们也可以被放在元素的属性或者通过嵌套来调用。以下代码展示了如何使用这两个函数。
<StackPane>
<children>
<Button text="This is a button" StackPane.alignment="TOP_RIGHT">
<StackPane.margin>
<Insets top="10">
</StackPane.margin>
</Button>
</children>
</StackPane>
虽然是为了用户界面而设计,其实也不难看出,FXML本质其实就是一个JavaBean,所以也可以用来写JavaBean,但这太大材小用了,并不建议。
使用FXML
TODO