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 编译器。可通过以下步骤实现。注意:必须使用 JRE 5 或更高版本 编译和运行 JavaFX Script 程序。
- 下载 最新版本的编译器。
- 将
archive.zip
文件解压缩到系统中的一个目录。 - 设置
PATH
环境变量,使其包含解压缩archive.zip
文件时使用的目录的archive/openjfx-compiler/dist/bin
子目录。
由于程序使用了一个 package
语句,源代码必须位于目录名和包名相同的目录中。将程序保存到 mypackage
目录中名为 HelloCompiledJavaFX.fx
的文件中。要编译这个程序,将当前目录设置为 mypackage
目录并执行 javafxc
命令脚本,输入以下命令:
javafxc HelloCompiledJavaFX.fx |
要运行程序,访问保存包的目录,并输入以下命令:
javafx mypackage.HelloCompiledJavaFX |
图 1 展示了将出现的窗口。
|
激活 Click Me 按钮后,应该可以看到如图 2 所示的对话框。
|
代码示例 1 展示了这个简单 JavaFX Script 程序的源代码。
/* |
让我们仔细检验一下这段源代码。
和 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 { |
这些代码创建了 JavaFX Font
类的实例并将值 Sans Serif
分配给新 Font
实例的 faceName
属性。它还将 FontStyle.BOLD
常量(静态属性)的值分配给 style
属性,将 24
分配给 size
属性。注意,每个属性名后都紧跟一个冒号 (:
),这在 JavaFX 声明性语法中表示 “将右侧的表达式值分配给左侧的属性”。这些概念对于这个程序中的其他类也是同样的道理:Frame
、BorderPanel
、FlowPanel
、Button
、MessageDialog
、Canvas
和 Text
。让我们分别查看一下这些类。
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, |
另外,您还可以选择使用单引号将 String
字符括起。
JavaFX Script 的一个令人瞩目的特性就是它能够使用简单的声明性代码表示一个 GUI 以及其中的布局。这是因为 JavaFX Script 使用了布局部件(一些 UI 组件),而不会要求您创建布局管理器的实例并将其与 UI 组件相关联,后者正是 Java 技术的做法。图 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 { |
当用户激活这个按钮时,将调用分配给 action
属性的匿名函数,在本例中这样做将创建一个 MessageDialog
类的实例。由于 visible
属性为真,新的 MessageDialog
实例将显示在屏幕中,并具有相应的标题和消息,如图 4 所示,为方便起见,它重复了图 1 的屏幕截图:
|
|
注意,对话框中的消息被分为两行显示,这是由将消息分配给属性的方式决定的,如 创建字符串字符 一节所述。
现在查看与 Canvas
有关的代码,需要注意 Canvas
被分配给 BorderPanel
的中心区域。您在前面已经看到,声明性代码用于在 UI 包含结构中表示部件。现在将使用声明性代码在 Canvas
中绘制 2D 图形。您将使用 Text
类在 Canvas
上绘制文本,这是 JavaFX Script 提供的一个 2D 图形类。x
和 y
属性表示文本的左上角的显示位置,以像素为单位。Text
类的 content
属性包含将要绘制的字符串,而 font
属性指定将要绘制的文本的外观。
Canvas { |
最后,在前面的代码片段中,在定义应用程序 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 专家”的 博客 上发表文章。