（通译）JavaFX高级教程：JavaFX2.0的FXML语言

（翻译）JavaFX高级教程：JavaFX2.0的FXML语言

?

原文地址http://download.oracle.com/javafx/2.0/fxml_get_started/jfxpub-fxml_get_started.htm

?

?

?

FXML是JavaFX 2.0新引入的。你可能会问"What is FXML?" 和"Is FXML for me?" FXML 是基于XML的一种声明性标记语言，用来定义应用的用户接口。FXML对于定义静态的布局很便利，诸如form, control, 和table。使用FXML也可以动态构造布局，不过要结合脚本。

?FXML是一个优势是基于XML，所以多数开发者，尤其是web开发者和其他RIA平台的开发者会很熟悉它。另一个优势是FXML不是编译型语言，不需要编译后才能看出变化。第三个好处是可以很简单的看到应用场景的结构。反过来，也就很简单地可以在组内进行合作开发用户接口。

要对比JavaFX和FXML,看图Figure 1Figure 1 Border Pane Simple Example

Example 2 FXML Scene Graph
Figure 2 Login User Interface

Description of "Figure 2 Login User Interface"Figure 3 Layout of Login User Interface

Description of "Figure 3 Layout of Login User Interface"准备
本指南使用NetBeans IDE.请确保NetBeans IDE的版本支持JavaFX 2.0。
要完成本文，应熟悉用JavaFX编用户接口。尤其要知道场景的知识，因为FXML的语法结构和JavaFX的场景很像。
建立工程
第一步是建立JavaFX工程。
从建立基础
每个 FXML 应用必须包含一些JavaFX代码，最少也有创建舞台和场景还有启动的代码。
打开FXMLExample.javaExample 3 FXMLExample.java
创建配置文件
最佳实践是将字符串外部化，把它们放进配置文件。按照以下步骤创建用户登录界面的配置文件。
在Projects窗口，右击 fxmlexample文件夹，选择Example 4 Resource names in fxml_example.properties
创建FXML文件
现在创建fxml_example.fxml文件并插入XML声明和导入语句。
在Projects窗口，右击Sample.fxm，选择Example 5 Declaration and Import Statements
所有FXML文件必须以XML声明开始。它定义了XML版本(1.0)和编码类型(UTF-8).
在JavaFX中，类名称可以被完整描述（包括包名），或者是使用导入语句，见?Example 5定义边框布局
下面开始构建用户界面。在导入语句后面插入下面代码?Example 6Example 6 Border Pane Layout
本例中，场景根是BorderPane布局类，定义了两快区域，顶部和中部。
fx:controller属性定义了控制器文件，必须要声明在FXML根元素中。后面还会更多的了解控制器。
xmlns:fx="http://javafx.com/fxml"属性将命名空间映射到http://javafx.com/fxml。命名空间也必须声明在FXML根元素中。该属性让你可以使用JavaFX API相关的FXML标签。
在图像上覆盖文字
现在，在边框布局的顶区域放置一个堆栈布局。该布局包括一个标签和被覆盖的图片，见?Figure 4Figure 4 Top Region of Border Pane, Including Stack Pane

Description of "Figure 4 Top Region of Border Pane, Including Stack Pane"Example 7 Stack Text Over an Image
StackPane布局将其孩子结点放进一个栈中，后面的会放在之前的上面。该布局可以很方便的把文本放在图片上。
<children>?标签把孩子结点加入到场景中，就像使用getChildren().add()方法。
Image类加载了图片fx_boxback.jpg，图片放在当前FXML文件路径下。?ImageView类用来显示图片。
Label类有一个文本属性来自资源loginExample。在FXML中，资源名称使用%来指定。加载时， FXML 加载器使用?loginExample?的值Login Example来取代它。
FXML定义风格时很像setStyle()方法的CSS风格。在Example 7?中?Label类使用?style?标签来设置字型为normal，字体是Tahoma，字号是20。
另一种定义风格的方法和Java一样，加载样式表。使用样式表的话对于以后修改比较方便。看本文的?《使用样式表》?了解相关信息。
添加网格布局和控件
下面在边框布局的中部添加网格布局。使用网格布局可以在屏幕上垂直和水平的放置控件。见Figure 5 Grid Pane in Center Region of Border Pane

Description of "Figure 5 Grid Pane in Center Region of Border Pane"Example 8 Grid Layout with Controls
应该对这些代码很熟悉了吧，不过还是要解释某些属性。GridPane.columnIndex和Button控件有一个onAction属性。该符号引用一个定制化方法，会在后面创建FXMLExampleController类时创建。
尽管FXML创建界面很方便，但却不能实现行为。行为必须用Java代码实现（下一节）或者使用脚本，见?《使用脚本语言》.
添加按钮事件
现在创建控制器来管理按钮事件。本例演示如何把FXML和Java代码编写的事件控制器相关联。
在Projects窗口，右击 Sample.java，选择?Example 9 FXMLExampleController.java
@FXML注解用来标识非公开控制器成员和方法。
作为Java的补充，也可以使用其他编译型语言如Scala来实现控制器。.
现在可以运行了。输入内容点击Submit试试。
想要完整代码，请下载?FXMLExample.zip使用脚本语言
除了使用Java创建控制器，可以使用任何提供JSR223-可编译脚本引擎的语言。比如 JavaScript, Groovy, Jython, 还有Clojure.下面是用 JavaScript编码FXML的。
在fxml_example.fxml文件中，添加JavaScript声明到XML声明后。
<?language javascript?>
在Button标记中，改变方法名称:
onAction="handleSubmitButtonAction(event);"
更新标记PasswordField:
onAction="handlePasswordFieldAction(event);"
移除fx:controller从Example 10 JavaScript in FXML
使用样式表
使用内联样式，也可以添加样式表然后为结点设置关联。下面创建了样式表来定义网格布局和标签控件的样式。
创建样式表.
在Projects窗口，右击fxmlexample文件夹，选择Example 11 Contents of Style Sheet
scene.getStylesheets().add("fxmlexample/fxmlstylesheet.css");
打开 fxml_example.fxml添加样式类.
为<String>元素添加导入语句。
<?import java.lang.*?>
用下面代码代替GridPane?Example 12Example 12 Style Class for Grid Pane
用下面代码代替"Sign In" Label 。?Example 13Example 13 ?Style class for Label
使用 <styleClass> 标签时，风格会应用到所有的类，除非它有自己的内联风格。所以Example 13 中的更改不仅应用到了Sign In标签，也赋予了Username 和Password标签。但不会应用到Login Example标签，因为它有自己的内联样式，覆盖了其他风格。
    1 楼    nizhenyuan    2011-11-22              你好！最近在学习javaFX2.0，但由于国内的这方面的资料较少，想请教一下，javaFX2.0的好的学习路线，多谢~    2 楼    somefuture    2011-11-22              nizhenyuan 写道你好！最近在学习javaFX2.0，但由于国内的这方面的资料较少，想请教一下，javaFX2.0的好的学习路线，多谢~
感谢你的阅读和回复。其实我并不是特别了解JavaFX，只是看到国内资料少就帮大家翻译了一些。
其实我觉得，官网的这些资料差的远了，目前最好的方法是研读sample中的例子源码。    3 楼    nizhenyuan    2011-11-24              somefuture 写道nizhenyuan 写道你好！最近在学习javaFX2.0，但由于国内的这方面的资料较少，想请教一下，javaFX2.0的好的学习路线，多谢~
感谢你的阅读和回复。其实我并不是特别了解JavaFX，只是看到国内资料少就帮大家翻译了一些。
其实我觉得，官网的这些资料差的远了，目前最好的方法是研读sample中的例子源码。
我也觉得不是太够，想把javaFX应用显示到web页面上,比如jsp
研究了好长时间都没能成功，希望能得到您的帮助啊。。。