JavaFX场景生成器1.0使用入门

最新推荐文章于 2022-11-18 16:21:36 发布

chenghuang1644

最新推荐文章于 2022-11-18 16:21:36 发布

阅读量492

点赞数

文章标签： ui java runtime

原文链接：https://my.oschina.net/doloop/blog/118998

版权

JavaFX场景生成器1.0使用入门

博文日期： 2013-3-31 11:41:19 分类： JAVAFX 编辑 7 次访问 0 条评论 |

入门使用JavaFX场景生成器1.0

下载源代码 IssueTrackingLite.zip

关于本教程

本入门教程介绍一步一步创建一个简单的问题跟踪应用程序使用JavaFX场景生成器工具。它告诉你如何快速构建一个JavaFX应用程序的用户界面（UI），将其连接到Java源代码，并处理数据和用户界面之间的相互作用。对于本教程的目的，您将使用NetBeans项目名为IssueTrackingLite的说明之间的集成NetBeans IDE和JavaFX场景生成器的。需要注意的是使用JavaFX的场景生成器是不依赖于任何IDE。本教程还包括信息，引导您通过创建的IssueTrackingLite FXML的布局，而不使用NetBeans IDE。

本文件包含了以下主题：

本教程做准备
打开样品FXML文件
创建FXML金流文件和基本窗格
绑定UI的应用程序逻辑
添加列表和表视图
创建“详细资料”节
添加工具栏
使用样式表和预览的UI

编译并运行应用程序

1准备本教程

JavaFX的场景生成器是一种设计工具，可在JavaFX平台。它允许简单的拖放和拖放图形用户界面（GUI）组件定位到JavaFX的场景。当您建立的场景，FXML金流设计的UI代码是自动生成的。JavaFX的场景生成器提供了一个直观的界面，可以帮助你快速原型交互连接的应用程序的GUI组件的应用程序逻辑。

注：

JavaFX的场景生成器不依赖于任何特定的IDE。你可以运行它作为一个独立的工具来创建你的UI布局和使用您所选择的文本编辑器编辑生成的FXML金流文件。如果您选择本教程外的NetBeans IDE，那里是部分在本教程中，亮点是什么你需要做连接，你建立的示例应用程序的Java源代码的布局，应用样式表，并运行示例应用程序使用Apache Ant工具。

继续本教程之前，请使用以下的要求和建议：

（必填）安装所有必需的软件，然后再使用JavaFX场景生成器。请参阅JavaFX的场景生成器安装指南“，为更多的细节。
（必填）下载 IssueTrackingLite.zip的样品本教程中包含的文件，并提取其内容。您提取的IssueTrackingLite文件夹中包含的FXML金流布局使用本教程，你将建立一个完整的版本。问题跟踪系统，使你，查询现有项目的问题，对其进行修改，或添加新的问题。
（必需）使用 JavaFX的场景生成器用户指南“，熟悉的JavaFX场景生成器的用户界面，在图1-1所示。点击图片看一个更大的版本。
（推荐）安装NetBeans IDE 7.2，这是本教程中使用说明的NetBeans IDE和JavaFX场景生成器之间的集成。正如前面提到的，你也可以UI的IssueTrackingLite布局创建，而无需使用NetBeans IDE。
（推荐）熟悉JavaFX的概念，通过阅读提供的文章上的JavaFX文档资料网站http://docs.oracle.com/javafx。尤其是阅读入门与FXML的 FXML金流概念，了解和熟悉工作的布局使用JavaFX中的布局。

图1-1为JavaFX场景生成器的主窗口（点击图片看大图。）

“图1-1为JavaFX场景生成器的主窗口”的说明

2打开样本FXML，文件

当你已经熟悉JavaFX的概念和JavaFX场景生成器的用户界面，开始建立一个FXML金流布局使用JavaFX场景生成器。打开已完成的IssueTrackingLite.fxml档案，看看有什么成品IssueTrackingLite布局看起来像。请使用下列方法之一：

步骤通过使用NetBeans IDE项目窗口，打开IssueTrackingLite的样品NetBeans项目，然后双击节点的IssueTrackingLite.fxml文件调用JavaFX场景生成器。
按照使用JavaFX场景生成器打开命令，到打开的IssueTrackingLite.fxml的示例文件。

本教程中使用的控制器源文件和级联样式表（CSS）文件已经提供了的IssueTrackingLite样品NetBeans项目。这些文件是在同一个项目文件夹，将包含新的FXML金流文件。

使用NetBeans IDE项目窗口

打开已完成的IssueTrackingLite.fxml布局示例使用NetBeans IDE的“项目”窗口的文件：

通过双击的NetBeans IDE 7.2的快捷方式，或选择“ 开始“，然后程序，然后NetBeans中，最后，NetBeans IDE 7.2的 Windows平台上启动NetBeans IDE 。在Mac OS X平台，NetBeans IDE 7.2的应用程序图标上双击。
从菜单栏中，选择“ 文件“，然后打开项目。
从打开项目“对话框中，在那里你提取的IssueTrackingLite.zip的文件和打开IssueTrackingLite项目。
在“项目”窗口中，依次展开“的IssueTrackingLite，源代码包，和issuetrackinglite节点。双击打开的文件的IssueTrackingLite.fxml节点。

的JavaFX场景生成器工具的主窗口会出现在“内容”面板中的IssueTrackingLite.fxml打开的文件，图2-1所示。

图2-1完成IssueTrackingLite.fxml开在JavaFX场景生成器“窗口（点击图片看大图。）

“图2-1说明完成IssueTrackingLite.fxml在JavaFX场景生成器”窗口打开“
使用不同的名称保存该文件，使您可以创建自己的FXML金流布局文件。从菜单栏中，选择“ 文件“，然后选择“另存为”。在“ 文件名 “文本“字段中输入IssueTrackingLiteComplete.fxml，并单击“ 保存“。保持了JavaFX场景生成器“窗口，打开这个文件，你可以用它来比较的版本，你将要创建的布局。
在“项目”窗口中的IDE中，用鼠标右键单击该节点的IssueTrackingLite.fxml文件，并选择“ 删除，这样您就可以使用相同的文件名，您将构建的FXML布局。在确认对象删除“对话框中，单击” 是“。

使用JavaFX场景生成器打开命令

打开完成的样品FXML文件直接从JavaFX场景生成器“窗口。

通过双击JavaFX的场景产生器1.0快捷方式启动您的Windows平台上的JavaFX场景生成器，或选择“开始“，然后程序，然后JavaFX的场景生成器，最后，JavaFX的场景产生器1.0。在Mac OS X平台，JavaFX的场景产生器1.0的应用程序图标上双击。
从菜单栏中，选择“ 文件“，然后打开。
从打开的FXML金流“对话框中，进入到该文件夹中，你提取的IssueTrackingLite.zip的文件和打开的IssueTrackingLite，SRC，issuetrackinglite的文件夹。
双击-单击的IssueTrackingLite.fxml的。

IssueTrackingLite.fxml文件在“内容”面板中，打开图2-1所示。
使用不同的名称，使您可以创建自己的FXML金流布局文件，使用原来的文件名保存该文件。
1. 从菜单栏中，选择“ 文件“，然后选择“另存为”。
2. 在“ 文件名 “文本“字段中输入IssueTrackingLiteComplete.fxml，并单击“ 保存“。

3创建的FXML金流的文件和基地窗格

你是要建立的IssueTrackingLite应用程序的FXML金流布局是一个界面，使您可以查询现有项目的问题，对其进行修改，或添加新的问题。构建自己的IssueTrackingLite的用户界面：

创建新的FXML金流文件中的步骤，无论是使用NetBeans IDE新建向导或使用JavaFX场景生成器新的命令。
设置样式的类文件使用的整个布局。
建立基本窗格的布局。

使用NetBeans IDE的新向导

使用NetBeans IDE新向导“创建一个新的空FXML文件。

从IDE的项目窗口中的中中，右键单击issuetrackinglite“节点，选择“ 新建“，然后其他。
在“新建文件”对话框中，选择的JavaFX的类别和选择空FXML金流的文件类型，如图3-1所示。单击“下一步“。

FXML金流图3-1中选择“清空文件类型

“图3-1中选择空FXML金流文件类型”
在新的空FXML的“对话框中，输入IssueTrackingLite在FXML金流的名称文本字段。这是控制器应用程序中使用的源文件名加载FXML金流文件时。单击“ 下一步“。
选择使用Java控制器的复选框，并使用现有的选项。
单击“ 浏览“中选择“Java控制类”对话框中中，打开IssueTrackingLiteController.java文件，图3-2所示。单击“ 下一步“。

图3-2控制器使用现有的Java类文件

图3-2说明“使用现有的Java控制器类文件”
选择使用层叠样式表“复选框，并使用现有选项。
点击“ 浏览“，在选择CSS文件对话框中中，打开IssueTrackingLite.css的文件。单击“ 完成“。

IssueTrackingLite.fxml文件在IDE的源代码编辑器中打开。这种新的FXML金流文件在同一文件夹中所提供的控制器的源代码，IssueTrackingLiteController.java，将连接的用户界面，你用这个教程。
在“项目”窗口中，双击IssueTrackingLite.fxml的节点在JavaFX场景生成器工具打开的文件。

的JavaFX场景生成器工具的主窗口将出现在“内容”面板中打开一个空的FXML金流文件，图3-3所示。“内容”面板中显示的的初始AnchorPane元素将包含你建立的GUI布局。点击图片看一个更大的版本。

图3-3 JavaFX的场景生成器主窗口在启动时（点击图片放大）。

说明图3-3 JavaFX的场景生成器主窗口在启动时“

提示：

放大“内容”面板中得到更大的工作面积。选择行为的AnchorPane的元素在“层次”面板。部分Inspector面板中点击布局和县宽度“字段中输入800。在县高度“字段中输入600，然后按回车键。的AnchorPane容器的大小为800×600像素。或者，你也可以在右下角的AnchorPane容器中拖动手柄，以增加其大小。调整的JavaFX场景生成器“窗口的大小所以你能够来查看整个AnchorPane的容器。

使用JavaFX场景生成器新的命令

如果您选择不使用NetBeans IDE来完成本教程，请使用以下的步骤来创建一个新的空FXML的文件中使用JavaFX的场景生成器新的命令。

从菜单栏中，选择“ 文件“，然后新的。

新的JavaFX场景生成器“窗口中出现一个空的FXML金流”内容“面板中打开的文件，图3-3所示。“内容”面板中显示的的初始AnchorPane元素将包含你建立的GUI布局。点击图片看一个更大的版本
将CSS文件来使用您的新FXML金流布局。
1. 在“层次”面板中，选择根AnchorPane元素，然后单击“ 检查器“面板中的“ 属性“部分。
2. 按一下按钮的CSS款在样式列表视图的加号（+）符号。
3. 在添加样式表“对话框窗口，的issuetrackinglite文件夹，和选择的IssueTrackingLite.css的文件。点击打开。
保存新的FXML金流文件，然后再继续后面的教程。
1. 从菜单栏中，选择“ 文件“，然后选择“另存为”。
2. 在“保存为”对话框窗口FXML金流文件，到的IssueTrackingLite的文件夹，然后的src和issuetrackinglite的文件夹。
3. 在“文件名 ”文本“字段中输入IssueTrackingLite.fxml，并单击“ 保存“。
4. 选择“是”，当记者问，如果你想取代现有的IssueTrackingLite.fxml的文件。

设置样式的类文件

设置的样式类使用的整个布局。

在JavaFX场景生成器“层次”面板中，选择该行的顶部AnchorPane容器中，如果尚未选择。
在Inspector面板中的“ 属性“部分中，单击该按钮的样式类列表视图中的加号（+）。检索从IssueTrackingLite.css文件的列表样式类。选择主题，在图3-4所示。

图3-4集的布局样式类

说明“图3-4的布局设置的样式类”

建立基本窗格

定义的基础的布局窗格来定义你的UI布局的不同部分。

从“库”面板中，选择“ 拆分窗格（横式）。将其拖动到“内容”面板，并把它里面的锚窗格元素，如在图3-5所示。

当你放弃分割窗格的对象，“层次”面板更新，，显示拆分窗格（横式）元素，其中包含两个AnchorPane元素。

图3-5添加拆分窗格（横式）

“图3-5添加拆分窗格（横式）”的说明
随着拆分窗格（横式）中选择“内容”面板中，选择“修改”，然后，适合家长从菜单栏中。这个动作调整的节点，以填补其容器的父，的最顶层AnchorPane元素所占用的空间。
从菜单栏中选择“ 文件“，然后保存。
这个动作可以节省你的工作的IssueTrackingLite样品NetBeans项目的src文件夹，安装目录 > / IssueTrackingLite / src目录/：issuetrackinglite / IssueTrackingLite.fxml。经常执行此保存操作，保存你的工作。
在“层次”面板中选择拆分窗格（横式），拖动垂直分割，直到百分比显示约25％，图3-6所示。另外，在Inspector面板中的“属性”部分，输入0.25在分频器的位置“字段中。

图3-6移动垂直分隔

“图3-6移动垂直分隔”说明

注：

从菜单栏中，选择“ 编辑“，然后撤消必要时撤消操作。
要添加拆分窗格（垂直流）部分，从“库”面板中拖动拆分窗格（垂直流）和它拖放到“层次”面板。确保您下拉时的拆分窗格（横式）的第二AnchorPane元素里面显示一个橙色的亮点，图3-7所示。

图3-7添加拆分窗格（垂直流）

“图3-7添加拆分窗格（垂直流）”的说明

请注意，被丢弃后的拆分窗格（垂直流）元素，它被添加到层次“面板中与它的AnchorPane的儿童。
在“层次”面板中，右键单击新添加的行拆分窗格（垂直流）元素和家长从上下文菜单中选择适合。

拆分窗格：（垂直流）中选择“内容”面板中，拖动水平分割的，直到百分比显示约35％。另外，部分Inspector面板中单击“属性”，进入0.35在分频器的位置“字段中。

4绑定UI的应用程序逻辑

控制器源的文件，IssueTrackingLiteController.java，将管理事件和每个元素上所采取的行动，你添加的FXML金流的UI布局，正在建设。

在“层次”面板中，选择该行的根（顶层）AnchorPane元素。
点击Inspector面板中的代码部分。
如果你使用的是NetBeans IDE来完成本教程，请注意控制器的类文本字段的值已经issuetrackinglite.IssueTrackingLiteController的，图4-1所示。当最初创建FXML金流文件在NetBeans IDE中，您指定的控制器源文件的文件名作为绑定您所创建的UI布局。

如果您选择不使用NetBeans IDE来完成本教程，在的控制器类文本“字段中输入issuetrackinglite.IssueTrackingLiteController。

设置控制器类的文件名，JavaFX的场景生成器，为您提供控制器的源文件中声明的事件处理程序和实例变量的名字

图4-1添加控制器类

“图4-1说明添加控制器类”
点击下拉箭头，在控制器类领域。如果有其他的控制器类文件，它会是李斯特在一个下拉列表中，你可以从列表中选择，以取代已经被定义，如果有必要。

加入列表和表视图

在接下来的任务在本教程中，您将添加列表视图和表视图组件UI布局。

添加一个列表

添加列表部分，这将显示该问题的项目信息。

在库“面板中的搜索框中，输入列表中找到列表视图控件在列表中的用户界面控件。
从“库”面板中拖动列表控制，并把它拆分窗格的分割线（横式）的左侧，在图5-1所示。请注意的ListView组件被丢弃后，它会显示在“层次”面板作为一个孩子的的第一AnchorPane元素内的拆分窗格（横式）元素。

图5-1添加列表视图控件为SplitPane中（横式）

图5-1添加列表视图控件为SplitPane中（横式）“的说明
从菜单栏中，选择“ 修改“，然后适合家长。

点击Inspector面板中的“ 属性“部分。在FX：ID字段中，选择“选择”按钮，并从下拉列表中选择“ 列表“，在图5-2所示。

图5-2集FX：ListView控件的ID

“图5-2集FX：ListView控件的ID”

注：

FX：id值对应的控制器类的实例变量的名称将被插入的节点。所有的FX：id字段的值必须准确输入，如图所示。如果他们不正确输入，IssueTrackingLite的示例应用程序将无法正常工作。

添加表

表视图控件将用于显示列表的问题。

在“库”面板中的控制部分，选择表视图。将其拖放到上面的拆分窗格（垂直流）元素的分割线，在图5-3所示。

图5-3表视图控制

“图5-3添加的表视图控制”
从菜单栏中，选择“ 修改“，然后适合家长。
点击属性部分的检查器“面板中，选择表FX：ID字段的下拉列表中可用的实例变量。
设置两个表视图中的列的属性。
1. 在“层次”面板中，选择该行的TableView组件的下排第一TableColumn的组成部分。在Inspector面板中的“ 属性“部分中，选择“ 从FX COLNAME ：ID字段的下拉列表中，在“名称” 文本属性更改默认值。
2. 早在“层次”面板中，选择该行的第二个表列组件。在Inspector面板中的“ 属性“部分，选择colStatus从FX：ID字段的下拉列表中，设置文本属性状态
另一列添加到表中。
1. 点击“库”面板中的控制部分，并选择表列控制。将其拖放到表视图中的内容面板内。新列添加到右侧的“状态”选项卡。
2. 在Inspector面板中的“ 属性“部分中，选择“ 从FX colSynopsis ：ID字段的下拉列表中可用的实例变量，并设置文本属性简介。
从菜单栏中，选择“ 查看“，然后显示示例数据。请注意，在“内容”面板中的列表视图和表视图元素用示例数据填充。选择“ 查看“，然后从菜单栏中隐藏样本数据，关闭显示器的样本数据。

6创建“详细资料”节

对于这部分的教程，设置问题的详细信息将显示的区域。
添加细节部分的UI组件

添加UI组件创建的部分，将显示的问题，你所创建或修改在IssueTrackingLite应用程序的详细信息。
1. 点击右上角的“层次”面板上的菜单按钮，并选择显示效果：ID，在图6-1所示。请注意，“层次”面板显示效果：id值的元素，有FX：分配给他们的id属性值。
  
  图6-1显示效果：ID显示模式
  
  “图6-1显示效果说明：ID显示模式”
2. 设置的细节部分。
  1. 在“层次”面板中，选择AnchorPane，在最后一排。这是正确的行下面的TableColumn的：colSynopsis元素。
  2. 点击右边的行进入FX的AnchorPane元素：ID编辑模式。输入了fx：ID文本的内联文本编辑器的详细信息，如在图6-2所示。这个编辑器是可以的，因为目前的显示模式设置在“层次”面板显示效果：ID。或者，单击“ 检查器“面板中的“ 属性“部分。选择从下拉列表中提供了fx的实例变量：id字段的详细信息。
    
    图6-2使用FX：ID列直插式文本编辑器
    
    “图6-2使用FX：ID列直插式文本编辑器”的说明
3. 添加一个标签。
  1. 在“库”面板的Controls部分，拖动标签，并把它放到左上角的细节区域，在图6-3所示。
    
    图6-3添加标签元素
    
    “图6-3添加标签元素”的说明
  2. 在Inspector面板中的“ 属性“部分中，选择displayedIssueLabel FX：ID字段的下拉列表中可用的实例变量。
  3. 输入项目/ ID在文本属性字段来替换默认的值。
4. 添加一个文本框控件。
  1. 从“库”面板中，拖动一个文本框控件拖放到右侧的标签，您刚才添加的。
  2. 调整文本字段元件的大小，以便它占据的剩余空间的右侧。
  3. 在“内容”面板中双击文本字段元素进入编辑模式。在编辑框中输入内容简介。
  4. 在Inspector面板中的“ 属性“部分的实例变量提供了fx：id字段的下拉列表中，选择概要。
5. 集团的“标签”元素，与的简介文本字段元素。
  1. 在“层次”面板，按住Ctrl键（Windows）或Cmd键（Mac），选择行的的标签displayedIssueLabel和TextField的简介组件。
  2. 从菜单栏中，选择排列，然后换行，并从子菜单中的HBox。
6. 添加一个标签和一个textarea元素的细节。
  1. 从“库”面板中的控制部分，选择“ 标签“。将其拖放到左侧的细节部分和下面的行占据了HBox您刚才添加的。使用指引，位置标签行使用了HBox元素的左侧元素。
  2. 双击的标签进入编辑模式。输入说明：替换默认的值。
  3. 拖放下面的标签，您只需添加一个文本区域。单击并拖动文本区域右下角的手柄，以增加其大小，并填写在细节部分的剩余空间，在图6-4所示。
  4. 在“内容”面板中选择的文本区域元素。在Inspector面板中的“ 属性“部分，从FX：id字段的下拉列表中选择descriptionValue。
  图6-4放大文本区域
  
  图6-4说明“放大文本区域”
锚定在细节部分的UI元素

为了确保UI元素的间距和大小作适当调整应用程序的窗口的大小时，您必须修改他们的锚窗格的限制。
1. 在“层次”面板中，选择该行的HBox包含的的标签displayedIssueLabel和TextField的概要元素的行。它是直接在下面的行的AnchorPane：细节元素。
2. 点击Inspector面板中的布局部分。
3. 在AnchorPane约束款，单击左边和右边的虚线锚线。当您单击锚线，黑色虚线改变成固体的红线，这是盘旋在图6-5。
  
  图6-5设置锚线
  
  说明“设置锚线图6-5”
4. 在“层次”面板中，选择该行的TextField的简介组件。点击Inspector面板中的布局部分，并找到了HBox约束款和永远的Hgrow文本字段的下拉列表中选择。此设置指示文本字段：synopsis元素将调整水平时，它的父容器的增加。
5. 选择在“层次”面板的文本区域descriptionValue的行。在Inspector面板布局部分，找到的AnchorPane的的约束款，并单击左，上，右，底部虚线锚线。
6. 在“层次”面板中，选择该行的标签displayedIssueLabel组件。在布局部分Inspector面板中，将该值设置为的最小宽度USE_PREF_SIZE的。此设置将保持标签的HBox元素仍然可见，并非所有的UI元素可以显示应用程序窗口的大小时，被调低。
  
  7添加的工具栏
  
  添加一个工具栏的用户界面的顶部。它包含一个图像文件和三个按钮。
  1. 在“层次”面板中，通过点击右上角的“菜单”按钮，并选择“显示简介”更改显示设置，如果尚未选定。
  2. 选择的行SplitPane中（横式）元件。您可能需要调整层次“面板中看到完整的拆分窗格元素的节点ID。
  3. 在“内容”面板中，抢的拆分窗格顶部中间的手柄，将它拖到工具栏上面的“内容”面板中，以腾出空间，由图7-1所示。
    
    图7-1工具栏的空间
    
    图7-1说明的工具栏让路“
  4. 从菜单栏中，选择文件，导入，然后媒体。从文件夹中安装目录 > / IssueTrackingLite / SRC / issuetrackinglite的选择IssueTrackingLite.png
  5. 图像移动到工具栏区域的左上角。增加工具栏区域的高度实在是太小了被插入的图像。
  6. 将三个按钮添加到工具栏。
    1. 从“库”面板中，拖动一个按钮元素，并把它放到工具栏的右侧。
    2. 从菜单栏中，选择“ 编辑“，然后重复两次，再添加两个新按钮到工具栏。
  7. 选择所有三个按钮控件，按住鼠标左键并拖动选框按钮，在图7-2所示。当你松开鼠标左键，应选择所有三个按钮。
    
    图7-2选取框的三个按钮
    
    说明“图7-2选取框的三个按钮”
  8. 从菜单栏中，选择排列，包裹，然后HBox的。按钮被布置在一行中，即使它们之间的间距。移动了HBox使更接近它的右边缘的工具栏的右侧。
  9. 定义按钮的anchorLayout和间距的值。
    1. 在“层次”面板中，选择刚添加的HBox的行。
    2. 点击Inspector面板中和约束在AnchorPane款的布局部分中，单击顶部和右侧虚线锚线。
    3. Inspector面板中单击“ 属性“部分和在间距文本字段中，输入15，以取代默认值5。请注意，在按钮之间的间距增加。
  10. 编辑按钮的详细信息。
    1. 选择右侧的工具栏上的按钮。Inspector面板中，单击“ 属性“部分，，从FX：id属性的下拉列表中选择deleteIssue。输入在文本字段中删除。
    2. 双击中间的按钮，进入编辑模式。在编辑框中输入保存。FX：id属性中间的按钮，在下拉列表中单击“ 属性“一节的Inspector面板，然后选择saveIssue的的。
    3. 在工具栏中，双击最左边的按钮，进入编辑模式，并进入新的。Inspector面板中单击“ 属性“部分中，选择了fx：id属性为“新建”按钮，在下拉列表中newIssue。
  11. 每个按钮绑定到一个事件处理程序，当单击该按钮时，将执行一个动作。
    1. 选择“ 新建 “按钮。点击Inspector面板中的代码部分。
    2. 在行动领域，选择＃newIssueFired，从下拉列表中的事件处理程序控制器中的源文件。领先的＃符号告诉你的应用程序看起来为的newIssueFired的方法在控制器的源代码。所采用的方法必须是公开的，返回void，并作为参数ActionEvent的。每次单击“新建”按钮，将执行的公共方法newIssueFired（ActionEvent）通过无效，被定义在控制器的源代码，。
    3. 选择Save（保存）“按钮，并在行动领域，设置的值＃saveIssueFired。
    4. 选择Delete（删除）“按钮，并在行动领域中，设置的值＃deleteIssueFired。
  12. 选择“ 文件“，然后从菜单栏保存，保存您的工作。
    
    8使用样式表和预览的UI
    
    预览你的用户界面的工作，到目前为止，已经制定了，然后改变外观和感觉的布局同一个样式表。
    预览UI
    
    预览UI的工作，你这样做，请使用下列步骤：
    
    从菜单栏中，选择“ 预览“，然后选择“预览”窗口。
    
    多次调整窗口的大小，以确保在工具栏上的按钮和文本区域调整窗口的大小时，适当地调整大小。
    
    要停止查看预览，请关闭“预览”窗口中，或者从菜单栏中，选择预览，然后隐藏预览窗口。
    使用样式表
    
    您可以自定义的外观和感觉你的UI应用样式表。在本教程中，您可以使用一个样式表文件已提供的IssueTrackingLite样品。
    
    确认已经设置的级联样式表（CSS）的资源文件捆绑在一起，的IssueTrackingLite样品。在“层次”面板中，选择根AnchorPane容器。点击Inspector面板中的“ 属性“部分。在样式列表视图，IssueTrackingLite.css样式表CSS款的规定，通知已被设置，图8-1所示。这是样式表，当您创建FXML金流的文件。
    
    图8-1添加一个样式表文件
    
    图8-1说明“中添加一个样式表文件”
    
    使用的样式类“内容”面板中的元素之一。
    
    在“层次”面板中，选择该行的ListView的元素。
    
    Inspector面板中，单击“ 属性“部分，然后单击“ 样式类别“列表中的加号（+）按钮。选择darkList 图8-2所示。请注意，在“内容”面板ListView元素的外观已更改为暗灰色颜色。
    
    图8-2添加样式类的ListView元素
    
    图8-2添加样式类的ListView元素“的说明
    
    在风格类列表视图，选择与darkList后，单击“选择”按钮的向下箭头，从列表中选择开放IssueTrackingLite.css，在图8-3所示。IssueTracking.css文件定义的CSS文件类型的默认编辑器中显示。您可以编辑文件，然后保存该文件。这些变化会被立即应用。退出编辑器窗口。
    
    图8-3工作的样式表文件
    
    图8-3说明“的样式表文件”
    
    从菜单栏中，选择“ 文件“，然后保存。
    
    您刚刚建成的FXML金流布局的JavaFX应用程序使用JavaFX场景生成器。继续编译和运行应用程序，以编译和运行IssueTrackingLite的应用。
    9编译并运行应用程序
    
    你是愿意看到你的应用程序的行动。您可以使用NetBeans IDE或Apache Ant的实用程序，以编译和运行IssueTrackingLite的应用。
    使用NetBeans IDE
    
    使用NetBeans IDE编译和运行NetBeans项目在你救了IssueTracking.fxml的文件。
    
    在NetBeans IDE 7.2窗口中，用鼠标右键单击“项目”窗口中中的IssueTrackingLite项目节点并选择“运行“。NetBeans IDE中编译项目，如果没有遇到任何错误，它会显示一个应用程序类似图9-1。点击图片放大。
    
    图9-1完成UI的问题跟踪样品（点击图片看大图。）
    
    “图9-1说明完成UI问题跟踪样本”
    
    在左边的列表视图中，选择Project1，并在右边的表格视图的名称“列中，选择行与TT-2 。数据显示在细节部分，在图9-1所示。
    
    如果您遇到任何错误，在输出窗口，并确定错误的可能原因。一些故障排除的思路如下：
    
    检查所有的FX：ID值是否正确输入了。FX：id的值在FXML金流布局必须匹配的控制器源类预期值。
    
    检查您是否输入正确方法的名称在事件绑定部分。
    
    在Mac OS X平台，请检查您是否已经正确配置了一个JavaFX 2.2的功能的平台在NetBeans IDE安装。目前，支持JavaFX的平台不会自动为你创建在Mac OS X平台。
    使用Apache Ant实用程序
    
    如果你选择不运行的应用程序在NetBeans IDE中，使用Apache Ant实用程序（版本1.8或更高版本），在命令行上建立并运行应用程序。输入例9-1中的一个类似的命令，如果你使用的是JDK 7 例9-2在Windows平台上，如果你使用的是JDK 6。
    
    例9-1的Apache Ant命令运行应用程序时使用JDK 7
    
    蚂蚁Dplatforms.Default_JavaFX_Platform.home = <JAVA_HOME> - Dplatforms.Default_JavaFX_Platform.javafx.runtime.home == <JAVA_HOME> / JRE -F <JavaFX_App_Name> / build.xml中的<target>
    
    例9-2中的Apache Ant命令运行应用程序时使用JDK 6
    
    蚂蚁Dplatforms.Default_JavaFX_Platform.home = <JAVA_HOME> -Djavafx.sdk = <JAVAFX_22_SDK_HOME> -Djavafx.runtime = <JAVAFX_22_RUNTIME_HOME> -F <JavaFX_App_Name> / build.xml中的<target>
    
    在上面的例子中，< 目标 > 的主要价值是干净的，罐子，和运行。例如，到运行的IssueTrackingLite的应用程序在Windows平台上，输入类似例9-3中的命令，如果你使用的是JDK 7和例9-4在Windows平台上，如果你使用的是JDK 6。您可以设置< 目标 >与的价值，projecthelp时，得到一个可用目标的列表。
    
    示例9-3使用Apache Ant运行在Windows平台上使用JDK 7时IssueTrackingLite中
    
    蚂蚁Dplatforms.Default_JavaFX_Platform.home =“C：\ Program Files文件\的Java \ jdk1.7.0_06”\ Dplatforms.Default_JavaFX_Platform.javafx.runtime.home = \ “C：\ Program Files文件\的Java \ jdk1.7.0_06 \ jre的”\ -F IssueTrackingLite / build.xml中运行
    
    示例9-4使用Apache Ant运行在Windows平台上使用JDK 6时IssueTrackingLite中
    
    蚂蚁Dplatforms.Default_JavaFX_Platform.home =“C：\ Program Files文件\的Java \ jdk1.6.0_33 \ Dkjavafx.sdk =“C：\ Program Files文件\ ORACLE \的JavaFX 2.2 SDK”\ Djavafx.runtime =“C：\ Program Files文件\ ORACLE \的JavaFX 2.2运行时”\ -F IssueTrackingLite / build.xml中运行
    
    要运行的IssueTrackingLite的应用程序在Mac OS X平台上的Java SE 7的更新软件安装，键入示例9-5中所示的命令。
    
    示例9-5使用Apache Ant来了MacOS平台上运行IssueTrackingLite中
    
    蚂蚁Dplatforms.Default_JavaFX_Platform.home = \ / Library/Java/JavaVirtualMachines/jdk1.7.0_06.jdk/Contents/Home \ Dplatforms.Default_JavaFX_Platform.javafx.runtime.home = \ / Library/Java/JavaVirtualMachines/jdk1.7.0_06.jdk/Contents/Home/jre \ -F IssueTrackingLite / build.xml中运行

IssueTrackingLite.zip | 大小：47.43KB

转载于:https://my.oschina.net/doloop/blog/118998

chenghuang1644

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaFX场景生成器1.0使用入门

JavaFX场景生成器1.0使用入门博文日期： 2013-3-31 11:41:19 分类： JAVAFX 编辑 7 次访问 0 条评论 | 入门使用JavaFX场景生成器1.0 ...
复制链接

扫一扫