本站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.