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而提出的系统要求。
在你开始本教程之前,你需要安装如下软件:
<!---->首先,你需要按照下面的步骤来建立你的第一个JavaFX项目。
JavaFXapp
现在,你可以在IDE中建立你的第一个JavaFX HelloWorld
程序。
HelloWord
,在Folder栏中输入src
。import javafx.ui.*; Frame { title: "Hello World JavaFX" width: 200 height: 50 content: Label { text: "Hello World" } visible: true }
现在让我们使用IDE运行第一个JavaFX程序。
HelloWorld
,点击OK。
庆贺一下吧!到此为止,你已经完成了第一个JavaFX程序!
<!---->正像我们在前一节所看到的,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程序,它和前面的代码具有相同的效果。
下面列举出在声明式方法和过程式方法中实际发生了什么:
尽管上面的代码是一个非常简单的示例,但根据第一个示例和上例的比较不难看出,采用声明式语法编写程序会使代码更加清楚易懂。
因此,声明式编程使用简单的表达方式建立应用程序。在上面的第一个示例中,表达式的根(root)往往是一个对象分配表达式(构造器),它生成了组成程序的对象图表(object graph)。
<!----> <!---->目前,我们编写的“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
到一个增量式求值表达式。这种表达式将使用条件逻辑、迭代器、选择等产生任意复杂度的动态内容,而动态内容的表达式仍然保有其可声明性。
本节将讨论在JavaFX语言中可用的多种不同GUI组件,并给出展示其用途的示例程序,通过比较JavaFX组件与Swing GUI组件的方式讨论它们的差异。
在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中的对应表格:
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类的对应表格:
EmptyBorder |
EmptyBorder |
LineBorder |
LineBorder |
BevelBorder |
BevelBorder |
SoftBevelBorder |
SoftBevelBorder |
MatteBorder |
MatteBorder |
TitledBorder |
TitledBorder |
让我们在上一个示例的基础上添加一个简单的菜单条。新代码如下:
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代码。
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)(公式中涉及到其它单元格中的数值)的单元格;当你在其它单元格中输入数据时,那些包含此公式的表格值将被自动更新。
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。
运行程序,显示如下:
在点击超链接两次后,程序显示变化为:
<!---->
本节将使用一个非常简单的示例讲解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
也被相应地赋值。
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文件一起打包的图片资源。
为了演示如何使用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:
<!---->
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”按钮:
<!---->
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中。
JavaFX RadioButton类封装了Swing的JRadioButton组件。RadioButtonMenuItem类封装了Swing的JRadioButtonMenuItem组件。而ToggleButton类封装了Swing的JToggleButton组件。
在这些组件之间、以及它们与单