JavaFX高级教程：JavaFX2.0的FXML语言（中文版).docx-资料库

（翻译）JavaFX 高级教程：JavaFX2.0 的 FXML 语言博客分类：  血泪体验 javafxFXML 原文地址 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 1 .构成该应用的场景包括一个边框布局，在它的顶部和中间各有一个标签。 Figure 1 Border Pane Simple Example Description of "Figure 1 Border Pane Simple Example" Example 1 是相应的 JavaFX 代码. Example 1 JavaFX Scene Graph BorderPane border = new BorderPane(); Label toppanetext = new Label("Page Title"); border.setTop(toppanetext); Label centerpanetext = new Label ("Some data here"); border.setCenter(centerpanetext); Example 2 是相应的 FXML. Example 2 FXML Scene Graph 展示 FXML 优势的最好方法是例子。本指南讲解如何创建 Figure 2 中的登陆界面 . Figure 2 Login User Interface Description of "Figure 2 Login User Interface" 开始之前先熟悉一下 Figure 3 中的用户接口. 该接口使用了一个包含两部分的边框布局。顶区域包括一个堆栈布局，里面是用文本 Label Example 覆盖一副图片。中部区域是一个网格布局，有标签、文本框、密码框和按钮。 Figure 3 Layout of Login User Interface Description of "Figure 3 Layout of Login User Interface"

要创建该界面，我们需完成以下任务:            Prepare for This Tutorial Set Up the Project Set Up the Application Basics Create the Properties File Create the FXML File Define a Border Pane Layout Stack Text Over an Image Add a Grid Layout and Controls Add a Button Event Use a Scripting Language Use a Style Sheet 准备本指南使用 NetBeans IDE.请确保 NetBeans IDE 的版本支持 JavaFX 2.0。要完成本文，应熟悉用 JavaFX 编用户接口。尤其要知道场景的知识，因为 FXML 的语法结构和 JavaFX 的场景很像。建立工程第一步是建立 JavaFX 工程。 . 1. 从 File 菜单选择 New Project 2. 在 JavaFX application category 中，选择 JavaFX FXML Application，点 Next 3. 输入名称 FXMLExample 点击 Finish . NetBeans IDE 打开了工程。有三个文件：FXMLExample.java, Sample.fxml, and Sample.java. 4. 下载浅蓝色渐变的 fx_boxback.jpg 图片到桌面，用来当背景。然后把它拖到 fxmlexample 文件夹下。 . 建立基础每个 FXML 应用必须包含一些 JavaFX 代码，最少也有创建舞台和场景还有启动的代码。打开 FXMLExample.java ,删除 NetBeans IDE 生成的代码，用下面的代码代替。Example 3 . Example 3 FXMLExample.java package fxmlexample; import java.util.ResourceBundle; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class FXMLExample extends Application { @Override public void start(Stage stage) throws Exception { stage.setTitle("FXML Example"); Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"), ResourceBundle.getBundle("fxmlexample.fxml_example")); Scene scene = new Scene(root, 226, 264); stage.setScene(scene); stage.show(); }

public static void main(String[] args) { launch(args); } } 作为一个 JavaFX 编程者，应该很熟悉创建舞台和场景。而然，这一行是 FXML 特有的: Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"), ResourceBundle.getBundle("fxmlexample.fxml_example")); FXMLLoader.load()方法从文件 fxml_example.fxml 加载了目标层次并分配给变量 root。getResources 参数增加了一个资源束来为用户接口具体化，使得诸如定位任务更简单。后面将使用一个配置文件回到资源束并创建 FXML 源文件。总之，场景已经创建，root 变量是场景根元素。 FXML 的根元素标记为场景的根。创建配置文件最佳实践是将字符串外部化，把它们放进配置文件。按照以下步骤创建用户登录界面的配置文件。 1. 在 Projects 窗口，右击 fxmlexample 文件夹，选择 New ,然后是 Other 2. 在 New File 对话框，点击 Other 3. 输入 fxml_example 作为名称，点 Finish。 IDE 打开了该文件，其扩展名是.properties。 4. 输入资源名称和值，如 Example 4 . ,然后是 Properties File ,点 Next . . Example 4 Resource names in fxml_example.properties loginExample=Login Example signIn=Sign in: userName=Username: password=Password: submit=Submit 创建 FXML 文件现在创建 fxml_example.fxml 文件并插入 XML 声明和导入语句。 1. 在 Projects 窗口，右击 Sample.fxm，选择 Rename . 2. 输入 fxml_example 后点 OK . 3. 打开 fxml_example 文件，删除自动生成代码，用下面的取代 Example 5 . Example 5 Declaration and Import Statements 所有 FXML 文件必须以 XML 声明开始。它定义了 XML 版本(1.0)和编码类型(UTF-8). 在 JavaFX 中，类名称可以被完整描述（包括包名），或者是使用导入语句，见 Example 5 .只要你喜欢，你可以完整导入所以相关类。定义边框布局下面开始构建用户界面。在导入语句后面插入下面代码 Example 6 . Example 6 Border Pane Layout 本例中，场景根是 BorderPane 布局类，定义了两快区域，顶部和中部。 fx:controller 属性定义了控制器文件，必须要声明在 FXML 根元素中。后面还会更多的了解控制器。 xmlns:fx="http://javafx.com/fxml"属性将命名空间映射到http://javafx.com/fxml。命名空间也必须声明在FXML 根元素中。该属性让你可以使用JavaFX API 相关的 FXML 标签。在图像上覆盖文字现在，在边框布局的顶区域放置一个堆栈布局。该布局包括一个标签和被覆盖的图片，见 Figure 4 .

Figure 4 Top Region of Border Pane, Including Stack Pane Description of "Figure 4 Top Region of Border Pane, Including Stack Pane" 堆栈布局的代码是 Example 7 .把它们插入在和标签之间。 Example 7 Stack Text Over an Image StackPane 布局将其孩子结点放进一个栈中，后面的会放在之前的上面。该布局可以很方便的把文本放在图片上。标签把孩子结点加入到场景中，就像使用 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 . Figure 5 Grid Pane in Center Region of Border Pane Description of "Figure 5 Grid Pane in Center Region of Border Pane" Example 8 是网格布局的代码，放在和标签中。 Example 8 Grid Layout with Controls

除了使用 Java 创建控制器，可以使用任何提供 JSR223-可编译脚本引擎的语言。比如 JavaScript, Groovy, Jython, 还有 Clojure.下面是用 JavaScript 编码 FXML 的。 1. 在 fxml_example.fxml 文件中，添加 JavaScript 声明到 XML 声明后。 2. 在 3. Button 标记中，改变方法名称 : onAction="handleSubmitButtonAction(event);" 4. 更新标记 PasswordField : onAction="handlePasswordFieldAction(event);" 5. 移除 fx:controller 从 BorderPane 标记中，在