回到顶部
您的当前位置: 专题> JavaFX 8 系列教程
JavaFX 8 系列教程(二)Scene Builder
2017-07-29 17:38:54
标签: 转载 JavaFX Scene Builder
本章主题
  • 开始了解 JavaFX 。

  • 创建并运行一个 JavaFX 项目。

  • 使用 Scene Builder 来设计用户界面。

  • 使用 模型 - 视图 - 控制器(MVC)模式 构造基础的应用。

你需要准备
  • 最新的 Java JDK 8 (包含 JavaFX 8)。

  • Eclipse 4.3 或更高版本与 e(fx)clipse 插件。最简单的方法是从 e(fx)clipse 网站 下载预先配置的发行版本。作为一种备选你可以使用一个 update site 来给您的 Eclipse 安装。

  • Scene Builder 2.0 或更高。

Eclipse 配置:配置Eclipse 所使用 JDK 和 Scene Builder

① 打开 Eclipse 的设置并找到 Java | Installed JREs 。

② 点击 Add..., 选择 Standard VM 并选择你安装 JDK 8 的 Directory 。

③ 移除其他的 JREs 或 JDKs 从而使 JDK 8 成为默认。

1501321579301083396.png

④ 在 Java | Compiler 中设置 Compiler compliance level 到 1.8。

1501321611540063614.png

⑤ 在 JavaFX 中指定你的 Scene Builder 可执行文件的路径。

1501321640285033433.png

帮助链接

你可能会想收藏下面的链接:

一切就绪,让我们开始吧!

创建一个新的 JavaFX 项目

在 Eclipse(已安装 e(fx)clipse 的)中,点击 File | New | Other... 并选择 JavaFX Project。 指定这个项目的名字(e.g. AddressApp)并点击 Finish。

如果 application 包被自动创建,那么删除它和它的内容。

创建包

Model-View-Controller (MVC)是一个非常重要的软件设计原则。按照MVC模式可以将我们的应用程序划分成3个部分,然后为这每一部分建立自己的包 (在源代码文件夹上右键, 选择 新建 | 包):

  • ch.makery.address- 放置所有的控制器类(也就是应用程序的业务逻辑)

  • ch.makery.address.model- 放置所有的模型类

  • ch.makery.address.view- 放置所有界面和控件类

注意: view包里可能会包含一些控制器类,它可以直接被单个的view引用,我们叫它 视图-控制器。

创建FXML布局文件

有两种方式来创建用户界面,一终是能过XML文件来定义,另外一种就是直接通过java代码来创建. 这两种方式你都可以在网上搜到. 我们这里将使用XML的方式来创建大部分的界面。因为这种方式将会更好的将你的业务逻辑和你的界面开来,以保持代码的简洁。在接下来的内容里,我们将会介绍使用Scene Builder(所见即所得)来编辑我们的XML布局文件,它可以避免我们直接去修改XML文件。

在view包上右键创建一个新FXML Document,把它命名为PersonOverview

  • ch.makery.address- 放置所有的控制器类(也就是应用程序的业务逻辑)

  • ch.makery.address.model- 放置所有的模型类

  • ch.makery.address.view- 放置所有界面和控件类

注意: view包里可能会包含一些控制器类,它可以直接被单个的view引用,我们叫它 视图-控制器。

用Scene Builder来设计你的界面教程源码下载

PersonOverview.fxml右键选择 Open with Scene Builder,那么你将会在打开的Scene Builder里面看到一个固定的界面设计区域(在整个界面的左边)。

① 选中这个界面设计区域,你就可以在右边的属性设置栏中对它的尺寸进行修改:

01.png

② 从Scene Builder的左边控件栏中拖拽一个 Splite Pane(Horizontal Flow) 到界面设计区域,在Builder的右边视图结构中选择刚添加的Pane,在弹出的右键菜单中选择 Fit to Parent 。

02.png

③ 同样从左边的控件栏中拖拽一个 TableView 到 SplitPane 的左边,选择这个TableView(而不是它的列)对它的布局进行设置,你可以在 AnchorPane 中对这个TableView四个边的外边距进行调节。(more information on Layouts).

03.png

④ 点击菜单中的 Preview | Show Preview in Window 可以预览你设计好的界面,试着缩放预览的界面,你会发现TableView会随着窗口的缩放而变化。

⑤ 修改TableView中的列名字,"First Name" and "Last Name",在右边面板中的属性设置项

04.png

⑥ 选择这个 TableView ,在右边面板中将它的 Column Resize Policy 修改成 constrained-resize (同样是在属性设置项里面)。确保这个TableView的列能够铺满所有的可用空间。

06.png

⑦ 添加一个 Label 到 SplitePane的右边部分,并设置它的显示文字为 "Person Details" (提示: 你可以通过搜索来找到 Label 这个控件)。 使用anchors来调节这个控件的布局位置。

1501334585062012995.png

⑧ 再添加一个 GridPane SplitePane的右边部分, 使用anchors来调节这个控件的布局位置。

1501335140338039306.png

⑨ 按照下面的图添加多个 Lables到表格中去。

注意: 添加一个控件到已经存在的行里面去,你可在这行的行号上右键选择 "Add Row"。

10.png

⑩ 添加3个按钮到这个 GridPane 的下面。 小提示: 选择这3个按钮,右键 Wrap In | HBox,那么它们会被放置到一个HBox里面。 你可能需要对这个HBox指定一个 spacing,同时也需要设置它们的右边和下边的anchors。

11.png

⑪ 那么基本已经完成了界面的设计,你可以通过 Preview 来预览一下你设计的界面,同时缩放一下窗口来检验一下各个控件的位置是否正确。

12.png