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

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

  1. 创建项目 (下文有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的选项)。

  1. 项目结构
    javafx-archetype-fxml:
    image.png
    javafx-archetype-simple:
    image.png

  2. 启动项目
    效果如下:
    javafx-archetype-fxml:
    image.png
    javafx-archetype-simple:
    image.png

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

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

创建项目完整步骤

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

具体步骤如下:

  1. 点击new->porject,选择maven,进入下面页面,勾选Create from archetype,然后在下方选择:org.javafx:javafx-maven-archetypes。
    image.png
    如果是第一次使用该方式创建javafx项目,需要点击右上角的Add Archetype,输入图中内容,点击OK之后才会有上图中的选项。
    image

  2. 选择org.javafx:javafx-maven-archetypes之后点击next,进入下图界面。
    image.png

  3. 输入项目名字等信息,点击next,最后来到下面界面:
    image.png

  4. 修改archetypeArtifactId这个属性的值为javafx-archetype-fxml或javafx-archetype-simple,个人推荐设置为javafx-archetype-fxml,具体区别文章最开始已经说过。然后新增一个属性,名字叫javafx-version,值为15.0.1(当前javafx的最新版本,而不是jdk的版本,jdk只要是11就可以输入这个),修改完毕后如图:
    image.png

  5. 点击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文件的方式来进行界面设计,具体代码结构如图:
image.png

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.


擅长前端的Java程序员