Java图形界面入门（十一）——javafx简单运行

本站javafx相关代码点击这里下载，持续更新。

此系列之前的文章均使用swing或awt中的组件开发，接下来讲解使用javafx进行开发。

创建项目 （下文有IDEA使用maven构建项目的完整步骤）
点击链接进入中文官网，按照官网的步骤创建项目。我使用的是IDEA开发工具，通过maven构建项目。
注意官网的这句话：

Select the archetype artifactId, between javafx-archetype-fxml or javafx-archetype-simple, based on the use of FXML or not in your project.

两者创建的项目结构有些许差别，前者是界面和逻辑分离的，而且可以使用布局软件编写界面。在后面的文章中，如果使用到了fxml文件编写界面，就使用前者，否则使用后者，其实没什么区别，只是创建之后会默认引入fxml相关的包。注意：如果使用JDK9+一定不要删掉module-info.java。如果运行遇到问题，可以用低版本JDK，直接创建javafx项目即可（IDEA有创建javafx的选项）。

项目结构
javafx-archetype-fxml：

javafx-archetype-simple：
启动项目
效果如下：
javafx-archetype-fxml：

javafx-archetype-simple：

此外，介绍一下之后可能要用到的一些工具。
JavaFX Scene Builder
该软件可以用来编写界面，我们右键resource目录下的fxml文件，可以看见open in SceneBuilder选项，首次打开会让你选择前面下载的该工具的位置。

打开后即可看见界面效果，我们可以通过该软件很方便的编写界面布局。

创建项目完整步骤

鉴于很多人不会使用idea通过maven创建项目，特意加上完整创建步骤。使用IDEA的时候，可以直接创建JAVAFX项目，但是如果是使用JDK9+的时候需要单独添加依赖，因此初学建议使用低版本JDK。使用maven创建项目就可以避免手动引入依赖，这里有两种方式：一种是创建一个普通的maven项目，然后在pom文件中添加相关插件和依赖坐标。另一种是使用官方提供的模板进行创建，个人推荐后者，下面的步骤也就是这种。

具体步骤如下：

点击new->porject，选择maven，进入下面页面，勾选Create from archetype，然后在下方选择：org.javafx:javafx-maven-archetypes。

如果是第一次使用该方式创建javafx项目，需要点击右上角的Add Archetype，输入图中内容，点击OK之后才会有上图中的选项。
选择org.javafx:javafx-maven-archetypes之后点击next，进入下图界面。
输入项目名字等信息，点击next，最后来到下面界面：
修改archetypeArtifactId这个属性的值为javafx-archetype-fxml或javafx-archetype-simple，个人推荐设置为javafx-archetype-fxml，具体区别文章最开始已经说过。然后新增一个属性，名字叫javafx-version，值为15.0.1（当前javafx的最新版本，而不是jdk的版本，jdk只要是11就可以输入这个），修改完毕后如图：
点击Finish即可，然后会下载一个模板，然后根据模板生成项目。可能网络不行导致创建失败，删除重新创建即可。maven需要设置阿里的仓库。

登录界面示例
本文最后，打算上个登录界面的例子，可自行运行体会。所用到的知识点我后面的文章都有讲解，本文仅了解。

public class App extends Application {

    @Override
    public void start(Stage stage) {
        stage.setTitle("登录页面");
        GridPane grid = new GridPane();//网格布局
        grid.setAlignment(Pos.CENTER);//对齐方式
        grid.setHgap(10);//列之间水平间隙的宽度。
        grid.setVgap(10);//行之间水平间隙的宽度。
        grid.setPadding(new Insets(25, 25, 25, 25));//四个方向的内边距，就是文字内容到四个方向边框的距离

        Text scenetitle = new Text("Hi");
        scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));//设置字体，粗细大小
        //后面四个参数分别代表组件的位置放在网格中第几列，第几行开始，占几列，占几行的一个区域。
        grid.add(scenetitle, 0, 0, 2, 1);

        Label userName = new Label("用户名：");//显示文字信息的标签
        grid.add(userName, 0, 1);

        TextField userTextField = new TextField();//文本输入框
        grid.add(userTextField, 1, 1);

        Label pw = new Label("密码：");
        grid.add(pw, 0, 2);

        PasswordField pwBox = new PasswordField();//密码输入框
        grid.add(pwBox, 1, 2);

        Button btn = new Button("登录");//按钮
        HBox hbBtn = new HBox(10);//将内部的组件按水平方向依次排列，此处只有一个按钮；VBox表示从上往下排列
        hbBtn.setAlignment(Pos.BOTTOM_RIGHT);//对齐方向
        hbBtn.getChildren().add(btn);
        grid.add(hbBtn, 1, 4);

        final Text actiontarget = new Text();
        grid.add(actiontarget, 0, 6);
        GridPane.setColumnSpan(actiontarget, 2);//设置网格内组件默认跨几列
        GridPane.setHalignment(actiontarget, RIGHT);//设置网格内组件的水平对齐方式
        actiontarget.setId("actiontarget");

        btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent e) {
                actiontarget.setFill(Color.FIREBRICK);
                //按钮被点击
                actiontarget.setText("登录失败");
            }
        });
        Scene scene = new Scene(grid, 300, 275);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

我们可以使用css来修改登录界面的样式，具体的代码可以点击这里下载。

然后，再使用fxml文件的方式来进行界面设计，具体代码结构如图：

JAVA代码
LoginAppWithFxml.java:

public class LoginAppWithFxml extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("/login.fxml"));

        stage.setTitle("FXML Welcome");
        stage.setScene(new Scene(root, 300, 275));
        stage.show();
    }

    public static void main(String[] args) {
        Application.launch(LoginAppWithFxml.class, args);
    }
}

LoginController.java:

public class LoginController {
    @FXML
    public Text actiontarget;

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

}

fxml的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<GridPane fx:controller="xin.jiangqiang.LoginController"
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"
          styleClass="root">
    <padding>
        <Insets top="25" right="25" bottom="10" left="25"/>
    </padding>

    <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"/>

    <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"/>

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

</GridPane>

我们可以把两种编写界面的方式进行对比学习，更容易掌握各种组件的用法。
本系列javafx部分文章的所有代码都会在这里更新，本系列关于swing部分的代码在这里更新。

Q.E.D.