上一篇中我们讲到了关于Java Scene Builder2.0工具的基本使用，这一篇我们来讲讲如何利用IDEA+Java Scene Builder来写一个小界面~~~

在之前的配置和新建FX项目博客中我们已经新建好了一个FX的项目，没看的童鞋们，可以去看看，链接: Idea从配置到新建第一个JavaFX项目

在之前已经说过了，新建一个JavaFX项目，项目中的会默认带一个Sample的文件夹，下面包含Controller，Main和Sample.fxml，三个文件，为什么会有三个文件，他们之间的关系是咋样的，又该如何去关联使用，在我的另外一篇博客里，有详细介绍，不了解的童鞋可以去看看，链接: JavaFX的MVC框架.

简单FX界面效果如图：

实现步骤：

1. 打开FXML文件，绑定控制器
   

2. 右击FXML文件——Open In SceneBuilder 打开JavaFX Scene Builder工具
   

3. 从左侧工具列表中的Controls中拖出Label控件到中间舞台上，设置Text为：登陆界面，可以用鼠标拖动放置合适的位置，Font中可以更变字体大小和样式
   

4. 重复步骤3，完成账号和密码的Label创建和设置
   

5. 从左侧工具列表中的Controls中拖出TextField控件到中间舞台上
   

6. 从左侧工具列表中的Controls中拖出PasswordField控件到中间舞台上
   

7. 从左侧工具列表中的Controls中拖出Button控件到中间舞台上，并设置按钮文字
   

   扫描二维码关注公众号，回复： 12330653 查看本文章

8. 把登录按钮设置Id：Bt_1，就可以通过Bt_1来引用该控件

9. 把登录按钮绑定toLog的事件方法，当该按钮被点击时，事件触发，调用该方法

10. 预览效果，Preview——Show Preview In Window
    

11. 同步到项目中的FXML文件中，File——Save，FXML会自动生成相应的代码
    

12. 编写事件方法
    

13. 运行
    

提示：

1. 因为分辨率DPI以及其他因素影响的原因，在工具中预览出来的效果可能和运行的效果存在差异，这就需要自己去慢慢调试或者使用绝对定位了
2. 触发事件方法如果在工具中声明了，但是没有在控制器里定义出来，fxml会报错，可以把光标定位在报错的红色字体的方法上，Alter+Enter，选择Create Method，IDEA会自动在与该FXML绑定的控制器里面创建事件方法
3. 在工具中对FXML文件的布局或设置进行更改，一定要记得保存一下刷新FXML文件

补充：

• 获取TextField中的数据：控件Id.getText();
• 获取PasswordField的数据：控件Id.getText();