第一回 JavaFX2.0简介
javaFX2.0是JavaFX最新的主要升级发布版。它的很多新特性并不能和1.3版本兼容。如果想要用javaFX做开发，推荐使用2.0版本。
建立SDK
开始使用javafx的第一步就是在你的电脑上下载和安装javafx SDK。你可以安装完整版SDK，也可以只安装javaFX运行时环境。详见第二回。
创建应用程序框架
每个JavaFX应用都有相似的框架。程序的主类继承了Application类，main方法调用luanch方法，start方法建立并显示舞台（stage，包括了应用的UI）。
定义UI
应用接口的舞台包括了一个或多个场景（scene，依次包含了控件、形状、图形来构建接口。）
布局UI控件
决定了在UI中使用什么控件后，使用内置的布局面板来管理控件的大小和位置。 部署
JavaFX应用运行在桌面、浏览器和网络上。完成应用后，将它们做成jar、html、jnlp文件供用户使用。
第二回 安装JavaFX2.0 SDK
通过本文，你讲学会如何在windows系统中安装JavaFX2.0。你有两个选择： 安装JavaFX SDK, 包括JavaFX运行时 仅安装JavaFX运行时
同时本文还指导了如何运行样例程序和怎样搭建JavaFX的NB环境。
Mac系统也有自己的 JavaFX 2.0开发者预览版，详见 第三回.
安装JavaFX SDK
如果你想要用IDE或者命令行开发javafx应用，请安装JavaFX SDK。SDK包括了Javafx的类库和工程文件。
如何安装JavaFX SDK:
检查你的系统要求
到 http://www.oracle.com/technetwork/java/javafx/downloads/index.html找到Javafx sdk针对你系统的版本下载保存。
运行.exe文件安装。
如何卸载JavaFX SDK:
使用标准卸载程序进行卸载。
安装JavaFX Runtime
若你想在你桌面上、浏览器中或使用Java Web Start通过网络运行Javafx应用，可以只安装运行时。
注意;
如果你已经成功安装了JavaFX SDK，就无需再单独安装运行时了。
如何安装JavaFX Runtime:
检查系统要求
找到并下载你系统对应的版本。
运行.exe文件。
如何卸载JavaFX Runtime
使用标准卸载程序进行卸载
运行样例程序
下载javafx样例程序，里面有一系列用javafx构建的应用。要运行它们，必须安装好运行时。
到 http://www.oracle.com/technetwork/java/javafx/downloads/index.html.点击JavaFX 2.0 Samples的链接,保存javafx_samples-2_0.zip到本地.
从zip文件中解压样例文件到本地目录。
进入目录。
双击其中任意一个可执行文件即可运行。比如，要在桌面运行Ensemble应用，双击Ensemble.jar。要在浏览器中运行，双击html。要通过网络运行，打开Ensemble.jnlp。
每个样例的源代码都在javafx-samples-2.0\\src目录下。想要查看源代码，到javafx-samples-2.0\\src\\sample目录下，里面有你感兴趣的应用。每个样例的源代码都是NB工程。
搭建JavaFX的NetBeans环境
按照第四回搭建NB环境。
第三回 JavaFX2.0在mac系统的安装
JavaFX 2.0平台预览版包括了JavaFX SDK, 它提供了开发应用的工具和技术。
这次发布为JavaFX提供了Java API, 这为Java开发者提供了开放的功能，使得大量Java开发工具能用来开发javafx应用。此外，本次发布还提供了：
高性能图像引擎，为制作简易、平滑、快捷的富图像提供了高级支持。 媒体引擎，支持网络多媒体内容后台运行。 网络组件，是HTML能绑定在javafx应用中。
UI控件的扩展集，譬如Charts, Tables, Menus, 和 Panes.
FXML（XML-based markup language ） ，可以定义用户接口。 样例程序，快速展示了该技术的特性。
注意:
当前JavaFX应用仅能在Mac系统的桌面上运行。
系统要求
Mac OS下的JavaFX 2.0 开发者预览版需要以下软件: 操作系统 - Mac OS X 10.6 或更高 JDK - JDK 6 u 26 或更高 安装
Mac系统下的javafx文件是zip文件.
安装方法:
从http://www.oracle.com/technetwork/java/javafx/downloads/javafx2-macosx-487281.html下载JavaFX SDK zip文件。
从zip文件解压SDK文件到本地目录。 样例
JavaFX样例程序在http://www.oracle.com/technetwork/java/javafx/downloads/javafx2-macosx-487281.html. 下载该zip文件并解压到包含SDK的目录中，目录结构类似这样：
javafx-sdk2.0\\
bin\\
docs\\
javafx-samples-2.0\\ rt\\ . .
要在桌面运行应用，双击.jar文件。
每 个样例的源代码都在javafx-samples-2.0\\src目录下。想要查看源代码，到javafx-samples-2.0\\src \\sample目录下，里面有你感兴趣的应用。每个样例的源代码都是NB工程。按照 Setting Up NetBeans IDE with JavaFX 2.0在NB中创建应用。
已知BUG和事项
以下问题被发现存在。后面的数字参考JavaFX issuesdashboard中的报告。
在Dock和菜单栏中应用名称只能是\，无法更改。\关于\和\退出\中的名称是\，也不能改。[RT-12113, RT-13010]
当窗口第一次显示时，出现窗口黑屏，原因是不协调的视觉闪光。[RT-16804] 拖拉操作没有用户反馈。[RT-16307, RT-14624]
工作区:收到设置一个游标，并使用一个浮动窗口显示图像来反映拖动操作。 退出时可能异常[RT-14118, RT-15599]
工作区添加应用时悬挂或破碎不太可能。
已知渲染时有掺混。 [RT-12852]
不支持3D渲染。 [RT-13234, RT-13230] Mac OS渐变支持不好. [RT-10565]
不能向用户展示错误对话框. [RT-13739]
Caps Lock 在 TextField 和TextArea中无效. [RT-16616] 在TextField中不能剪切、复制、粘贴. [RT-16475]
第四回 在NB中创建JavaFX2.0应用
NetBeans IDE需要一个 JavaFX 2.0可用的Java平台。本部分详述了如何在NB上建立JavaFX2.0可用Java平台。
当你首次新建应用或者打开预加载向导时NetBeans IDE会尝试创建 JavaFX可用的Java平台。如果NB不能自动创建会有警告出现，这时候你必须手动创建. 你可以创建额外的Java平台，比如你想要使用不同的jdk。
这里分两步介绍自动和手动创建Java平台：
打开新建JavaFX应用向导.这是全局的起点，当打开向导时， NetBeans IDE 尝试创建一个JavaFX可用的Java平台。如果 NetBeans 成功创建，你就完成任务了.
手动创建JavaFX可用的平台.如果自动创建失败 , 或者想要添加新的JavaFX可用平台, 你必须手动创建。
打开新建JavaFX应用向导
创 建 JavaFX可用的Java平台的第一步是打开NetBeans IDE的新建JavaFX应用向导。 (或者你可以打开新建JavaFX Preloader 向导。)如果NB没有找到JavaFX可用的Java平台， 会尝试创建。如果成功了，你的新建就完成了。否则你要手动创建。
注意:Windows平台自动创建到默认目录 (C:\\Program Files\\Oracle\\).
打开新建JavaFX Application向导:
选择 JavaFX 分类. 在 Projects窗口, 选择JavaFX Application， 点击Next，打开Name and Location面板 。IDE自动寻找JavaFX SDK并尝试生成 JavaFX可用的Java平台。
NB创建环境的成功与否会出现不同的屏幕:
生 成成功:这个 JavaFX平台使用和IDE相同的 JDK，平台名称叫 Default JFX Platform。 IDE自动选择了这个平台。你成功了，除非你想用不同的jdk创建另外一个可用的平台。若你想这样，按照Creating a JavaFX-Enabled Platform Manually.
生成失败:JavaFX Platform列表没有显示任何可用平台。查看 Creating a JavaFX-Enabled Platform Manually.
手动创建JavaFX可用的平台
打开Java平台管理器NetBeans IDE Java Platform Manager： 在新建 JavaFX Application或者新建JavaFX Preloader向导中，点击Manage Platforms...；或者 点开Tools 菜单选择Java Platforms。或者
打开任意Java工程的Project Properties，切换到Libraries标签，点击Manage Platforms... 点击Add Platform... Add Java Platform向导中出现Choose Java Platform 面板。找到你想要的jdk.
选中JDK。必须选择JDK 1.6 u 26或更高 (或JDK 7)。点 NexT，打开Platform Name面板。
为你的平台命名后点Finish，返回到 Platform Manager。你创建的平台已经被加入列表了
选中你的平台，打开JavaFX标签。 现在，JavaFX 对该平台还不可用。选中Enable JavaFX框。警告出现了：“the JavaFX platform is invalid.”
点击JavaFX SDK 框旁边的Browse，找到 JavaFX 2.0 SDK文件夹。
点 击Open返回到Java Platform Manager。现在JavaFX SDK 和JavaFX Javadoc 框都填好了。如果JavaFX Runtime 2.0和JavaFX 2.0 SDK在同一目录，JavaFX Runtime 框也会填好的。若JavaFX Runtime 在其他目录，就收到找到Sources狂不用选。
点击Close。你已经完成了。
第五回 开始使用JavaFX2.0
如果想用 JavaFX快速开发富用户体验的应用，就好好读本文吧。我们将创建一个简单应用并了解到用少量代码实现复杂图形效果是多么容易。当然了，JavaFX不仅仅只是异常漂亮生动的形状而已。读完本文后去看看样例将大有好处。
Figure 1 Colorful Circles Application
如果你很熟悉JavaFX场景图形编程模型，那就很容易理解程序的代码。 舞台（ stage）是应用的最高层容器，场景（ scene）是应用中内容的绘图表面。内容都被组织为场景图形，是一颗节点的层次树。
Figure 2 为应用 ColorfulCircles展示了场景图形。 分支节点是 Group 类的实例化。非分支节点，即叶子节点，是 Rectangle 和Circle 类的实例化。
Figure 2 Colorful Circles Scene Graph
建立应用
你可以使用任何为开发Java设计的工具来构建javaFX应用。我们推荐使用NetBeans IDE。 开始之前，请确保你的NB版本已经支持了javaFX2.0。详见 System Requirements。
安装如下步骤用NB做开发：
从 File 菜单 , 选择New Project .
从JavaFX application 分类中, 选择JavaFX Application ， 点击Next .
输入工程名 ColorfulCircles 后点 Finish .
打开 ColorfulCircles.java 文件,复制 import 声明粘贴进你的工程覆盖NB自动生成的语句。
或者你可以使用NB的代码完成功能或Fix Imports 命令导入Import语句，不过记得确保包都以javafx开头。
创建应用基础
删除 NetBeans IDE生成的ColorfulCircles 类并用 Example 1 中的代码代替。以下是运行javaFX应用所需的最少代码：
Example 1 Basic Application
public class ColorfulCircles extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage primaryStage) {
primaryStage.show(); } }
ColorfulCircles类继承了 Application 类，包含两个方法。第一个方法是 main() 方法， 用来调用 launch() 方法。作为JavaFX最佳实践，launch() 方法是被 main() 方法调用的唯一方法。
然后， ColorfulCircles 类重写了抽象的 start() 方法。start() 方法的参数是应用的初始舞台。最后一行使得舞台可见。
现在你可以编译运行ColorfulCircles了，每一步都记得查看下中间结果。如果出问题了，查看下 ColorfulCircles.java 文件。
添加场景
现在为舞台添加场景：增加三行代码，参见Example 2 。这有两个最佳实践： 代码中为场景创建了一个Group节点做根节点，并设置了场景的宽和高（这里是800和600）。
在 primaryStage.show() 这一行之前添加场景及其所有内容。这是另一个最佳实践。
Example 2 Scene @Override
public void start(Stage primarystage) { Group root = new Group();
Scene scene = new Scene(root, 800, 600, Color.BLACK);
primaryStage.setScene(scene);
primaryStage.show()
添加图形
接下来在 primaryStage.show()行之前添加 Example 3 中的代码来创建30个圆。
Example 3 30 Circles
Group circles = new Group(); for (int i = 0; i < 30; i++) {
Circle circle = new Circle(150, Color.web(\ circle.setStrokeType(StrokeType.OUTSIDE); circle.setStroke(Color.web(\ circle.setStrokeWidth(4);
circles.getChildren().add(circle); }
root.getChildren().add(circles);
这些代码创建了称为 circles 的Group，然后使用一个ofr循环向其中添加30个圆。每个圆半径到是150，并用white颜色填充，此外不透明度是5%，所以基本是透明的。
然后为这些圆创建边框，代码中包含了 StrokeType 类。 描边类型的 OUTSIDE 标明圆的边界向外扩展 StrokeWidth 的值，也就是4。描边的颜色是 white ，不透明度是16%，使得它比圆的颜色浅。
最后一行把 circles 加到根节点上。这只是临时结构，稍候将修改场景图形使得它匹配 Figure 2 展示那样。
Figure 4 展示了当前应用。由于代码没有为每个圆指定特定位置，它们都叠加在一起，并且窗口的左上角是圆心。层叠的圆的不透明度和黑色北京作用使得圆看起来是灰色的。
Figure 4 Circles
增加视觉效果
继续为圆应用盒子模糊效果使得它们看起来柔和。代码是 Example 4 。 在primaryStage.show() 之前添加这些代码。
Example 4 Box Blur Effect
circles.setEffect(new BoxBlur(10, 10, 3));
代码设置了模糊半径，宽和高都是10并且迭代3次，使它接近高斯模糊。 这样便在圆的边缘出现了平滑效果，看Figure 5 .
Figure 5 Box Blur on Circles
创建背景渐变
现在创建一个矩形并用线性渐变填充，代码见 Example 5 .
在 root.getChildren().add(circles) 之前添加这些代码，这样矩形才能在圆下面。
Example 5 Linear Gradient
Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(), new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new Stop[]{
new Stop(0, Color.web(\ new Stop(0.14, Color.web(\ new Stop(0.28, Color.web(\ new Stop(0.43, Color.web(\ new Stop(0.57, Color.web(\ new Stop(0.71, Color.web(\ new Stop(0.85, Color.web(\ new Stop(1, Color.web(\root.getChildren().add(colors);
代 码创建了称为colors的矩形。 矩形和场景同宽高，并从左下角的（0，0）点开始到右上角的（1，1）点应用线性渐变。 true 表示渐变在矩形中是成比例的，NO_CYCLE 表示颜色循环不会重复， Stop[] 序列表明了渐变颜色序列。最后一行把colors 添加到根节点。
现在边缘模糊的灰色圆出现在了彩虹色的上面，见 Figure 6 .
Figure 6 Linear Gradient
Figure 7 展示了中间的场景图。现在circles 组和colors 矩形都是根节点的孩子。
Figure 7 Intermediate Scene Graph
应用混合模式
现在通过增加混合覆盖效果给圆增加颜色并使场景变暗。这个任务需要一点家务活，你需要从场景中移除 circles组和渐变的矩形，并把它们添加到新的混合覆盖组中。
删除下面两行代码:
root.getChildren().add(colors);
root.getChildren().add(circles);
添加 Example 6 中的代码到上面删除代码的位置。
Example 6 Blend Mode Group blendModeGroup =
new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(), Color.BLACK), circles), colors);
colors.setBlendMode(BlendMode.OVERLAY); root.getChildren().add(blendModeGroup);
blendModeGroup 组为混合覆盖组建立了结构。组中包含了两个孩子。第一个是一个新建匿名Group ，包含一个新建的匿名黑色矩形和以前创建的circles 组。第二个孩子是以前创建的colors 矩形。
setBlendMode() 方法把混合覆盖应用到了colors 矩形。最后一行代码把blendModeGroup 添加到场景作为根节点的孩子，如Figure 2 .
混合覆盖效果是图形设计程序中的常规效果。它可以暗化图像或高亮它们，这取决于混合组中的颜色。这里，我们把线性渐变矩形用作覆盖，黑色矩形用来保持背景黑暗，而接近透明的圆从矩形中取了色不过依然变暗了。
Figure 8 展示了结果。下一步活化了圆之后将能看到完整的混合覆盖效果。
Figure 8 Overlay Blend
添加动画
最后一步是使用javaFX动画来移动圆:
如果没准备好，增加 import static java.lang.Math.random; 到导入声明。
在 primaryStage.show() 之前增加Example 7 中的活化代码。
Example 7 Animation
Timeline timeline = new Timeline(); for (Node circle: circles.getChildren()) { timeline.getKeyFrames().addAll(
new KeyFrame(Duration.ZERO, // set start position at 0
new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600) ),
new KeyFrame(new Duration(40000), // set end position at 40s new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600) ) ); }
// play 40s of animation timeline.play();
动 画是由时间线驱动的，所以这里创建了时间线，然后使用一个for 循环为30个圆增加两个关键帧。第一个关键帧在0秒时使用translateXProperty 和translateYProperty 属性设置窗口内的一个随机位置。第二个关键帧在40秒时同样做。这样，当时间线play()后，所有圆就在40秒内从一个随机位置到另一个。
第二个按钮被选中了，但焦点依然在第一个按钮上。使用requestFocus函数可以改变焦点位置，见Example 4-5.
Example 4-5 Requesting Focus for the Second Radio Button rb2.setSelected(true); rb2.requestFocus();
这样，代码产生的结果如Figure 4-4.
Figure 4-4 Setting Focus for the Selected Radio Button
第十一回 JavaFX2.0开关按钮ToggleButton
ToggleButton类代表了可以通过JavaFX API创建的另一类按钮。 2个或更多的这种按钮被加入一个组中，但是每次只能有一个被选中，或者一个都没有。 Figure 5-1是在一个组中有3个开关按钮的应用截图。这个应用根据哪个开关按钮别按下来决定绘制何种颜色的矩形。
Figure 5-1 Three Toggle Buttons
创建Toggle Button
可以通过ToggleButton类的3个构造方法的任意一个来创建开关按钮。见Example 5-1. 复制代码
1. //A toggle button without any caption or icon 2. ToggleButton tb1 = new ToggleButton(); 3. //A toggle button with a text caption
4. ToggleButton tb2 = new ToggleButton(\5. //A toggle button with a text caption and an icon 6. Image image = new
Image(getClass().getResourceAsStream(\7. ToggleButton tb3 = new ToggleButton (\ImageView(image));
ToggleButton类继承了Labeled类，因而你可以为其指定文本标题、图像、文本加图像。可以使用Labeled 类的setText和setGraphic方法来给开关按钮指定文本和图像。
在代码中定义了开关按钮后，就可以把它们放进组中并指定特定的行为。
把Toggle Button加入组
ToggleButton类的实现和RadioButton类实现相当类似。不过和单选框不同的是，开关按钮并不要求每次必须最少有一个按钮被选中在组中。也就是说，点击选中的开关按钮会使其取消选中，但是点击组中的单选按钮没任何反应。
t花点时间看下 Example 5-2中的代码吧. 复制代码
1. Example 5-2 Combining Toggle Buttons in a Group 2. final ToggleGroup group = new ToggleGroup(); 3.
4. ToggleButton tb1 = new ToggleButton(\5. tb1.setToggleGroup(group); 6. tb1.setSelected(true); 7.
8. ToggleButton tb2 = new ToggleButton(\9. tb2.setToggleGroup(group); 10.
11.ToggleButton tb3 = new ToggleButton(\12.tb3.setToggleGroup(group);
Example 5-2创建了3个开关按钮并把它们加入开关组中。tb1调用了
setSelected方法，所以应用打开后它会被按下。但是，你也可以按起Minor按钮使得没有任何开关按钮被按下。见 Figure 5-2.
Figure 5-2 Three Toggle Buttons in a Group
Description of \
一般使用开关按钮的组来为每个按钮分配特定行为。下一部分将解释如何使用这些开关按钮改变矩形的颜色。
设置行为
ToggleButton类从Node 类继承了setUserData方法，该方法可以让你给任意选中的选项赋特定的值。在 Example 5-3中，用户数据指明了要用什么颜色来绘制矩形。 复制代码
1. Example 5-3 Setting User Data for the Toggle Buttons 2. tb1.setUserData(Color.LIGHTGREEN); 3. tb2.setUserData(Color.LIGHTBLUE); 4. tb3.setUserData(Color.SALMON); 5.
6. final Rectangle rect = new Rectangle(145, 50); 7.
8. final ToggleGroup group = new ToggleGroup(); 9. group.selectedToggleProperty().addListener(new ChangeListener
10. public void changed(ObservableValue ov, 11. Toggle toggle, Toggle new_toggle) { 12. if (new_toggle == null)
13. rect.setFill(Color.WHITE); 14. else
15. rect.setFill( 16. (Color)
group.getSelectedToggle().getUserData() 17. );
18. } 19.});
ChangeListener
比如用户按下了tb2按钮， setSelectedToggle().getUserData()的调用返回 Color.LIGHTBLUE结果如图 Figure 5-3.
Figure 5-3 Using Toggle Buttons to Paint a Rectangle
Description of \
查看 ToggleButtonSample.java文件检查应用的完整代码。
美化Toggle Button
可以通过为开关按钮应用CSS来改善应用的视效。在JavaFX 2.0应用中使用CSS和在HTML中使用几乎一样，因为它们都基于相同的CSS规范。Example 5-4使用setStyle方法改变了开关按钮的 -fx-base CSS熟悉。
Example 5-4 Applying CSS Styles to Toggle Buttons tb1.setStyle(\tb2.setStyle(\tb3.setStyle(\
程序中加入这些代码后开关按钮的变化见 Figure 5-4.
Figure 5-4 Painted Toggle Buttons
百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库JavaFX2开发基础教程在线全文阅读。
相关推荐：