JavaFX2.0基础教程 之 开发入门

1      JavaFX开发入门

如果想使用JavaFX快速开发丰富用户体验的应用，那么这个入门教程适合你。你将通过创建一个如图-1所示的简单应用，就能学知用少许代码就能获得复杂图形效果。当然，JavaFX不止乎漂亮的动画图形。在你完成这个学习教程后，看下JavaFX系列应用示例，以便带你进入更丰富的开发之旅。

图-1 多彩圆形（ColorfulCircles）应用

这个图形展示了彩色应用效果。图中有30个圆跨越黑色背景而活动。这些圆有个模糊的白边，5%的不透明度。这些圆圈显示于黄、蓝、绿、粉及红色的阴影内。

如果熟悉JavaFX场景图编程模式，将更容易理解这个应用程序代码。舞台（Stage）是应用的顶层容器，布景供应用内容描绘界面之需。内容是由层次节点树构成的场景图。

图-2展示了ColorfulCircles应用的场景图。应用中分支检点是Group类的实例，无分支节点即叶子节点时是Rectange和Circle类的实例。

 

图-2ColorfulCircles布景图

这个图形展示了以Stage为顶层容器的ColorfulCirlces应用，布景为应用内容描绘界面只用。Group节点时场景的根节点。根节点有一个子节点，即命名为blendModeGroup的分组节点。这个blendModeGroup有一个分组未命名子节点，包括一个黑色矩形和一个有30个圆圈的圆组。称之为colors的矩形也是lendModeGroup的一个子节点。

 

1.1  建立应用

你可以用任何创建Java应用的工具开发JavaFX应用。这个教程中开发工具使用的NetBeans IDE。在开始前，请确定你所使用的NetBeans IDE的版本，要求支持JavaFX 2.0.

1.        在NB IDE中建立JavaFX工程如下：

2.        在File菜单中选择“new Project”（新工程）；

3.        在JavaFX应用类别中选择JavaFX Application。点击“next”（下一步）；

4.        把工程命名为ColorCircles，并点击“Finish”（完成）；

5.        打开ColorCircles.java文件，复制导入语句，粘贴到工程中，重写NB IDE生成的语句。或者按照你自己工作方式来完成这些代码。

1.2  创建应用基础

删除NetBeans 生成的Colorcircles类的代码，用示例-1代码替换。这是运行JavaFX应用需求的最少代码。

public classColorfulCircles extends Application {

    public static void main(String[] args) {

        launch(args);

    }   

    @Override

    public void start(Stage primaryStage){       

        primaryStage.show();

    }

}

（示例-1）

这个Colorcircles类扩展自Application类，并包括两个方法。第一个方法是main()方法，并调用了launch()方法。JavaFX的一个最佳实践是：在main()中只调用launch()方法。

接下来，Colorcircles类覆盖了Application类中抽象的start()方法。这个start()方法需要一个基本的应用级舞台（stage）作为参数。最后一行代码确保舞台效果（stage）可见。

现在可以编译运行这个应用了（在教程的每一步中，为了立即看到结果都可这样做）。如果碰到问题，请查看Colorcircles.java文件。

 

1.3  增加布景

现在可以在primaryStage.show()行前增加布景以及其所有相关内容。如示例-2所示。

@Override 

public void start(Stage primarystage) {

    Group root = new Group();

    Scene scene = new Scene(root, 800, 600, Color.BLACK);

    primaryStage.setScene(scene);

（示例-2）

    primaryStage.show()

此时运行了本应用，你将可看到全黑的布景。

 

1.4  添加图形

接下来，创建30个圆形。在primaryStage.show()行前添加示例-3代码

Group circles = new Group();

for (int i = 0; i < 30; i++) {

   Circle circle = new Circle(150, Color.web("white", 0.05));

   circle.setStrokeType(StrokeType.OUTSIDE);

   circle.setStroke(Color.web("white", 0.16));

   circle.setStrokeWidth(4);

   circles.getChildren().add(circle);

}

root.getChildren().add(circles);

（示例-3）

这儿的代码创建了一个circles组，然后通过for循环向组中添加了30个圆。每个圆半径为150，白色填充，不透明等级为5%（意味着大部分透明）。

为了创建圆边框，代码中包含了StrokeType类。OUTSIDE描边类型意味着圆边界由内向外扩张了StrokeWidth值的大小。描边演示是白色，不透明度为16%，以便比圆的色彩更亮。

最后一行是把圆组天剑到根节点。这是临时性结构。后面将可改变布景图以匹配图-2展示。

图-3展示的应用程序。由于代码并没指定每个圆的位置，这些圆都以左上角为中心点绘制在另外圆的上方。覆盖圆的不透明度与黑色背景交互，产生了灰色圆效果。

图-3

这幅图展示了一个黑色背景，并在左上角带四分之一圆的情形。圆是白边灰色。

 

1.5  增加可视效果

把模糊效果应用到应用示例的圆上，使其些许的模糊不清。把示例-4的代码增加到primaryStage.show()代码行前，来看看效果。

circles.setEffect(new BoxBlur(10, 10, 3));

示例-4 模糊效果

上述代码设置模糊半径为10像素宽10像素高以及模糊迭代为3，使其近似高斯模糊。这个模糊效果产生了一个圆滑的边缘效果。如图-4所示。

图-4 圆的盒模糊

这幅图展示了一个黑色背景，并在左上角带四分之一圆的情形。圆的边是圆滑、模糊效果。

 

1.6  创建渐变背景

创建一个矩形，并以线性渐变填充。如示例-5代码所示。为了使渐变矩形在圆后，把示例代码增加到root.getChildren().add(circles)代码行前。

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("#f8bd55")),

            new Stop(0.14,Color.web("#c0fe56")),

            new Stop(0.28,Color.web("#5dfbc1")),

            new Stop(0.43,Color.web("#64c2f8")),

            new Stop(0.57,Color.web("#be4af7")),

            new Stop(0.71,Color.web("#ed5fc2")),

            new Stop(0.85,Color.web("#ef504c")),

            new Stop(1,Color.web("#f2660f")),}));

          root.getChildren().add(colors);

示例-5 线性渐变

这部分代码创建了一个命名为colors的矩形。这个矩形宽和高与布景一样，并以线性渐变填充，同时线性渐变开始于左手边(0,1)，结束于右手边(1,0)。值true意味着渐变与矩形是成比例的，NO_CYCLE说明颜色循环不再进行。Stop[]序列说明在特定点渐变色应该是什么。代码最后一行把colors矩形加入根节点。

模糊边线的灰色圆呈现在彩虹色上方，如图-5所示。

图-5 线性渐变色

图形说明：这幅图在渐变色上展示了左上角模糊圆的四分之一。渐变从左下方黄色到右上角红色结束。

图-6展示了内部场景结构。在这点，Circles组和colors矩形是根节点的子节点。

图-6 内部场景结构

图-6说明：内部场景结构展示了带有两个子节点的根节点：一个circles组和一个colors矩形。Circles组包含30个圆形。

1.7  应用混合模式

现在向圆形添加色彩，并通过增加叠加混合效果暗化布景。这项任务需要些内务处理，及需要从场景图上移走circles组和渐变矩形，并把它们添加到新的层叠混合组。

1．  移走下面两行代码：root.getChildren().add(colors);root.getChildren().add(circles);

2．  把示例-6的代码添加到你移走代码的地方；

GroupblendModeGroup =

   new Group(new Group(newRectangle(scene.getWidth(), scene.getHeight(),

        Color.BLACK), circles), colors);

colors.setBlendMode(BlendMode.OVERLAY);

3． root.getChildren().add(blendModeGroup);

示例-6 混合模式

blendModeGroup组设定了层叠混合结构。这组包含两个子节点。第一个子节点是个新的未命名组，并容纳了一个未命名的黑色矩形和前边创建的circles组。第二个子节点是前面创建的colors矩形。

setBlendMode()方法把层叠混合模式应用到colors矩形。最后代码行把blendModeGroup作为根节点的孩子增加到布局图内，如图-2描述。

层叠混合是图形设计应用中普通的效果它们可以暗化或量化一副图片，或者兼有，这依赖于混合模式中的色彩。在这个案例中，线性渐变矩形拥有层叠。黑色矩形用于保持背景黑暗，即使当几乎透明的圆从这渐变色中捡取色彩，但也是暗化的。如图-7所示结果。当下一步中是这些圆动态化时，你将可看到完整的层叠混合效果。

图-7 层叠混合

1.8  添加动画

教程最后一步是使用JavaFX动画移动这些圆：

1.      如果还没导入“import static java.lang.Math.randow;”到引入列表，请增加；

2.      把代码示例-7中的动画代码增加到primaryStage.show()行前；

Timelinetimeline = new Timeline();

for (Nodecircle: circles.getChildren()) {

    timeline.getKeyFrames().addAll(

        new KeyFrame(Duration.ZERO, // setstart position at 0

            newKeyValue(circle.translateXProperty(), random() * 800),

            newKeyValue(circle.translateYProperty(), random() * 600)

        ),

        new KeyFrame(new Duration(40000), //set end position at 40s

            newKeyValue(circle.translateXProperty(), random() * 800),

            newKeyValue(circle.translateYProperty(), random() * 600)

        )

    );

}

// play 40s ofanimation

timeline.play();

动画有时间线驱动，因此这些代码创建时间线，并运用for循环增加两个关键帧到每个圆中（共30个圆）。第一个关键帧在0秒时使用translateXproperty和translateYProperty两属性设置窗口内随机位置。第二个关键帧在40秒时，做和第一帧同样的事情。这样，当时间线播放时，它将所有圆从一个随机位置，40秒后变化到另一个随机位置。

图-8展示了30个彩色圆的动画状态，至此，完成了整个应用程序的工作。

图-8 动画圆形

 

1.9  部署应用

当在NetbeansIDE中运行此应用或使用Clean&Build命令，应用可打包为各种JavaFX部署类型（可以通过工程属性设定选项）。然后进入ColorfulCircles工程的dist目录下，可双击下3个文件的每一个：

• l  ColorfulCircles.jar以单机模式运行；
• l  ColorfulCircles.jnlp以Web Start模式运行；
• l  ColorfulCircles.html打开一页面，含有一个Web Start连接，并且也能在运行在浏览器中。

更多的部署信息，可以查看“部署JavaFX应用”相关描述。

至此，本开发入门教程完毕。

下一篇，将介绍FXML入门，敬请期待。谢谢。