使用经过编译的 JavaFX Script 技术创建富 Internet 应用程序

By James L. Weaver, 2/29/08

JavaFX 系列技术目前包含两种产品：JavaFX Script 和 JavaFX Mobile 平台。后者是面向移动电话和其他移动设备的平台。本系列的 18 篇文章主要关注 JavaFX Script 编程语言，
这是一种简单而优雅的脚本编制语言，充分利用了 Java 平台的强大功能。进一步来讲，这些系列文章涵盖了经过编译的 JavaFX
Script，它经历了完整的开发周期。您可能已经了解到 JavaFX Script 有一个经过解释的版本，它实质上充当编译后版本的原型
JavaFX Script 是静态类型并且完全面向对象。

您将看到，使用 JavaFX Script 可以轻松地开发响应性的富图形用户界面（GUI）。它的一部分魅力在于，即使开发人员不具备深入的编程知识，他们也能够开发出图形内容来构成令人称奇的用户界面（UI）。

Java SE 6 Update N 是 Java Platform, Standard Edition 6 (Java SE 6) 的一些更新的名称，通常简写为 6uN，它实现了最新版 JVM* 的部署，并显著加快了 Java applets 和应用程序的启动速度。再加上 JavaFX Script 被编译为 JVM 字节码，因此可以为我们提供可快速部署、快速执行的图形化富客户机。

现在，您已经基本了解了 JavaFX 技术和 Java SE 6 Update N 的含义，让我们来查看一些经过编译的 JavaFX
Script 代码，这些代码要比典型的 Hello World 程序稍微复杂一些。通过这些代码，您将可以体验到创建包含 UI 组件和 2D
图形的经过编译的 JavaFX 程序是多么简单。下一小节将展示如何编译和运行示例程序。

目录

-	获取 JavaFX Script 编译器
-	编译并运行 HelloCompiledJavaFX 程序
-	理解 HelloCompiledJavaFX 应用程序代码
-	定义用户界面的声明性代码
-	使用 Frame 类
-	创建字符串字符
-	使用布局部件
-	处理事件并显示消息对话框
-	在画布上绘制
-	定义字体
-	结束语
-	更多信息

获取 JavaFX Script 编译器

在编译和运行 JavaFX Script 程序之前，首先需要获取最新版本的 JavaFX 编译器。可通过以下步骤实现。注意：必须使用 JRE 5 或更高版本 编译和运行 JavaFX Script 程序。

下载 最新版本的编译器。
将

archive.zip

文件解压缩到系统中的一个目录。
设置

PATH

环境变量，使其包含解压缩

archive.zip

文件时使用的目录的

archive/openjfx-compiler/dist/bin

子目录。

编译并运行 HelloCompiledJavaFX 程序

由于程序使用了一个

package

语句，源代码必须位于目录名和包名相同的目录中。将程序保存到

mypackage

目录中名为

HelloCompiledJavaFX.fx

的文件中。要编译这个程序，将当前目录设置为

mypackage

目录并执行

javafxc

命令脚本，输入以下命令：

javafxc HelloCompiledJavaFX.fx

要运行程序，访问保存包的目录，并输入以下命令：

javafx mypackage.HelloCompiledJavaFX

图 1 展示了将出现的窗口。

图 1：应用程序的主窗口

激活 Click Me 按钮后，应该可以看到如图 2 所示的对话框。

图 2：消息对话框

代码示例 1 展示了这个简单 JavaFX Script 程序的源代码。

代码示例 1

/* * HelloCompiledJavaFX.fx - A "Hello World" style, but slightly more * sophisticated, compiled JavaFX Script example * * Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com) * to serve as a compiled JavaFX Script example. */ package mypackage; import javafx.ui.*; import javafx.ui.canvas.*; Frame { title: "Hello Rich Internet Applications!" width: 550 height: 200 background: Color.WHITE visible: true content: BorderPanel { top: FlowPanel { content: Button { text: "Click Me" action: function():Void { MessageDialog { title: "JavaFX Script Rocks!" // This string has a newline in the source code message: "JavaFX Script is Simple, Elegant, and Leverages the Power of Java" visible: true } } } } center: Canvas { content: Text { font: Font { faceName: "Sans Serif" style: FontStyle.BOLD size: 24 } x: 20 y: 40 stroke: Color.BLUE fill: Color.BLUE content: "JavaFX Script Makes RIA Development Easy" } } } }

让我们仔细检验一下这段源代码。

理解 HelloCompiledJavaFX 应用程序代码

和 Java 编程语言一样，JavaFX 技术包含两种类型的注释：多行注释和单行注释。

多行注释 的开头是两个

/*

字符，并使用相同的两个字符结束，但是顺序相反（

*/

）。开始字符和结束字符之间的任何内容都将忽略掉。代码示例 1 的开始部分展示了一个多行注释的例子。
单行注释 以两个

//

字符开始，这两个字符后的所有内容都将被忽略。示例代码 1 在接近中间的部分展示了一个单行注释的例子，为方便查看，下面再一次展示了这个例子：

// This string has a  newline in the source code.

和 Java 技术相同，package 声明类似文件系统中的文件夹。它提供了一种按照逻辑组织应用程序的源代码文件的方法。本例中的包为

mypackage

，它表示

HelloCompiledJavaFX.fx

源代码位于名为

mypackage

的文件夹中。包名可能由多个节点组成。例如，

com.sun.foo

这个包名表示源代码文件位于名为

foo

的文件夹中，后者位于名为

sun

的文件夹，而

sun

文件夹又位于 com 文件夹中。注意，包名通常以开发该应用程序的公司或组织的域名开头 —— 使用相反的顺序，以顶级域名开头，例如

com

或

org

。包的声明为可选内容，除了最平常的应用程序以外，其他程序应该使用包声明，这是一项最佳实践。如果使用包声明，那么包声明语句必须位于源代码的顶部，并且不能包含空白和注释。

继续利用您的 Java 编程语言知识，您将看到 JavaFX Script 语言也包含了 import 语句。JavaFX 程序通常使用由 JavaFX 代码（以及一些 Java 代码）组成的库。在本例中，每个导入语句表示某些 JavaFX 类的位置或包，

HelloCompiledJavaFX.fx

文件其余部分的代码将依赖这些类把部件和图形输出到屏幕。导入语句可以使用星号 (*) 作为结束，表示程序可能使用了包中的任何一个类。一个替代方法是具体指定正在使用的每个类，如下面的示例所示：

import javafx.ui.Frame;

除了最平常的应用程序外，其他应用程序都应该通过

package

声明组织它们的源代码。对于具有不同

package

语句的源代码文件，将使用

import

语句表示包含在其中的类的使用。

定义用户界面的声明性代码

JavaFX
技术的一个令人兴奋的特性就是它能够以一种简单、一致、强大的声明性语法表示图形化用户界面（GUI）。声明性编程由单一的表达式组成，而过程性编程由多
个连续执行的表达式组成。JavaFX Script 同时支持这两种类型的编程，但是，在任何可能的情况下使用声明性语法是一项最佳实践。

代码示例 1 中的多数示例应用程序都是声明性的：由单个表达式组成。声明性表达式首先定义一个

Frame

对象，后跟一个打开的花括号，在程序的最后一行以一个匹配的花括号结束。中间嵌套的内容是

Frame

对象的属性，包括分配了

BorderPanel

布局组件的

content

属性，

BorderPanel

是由 Java 平台的

BorderLayout

管理的一个 GUI 组件。content 属性中嵌套了

BorderPanel

部件的

top

和

center

属性，这两个属性分别分配了一个

FlowPanel

布局部件和一个

Canvas

部件。这种嵌套将一直继续下去，直到完全表达了 UI 的包含结构。

声明性代码将自动创建表达式中的每个 JavaFX 类的实例 —— 也称为对象。它还向新实例的属性分配值。例如，查看创建 Font 类实例的代码：

Font { faceName: "Sans Serif" style: FontStyle.BOLD size: 24 }

这些代码创建了 JavaFX

Font

类的实例并将值

Sans Serif

分配给新

Font

实例的

faceName

属性。它还将

FontStyle.BOLD

常量（静态属性）的值分配给

style

属性，将

24

分配给

size

属性。注意，每个属性名后都紧跟一个冒号 (

:

)，这在 JavaFX 声明性语法中表示 “将右侧的表达式值分配给左侧的属性”。这些概念对于这个程序中的其他类也是同样的道理：

Frame

、

BorderPanel

、

FlowPanel

、

Button

、

MessageDialog

、

Canvas

和

Text

。让我们分别查看一下这些类。

使用 Frame 类

Frame

表示一个 GUI 窗口，它具有自己的边界并且可以在其中包含其他的 GUI 组件。

与大多数类一样，

Frame

类具有一组属性。如代码示例 1 所示，

Frame

部件的属性集包含以下几种：

title

显示在窗口的标题栏。

height

和

width

属性以像素为单位，可以确定窗口的初始大小。

background

属性指定

Frame

的背景颜色。

visible

属性控制

Frame

对象是否显示在屏幕中。

content

属性定义

Frame

对象的内容。在本例中，

Frame

对象将包含一个

BorderPanel

布局部件，后者又包含了其他部件。

创建字符串字符

JavaFX 技术提供了若干数据类型，其中之一就是

String

，它由零个或多个字符串组成。如下面的

Frame

对象的

title

属性所示，

String

字符的定义方式为使用双引号将一组字符括起：

title: "Hello Rich Internet Applications!"

要向字符串嵌入换行符，只需要在新行中继续字符串即可，下面来自示例中的代码显示了这一点：

message: "JavaFX Script is Simple, Elegant, and Leverages the Power of Java"

另外，您还可以选择使用单引号将

String

字符括起。

使用布局部件

JavaFX Script 的一个令人瞩目的特性就是它能够使用简单的声明性代码表示一个 GUI 以及其中的布局。这是因为 JavaFX
Script 使用了布局部件（一些 UI 组件），而不会要求您创建布局管理器的实例并将其与 UI 组件相关联，后者正是 Java
技术的做法。图 3 演示了这个应用程序中使用的布局策略。

图 3：确定了布局部件的主窗口

比较图 3 与代码示例 1 中的源代码，您将发现使用 JavaFX 技术定义复杂的跨平台 UI 是多么简单。

BorderPanel

布局部件的行为与由 Java

BorderLayout

管理器管理的 Java UI 容器的行为相同：UI 部件可以关联到

top

、

left

、

right

、

bottom

和

center

属性。上、下、左、右区域只会占用放置各自部件所需的空间，而中心区域则占有剩余的空间。与 Java

BorderLayout

管理器相同，放置在

BorderPanel

中的部件将被放大到适合所放置区域的大小。

类似地，

FlowPanel

与 Java

FlowLayout

管理下的 Java UI 容器的行为相同：它允许其中的部件从左侧移动到右侧，如果需要的话还可以包含在

FlowPanel

内。与 Java

FlowLayout

管理器相同，放置在

FlowPanel

中的部件将保持它们的默认大小，而不会向

BorderPanel

中的部件那样被放大。

处理事件并显示消息对话框

看一下下面的这个声明性代码块，它首先对

Button

类进行实例化：

Button { text: "Click Me" action: function():Void { MessageDialog { title: "JavaFX Script Rocks!" // This string has a newline in the source code message: "JavaFX Script is Simple, Elegant, and Leverages the Power of Java" visible: true } } }

当用户激活这个按钮时，将调用分配给

action

属性的匿名函数，在本例中这样做将创建一个

MessageDialog

类的实例。由于

visible

属性为真，新的

MessageDialog

实例将显示在屏幕中，并具有相应的标题和消息，如图 4 所示，为方便起见，它重复了图 1 的屏幕截图：

图 3：确定了布局部件的主窗口

图 4：消息对话框

注意，对话框中的消息被分为两行显示，这是由将消息分配给属性的方式决定的，如 创建字符串字符 一节所述。

在画布上绘制

现在查看与

Canvas

有关的代码，需要注意

Canvas

被分配给

BorderPanel

的中心区域。您在前面已经看到，声明性代码用于在 UI 包含结构中表示部件。现在将使用声明性代码在

Canvas

中绘制 2D 图形。您将使用

Text

类在

Canvas

上绘制文本，这是 JavaFX Script 提供的一个 2D 图形类。

x

和

y

属性表示文本的左上角的显示位置，以像素为单位。

Text

类的

content

属性包含将要绘制的字符串，而

font

属性指定将要绘制的文本的外观。

Canvas { content: Text { font: Font { faceName: "Sans Serif" style: FontStyle.BOLD size: 24 } x: 20 y: 40 stroke: Color.BLUE fill: Color.BLUE content: "JavaFX Script Makes RIA Development Easy" } }

定义字体

最后，在前面的代码片段中，在定义应用程序 UI 的声明性脚本的最内层，您会看到一个

Font

类。该类用于指定

Text

对象的外观特征，将使用到

faceName

、

style

和

size

属性。

结束语

在本文中，您学习了以下内容：

JavaFX Script 可以轻松地开发响应性的跨平台富 GUI，而 Java SE 6 Update N 将解决跨平台问题并提高部署速度。
JavaFX Script 使您能够通过简单的声明性语法表示复杂的跨平台 GUI。您可以轻松地表示 GUI 部件、布局部件和 2D 图形。
JavaFX Script 是静态类型并且完全面向对象。
JavaFX Script 注释以及

package

和

import

语句与 Java 编程语言完全相同。
分配给属性的匿名函数负责处理事件，如

Button

类的

action

属性所示。
可以下载并使用最新版的 JavaFX Script 编译器编译并运行您的 JavaFX Script 程序。

* 在本网站中，术语 Java 虚拟机或 JVM 表示 Java 平台上的虚拟机。

更多信息

JavaFX Technology at a Glance
Java SE 6 Update N Early Access
Java SE 6 Update N New Plug-In
Java SE 6 Update N Java Quick Starter (JQS)
下载 JRE 5 或更高版本
下载 最新的编译器版本
James Weaver 的博客将帮助您成为 JavaFXpert

关于作者

James L. (Jim) Weaver 是 LAT, Inc. 的 CTO 并且是一名 Java Champion。他是一名作家、演讲家，并且提供 Java 和 JavaFX 技术方面的培训和咨询服务。他的最新著作是 JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-Side Applications。他还经常在一个致力于帮助读者成为“JavaFX 专家”的 博客 上发表文章。