JavaFX极简入门(利用FXML文件)到精通

背景:

        下面我来介绍一下,如何用JavaFX在两周里(实际为一周)来写出一个界面美观,且大气的GUI。

        首先要介绍一下JavaFX是个什么东东:刚刚接触Java的同学一定会知道Java的图形界面库Swing,或者AWT,他们当然都比较老了,或者说过时了,他们都没有做到界面与代码分离(会有好多的坐标位置什么的),所以写起来会麻烦,想要做的美观的话对于新手小白来讲真的是很难。我说的JavaFX还算比较新。若是会用的话还是比较得心应手的。

        JavaFX也是Java的一个图形界面库,真的强烈给大家推荐使用JavaFX,推荐使用JavaFX,推荐使用JavaFX。。。嘿嘿,说三遍。为什么这么说呢,因为如果你掌握了使用FXML文件来设计界面,用Controller类来控制界面里面的所有的action的话,那么恭喜你你已经入门了,成功实现了界面与代码的分离,再加上SceneBuilder(下面会说他是个啥玩意er)的帮助,那么你会很得心应手的。

环境配置:

        1.强烈推荐 Intellij IDEA,我一直用的就是IDEA,在课程设计过程中,在教使用Eclipse同学们使用FXML文件的过程中,遇到了无数的麻烦,所以还请大家使用更加智能一点的IDEA吧。

        2.SceneBuilder:SceneBuilder是一款用来设计界面的软件(很小的),可以通过拖拽控件来进行页面设计。

下载链接:SceneBuilder下载     具体配置下面详解:

正常下载完成后,SceneBuilder会自动打开,不要管他,将所有的关于SceneBuilder的东西全部关闭。

打开Intellij --->点击File--->点击settings--->Languages&Frameworks--->JavaFX

在Path to SceneBuilder 中填入SceneBuilder的exe文件。

然后,环境就搭建好啦。

JavaFX入门:

首先,我们要建立一个新的项目,按这个医疗保险报销系统例子来讲的话就是MedicalInsuranceSystem,建立完Project后,开始我们的构建GUI界面之旅。

首先,先来热热身吧:

1.我们右击src那个文件夹,然后鼠标放在new上,在点击Java class,然后Name里输入MySceneController就创建了一个控制器类(用来控制下面我们即将用来构建界面的FXML文件中的一系列动作,即所谓的控制代码)。

2.再次右击src文件夹,鼠标放在new上,在点击FXML File,然后Name里输入MySceneController就创建了一个可以用来写界面的文件。(建立后你会发现你的那个文件中有一行,有这样的fx:controller="MySceneController"代码,然后“”中的内容被一个红框框框住了,没关系,只要你的Controller类(就是那个Java Class文件)和FXML文件的名称是一样的,就不用担心,也不用更改;但如果不一样的话就需要把“”中的内容改成新创立的Java Class文件一样的名称,推荐建立一样的文件名称,这样方便你去找到对应的界面和代码)。

3.好,做完前两个步骤之后,我们开始界面的设计了。在左边的文件夹中找到你新建立的FXML文件,右击,在最下面可以看到Open In SceneBuilder,点击后,这个文件就会在SceneBuilder中打开会出现下面的界面:

然后就可以进行界面的设计啦。下面我给出一个极其简单的例子:

4.在左边上面的的Library上输入Button,找到button,点击,拖动到AnchorPane上:

双击那个按钮可以修改文本,我在这里改成ok

5.然后,我们看右边的三个菜单栏:有Properties(属性),Layout(布局),Code(代码)。

我们先点击我们之前拖动到AnchorPane上的那个button,再看右边就会有东西出现了,然后点击Code那一栏,看前面几行就好(下面的留给你自己探索吧)有fx:id(这个通俗讲就是这个button的名称,就是这个button的变量名),输入“okayButton”,还有On Action(这个是点击button后触发的事件,后面输入的就是触发的具体方法名),在这个里面输入“okay”。

6.然后,我们把目光转向上方的菜单栏,

我们在这里面常用的就是Preview,它可以用来预览我们刚刚搭建好的窗口(点击Preview--->点击Show Preview In Window(或者直接按Ctrl+p)--->窗口就出现啦)。

还有一个就是View,这个对我们还是蛮重要的,因为有了它我们就可以不用自己在Controller类里面写代码骨架了(真的非常非常省力呢),点击View--->点击最下方的Show Sample Controller Skeleton--->会出现下面的窗口

--->点击左下方的Copy--->回到intellij--->打开刚刚创建的MySceneBuilderController的那个Java class类--->全选--->把刚刚Copy的内容,粘贴进去(就像这样)

但是报错了,没关系,这只是因为没有导入相应的包,我们把鼠标点击ActionEvent,然后按下快捷键Alt+Enter,就会出现导入包,注意一定要选javafx的那个包,不要选AWT的,导入后应该是这样的:

可以看到,我们刚刚输入的“okayButton”,还有点击事件“okay”方法都在里面了,我们可以在okay方法里加些东西

意思就是我们在点击按钮时,会在控制台打印出“Okay”,我们来试试看。

7.但是等一下,你会发现没办法运行啊,嘿嘿,还有一步

我们在在src下创建一个Main类

这时才可以运行,接下来让我们试一试吧。

窗口:

点击button后,

Okay,大功告成。

最基本的入门就是这样了.

 

 

  • 106
    点赞
  • 516
    收藏
    觉得还不错? 一键收藏
  • 28
    评论
JavaFX中提供了FXML来将UI界面与Java代码分离,使得UI设计师可以专注于设计UI界面,而Java开发者可以专注于编写业务逻辑代码。因此,将JavaFX代码转换为FXML文件可以提高开发效率和可维护性。 下面是将JavaFX代码转换为FXML的步骤: 1. 创建FXML文件 在项目的src/main/resources目录下创建一个新的FXML文件。可以使用FXML Editor或者任何文本编辑器来创建和编辑FXML文件。 2. 将JavaFX代码复制到FXML文件中 将JavaFX代码中的UI界面部分复制到FXML文件中的fx:root标签内。如下所示: ``` <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <fx:root type="AnchorPane" xmlns:fx="http://javafx.com/fxml/1"> <children> <Button text="Click Me!" /> </children> </fx:root> ``` 3. 添加FXML注释 在FXML文件中添加FXML注释,以指定FXML文件和Java类之间的关联。如下所示: ``` <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <!-- Sample.fxml --> <fx:root type="AnchorPane" xmlns:fx="http://javafx.com/fxml/1"> <children> <Button text="Click Me!" /> </children> </fx:root> ``` 4. 在Java类中加载FXML文件 在Java类中使用FXMLLoader类来加载FXML文件,并将其与UI界面关联。如下所示: ``` public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception{ FXMLLoader loader = new FXMLLoader(getClass().getResource("Sample.fxml")); Parent root = loader.load(); primaryStage.setScene(new Scene(root)); primaryStage.show(); } public static void main(String[] args) { launch(args); } } ``` 以上就是将JavaFX代码转换为FXML文件的步骤。通过使用FXML,可以更好地管理UI界面和业务逻辑代码,提高开发效率和可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值