JavaFX发现之旅:JavaFX Script With Eclipse 入门(第二部分)
2008-06-03 11:57
796 查看
接第一部分,本章将讨论目前JavaFX语言可用的各种GUI组件并且给出一些如何使用的示例。我们会同时对比Swing的GUI组件进行讨论。
我们将分四个章节完成GUI组件的讲解,本章要阐述的GUI组件如下:
边框和布局管理器
菜单
标签
边框和布局管理器
在JavaFX语言中,边框和布局管理器的使用同样也是声明性的。每个Swing/AWT布局管理器都被封装为一个JavaFX类,该类使用特定的布局管理器实例化一个JPanel。组件通过声明的方式使用JavaFX类提供的属性被添加到(底部的)JPanel上。每个Swing边框类型也被封装成一个属性对应与边框的配置选项的JavaFX类。以下是一个使用EmptyBorder和GridPanel的简单示例。和您猜想的一样,EmptyBorder对应于javax.swing.border.EmptyBorder,而GridPanel与java.awt.GridLayout一致。
运行程序显示如下:
点击按钮三次后显示如下:
注意:Button的action和mnemonic属性将在后面讨论...
在该示例中,通过给GridPanel的columns、rows和vgap属性赋值,GridPanel被配置为一列、两行以及行间垂直间距10像素, 如果您想在列间增加间距,GridPanel还有一个hgap属性。GridPanel的四周的被设置为30个像素大小的空边框。
按钮和标签通过将指派给cells属性来添加到面板中。GridPanel通过在其底部的JPanel添加或删除组件来实现对它的cells属性的插入或删除。
JavaFX支持的其他布局管理器原理与此类似,以下表格是这些布局管理器的概述:
下面是JavaFX边框类和其对应Swing边框类的概述:
菜单
让我们在前面的示例中加入简单的菜单,新的代码如下:
运行后,按Alt+F键,显示如下:
正如您所见的,菜单栏通过给窗口的menubar属性赋值一个MenuBar类的新示例而创建。您通过将菜单指定给菜单栏的menus属性来将它们添加到菜单栏中。在该示例中,只添加了一个菜单,但是任何返回Menu对象列表的表达式都可以被使用。
要定义菜单,它的的text、mnemonic和items属性值必须被设定。
您可能已经猜到,text属性的类型是String,而mnemonic属性是KeyStroke类型,它的值F是KeyStroke类的一个枚举实例。在JavaFX中,属性初始化属性的静态类型(和Java中的静态字段情况)的枚举值时可以不使用规范类别名直接访问(其他地方您必须使用F:KeyStroke替代F)。
一个菜单条目,一个text为“Exit“及其mnemonic为X的MenuItem被创建。它accelerator属性同样被赋了值。注意,在声明中值类型名Accelerator被省略了,这是允许的。如果没有指定类型名,将使用属性的静态类型,在示例中是Accelerator。此外,accelerator的modifier和keyStroke被初始化使用枚举值。
最后,MenuItem的action属性为function类型(例如,它是一个函数,而不是一个对象),在示例中,是一行通过调用某些已经编写的Java代码来直接退出应用的操作。
标签(Labels)
JavaFX Label类支持HTML内容。使用Label您可以使用HTML和CSS创建样式文本和图像,非常类似于典型的Web应用。此外,通过使用JavaFX嵌入表达式,您可以在Swing应用中象Web页面作者使用类似JSTL或Velocity工具一样创建动态的HTML内容。
考虑以下虚拟购物车示例:
运行以上程序,显示如下:
如果您编程删除购物车内容:
您将看到如下内容:
在以上示例中,内嵌的JavaFX表达式(粗体显示)动态创建HTML表格列和表格单元的内容。当这些表达式依赖的对象有变化时,Label的HTML内容将自动更新。
以上示例还非常有趣,因为其演示了使用表达式定义属性值的用法。Item类的totalCost属性和Cart类的subTotal属性被绑定为表达式以计算它们的值。任何时候这些表达式的依赖对象发生变化,属性值将被自动重新计算并更新。考虑在电子表格中,某些单元格包含指向其他单元格的表达式,当您在这些其他单元格输入数据,包含依赖它们的表达式的单元格值也被自动更新了。
HTML中的图像
JavaFX Label类实际上封装了一个特殊的JEditPane,该JEditorPane使用一个支持用Java类转载器从JAR文件中载入图像的共享图像缓存。因此,您可以就像普通的文件URL一样使用HTML的<img>元素引用您的应用的图像资源包。
超链接
Label类同样支持HTML超链接,内嵌一个特殊的URL给HTML<a>元素的href属性。
这样的URL使用JavaFX #操作符创建,该操作符生成一个字符串化对象引用(Stringified Object Reference)指向后续可以被JavaFX复引用的操作对象。?操作符,例如:
Label类的HTML显示器认识诸如HTML的<a href=url>这样的URL,使用URL来响应元素的鼠标点击,并且如果URL值指向一个函数或操作的话,它可以调用该函数或操作。
例如,以下是使用带超链接标签代替按钮的前面按钮点击示例的重写版本:
以上示例中粗体的表达式创建一个新的递增model的numClicks属性的操作。使用#操作符生成后续将被键入到HTML标记中的指向该操作的URL。
运行该程序,显示如下:
点击超链接两次后,显示如下:
未完,待续...
作者 feiy,
我们将分四个章节完成GUI组件的讲解,本章要阐述的GUI组件如下:
边框和布局管理器
菜单
标签
边框和布局管理器
在JavaFX语言中,边框和布局管理器的使用同样也是声明性的。每个Swing/AWT布局管理器都被封装为一个JavaFX类,该类使用特定的布局管理器实例化一个JPanel。组件通过声明的方式使用JavaFX类提供的属性被添加到(底部的)JPanel上。每个Swing边框类型也被封装成一个属性对应与边框的配置选项的JavaFX类。以下是一个使用EmptyBorder和GridPanel的简单示例。和您猜想的一样,EmptyBorder对应于javax.swing.border.EmptyBorder,而GridPanel与java.awt.GridLayout一致。
import javafx.ui.*; class ButtonClickModel { attribute numClicks: Number; } var model = new ButtonClickModel(); var win = Frame { width: 300 height: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的columns、rows和vgap属性赋值,GridPanel被配置为一列、两行以及行间垂直间距10像素, 如果您想在列间增加间距,GridPanel还有一个hgap属性。GridPanel的四周的被设置为30个像素大小的空边框。
按钮和标签通过将指派给cells属性来添加到面板中。GridPanel通过在其底部的JPanel添加或删除组件来实现对它的cells属性的插入或删除。
JavaFX支持的其他布局管理器原理与此类似,以下表格是这些布局管理器的概述:
JavaFX Widget | 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 |
EmptyBorder | EmptyBorder |
LineBorder | LineBorder |
BevelBorder | BevelBorder |
SoftBevelBorder | SoftBevelBorder |
MatteBorder | MatteBorder |
TitledBorder | TitledBorder |
让我们在前面的示例中加入简单的菜单,新的代码如下:
import javafx.ui.*; import java.lang.System; class ButtonClickModel { attribute numClicks: Number; } var model = new ButtonClickModel(); var win = Frame { width: 300 height: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类的新示例而创建。您通过将菜单指定给菜单栏的menus属性来将它们添加到菜单栏中。在该示例中,只添加了一个菜单,但是任何返回Menu对象列表的表达式都可以被使用。
要定义菜单,它的的text、mnemonic和items属性值必须被设定。
您可能已经猜到,text属性的类型是String,而mnemonic属性是KeyStroke类型,它的值F是KeyStroke类的一个枚举实例。在JavaFX中,属性初始化属性的静态类型(和Java中的静态字段情况)的枚举值时可以不使用规范类别名直接访问(其他地方您必须使用F:KeyStroke替代F)。
一个菜单条目,一个text为“Exit“及其mnemonic为X的MenuItem被创建。它accelerator属性同样被赋了值。注意,在声明中值类型名Accelerator被省略了,这是允许的。如果没有指定类型名,将使用属性的静态类型,在示例中是Accelerator。此外,accelerator的modifier和keyStroke被初始化使用枚举值。
最后,MenuItem的action属性为function类型(例如,它是一个函数,而不是一个对象),在示例中,是一行通过调用某些已经编写的Java代码来直接退出应用的操作。
标签(Labels)
JavaFX Label类支持HTML内容。使用Label您可以使用HTML和CSS创建样式文本和图像,非常类似于典型的Web应用。此外,通过使用JavaFX嵌入表达式,您可以在Swing应用中象Web页面作者使用类似JSTL或Velocity工具一样创建动态的HTML内容。
考虑以下虚拟购物车示例:
import javafx.ui.*; 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 }
运行以上程序,显示如下:
如果您编程删除购物车内容:
delete cart.items;
您将看到如下内容:
在以上示例中,内嵌的JavaFX表达式(粗体显示)动态创建HTML表格列和表格单元的内容。当这些表达式依赖的对象有变化时,Label的HTML内容将自动更新。
以上示例还非常有趣,因为其演示了使用表达式定义属性值的用法。Item类的totalCost属性和Cart类的subTotal属性被绑定为表达式以计算它们的值。任何时候这些表达式的依赖对象发生变化,属性值将被自动重新计算并更新。考虑在电子表格中,某些单元格包含指向其他单元格的表达式,当您在这些其他单元格输入数据,包含依赖它们的表达式的单元格值也被自动更新了。
HTML中的图像
JavaFX Label类实际上封装了一个特殊的JEditPane,该JEditorPane使用一个支持用Java类转载器从JAR文件中载入图像的共享图像缓存。因此,您可以就像普通的文件URL一样使用HTML的<img>元素引用您的应用的图像资源包。
超链接
Label类同样支持HTML超链接,内嵌一个特殊的URL给HTML<a>元素的href属性。
这样的URL使用JavaFX #操作符创建,该操作符生成一个字符串化对象引用(Stringified Object Reference)指向后续可以被JavaFX复引用的操作对象。?操作符,例如:
var a = 20; var b = #a; assert b instanceof String; // 通过 var c = (Number) ?b; assert a == c; // 通过
Label类的HTML显示器认识诸如HTML的<a href=url>这样的URL,使用URL来响应元素的鼠标点击,并且如果URL值指向一个函数或操作的话,它可以调用该函数或操作。
例如,以下是使用带超链接标签代替按钮的前面按钮点击示例的重写版本:
import javafx.ui.*; import java.lang.System; class ButtonClickModel { attribute numClicks: Number; } var model = new ButtonClickModel(); var win = Frame { width: 300 height: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: [Label { text: bind "<html> <a href='{#(operation() {model.numClicks++;})}'> I'm a hyperlink! </a> </html>" }, Label { text: bind "Number of button clicks: {model.numClicks}" }] } visible: true };
以上示例中粗体的表达式创建一个新的递增model的numClicks属性的操作。使用#操作符生成后续将被键入到HTML标记中的指向该操作的URL。
运行该程序,显示如下:
点击超链接两次后,显示如下:
未完,待续...
作者 feiy,
相关文章推荐
- JavaFX发现之旅:JavaFX Script With Eclipse 入门(第二部分)
- JavaFX发现之旅:JavaFX Script With Eclipse 入门(第二部分)
- JavaFX发现之旅:JavaFX Script With Eclipse 入门(第二部分)
- JavaFX发现之旅 JavaFX Script With Eclipse 入门(第三部分)
- JavaFX发现之旅:JavaFX Script With Eclipse 入门
- JavaFX发现之旅:JavaFX Script With Eclipse 入门
- JavaFX发现之旅:JavaFX Script With Eclipse 入门
- JavaFX发现之旅:JavaFX Script With Eclipse 入门(第一部分)
- JavaFX Script With Eclipse 入门
- JavaFX发现之旅:JavaFX Script With Eclipse 入门(第一部分)
- 学习JavaFX Script,第二部分:使用RMI进行远程通信
- JavaFX入门(三):使用Eclipse开发JavaFX程序
- WMI脚本编程入门 第二部分
- 【第二部分-图像处理】第1章 Opencv图像处理入门
- JavaFx Script 再Eclipse下安装
- Spring Cloud构建企业级总线-第二部分服务注册与发现
- WMI 脚本入门:第二部分 (MSDN)
- 学习JavaFX Script,第三部分:使用JAX-WS进行客户端-服务器通信
- ReactiveCocoa入门教程:第二部分
- 第二部分:学习与知识发现 (任选一题)