JavaFX Script语言教程

JavaFX Script语言教程(面向Swing程序员)

Last Updated: May 2007

Translated by Liu Dan (cleverpig) and Tian Le (Tin)

JavaFX Script™ （下文中称为JavaFX）语言是一种声明式的静态类型编程语言。它具有第一级函数（first-class functions）、声明式的语法、列表推导（list-comprehensions）及基于依赖关系的增量式求值（incremental dependency-based evaluation）等特征。JavaFX 脚本式语言特别适用于Java2D swing GUI组件，它能够简单地创建图形界面。

译者注：第一级函数指函数被当作对象对待，可以在运行时赋值、传递和返回。详见wikipedia上的解释。

译者注：列表推导指一种在函数语言中的表达式，它表示了在一个或者多个列表的成员（被选择的）进行某种操作的结果。它被称为“syntactic sugar”，即为开发者提供了便捷的多种函数的应用组合。详见FOLDC对list comprehension的解释。

在本教程中，你将使用NetBeans™ IDE 5.5（下面简称为IDE）通过建立简单的“Hello World”应用来学习如何使用JavaFX语言。本文也讨论在JavaFX语言中可用的各种GUI组件，并提供示例代码，讨论JavaFX组件与Swing GUI组件相比的差异。

为了让NetBeans初级用户获得更多关于使用NetBeans IDE的信息，这里提供了在 NetBeans网站上的支持和文档。

<!---->

前提条件

为了更好地理解教程，你需要安装NetBeans IDE，并熟知此IDE的一些基本部分。如果你希望获得对IDE基本功能的了解，请参考IDE在线帮助中的基本功能部分。

当然，你也要基本熟悉Java编程语言，尤其是在Swing和Java2D方面。

系统要求

这里假设你的系统符合在NetBeans IDE 5.5Release Notes中对运行IDE而提出的系统要求。

本教程所需软件

在你开始本教程之前，你需要安装如下软件：

• NetBeans IDE 5.5 (下载)
• 用于NetBeans IDE 5.5的JavaFX脚本插件(下载说明)

<!---->

内容

• 建立一个JavaFX项目
• 创建第一个JavaFX程序
• 运行第一个JavaFX程序
• 比较声明式语法与过程式语法
• 为程序增加动态行为
• 学习更多的JavaFX GUI组件
• 相关资源
• 关于译者
• 译文Feedback

建立一个JavaFX项目

首先，你需要按照下面的步骤来建立你的第一个JavaFX项目。

1. 在IDE主菜单中选择File > New Project。
2. 在New Project wizard中，在Categories（分类）窗口中选择General，接着在Projects窗口中选择Java Application。
   
   
   
3. 点击Next。
4. 在Project Name栏中输入JavaFXapp
5. 在Project Location处，点击Browse来为项目指定保存位置。
6. 取消对Set as Main Project和Create Main Class的选择。
   
   
   
7. 点击Finish。
   JavaFXapp项目将被建立并显示在项目窗体中，如下图所示:
   
   
   
   

top

创建第一个JavaFX程序

现在，你可以在IDE中建立你的第一个JavaFX HelloWorld程序。

1. 右键点击JavaFXapp >Source Packages节点，选择New > File/Folder.
   New File wizard将出现。
   
   
   
2. 在Categories窗体中选择Other，然后在File Types窗体中选择JavaFX File。点击Next.
   
   注意: 在完成本次对JavaFX文件的初始创建后，当你从项目窗口的main project节点或者Source Packages节点通过右键菜单点击New时，JavaFX文件类型应该出现在可用文件类型列表中。
   
   
   
3. 在新建JavaFX文件向导的Project Name和Project Location页面，在File Name栏中输入HelloWord，在Folder栏中输入src。
   值得注意的是：Created File输入栏中的内容会随着文件名而更新。
   
   
   
4. 点击Finish。
   这样，HelloWorld.fx节点便被添加到了项目窗口，HelloWorld.fx文件将在Source editor中打开.
   
   
   
5. 复制并粘贴如下代码到HelloWorld.fx中。

           
        import javafx.ui.*;
   		
        Frame {
               title: "Hello World JavaFX"
               width: 200
               height: 50
               content: Label {
                   text: "Hello World"
               }
               visible: true
        }
   

top

<!---->

运行第一个JavaFX程序

现在让我们使用IDE运行第一个JavaFX程序。

1. 从项目窗口的JavaFXapp节点上点击右键选择Properties。
   
   
   
2. 在Categories窗体中选择Run。
3. 在Arguments（参数）栏中输入HelloWorld，点击OK。
   
   
   
4. 回到项目窗口的JavaFXapp节点上点击右键选择Run Project。
   
   
   
   运行的程序将显示在如下窗口：
   
   
   

   

庆贺一下吧！到此为止，你已经完成了第一个JavaFX程序！

top

<!---->

比较声明式语法和过程式语法

正像我们在前一节所看到的，JavaFX语言提供了一种声明式语法来表达结构和用户接口组件的内容。为了帮助你理解，让我们以纯过程的方式重写上面的程序，就像我们在编写Swing程序时经常做的那样：

        var win = new Frame();
        win.title = "Hello World JavaFX";
        win.width = 200;
        var label = new Label();
        label.text = "Hello World";
        win.content = label;
        win.visible = true;

上面的源代码同样也是一个有效的JavaFX程序，它和前面的代码具有相同的效果。

下面列举出在声明式方法和过程式方法中实际发生了什么：

1. 调用Frame类构造方法建立新的Frame。
2. 给Frame的title、width、visible和content属性赋值。
3. 在赋值content属性的过程中，调用了Label类的构造方法建立一个新的Label，并且为它的text属性赋值。

尽管上面的代码是一个非常简单的示例，但根据第一个示例和上例的比较不难看出，采用声明式语法编写程序会使代码更加清楚易懂。

因此，声明式编程使用简单的表达方式建立应用程序。在上面的第一个示例中，表达式的根（root）往往是一个对象分配表达式（构造器），它生成了组成程序的对象图表（object graph）。

<!---->

top

<!---->

增加动态行为

目前，我们编写的“Hello World”程序并没有动态行为。为了使用JavaFX建立一个具有动态行为的图形用户接口组件，你可以建立这样的图形用户接口：它的属性依赖于其它对象的属性值。而这些其它的对象将成为应用状态的表象（representation），即它们代表了应用的状态。由于这个GUI组件的属性依赖于其它对象的属性，因此此GUI组件将在你修改其它对象时自动地“反射”变化。在这里，这个GUI组件通常被称为视图（View），而其它对象被称为模型（Model）。下面是“Hello World”程序的模型/视图版本。

        class HelloWorldModel {
            attribute saying: String;
        }

        var model = HelloWorldModel {
            saying: "Hello World"
        };

        var win = Frame {
            title: "Hello World JavaFX"
            width: 200
			
            content: Label {
                text: bind model.saying
            }
            visible: true
        };

此程序运行结果如下图:

如果model对象的saying属性被修改为：

        model.saying = "Goodbye Cruel World!";

那么视图将自动随之改变，如下图:

这里值得注意的是：在上面的示例中，通过将JavaFX bind操作符应用于model的saying属性，从而实现了对label的text属性的初始化。在这里，bind操作符标识了增量式（incremental）更新。这意味着无论model.saying的值何时改变，label的text属性都将被更新为相同值。

在例如Buttons、CheckBoxes、TextFields这些输入部件中，处于模型属性和GUI组件属性之间的关联可以是双向的。

请考虑以下示例:

        class HelloWorldModel {
            attribute saying: String;
        }

        var model = HelloWorldModel {
            saying: "Hello World"
        };

        var win = Frame {
            title: bind "{model.saying} JavaFX"
            width: 200
            content: TextField {
                value: bind model.saying
            }
            visible: true
        };

此程序运行结果如下图:

如果你在TextField中输入其它的文字，并按下Enter，那么窗体的标题将相应地改变：

在本例中，TextField的value属性被更新为用户输入的文字（通过TextField类实现）。而与此同时，model的saying属性也被更新为相同值。因为赋值给窗体的title属性的表达式依赖于model的saying属性，因此model的saying属性的变化导致了表达式被重新求值、窗体的title属性被更新。

注意：你能够将任意组件的属性bind到一个增量式求值表达式。这种表达式将使用条件逻辑、迭代器、选择等产生任意复杂度的动态内容，而动态内容的表达式仍然保有其可声明性。

top

<!---->

学习更多的JavaFX GUI组件

本节将讨论在JavaFX语言中可用的多种不同GUI组件，并给出展示其用途的示例程序，通过比较JavaFX组件与Swing GUI组件的方式讨论它们的差异。

• Border（边框）和Layout Manager（布局管理器）
• Menu（菜单）
• Label（标签）
• Group Panel（分组面板）,Simple Label（简单标签）和TextField（文本栏）
• Button（按钮）
• ListBox（列表框）
• SplitPane（分割窗体）
• RadioButton（单选按钮）、RadioButtonMenuItem（单选按钮菜单项）、ToggleButton（开关按钮）和ButtonGroup（按钮分组）
• ComboBox（下拉选择框）
• Tree（树形）
• Table（表格）
• TextComponent（文本组件）
• Spinner（微调控制器）和Slider（滑动条）

top

<!---->

Border（边框）和Layout Manager（布局管理器）

在JavaFX语言中，使用Border和Layout Manager也采用声明的方式。每个Swing/AWT Layout Manager都被封装在一个JavaFX类中，这个类使用指定的Layout Manager来实例化JPanel。被添加到JPanel上的组件被声明为这个JavaFX类的属性。每个Swing的Border类型也同样被封装在一个JavaFX类中，这个类具有与Swing Border配置选项对应的属性。这里提供了一个使用EmptyBorder和GridPanel的简单示例。正如你所期待的那样，JavaFX的EmptyBorder对应着javax.swing.border.EmptyBorder，而GridPanel则对应着java.awt.GridLayout。

        class ButtonClickModel {
            attribute numClicks: Number;
        }

        var model = new ButtonClickModel();

        var win = Frame {
            width: 200
            content: GridPanel {
                border: EmptyBorder {
                   top: 30
                   left: 30
                   bottom: 30
                   right: 30
                }
                rows: 2
                columns: 1
                vgap: 10
                cells:
                [Button {
                     text: "I'm a button!"
                     mnemonic: I
                     action: operation() {
                         model.numClicks++;
                    }
                },
                Label {
                    text: bind "Number of button clicks: {model.numClicks}"
                }]
            }
            visible: true
        };

程序运行结果如下图：

在点击按钮多次后，将出现如下效果：

需要注意的：对Button的action和mnemonic（助记码）属性的解释将在下面给出..

 

在本例中，GridPanel被配置为单列、双行、并在行间放置10个像素的垂直间隔，而这些工作仅仅通过为columns、rows和vgap属性赋值来完成。如果你希望在列间建立一个间隔的话，GridPanel还提供hgap属性。与此同时，一个30像素宽的空白边框被设置在GridPanel的四边。

通过把button和label赋值到cells属性，我们可以在GridPanel上添加按钮和标签。GridPanel通过从其基类JPanel中增加或者删除组件的方式来对在cells属性上的插入或者删除作出回应。

JavaFX支持的其它Layout Manager也采用同样的方式。下面给出这些Layout Manager在JavaFX、Swing中的对应表格：

JavaFX部件Layout Manager

GridPanel	GridLayout
GridBagPanel	GridBagLayout
FlowPanel	FlowLayout
BorderPanel	BorderLayout
Box	BoxLayout
StackPanel	Romain Guy's StackLayout
CardPanel	CardLayout
GroupPanel	org.jdesktop.layout.GroupLayout

 

下面是JavaFX Border类和其相应的Swing Border类的对应表格：

JavaFX BorderSwing Border

EmptyBorder	EmptyBorder
LineBorder	LineBorder
BevelBorder	BevelBorder
SoftBevelBorder	SoftBevelBorder
MatteBorder	MatteBorder
TitledBorder	TitledBorder

top

<!---->

Menu（菜单）

让我们在上一个示例的基础上添加一个简单的菜单条。新代码如下：

        import java.lang.System;

        class ButtonClickModel {
            attribute numClicks: Number;
        }

        var model = new ButtonClickModel();

        Frame {
            width: 200
            menubar: MenuBar {
                 menus: Menu {
                     text: "File"
                     mnemonic: F
                     items: MenuItem {
                         text: "Exit"
                         mnemonic: X
                         accelerator: {
                             modifier: ALT
                             keyStroke: F4
                         }
                         action: operation() {
                             System.exit(0);
                         }
                     }
                 }
            }
            content: GridPanel {
                border: EmptyBorder {
                   top: 30
                   left: 30
                   bottom: 30
                   right: 30
                }
                rows: 2
                columns: 1
                vgap: 10
                cells:
                [Button {
                     text: "I'm a button!"
                     mnemonic: I
                     action: operation() {
                         model.numClicks++;
                    }
                },
                Label {
                    text: bind "Number of button clicks: {model.numClicks}"
                }]
            }
            visible: true
        }

在程序执行后，按下ALT+F组合键将出现如下情形：

正如你所见，我们通过将一个MenuBar类赋值到窗口的menubar属性建立了一个菜单条。你可以通过增加menubar的menus来为menubar增加menu。在本例中，我们只添加了一个menu，但任何能够返回Menu对象列表的表达式都能够在这里使用。

为了定义菜单，需要赋值menu的text、mnemonic、items的属性值。

正如你所认为的那样，text属性的类型是String。 mnemonic属性却是KeyStroke类型的。它的值F是KeyStroke类的一个枚举值。在JavaFX的属性初始化程序上下文中，该属性的静态类（和在Java类中的静态字段相似）的枚举值能够在没有类型名限制的情况下被访问（而在别处，你不得不把F写为F:KeyStroke）。

这里唯一的菜单项是一个MenuItem类实例，它具有值为"Exit"的text属性和值为X的mnemonic属性。而它的accelerator属性也被赋值了。注意：在声明中的类型名Accelerator被省略了。这在JavaFX中是允许的。如果类型名没有提供，该属性的静态类型将被使用，在本例中accelerator属性的静态类型是Accelerator。另外，accelerator的modifier和keyStroke属性都使用枚举值进行了初始化。

最后，MenuItem的action属性是function类型的（即指它的值为function，而非对象）。在本例中，action属性是一个内联（inline）的operation，它调用了一些Java代码。

top

<!---->

Label（标签）

JavaFX的Label class支持HTML内容。通过使用Label，你可以利用HTML和CSS建立风格化文本（styled text）和图片，它非常类似编写典型的Web应用。另外，通过使用JavaFX内嵌表达式，你能够在Swing应用中建立动态HTML内容，这就像在编写Web页面时使用JSTL或者Velocity等工具一样容易。

请阅读下面的购物卡示例：

        class Item {
            attribute id: String;
            attribute productId: String;
            attribute description: String;
            attribute inStock: Boolean;
            attribute quantity: Number;
            attribute listPrice: Number;
            attribute totalCost: Number;
        }

        attribute Item.totalCost = bind quantity*listPrice;

        class Cart {
            attribute items: Item*;
            attribute subTotal: Number;
        }

        operation sumItems(itemList:Item*) {
            var result = 0.00;
            for (item in itemList) {
                result += item.totalCost;
            }
            return result;
        }

        attribute Cart.subTotal = bind sumItems(items);

        var cart = Cart {
            items:
            [Item {
                id: "UGLY"
                productId: "D100"
                description: "BullDog"
                inStock: true
                quantity: 1
                listPrice: 97.50
            },
            Item {
                id: "BITES"
                productId: "D101"
                description: "Pit Bull"
                inStock: true
                quantity: 1
                listPrice: 127.50
            }]
        };

        Frame {
             content: Label {
                text: bind

                   "<html>
                       <h2 align='center'>Shopping Cart</h2>
                       <table align='center' border='0' bgcolor='#008800' cellspacing='2' cellpadding='5'>
                          <tr bgcolor='#cccccc'>
                             <td><b>Item ID</b></td>
                             <td><b>Product ID</b></td>
                             <td><b>Description</b></td>
                             <td><b>In Stock?</b></td>
                             <td><b>Quantity</b></td>
                             <td><b>List Price</b></td>
                             <td><b>Total Cost</b></td>
                             <td> </td>
                           </tr>

                           {
                             if (sizeof cart.items == 0)
                             then "<tr bgcolor='#FFFF88'><td colspan='8'><b>Your cart is empty.</b></td></tr>"
                             else foreach (item in cart.items)
                                 "<tr bgcolor='#FFFF88'>
                                  <td>{item.id}</td>
                                  <td>{item.productId}</td>
                                  <td>{item.description}</td>
                                  <td>{if item.inStock then "Yes" else "No"}</td>
                                  <td>{item.quantity}</td>
                                  <td align='right'>{item.listPrice}</td>
                                  <td align='right'>{item.totalCost}</td>
                                  <td> </td>
                                  </tr>"
                           }

                           <tr bgcolor='#FFFF88'>
                                <td colspan='7' align='right'>
                                   <b>Sub Total: ${cart.subTotal}</b>
                               </td>
                               <td> </td>
                            </tr>
                         </table>
                      </html>"
                }
                visible: true
        }

程序执行结果如下图：

如果你通过编程删去购物项（cart items）:

       delete cart.items;

程序将显示如下结果：

在上面的示例中，嵌入的JavaFX表达式（在代码中显示为粗体）动态地建立HTML表格行和单元格的内容。当表达式所依赖的对象发生改变时，标签的HTML内容也随之动态地更新。

上面的示例非常有趣，因为它演示了如何使用表达式来定义属性值。Item类的totalCost属性和Cart类的subTotal属性都被绑定到了计算其数值的表达式。无论何时，只要这些表达式所依赖的对象发生变化，其关联的属性值也将自动地被重新计算并更新。这让我们想到了常见的电子表格：它含有包含公式（formulas）（公式中涉及到其它单元格中的数值）的单元格；当你在其它单元格中输入数据时，那些包含此公式的表格值将被自动更新。

top

<!---->

在HTML中的图片

JavaFX的Label类实际上封装了一个特定的JEditorPane类，后者使用了一个支持利用Java类装载器（Java class loader）从JAR文件装载图片的、共享的图片缓存。这样就可以使用HTML <img>元素引用那些与应用打包在一起的图片资源。

超链接

Label类也支持HTML超链接：将指定的URL作为HTML <a>元素的href属性嵌入到label。

我们使用JavaFX #操作符来建立这样的URL。#操作符生成一个字符串化对象引用（stringified object reference），此引用指向它的操作数，而操作数又可以使用JavaFX ?操作符间接引用。可能听起来有些饶舌，我们可以在下面的讲解中慢慢理解这段话的含义。例如：

        var a = 20;
        var b = #a;
        assert b instanceof String; // passes
        var c = (Number) ?b;
        assert a == c;  // passes

Label类的HTML渲染器在HTML <a href=url>上下文中识别这样的URL，并处理鼠标在具有URL的元素上进行的点击，如果URL的值指向一个函数或者操作的话，它将调用该函数或者操作。

例如，这里使用超链接标签代替按钮来重写前面的按钮点击示例：

        class ButtonClickModel {
            attribute numClicks: Number;
        }

        var model = new ButtonClickModel();

        Frame {
            width: 200
            content: GridPanel {
                border: EmptyBorder {
                   top: 30
                   left: 30
                   bottom: 30
                   right: 30
                }
                rows: 2
                columns: 1
                vgap: 10
                cells:
                [Label {
                     text: bind
                             "<html>
                                <a href='{#(operation() {model.numClicks++;})}'>
                                    I'm a hyperlink!
                                </a>
                             </html>"
                },
                Label {
                    text: bind "Number of clicks: {model.numClicks}"
                }]

            }
            visible: true
        };

上面示例中的粗体部分建立了一个新的operation，它将增加模型的numClicks属性值。

并且这里用到了前面讲到的URL创建方式：应用#操作符来生成URL，而URL指向嵌入在HTML标识中的operation。

运行程序，显示如下：

在点击超链接两次后，程序显示变化为:

top

<!---->

Group Panel（分组面板）,Simple Label（简单标签）和TextField（文本栏）

本节将使用一个非常简单的示例讲解JavaFX的Group Panel、Simple Label和TextField类。

JavaFX GroupPanel类封装了Java.net上的GroupLayout类。GroupLayout是一个强大的布局管理器，它将面板的内容表现为平行的水平、垂直分组的集合。在JavaFX中，这些平行的分组被简单地称为Row和Column。当你声明一个GroupPanel时，你也可以针对每个水平、垂直的组件分组来声明其Row和Column对象。然后，在添加组件时便可以将相应的Row和Column对象赋值给组件的row和column属性。GroupPanel按照当前外观风格准则在组件之间自动地插入间隔。通过声明Row或者Column对象的alignment和resizable属性，你能够控制在行或者列中的组件对齐和行或者列是否可调整大小。

JavaFX TextField类封装了Swing的JFormattedTextField。它具有一个value属性，无论在焦点位于此文本框或者移到其它组件时，只要用户按下Enter，该属性值都将被更新。通过将数字赋值给它的columns，你可以控制它的宽度。而通过赋值LEADING、CENTER、TRAILING给它的horizontalAligment属性，你还可以控制它的水平对齐。TextField类具有两个值为函数的属性，它们允许你执行基于用户交互的行为：action和onChange。如果你将一个函数或者操作赋值给action属性，无论何时用户按下Enter键，此函数或者操作都会被调用。如果你将一个函数或者操作赋值给onChange属性，当文本栏的value发生变化时，这个的函数或者操作将被调用。

JavaFX SimpleLabel类封装了Swing的JLabel类。SimpleLabel与Label的不同之处在于它不支持超链接和首选大小（preferred size）。

下面显示了一个示例：

下面是示例的代码:

        class Model {
            attribute firstName: String;
            attribute lastName: String;
        }

        var model = Model {
            firstName: "Joe"
            lastName: "Smith"
        };

        Frame {
            content: GroupPanel {
                var firstNameRow = Row { alignment: BASELINE }
                var lastNameRow = Row { alignment: BASELINE }
                var labelsColumn = Column {
                    alignment: TRAILING
                }
                var fieldsColumn = Column {
                    alignment: LEADING
                    resizable: true
                }
                rows: [firstNameRow, lastNameRow]
                columns: [labelsColumn, fieldsColumn]
                content:
                [SimpleLabel {
                    row: firstNameRow
                    column: labelsColumn
                    text: "First Name:"
                },
                TextField {
                    row: firstNameRow
                    column: fieldsColumn

                    columns: 25
                    value: bind model.firstName
                },
                SimpleLabel {
                    row: lastNameRow
                    column: labelsColumn
                    text: "Last Name:"
                },
                TextField {
                    row: lastNameRow
                    column: fieldsColumn
                    columns: 25
                    value: bind model.lastName
                }]
            }
            visible: true
        };

上面的示例中关于布局的代码显示为蓝色。本示例中的布局由两行（一行用于first name，另一行用于last name）、两列（一列用于标签，另一列用于文本栏）组成。在GroupPanel的声明中，四个变量（firstNameRow、lastNameRow、labelsColumn和fieldsColumn）被声明为rows和columns属性，即将两行和两列分别赋值给GroupPanel的rows和columns属性。最后，正如你所见到的，label和TextField被赋值为GroupPanel的elements属性。从label和TextField的声明可以看出，它们的row和column也被相应地赋值。

top

<!---->

Button（按钮）

JavaFX Button类封装了Swing的JButton组件。为了讲解如何使用Button，让我们从Swing教程中重建一个简单的示例：

        class ButtonDemoModel {
            attribute buttonEnabled: Boolean;
        }

        var model = ButtonDemoModel {
            buttonEnabled: true
        };

        Frame {
            title: "ButtonDemo"
            content: FlowPanel {
                content:
                [Button {
                    text: "Disable middle button"
                    verticalTextPosition: CENTER
                    horizontalTextPosition: LEADING
                    icon: Image {
						 url: "http://java.sun.com/docs/books/tutorial/uiswing/examples/components/ButtonDemoProject/src/components/images/right.gif"
                    }
                    mnemonic: D
                    toolTipText: "Click this button to disable the middle button"
                    enabled: bind model.buttonEnabled
                    action: operation() {
                         model.buttonEnabled = false;
                    }
                },
                Button {
                    text: "Middle button"
                    icon: Image {
                        url: "http://java.sun.com/docs/books/tutorial/uiswing/examples/components/ButtonDemoProject/src/components/images/middle.gif"
                    }
                    verticalTextPosition: BOTTOM
                    horizontalTextPosition: CENTER
                    mnemonic: M
                    toolTipText: "This middle button does nothing when you click it."
                    enabled: bind model.buttonEnabled
                },
                Button {
                    text: "Enable middle button"
                    icon: Image {
                        url: "http://java.sun.com/docs/books/tutorial/uiswing/examples/components/ButtonDemoProject/src/components/images/left.gif"
                    }
                    mnemonic: E
                    toolTipText: "Click this button to enable the middle button"
                    action: operation() {
                         model.buttonEnabled = true;
                    }
                    enabled: bind not model.buttonEnabled
                }]
            }
            visible: true
        }

点击左侧按钮后，程序出现以下变化：

示例程序中共有三个button，其中每个button的enabled属性都绑定到模型对象的buttonEnabled属性。当你通过触发左侧和右侧按钮的action修改此属性时，这三个button的状态都将发生变化。

我们通过将Image对象赋值给button的icon属性为按钮增添了图片。

JavaFX Image对象具有一个url属性，你可以将一个包含了指向图片资源的URL作为其值。JavaFX具有内建的图片缓存，它支持使用Java class loader从JAR文件装载图片。因此，我们能够通过“file: URL”轻松地访问和JAR文件一起打包的图片资源。

top

<!---->

TabbedPane（页签窗体）

为了演示如何使用TabbedPane，让我们定义下面的具有TabbedPane组件相应属性的模型类：Model。

        class Model {
            attribute tabPlacement: TabPlacement;
            attribute tabLayout: TabLayout;
            attribute tabCount: Integer;
            attribute selectedTab: Integer;
        }

现在，让我们从上面的模型出发设计一个TabbedPane示例。

        var model = Model {
            tabPlacement: TOP
            tabLayout: WRAP
            selectedTab: 3
            tabCount: 5
        };

        Frame {
            height: 300
            width: 400
            content: TabbedPane {
                tabPlacement: bind model.tabPlacement
                tabLayout: bind model.tabLayout
                tabs: bind foreach (i in [1..model.tabCount])
                    Tab {
                        title: "Tab {i}"
                        toolTipText: "Tooltip {i}"
                    }
                selectedIndex: bind model.selectedTab

            }
            visible: true
        }

上面以粗体显示的代码展示了在TabbedPane和模型之间的依赖关系。在完成编码后，TabbedPane的外观将随着模型的修改而改变。

我们通过将一组Tab对象赋值给TabbedPane的tabs属性的方式将Tab添加到TabbedPane。TabPlacement和TabLayout类定义了一些枚举值（TOP、LEFT、BOTTOM、RIGHT 、WRAP、SCROLL），我们可以将这些值相应地赋值给TabbedPane的tabPlacement和tabLayout属性，从而能够控制tab的位置和布局。TabbedPane的selectedIndex属性表示了当前显示哪个tab。

程序运行如下图：

值得注意的是：在示例中第四个tab被选择了，这是因为模型的selectedTab属性被初始化为3。在本例中，TabbedPane的selectedIndex属性也随之更新，因为它被绑定到了模型的selectedTab属性上。

对模型的tabPlacement属性作出如下修改：

        model.tabPlacement = BOTTOM;

tab将移动窗体的下方：

对模型的selectedTab属性作出如下修改：

        model.selectedTab = 0;

这将导致第一个tab被选择：

对模型的tabCount属性作出如下修改：

        model.tabCount = 20;

这将导致15个新建的tab被添加到TabbedPane：

修改模型的tabLayout：

        model.tabLayout = SCROLL;

程序运行效果如下图：

修改模型的tabCount：

        model.tabCount = 2;

结果只保留了前两个tab：

top

<!---->

ListBox（列表框）

JavaFX ListBox类提供了Swing JList组件的功能，但不同的是它提供了一个声明式接口。

为了演示其用法，我们还是从Swing教程的ListDemo出发重建一个简单示例：

在这个示例中，ListBox包含一个雇员姓名列表。如果点击“Fire”按钮，被选择的雇员将从列表中移除。如果在列表下方的文本框中输入新姓名，那么“Hire”按钮将变为可用状态。如果此时按下“Hire”按钮，这个新的姓名将被添加到列表。

这个示例也演示了如何使用BorderPanel和FlowPanel。一个BorderPanel最多包括五个组件，这五个组件将被放置在面板的上方、左侧、下方、右侧或者中央。它会垂直拉伸左侧、右侧的组件，水平拉伸上方、下方的组件，而位于中央的组件将向垂直、水平两个方向伸展。FlowPanel包括了一个按照从左到右的顺序放置组件的列表，就像在段落中文本一样。而且本示例还展示了如何使用RigidArea：一种用于在其它组件之间创建空白的、不可见的填充器组件。

        class EmployeeModel {
            attribute employees: String*;
            attribute selectedEmployee: Number;
            attribute newHireName: String;
        }

        var model = EmployeeModel {
            employees:
            ["Alan Sommerer",
             "Alison Huml",
             "Kathy Walrath",
             "Lisa Friendly",
             "Mary Campione",
             "Sharon Zakhour"]
        };

        Frame {
            title: "ListBox Example"
            content: BorderPanel {
                center: ListBox {
                    selection: bind model.selectedEmployee
                    cells: bind foreach (emp in model.employees)
                        ListCell {
                           text: emp
                        }
                }
                bottom: FlowPanel {
                    content:
                    [Button {
                       text: "Fire"
                       action: operation() {
                           delete model.employees[model.selectedEmployee];
                       }
                    },
                    RigidArea {
                        width: 5
                    },
                    TextField {
                        columns: 30
                        value: bind model.newHireName
                    },
                    RigidArea {
                        width: 5
                    },
                    Button {
                        text: "Hire"
                        enabled: bind model.newHireName.length() > 0
                        action: operation() {
                            insert model.newHireName
                               after model.employees[model.selectedEmployee];
                            model.newHireName = "";
                            if (sizeof model.employees == 1) {
                                model.selectedEmployee = 0;
                            } else {
                                model.selectedEmployee++;
                            }
                        }
                    }]
                }
            }
            visible: true
        }

上面示例中的粗体代码用于创建ListBox。我们通过将一组ListCell对象赋值到ListBox的cells属性来创建ListBox。而cells就取值于模型的雇员列表。因此，当从模型中添加或者删除雇员时，相应的单元格将被添加到ListBox或者从ListBox中删除。当单元格被渲染时，你为ListCell的text属性所赋的值也将被显示出来。尽管在本示例中没有必要，但你仍然可以将一些HTML代码赋值给ListCell的text属性，从而建立一个风格化文本和（或者）图片来作为单元格的内容。

ListBox的selection属性包含了被选择单元格的索引。在本例中，它被绑定到模型的selectedEmployee属性，因此当在列表中改变被选项时，模型的selectedEmployee属性也将更新。与此同时，如果selectedEmployee属性被更新，列表的被选项也会作出相应改变。这正是示例中“Hire”按钮的action所做的。

在点击“Fire”按钮两次后，程序将改变为下图：

如果在文本栏中输入新的名字，则程序将发生改变：

接着点击“Hire”按钮：

top

<!---->

splitPane（分割窗体）

JavaFX SplitPane类基于一个自定义Java组件，而不是Swing的JSplitPane类。与JSplitPane不同的是：它能够包括多个组件。而和JSplitPane一样是：你可以通过为它所包含的组件赋值来控制它的朝向和空间的数量。让我们看看下面的示例：

这个示例由一个水平分割的窗体和两个组件组成。左侧的组件是一个ListBox，它占据了30%的空间。而右侧的组件是一个包含CenterPanel（一种含有一个位于其中央区域的组件的面板）的ScrollPane。CenterPanel包含了一个SimpleLabel，后者用于显示与被选择的列表项相关的图片。

        class ExampleModel {
            attribute imageFiles: String*;
            attribute selectedImageIndex: Number;
            attribute selectedImageUrl: String;
        }


        var model = ExampleModel {
            var: self
            imageFiles: ["Bird.gif", "Cat.gif", "Dog.gif",
                         "Rabbit.gif", "Pig.gif", "dukeWaveRed.gif",
                         "kathyCosmo.gif", "lainesTongue.gif",
                         "left.gif", "middle.gif", "right.gif",
                         "stickerface.gif"]

            selectedImageUrl: bind "http://java.sun.com/docs/books/tutorial/uiswing/examples/components/SplitPaneDemoProject/src/components/images/{self.imageFiles[self.selectedImageIndex]}"
        };

        Frame {
            title: "SplitPane Example"
            height: 400
            width: 500
            content: SplitPane {
                orientation: HORIZONTAL
                content:
                [SplitView {
                    weight: 0.30
                    content: ListBox {
                         selection: bind model.selectedImageIndex
                         cells: bind foreach (file in model.imageFiles)
                            ListCell {
                               text: bind file
                           }
                    }
                },
                SplitView {
                    weight: 0.70
                    content: ScrollPane {
                        view: CenterPanel {
                            background: white
                            content: SimpleLabel {
                                icon: Image {url: bind model.selectedImageUrl}
                            }
                        }
                    }
                }]
            }

            visible: true
        }

示例中的粗体代码是与splitPane相关的。正如你见到的那样，splitPane的orientation属性被赋值为HORIZONTAL。通过将一组SplitView对象赋值给content属性，我们便为splitPane添加了组件。每个SplitView具有两个属性：weight和content。weight属性决定了当分割窗体被调整大小时应有多少的空间分配给它（SplitView）。而你为content的赋值将显示在splitPane中。

top

<!---->

RadioButton（单选按钮）、RadioButtonMenuItem（单选按钮菜单项）、ToggleButton（开关按钮）和ButtonGroup（按钮分组）

JavaFX RadioButton类封装了Swing的JRadioButton组件。RadioButtonMenuItem类封装了Swing的JRadioButtonMenuItem组件。而ToggleButton类封装了Swing的JToggleButton组件。

在这些组件之间、以及它们与单