![关闭 [x]](http://dw1.s81c.com/i/c.gif){kind=small}
JavaFX 是一个基于 Java 的平台，用于构建可以在桌面和移动模拟器上运行的富互联网应用程序（Rich Internet Applications，RIA）。使用 JavaFX 构建的应用程序是基于 Java 字节码的，因此可以运行在任何带有 Java 运行时环境的桌面和任何装有 Java2 ME 的移动设备上。JavaFX 使 GUI 变得十分简单；它使用声明性语法并提供动画支持。
在本文中，学习如何开始使用 JavaFX 来构建 RIA。下载和安装 JavaFX SDK、安装 JavaFX Eclipse 插件、通过创建样例应用程序探索 JavaFX 的基本功能。
下载 本文中使用的 Login Application 和 Animated Circle 示例的源代码。
按照下列步骤下载和安装 JavaFX SDK 和 JavaFX Eclipse 插件。
- 下载最新版 JavaFX，一个用于 Windows 的 SDK 安装文件，扩展名为 “.exe”。下载完成之后，双击 “.exe” 运行安装文件。
- 完成安装向导中的步骤。
Windows 的默认安装路径是 C:\Program Files\JavaFX\javafx-sdk-version。
- 启动 Eclipse IDE。提供一个工作区名，比如 C:/workspace/jfx_projects。
- 选择 Help > Install New Software。
- 在弹出的安装对话框中单击 Add。
- 如 图 1 所示，在 Name 中输入
JavaFX Plugin Site、在 Location 中输入http://javafx.com/downloads/eclipse-plugin/作为插件的安装路径。
图 1. 添加 JavaFX Plug-in Site
单击 OK。
- 检查需要安装的 JavaFX 特性，如 图 2 所示。
图 2. 检查应安装的 JavaFX 特性
单击 Next。
- JavaFX 特性版本在 Install Details 对话框中显示，单击 Next。
- 接受许可协议条款，然后单击 Finish。
- 成功安装插件后，出现提示时重启 Eclipse 工作台。
如果您是在非默认路径下安装 JavaFX SDK，需要提示设置 JAVAFX_HOME 变量，如 图 3 所示。您可能也需要创建一个名为 JAVAFX_HOME 的类路径变量，如果 Eclipse 插件安装时没有创建的话，并将其指向 JavaFX 安装路径。
图 3. 设置 JAVAFX_HOME 类路径变量
在本小节，构建一个样例 JavaFX 应用程序来依据用户密码验证用户，如果他们提供了所需的信息，可以允许登录系统。授权成功完成之后，用户将可以看到一个 Welcome 屏幕。如果授权不成功，在 Eclipse Console 视图中将出现一个消息提供失败详情。您可以使用 JavaFX 的 Swing 组件来构建登录界面。您可以 下载 源代码构建 Login 应用程序。
- 创建一个新 JavaFX 项目。单击 File > New > Project >
JavaFX > JavaFX project，如 图
4 所示。
图 4. 创建一个新 JavaFX 项目
单击 Next。
- 输入
LoginApp作为项目名。选择 Desktop 配置文件。这些选项在 图 5 中显示。
图 5. 配置 JavaFX 项目
单击 Finish。
- 在 LoginApp 项目中创建一个名为 com.sample.login 的包。
- 右键单击该包并选择 New > Empty JavaFX Script。
- 输入名称
Main，然后单击 Finish。 - 您需要为您的示例应用程序声明几个变量，如 清单 1 所示，您需要一个名为
login的布尔变量，来维护用户的登录状态（无论最后一次登录是否成功）。声明字符串变量username来保存用户输入的用户名。还有一个硬编码的系统用户test， 它只能登录我们的应用程序。
清单 1. 全局变量声明var login = false; var userName = ""; var systemUser = "test";
- 在 Snippets 窗口，选择 Applications 选项卡来进行扩展。
- 选择 Stage 对象并将其拖拽到源编辑器，如 图 6 所示。Stage 是最高级别的容器，用于保存用户界面 JavaFX 对象。
图 6. 将 Stage 对象拖拽到编辑器中
- 通过输入
Login App编辑将要显示的标题，如 图 7 所示。高度和宽度都设置为300。
图 7. 配置 Stage 对象
单击 Insert，为 Stage 添加一个
Scene元素。Scene元素像一个绘画平台或表面，用于显示图形化元素。它有一个content变量，保存子元素。 - 用一个导入语句向
Scene添加一个javafx.scene.Group元素，如 清单 2 所示。该组看起来像您所创建的其余组件的一个容器。
清单 2. 导入 group 类import javafx.scene.Group;
- 向 content 元素添加
group元素，如 清单 3 所示。
清单 3. 在 content 中添加 groupcontent: [ Group { } ]
- 开始向父元素组中添加子控件。首先，通过导入
SwingLabel添加一个标签，如 清单 4 所示。
清单 4. 导入 SwingLabel 类import javafx.ext.swing.SwingLabel;
向组的content元素中添加下列代码，如 清单 5 所示。
清单 5. 向 group 中添加 SwingLabelcontent : [ SwingLabel { text : "User Name :"; } ]
- 添加一个文本字段控件，用来接收用户输入，导入
SwingTextField类，如 清单 6 所示。
清单 6. 变量声明import javafx.ext.swing.SwingTextField;
在添加的文本字段中突出显示代码，如 清单 7 所示。
清单 7. 向 group 中添加 SwingTextFieldSwingLabel { text : "User Name :"; }, SwingTextField { text : bind userName with inverse; columns : 10; editable : true; layoutX : 30; layoutY : 20; borderless : false; selectOnFocus : true; }
- 添加一个调用操作来验证输入的用户名的按钮。如果用户名和系统用户匹配，那么用户成功登录系统。使用 清单 8 中的导入语句导入 JavaFX
SwingButton。
清单 8. 导入 SwingButton 类import javafx.ext.swing.SwingButton;
添加 清单 9 所示的代码，来包含位于 Text 字段下方的按钮。
清单 9. 向组中添加 SwingButtonSwingButton{ translateX: 50 translateY: 50 text: "Submit" action: function(){ if((userName != systemUser)) { println("Invalid UserName"); } login = (userName == systemUser); } }
- 清单 9 中的
action功能检查输入的userName是否和系统用户名一致。如果不是，示例打印出错误消息，否则，结果被存储在登录布尔变量中。到目前为止，您已经解决了登录时出错的状况。您需要使用登录变量就可直接成功登录。这需要一个
if-else语句。添加if-else子句，并在else子句中先添加一个空的组，其中带有一个 content 对象。添加高亮显示的代码，如 清单 10 所示。
清单 10. 添加if-else子句content: bind if(not login)Group { content: [ SwingLabel{ text: "User Name:" }, SwingTextField { text : bind userName with inverse; columns : 10; editable : true; layoutX : 30; layoutY : 20; }, SwingButton{ translateX: 50 translateY: 50 text: "Submit" action: function(){ if((userName != systemUser)) { println("Invalid UserName"); } login = (userName == systemUser); } } ] } else Group{ content: [ ] }
- 最后，添加一些文本来显示成功登录消息，并添加一个退出按钮，使用户可以返回到登录界面。导入
Text类，如 清单 11 所示。
清单 11. 导入Text类import javafx.scene.text.Text;
将 清单 12 所示的代码添加到您之前添加的else子句组元素的 content 的正文中。
清单 12. 将 Text 类和 SwingButton 添加到 else 组中Text { x: 10 y: 30 content: "You have successfully logged in." }, SwingButton{ translateX: 10 translateY: 50 text: "Log out" action: function(){ userName = ""; login = false; } }
完整代码如 清单 13 所示。
清单 13. LoginApp 示例代码
package com.sample.login;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Group;
import javafx.scene.text.Text;
import javafx.ext.swing.SwingLabel;
import javafx.ext.swing.SwingTextField;
import javafx.ext.swing.SwingButton;
var login = false;
var userName = "";
var systemUser = "test";
Stage {
title : "Login App"
scene: Scene {
width: 300
height: 300
content: bind if(not login) Group{
content: [
SwingLabel{
text: "User Name:"
},
SwingTextField {
text : bind userName with inverse;
columns : 10;
editable : true;
layoutX : 30;
layoutY : 20;
},
SwingButton{
translateX: 50
translateY: 50
text: "Submit"
action: function(){
if((userName != systemUser)) {
println("Invalid UserName");
}
login = (userName == systemUser);
}
}
]
}
else Group{
content: [
Text {
x: 10 y: 30
content: "You have successfully logged in."
},
SwingButton{
translateX: 10
translateY: 50
text: "Log out"
action: function(){
userName = "";
login = false;
}
}
]
}
}
}
|
在这一小节中，您将测试示例 Login 应用程序。保存到目前为止所做的修改。
- 右键单击 Main.fx 文件，并选择 Run As > JavaFX
application。保持默认配置设置并单击 Run。打开一个新窗口，其中含有 Login Application，如 图 8 所示。
图 8. Login Application
- 输入
abc然后单击 Submit。登录失败，因此您可以看到在控制台上记录的错误信息。 - 输入
test然后单击 Submit。系统接受这个用户名，登录成功，如 图 9 所示。
图 9. 成功登录
上面创建的 LoginApp 使用 Desktop 配置文件。本小节中创建一个应用程序，使用一个 Mobile 配置文件并在移动模拟器上运行。本例探索如何创建动画图形。您还将呈现一个圆形区域，其不透明度在不同时间段不断变化。
- 创建一个新 JavaFX 项目。单击 File > New > Project > JavaFX > JavaFX project。
- 输入 Project 名
AnimatedCircle，如 图 10 所示。选择 Mobile 配置文件。
图 10. Login Application
单击 Finish。
- 创建一个名为 com.sample.animation 的包。
- 创建一个新的空 JavaFX Script。在包上单击右键并选择 New > Empty JavaFX Script。
- 输入
Main作为 Name，单击 Finish。 - 在 Snippets 窗口，选择 Applications 选项卡将其展开。
- 选择 Stage 对象，并将其拖拽到源编辑器。
- 输入
Animated Circle作为 Title。其余保持原来的默认设置，然后单击 Insert。 - 在 Snippets 窗口，选择 Basic Shapes 选项卡将其展开。
- 选择 Circle 元素，并将其拖拽到
content[]元素内的源编辑器中。在 Insert Template 对话框中输入Color.BLUE作为fill属性，如 图 11 所示。
图 11. 添加一个 Circle
单击 Insert.
- 向 Circle 中添加一个 Linear Gradient，您可以指定两个或者更多的渐变颜色。在 Snippets 窗口中，单击 Gradients 选项卡将其展开。
- 从填充值中删除 Color.BLUE，然后选择 Linear Gradient 对象并将其拖拽到源编辑器，如 图 12 所示。
图 12. 向 Circle 添加一个 Linear Gradient 模式
- 现在，运行应用程序来查看迄今为止所开发的内容，保存修改。在 Main.fx 文件上单击右键并选择 Run As > JavaFX Application。移动模拟器窗口将会出现，显示一个带有线性渐变的圆形区域，如 图 13 所示。
图 13. Animated Circle App 运行在一个移动模拟器上
向圆形区域中添加动画支持，该示例在不同时间间隔简要介绍如何修改圆形区域的不透明度。您需要一个包含 KeyFrames 的 TimeLine。这个示例有两个关键帧：一个修改圆形区域的不透明度，每 5 秒钟从 0.0 改为 0.5，另一个每 10 秒从 0.5 改为 1.0。
- 通过添加 清单 14 中的代码，定义一个名为
opacity的变量。
清单 14. 声明全局变量 opacityvar opacity = 1.0;
- 为圆形区域添加一个区域变量，并将其绑定到全局变量，如 清单 15 所示。
清单 15. 将一个全局变量绑定到 circle 的属性 opacity 中Circle { opacity : bind opacity; centerX: 100, centerY: 100, radius: 40,
- 添加
TimeLine元素。在 Snippets 窗口中，选择 Animations 选项卡将其展开。将TimeLine元素拖拽到编辑器上。从 Insert Template 对话框输入5s作为时间值，如 图 14 所示。
图 14. 添加一个 TimeLine
单击 Insert。
图 15 展示了将 TimeLine 拖拽到编辑器之后生成的代码。
图 15. 添加的 TimeLine
- 从 KeyFrame 对象中的 Animations 选项卡中将
Values元素拖拽到canSkip属性之后。在 Insert Template 对话框中，输入opacity作为变量值，如 图 16 所示。
图 16. 将 Values 添加到 KeyFrame
单击 Insert。在 图 17 所示的已生成代码中，将不透明度值修改为
0.5。
图 17. 带有添加的 Values 的 KeyFrame
- 在图 17 示例中 KeyFrame 下方，添加另一个
KeyFrame，有一个 10 秒的时间变量和一个不透明度修改为 1.0 的Values元素。代码看起来如 图 18 所示。
图 18. 有两个关键帧的 Timeline
- 最后，播放时间线。添加
.play()，如 图 19 所示。
图 19. 播放的 TimeLine
- 再次运行应用程序查看正在运行的动态圆形区域。
在本文中，您了解了 JavaFX 及如何使用它来快速构建 GUI 应用程序。本文示例展示了如何使用 Swing 组件构建表单，还研究了如何开发图形化应用程序以及向其中添加动画支持。
| 描述 | 名字 | 大小 | 下载方法 |
|---|---|---|---|
| Login Application 样例代码 | LoginApp.zip | 23KB | HTTP |
| Animated Circle 样例代码 | AnimatedCircle.zip | 2KB | HTTP |
学习
- 获取所有关于 JavaFX 的最新消息以及其他信息 JavaFX。
- 浏览 JavaFX Sample Gallery。
- 阅读 JavaFX 技术文档 并学习教程。
- 在 Vancouver 2010 Olympics 网站查看 JavaFX 的实际应用。
-
developerWorks Web development
专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
-
developerWorks Java 技术专区：这里有数百篇关于 Java 编程各个方面的文章。
-
developerWorks Ajax 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
-
developerWorks Web 2.0 资源中心，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门 栏目，迅速了解 Web 2.0 的相关概念。
获得产品和技术
- 下载 JavaFX。
- 下载 IBM 产品评估试用版软件 或 IBM SOA 人员沙箱，并开始使用来自 DB2®、Lotus®、Rational®、Tivoli® 和 WebSphere® 的应用程序开发工具和中间件产品。
讨论
- 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户交流。
- 现在就创建您的 developerWorks 社区个人档案 并设置一个 关注清单。连接到 developerWorks 社区 并保持连接。
