我的第一个JAVA桌面应用『邮件客户端』02 - 只用鼠标, 画出我们的应用界面

本文链接：https://blog.csdn.net/yongshiaoteman/article/details/80999323

如果您对文章有提议, 建议或者任何想表达的, 欢迎在下方评论区留言! 不断交流才是进步的捷径!

上一章我们创建了一个JavaFX项目, 并且成功运行并展示了我们的第一个应用窗口. 本章我们将使用JavaFX SceneBuilder来自定义以及"美化"我们的界面.

在这里, 先进行一个小步骤, 编辑我们的sample.fxml文件

将标签改为AnchorPane, 删掉fx:controller="***"后面的属性(如果你已经是AnchorPane, 就不用变动)

<?import javafx.scene.layout.AnchorPane?>
<AnchorPane fx:controller="sample.Controller"
            xmlns:fx="http://javafx.com/fxml">
</AnchorPane>

这样做的原因:

GridPane和AnchorPane都是布局控件, 但是笔者使用后觉得, AnchorPane更为方便, 更加自由. 若有心探索其他布局, 可以自己进行尝试.

用JavaFX Scene Builder画出第一个控件

去项目目录, 寻找src/sample/sample.fxml文件

用JavaFX Scene Builder打开它

如果步骤是按照上面的步骤走的话, 应该是这样:

可以看到, 中间的布局空间的大小为0, 我们只需拖动它到我们想要的大小, (应当是先往左右拉, 再往上下拉), 拉完之后的大小就是我们最终的界面大小, 比如笔者喜欢"高一点":

在这里要注意一下, 我们要多进行一个步骤, 才能在最后正常显示. 点击一下AnchorPane(我们中间的白色部分),

看右边的布局信息

红色框内的, 是它的长和宽, 我们也需要更改java代码中的窗口大小.

打开Main.java, 我们之前介绍过的两个参数, 修改它们, 使他们和你的布局长宽一致.

修改完成后, 回到JavaFX Scene Builder, 让我们来添加一个按钮:

在左边找到组件"Button"

把它拖动到中间

拖动按钮到布局内后, 点击它, 看右边那一栏:

其中, "属性"标签下存储的是按钮的"按钮显示文字", "字体", "颜色"等等相关属性, 我们可以在这里自定义;

我把它做了一些改动后的样子:

下面, 我们将介绍非常重要的部分, 组件触发事件

继续看右边那一栏, 点击"代码":

我们会看到很多文本框, 这里我们着重看fx:id以及On Action

fx:id 给这个组件起一个唯一id (必填)

On Action 进行动作时触发的方法名

要想使这个按钮"活起来", 这两个是需要填写的 (On Action 与其下面的是同一类, 都属于触发条件调用相应方法, 有别的触发条件也可以)

让我们填写相应的数据, 如:

我给这个按钮的fx:id 赋值为btn1, On Action调用的方法名为onclick

完成这些后, 保存我们刚才的修改 (通用快捷键Ctrl+S)

接下来, 是该隆重请出我们的Controller类了!

我们可以看到, Controller里空空如也, 让我们往里面填一些东西:

可以看到, 我向里面加了一个类型为Button, 注解为@FXML, 名为btn1 的变量 (注意导入的包, 别导错了)

其中: @FXML用于将变量与同名控件绑定, 变量名是之前的fx:id, 变量类型是控件的类型, 多用于获取控件状态.

我们暂时不需要获取按钮的状态, 我们继续写:

可以看到我又写了一个方法, 名为onclick. 没错, 这就是我们刚才写在On Action里的方法名

运行我们的Main主类, 点击按钮并观察控制台.

是不是很神奇? 你也可以多点击几次按钮, 控制台就会打印相应次数的语句.

接下来, 我们要展示获取组件的值(非常重要), 我们先往界面上添加一个文本框(在左侧找到TextField):

给它的fx:id 起名为textField, 保存我们刚才的修改 (通用快捷键Ctrl+S, 接下来就不再提醒了, 记得没事就保存)

回到Controller, 我们再把这个组件绑定上(注意导包, 为

import javafx.scene.control

现在, 我们想实现这样的功能: 当点击按钮时, 打印文本框内的值, So Easy!

我们找到刚才的"onclick"方法, 注释掉刚才的打印语句, 增加:

其中, textField.getText() 方法就是获取我们所绑定文本框的内容, 让我们把它打印到控制台上.

运行Main, 在输入框中输入:"今天天气真好":

让我们点击按钮, 可以看到控制台打印出了我们刚才输入的内容.

至此, 你已经完整的走了一遍JavaFX的流程, 相信聪明的你一定可以举一反三了, 下一篇, 我们将会了解JavaMail,

并使用它来发送一封邮件!

下一章-->

第一个java桌面应用, javafx, 邮件客户端, java开发邮件客户端