JavaFX入门

(Updated: )
,

创建项目

如果使用IntelliJ IDEA创建一个JavaFX项目，会默认创建 Main.java Controller.java sample.fxml ，这也是JavaFX一个明显的特性：可以使用fxml文件与css文件编辑界面

编辑界面

在 sample.fxml 中使用xml语言编辑界面，可使用 javafx.scene.layout 库中的所有元素，参考 Introduction to FXML | JavaFX 2.2 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?import javafx.scene.control.Button?>

<VBox fx:id="body"
        fx:controller="miniCAD.Controller"
        xmlns:fx="http://javafx.com/fxml">
    <MenuBar>
        <Menu fx:id="menuFile" text="File">
            <MenuItem fx:id="itemOpen" text="Open" onAction="#itemOpenClicked"/>
            <MenuItem fx:id="itemSave" text="Save" onAction="#itemSaveClicked"/>
        </Menu>
    </MenuBar>
    <HBox fx:id="toolBox">
        <FlowPane fx:id="shape" styleClass="tool">
            <Button fx:id="buttonLine" onAction="#buttonLineClicked"/>
            <Button fx:id="buttonRectangle" onAction="#buttonRectangleClicked"/>
        </FlowPane>
        <Separator orientation="VERTICAL"/>
        <FlowPane fx:id="size" styleClass="tool">
            <Button fx:id="buttonBigger" onAction="#buttonBiggerClicked"/>
            <Button fx:id="buttonSmaller" onAction="#buttonSmallerClicked"/>
        </FlowPane>
    </HBox>
</VBox>
1
<MenuItem fx:id="itemOpen" text="Open" onAction="#itemOpenClicked"/>

相当于Java程序中的

1
2
3
4
MenuItem itemOpen = new MenuItem("Open");
itemOpen.addActionListener(actionEvent -> {
  //...
});

补全代码

然后在 Controller.java 中补全设计界面时命名的元素和函数

1
2
3
4
5
@FXML
VBox body;
//...
public void buttonTextClick(ActionEvent actionEvent) { }
//...

使用CSS

1
2
3
4
5
<VBox fx:id="body"
      fx:controller="miniCAD.Controller"
      stylesheets="/miniCAD/miniCAD.css" <!-- this -->
      xmlns:fx="http://javafx.com/fxml">
</VBox>

对应的css文件中属性均以-fx-开头

1
2
3
4
5
6
7
8
9
10
11
12
#body {
    -fx-pref-width: 1000px;
    -fx-pref-height: 600px;
    -fx-spacing: 10px;
}
Button {
    -fx-font-size: 20px;
}
FlowPane {
    -fx-hgap: 2px;
    -fx-vgap: 2px;
}

实例项目

mini-cad

参考资料

JavaFX - Help | IntelliJ IDEA