虽然JavaFX 1.2版本还有未正式发布，但是已经可以在javafx.com下载了（显示是下载SDK1.1.1版本，实际是SDK1.2）。

JavaFX 1.2在功能上和API上都有了较大的提高，较为不便的是，对先前写成的JavaFX 1.0/1.1的代码，虽然可以在旧的runtime中继续运行，但是如果要利用JavaFX1.2的功能等优点，可能需要做迁移和语法修正并且重新编译。JavaFX 1.2 主要的新功能如下：

0）支持OpenSolaris和Linux
1）BoxBlur等新效果（effect）
2）异步的处理模式（Asynchronous Processing Model）
3）内置的数学和属性类（即JavaFX写的Math,Properties类）
4）更多新的Layout类
5）更多的Skinnable控件
6）RSS和Atom的支持
7）图表功能（饼图，柱状图、散点图等）
8）Mixin类替代了多继承性
9）Java数组的直接引用（无需通过Sequence的转换）
10）Stage的支持功能，如Screen，Alerts等
11）本地数据存储，可以支持会话状态的保存。
12）客户化UI控件的增强支持（Behavior类等）

上周介绍了关于编写JavaFX吃豆人游戏的前2篇文章。本周发表了5篇连载文章中的第3篇。在最新的这篇文章中，详细介绍了精灵(ghost)动画的机理，基本上和Pac-Man人物是一样的：改变坐标位置，并且不断切换画面（frame）。和Pac-Man不同的是，精灵有3组图，分别是正常(normal)、空心(hollow)以及闪烁(flashing)，如下图所示：

为了说明程序结构，精灵的移动算法是随机的，也就是不能追踪Pac-Man的足迹。更好算法的介绍将在第5篇文章中详细讨论。到目前为止，游戏中的角色都齐了：4个精灵和1个吃豆人。他们现在还是相安无事，即使见面也互相不会吃掉。在下一篇文章中将介绍有关的处理逻辑。有兴趣的可以试一下目前这个半成品游戏（点击图画启动游戏）：

相关文章：

JavaFX游戏吃豆人的编写过程

第一篇文章,2009年5月14日:
Writing the Pac-Man Game in JavaFX - Part 1

第二篇文章,2009年5月21日:
Writing the Pac-Man Game in JavaFX - Part 2

第三篇文章,2009年5月28日:
Writing the Pac-Man Game in JavaFX - Part 3

用JavaFX编写的游戏Pac-Man
怎样用JavaFX编写游戏：吃豆人（Pac-Man）之二

在JavaFX 1.0发布不久时，作为编程练习，我写了一个JavaFX游戏：Pac-Man，又称为PC MAN或“吃豆人”。Pac-Man是上世纪80-90年代非常著名的一款游戏，起源于日本，风靡全球。我写的JavaFX Pac-Man游戏引起了不少关注（参见文章：JavaFX 演示游戏：PAC-MAN http://www.javafxblogs.com/%e7%94%a8javafx%e7%bc%96%e5%86%99%e7%9a%84%e6%b8%b8%e6%88%8fpac-man/)，很多读者询问如何用JavaFX编制这样的游戏，并且希望能得到原代码。

(点击画面可以启动JavaFX的Pac-Man游戏)

最近，我把编制该游戏的过程写成介绍文章，在O’Reilly出版社的insideRIA.com上连载。由于时间关系，文章暂时只有英文的，稍后会把它改写成中文的版本。感兴趣的读者可以先看看英文原文，下源代码看看。在文章中，有多处Java Web Start的链接，可以一边阅读一边看看程序是如何运行的。目前，连载的前2篇文章已经发表，以后每周四（中国时间周五）发表一篇。第一篇文章介绍了Java的数据模型，用基本JavaFX的Shape类来绘制迷宫以及豆子。第二篇文章介绍了如何实现Pac-Man的动画，如何用键盘控制人物来吃豆子的动作等。相关的JavaFX功能演示包括：

. shapes
. animation
. keyboard handling
. java code integration
. Transfromation

相关信息：

第一篇文章,2009年5月14日:
Writing the Pac-Man Game in JavaFX - Part 1

第二篇文章,2009年5月21日:
Writing the Pac-Man Game in JavaFX - Part 2

用JavaFX编写的游戏Pac-Man
如何编写JavaFX游戏：Pac-Man（吃豆人）

在上篇文章中，我们可以在许愿树上悬挂许多愿望星了。现在，我们给程序增加些功能，可以在星星上记录许愿者的名字和愿望。你可以点击以下画面启动许愿树，点击许愿树后，可以看到一个弹出的窗口来输入姓名和愿望，点击“OK”确认。如果再次点击同一颗星星，就可以修改愿望的内容，快来试试看吧：（JDK1.5+或JDK 1.6）

我们来看看如何增加一个半透明的输入窗口，代码在Dialog类中。首先，我们定义一个CustomNode。javafx.scene.CustomNode提供了用户自定义图形结点（Node）的方法，程序中需要继承该类，然后实现create()函数并返回自定义的Node。我们的CustomNode由一个Group实例来实现，包括一个蓝色半透明的外围框，两个输入框，两个文本以及一个“OK”按钮。Dialog.fx的代码如下：

( JAVAFX参考文章：
用JavaFX的Effect实现许愿树(1)
用JavaFX的Effect功能编写许愿树（1）
JavaFX 1.1和1.0的兼容性 http://blog.sina.com.cn/javafxcenter
JavaFX和Java之间的互操作性
Java和JavaFX的互操作性）

/*
 * Dialog.fx
 *
 * http://www.javafxblogs.com
 */

package wishtree;

import javafx.ext.swing.SwingButton;
import javafx.ext.swing.SwingTextField;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.layout.VBox;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.stage.Stage;

/**
 * @author Henry Zhang
 */

public class Dialog extends CustomNode {

  public var stage: Stage;
  public var star : Star;

  var w = bind stage.width;
  var h = bind stage.height;

  public var nameField : SwingTextField;
  public var wishField : SwingTextField;

  public function show( s: Star): Void {
    star = s;
    wishField.text = s.wish;
    nameField.text = s.name;
    visible = true;
  }

  public override function create(): Node {
    Group {
      blocksMouse: true;
      translateX: bind w / 6
      translateY: bind h / 4

      content: [
        Rectangle {
          stroke: Color.WHITE
          strokeWidth: 3
          width: bind w * 2 / 3
          height: bind h / 2
          fill : Color.BLUE;
          opacity: 0.5
          arcHeight: 10
          arcWidth: 10
        },
        // 本文发表自 http://www.javafxblogs.com
        VBox {
          spacing: 15
          translateX: bind w / 6
          translateY: bind h / 8
          content: [
            Text {
              content: "名字:"
              textOrigin: TextOrigin.TOP
              fill: Color.YELLOW
              font: Font.font ( null, FontWeight.BOLD, 20);
            },
            nameField = SwingTextField {
              text: "your name"
              width: bind w / 4
            },
            Text {
              content: "愿望："
              textOrigin: TextOrigin.TOP
              fill: Color.YELLOW
              font: Font.font ( null, FontWeight.BOLD, 20);
            },
            wishField = SwingTextField {
              text:  "我希望..."
              width: bind w * .4
            },
            SwingButton {
              text: "OK"
              action: function():Void {
               star.name = nameField.text;
               star.wish = wishField.text;

               visible = false;
              }
            }
          ]
         },
     ]
   }
  }
}

在create()函数中，我们定义了圆角矩形的透明度为0.5，即可产生半透明的效果，arcHeight和arcWidth两个变量决定了圆角的大小。JavaFX技巧、编程和技术 。JavaFX Guy技术应用博客

 // http://www.javafxblogs.com
 Rectangle {
          stroke: Color.WHITE
          strokeWidth: 3
          width: bind w * 2 / 3
          height: bind h / 2
          fill : Color.BLUE;
          opacity: 0.5
          arcHeight: 10
          arcWidth: 10
        },

VBox的作用是把UI元素在垂直排列，相当于LayoutManager的作用。当点击OK按钮时，我们把对话框隐藏，并且把输入值赋给相关的Star对象。Group的属性中，我们设置了blocksMouse的属性，从而防止鼠标事件传导到下层的图形元素中。

接下来，我们把Main.fx略作修改，在生成Star实例时加入事件处理逻辑，使得星星在点击时可以弹出修改对话框，代码如下：

var tree : ImageView = ImageView {
  x: 80
  y: 0
  image: Image {
           url: "{__DIR__}images/tree.png"
           width: 640
           preserveRatio: true
         }
  onMousePressed:
    function(e:MouseEvent) : Void {

      // do nothing when the dialog is enabled
      if ( dialog.visible ) return;

      if ( e.y < 343 ) {
        currentStar = Star{
                  translateX: e.x
                  translateY: e.y

                  onMousePressed: function(e:MouseEvent) : Void {
                    // do nothing when the dialog is enabled
                    if ( dialog.visible ) return;

                    var self = e.node as Star;
                    dialog.show(self);
                  }
                 } ;

        dialog.show(currentStar);
        insert currentStar after stage.scene.content[currentIndex++];
      }
    }
};

至此，单机版的许愿树就完成了。代码可以在这里下载：许愿树代码。下一步，我们会把这个单机版的改成联网版，这样不同的用户可以通过网页在同一棵许愿树上许愿了。需要做的工作包括把用户的许愿请求发送到网站，然后存入数据库中，再通过许愿树展现出来。服务器端的代码可重用原来PHP版本的代码，或者新写都可以。

在上篇文章“JavaFX许愿树程序:Effect功能的应用(1)”中，我们介绍了用JavaFX作出白云蓝天绿树的构图。接下来我们制作冒泡的动画，使得在白云中不断有气泡升起。然后我们再画上星星。

JAVAFX相关参考文章：
JavaFX 多维数组
用JavaFX的Effect功能编写许愿树（1）
JavaFX 1.1和1.0的兼容性
JavaFX和Java之间的互操作性

我们创建一个JavaFX类Bubble.fx，它是javafx.scene.shape.Circle类的子类，然后加上动画就可以实现气泡升腾的效果，我们一起来看看代码：

/*
 * Bubble.fx
 *
 * JavaFX技术交流  http://www.javafxblogs.com
 *
 */
package wishtree;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import java.lang.Math.*;

/**
 * @author Henry Zhang
 * JavaFX编程技巧及应用 http://www.javafxblogs.com
 */
public class Bubble extends Circle {

  var counter = 0;
  var startCounter = 10.0;

  var radiusDelta = -0.15;
  var destinationY:Double = 200;

  var timeline : Timeline =
    Timeline {
      repeatCount:   Timeline.INDEFINITE
      keyFrames : [
        KeyFrame {
          time : 100ms
          action: function () {
                    moveOneStep();
                  }
          }
      ]
    }

  init {
    effect = GaussianBlur { radius: 3}
    fill = Color.WHITE;

    radius = 4;
    resetStatus();
    timeline.play();
  }

  function moveOneStep() : Void {

    counter++;

    if ( counter > startCounter) {
      if ( not visible ) visible = true;

      centerY -= 2;
      radius += radiusDelta;

      if ( radius < 1 or radius > 4 )
        radiusDelta = -radiusDelta;
    }

    if ( centerY < destinationY+100 ) {
      visible = false;
      if ( opacity > 0.03 )
        opacity -= 0.03
      else
        opacity = 0;

      visible = true;
    }

    if ( centerY < destinationY ) {
      resetStatus();
    }
 } // JavaFX Game Demo   http://www.javafxgame.com

 function resetStatus(): Void {
   visible = false;
   centerY = 500 + random()*50;
   centerX = 200 + random()*350;
   counter = 0;
   startCounter = 80 + random()*400;

   destinationY = 150+random()*30;
   radius = 1 + random()*2;
   opacity = 0.6;
 }
}

首先，在init块和resetStatus()函数中我们初始化气泡的大小，透明度，位置等变量。我们在resetStatus()里调用了java.lang.Math里的随机函数random()，使得气泡的出现位置是随机的。从这可以看出JavaFX调用Java的便易性。在确定了初始状态后，我们定义一个动画的时间线（timeline）实例，里面只有一个关键帧（KeyFrame）。相关代码如下：

  var timeline : Timeline =
    Timeline {
      repeatCount:   Timeline.INDEFINITE
      keyFrames : [
        KeyFrame {
          time : 100ms
          action: function () {
                    moveOneStep();
                  }
          }
      ]
    }

. . . . 

  function moveOneStep() : Void {

    counter++;

    if ( counter > startCounter) {
      if ( not visible ) visible = true;

      centerY -= 2;
      radius += radiusDelta;

      if ( radius < 1 or radius > 4 )
        radiusDelta = -radiusDelta;
    }

    if ( centerY < destinationY+100 ) {
      visible = false;
      if ( opacity > 0.03 )
        opacity -= 0.03
      else
        opacity = 0;

      visible = true;
    }

    if ( centerY < destinationY ) {
      resetStatus();
    }
 }

每隔100ms，timeline都会调用处理函数moveOneStep()，从而可以不断改变气泡的状态，产生动画效果。在这个函数中，我们需要改变的实例变量有centerY,opacity,visible,radius。counter变量则是作为时间计数器，以控制状态的变化。这样，一个若隐若现、一张一弛不断上升的气泡就完成了。

下一步，我们再创建一个Star类，用来显示悬挂的“愿望星”。每颗星星可以看作是个10个结点连线组成的多边形，所以我们通过扩展Polygon类来编制星星的代码，一起来看看：

/*
 * Star.fx
 *
 * http://www.javafxblogs.com
 * http://developers.sun.com.cn/blog/henry
 */

package wishtree;

import javafx.scene.effect.DropShadow;
import javafx.scene.paint.*;
import javafx.scene.shape.Polygon;
import java.lang.Math.*;

/**
 * @author Henry Zhang
 *
 * http://www.javafxblogs.com
 *
 */

public class Star extends Polygon {
  def r1 : Double = 18;
  def r2 : Double = r1 / 1.6;

  var r = [r1, r2];

  var strokeColor =
    [ Color.PINK, Color.YELLOW, Color.GOLDENROD, Color.CYAN,
      Color.PURPLE, Color.BLUEVIOLET, Color.CORAL, Color.CRIMSON ];
  var fillColor =
    [ Color.GOLD, Color.BLUE, Color.RED, Color.DARKSLATEBLUE,
      Color.DARKORANGE, Color.MAGENTA, Color.BROWN, Color.CHOCOLATE ];

  init {
    // compute the coordinates of the star polygon
    points = for ( i in [0..9] ) [
      r[i mod 2] * cos( toRadians(i*36) ),
      r[i mod 2] * sin( toRadians(i*36) )
    ];

    blocksMouse = true;
    strokeWidth = 1; // 本文 发 表 于 http://www.javafxblogs.com/
    var which : Integer = random() * sizeof(strokeColor) as Integer;

    stroke = strokeColor[which];

    fill = LinearGradient {
             startX: 0 startY: 0  endX: 0  endY: 1.0
             proportional: true
             stops: [
                     Stop { offset: 0.1 color: Color.WHITE }
                     Stop { offset: 1.0 color: fillColor[which] }
                    ]
           };
    effect = DropShadow { color: Color.WHITE };
  }
}

在init块中，我们用for语句来计算星星的10个接点，每次循环产生一个节点的(x,y)坐标，共计10组，最后产生的一个sequence赋值给points变量，我们可以看到JavaFX的代码非常简洁：

    points = for ( i in [0..9] ) [
      r[i mod 2] * cos( toRadians(i*36) ),
      r[i mod 2] * sin( toRadians(i*36) )
    ];

fill变量我们再次采用了LinearGradient的渐变效果，填充的颜色是随机选择的。我们还增加了DropShadow的影子效果，在星星的背后加上了白色的影子，增强了视觉效果。blocksMouse属性是屏蔽鼠标事件传给星星下面的其他图形。

这个星星类产生的实例位置都是在坐标（0，0）的位置，在下面的程序中，我们会通过改变translateX和translateY的值，动态地把星星挂在树上。

我们对Main.fx略为修改一下，首先把数个泡泡加入scene中：

     for ( i in [1..5] ) Bubble { }

然后在许愿树的图形上增加鼠标点击的处理，每当点击到树叶和树枝时，会在该处挂上一颗星星，在鼠标事件（MouseEvent）中，x,y属性可以告诉我们点击的位置，然后我们就可以设置星星出现的地方。通过insert操作，我们把新创建的星星增加到scene中。注意，这里采用了currentIndex计数器来确保星星是出现在云层下方，我们可以看到被云层遮掩的星星：

var tree : ImageView = ImageView {
  x: 80
  y: 0
  image: Image {
           url: "{__DIR__}images/tree.png"
           width: 640
           preserveRatio: true
         }
  onMousePressed:
    function(e:MouseEvent) : Void {
      if ( e.y < 343 ) {
        var s = Star{ translateX: e.x translateY: e.y } ;
        insert s after stage.scene.content[currentIndex++];
      }
    }
};

完整的代码如下：

/*
 * Main.fx
 *
 * http://www.javafxblogs.com
 *
 */
package wishtree;

import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * @author Henry Zhang
 * JavaFX编程 http://javafxguy.javaeye.com
 * JavaFX技术交流应用 http://www.javafxblogs.com
 */

var xx = 170;
var yy = 430;

var currentIndex = 0;

var tree : ImageView = ImageView {
   x: 80
   y: 0
   image: Image {
            url: "{__DIR__}images/tree.png"
            width: 640
            preserveRatio: true
          }
  onMousePressed:
    function(e:MouseEvent) : Void {
      if ( e.y < 343 ) {
        var s = Star{ translateX: e.x translateY: e.y } ;
        insert s after stage.scene.content[currentIndex++];
      }
    }
  };

var tree2 =
  Image {
    url: "{__DIR__}images/tree2.png"
    width: 130
    preserveRatio: true
 };

var stage =
  Stage {
    title: "Wish Tree"
    width: 830
    height: 620
    resizable: false

    scene: Scene {
             fill: LinearGradient {
                     startX: 0,
                     startY: 0.0,
                     endX: 0,
                     endY: 1.0
                     proportional: true
                     stops: [ Stop { offset: 0.0 color: Color.web("#14acf8") },
                              Stop { offset: 1.0 color: Color.web("#a4e6f8") }]
                   }

    content: [
      ImageView {
        x: 50
        y: 280
        image: Image {
                 url: "{__DIR__}images/cloud2.png"
                 preserveRatio: true
                 width: 160
               }
        effect: GaussianBlur { radius: 25 }
      },
      ImageView {
        x: 520
        y: 300
        image: Image {
            url: "{__DIR__}images/cloud2.png"
            preserveRatio: true
            width: 150
            }
        effect:  GaussianBlur { radius: 33 }
      }, 

      ImageView {
        x: 560
        y: 500
        image: tree2
      },
      ImageView {
        x: 460
        y: 470
        image: tree2
      }, // JavaFX Sample code http://www.javafxgame.com
      ImageView {
        x: 60
        y: 500
        image: tree2
      },
      ImageView {
        x: 190
        y: 470
        image: tree2
      },
      tree,
      ImageView {
        x: 120
        y: 360
        image: Image {
          url: "{__DIR__}images/sign.png"
          width: 180
          preserveRatio: true
        }
      },
      ImageView {
        x: 20
        y: 60
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 250
        }
        effect: GaussianBlur { radius: 40 }
      }, // United States American Citizenship Test
      ImageView {
        x: 520
        y: 90
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 100
        }
        effect:  GaussianBlur { radius: 20}
      }, // United States Citizenship Application
      ImageView {
        x: 620
        y: 190
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 180
        }
        effect:  GaussianBlur { radius: 25}
      },
      ImageView {
        x: 600
        y: 380
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 150
        }
        effect:  GaussianBlur { radius: 33 }
      },
      ImageView {
        x: 0
        y: 490
        image: Image {
          url: "{__DIR__}images/cloud.png"
        }
        effect:  GaussianBlur { radius: 30 }
      },
      for ( i in [1..5] ) Bubble { },
      Text {
        x:170
        y: 450
        content: "许愿树"
        fill: Color.YELLOW
        font: Font.font ( null, FontWeight.BOLD, 30);
        effect: PerspectiveTransform {
                  ulx: xx    uly: yy
                  urx: xx+80 ury: yy-10
                  llx: xx-2  lly: yy+40
                  lrx: xx+80 lry: yy+38
                }
        }
      ]
    }
}

//用JavaFX的Effect功能编写许愿树程序
var idx =
  for ( n in stage.scene.content )
    if ( n == tree ) indexof n
    else [] ;

currentIndex = idx[0];

现在代码基本完整了，每次点击愿望树，都会生成一个五彩的星星，快来点击下面点击下面截图挂颗愿望星吧(JDK 1.5以上的环境,最好是JDK1.6 U10以上)：

在下一篇文章中，我们介绍如何把愿望写在星星上。

（ 未完待续, 完整代码可在下一篇文章中下载 ）

看了同事用写了个许愿树程序（C/S架构的），其中client端的图形界面是由flash来实现。那么如果这个界面用JavaFX来写会怎样呢？我想这一定是很有趣的事情，于是就决定动手写个程序，比较一下。

首先写个主程序，把画面的Scene做出来。在这个画面中，蓝天背景和白云都需要使用图形效果(effect)，在JavaFX中支持了多种图形效果，Lighting，Blur，Shadow等等，可以大大丰富我们的用户界面。我们的程序采用线性渐变（LinearGradient）效果来画蓝天，用高斯模糊（GaussianBlur）效果来画白云，程序如下：

/*
 * Main.fx
 *
 * http://www.javafxblogs.com
 *
 */
package wishtree;

import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * @author Henry Zhang
 * JavaFX编程  http://developers.sun.com.cn/blog/henry
 * JavaFX技术交流应用  http://www.javafxblogs.com
 */

var xx = 170;
var yy = 430;

var tree : ImageView = ImageView {
   x: 80
   y: 0
   image: Image {
            url: "{__DIR__}images/tree.png"
            width: 640
            preserveRatio: true
          }
   };

var tree2 =
  Image {
    url: "{__DIR__}images/tree2.png"
    width: 130
    preserveRatio: true
 };

var stage =
  Stage {
    title: "Wish Tree"
    width: 830
    height: 620
    resizable: false

    scene: Scene {
           fill: LinearGradient {
                  startX: 0,
                  startY: 0.0,
                  endX: 0,
                  endY: 1.0
                  proportional: true
                  stops: [
                    Stop { offset: 0.0
                           color: Color.web("#14acf8") },
                    Stop { offset: 1.0
                           color: Color.web("#a4e6f8") }
                         ]
                   }

    content: [
      ImageView {
        x: 50
        y: 280
        image: Image {
                 url: "{__DIR__}images/cloud2.png"
                 preserveRatio: true
                 width: 160
               }
        effect: GaussianBlur { radius: 25 }
      },
      ImageView {
        x: 520
        y: 300
        image: Image {
            url: "{__DIR__}images/cloud2.png"
            preserveRatio: true
            width: 150
            }
        effect:  GaussianBlur { radius: 33 }
      }, // http://www.javafxgame.com  JavaFX Demo Game

      ImageView {
        x: 560
        y: 500
        image: tree2
      },
      ImageView {
        x: 460
        y: 470
        image: tree2
     }, // http://www.compare-review-information.com JavaFX Sample code
      ImageView {
        x: 60
        y: 500
        image: tree2
      },
      ImageView {
        x: 190
        y: 470
        image: tree2
      },

      tree,

      ImageView {
        x: 120
        y: 360
        image: Image {
          url: "{__DIR__}images/sign.png"
          width: 180
          preserveRatio: true
        }
      },
      ImageView {
        x: 20
        y: 60
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 250
        }
        effect: GaussianBlur { radius: 40 }
      },
      ImageView {
        x: 520
        y: 90
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 100
        }
        effect:  GaussianBlur { radius: 20}
      },
      ImageView {
        x: 620
        y: 190
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 180
        }
        effect:  GaussianBlur { radius: 25}
      },
      ImageView {
        x: 600
        y: 380
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 150
        }
        effect:  GaussianBlur { radius: 33 }
      },
      ImageView {
        x: 0
        y: 490
        image: Image {
          url: "{__DIR__}images/cloud.png"
        }
        effect:  GaussianBlur { radius: 30 }
      },
      Text {
        x:170
        y: 450
        content: "许愿树"
        fill: Color.YELLOW
        font: Font.font ( null, FontWeight.BOLD, 30);
        effect: PerspectiveTransform {
                  ulx: xx    uly: yy
                  urx: xx+80 ury: yy-10
                  llx: xx-2  lly: yy+40
                  lrx: xx+80 lry: yy+38
                }
        }
      ]
    }
}

在程序中，我们把Stage的scene属性用渐变效果填充，可以得到蓝天的效果。在这个渐变效果中，startX和endX的值一样，startY和endY的值不同，因此是沿着Y方向（竖直）的渐变方式。起始颜色为深蓝（”#14acf8″），结束颜色为浅蓝(”#a4e6f8″)，在整个Stage的Y方向均匀变化，相关代码如下:

       fill: LinearGradient {
               startX: 0
               startY: 0
               endX: 0
               endY: 1.0
               proportional: true
               stops: [ Stop { offset: 0.0 color: Color.web("#14acf8") },
                        Stop { offset: 1.0 color: Color.web("#a4e6f8") }]
             }

白云的模糊效果是通过高斯算法来获取，例如在下面代码中，ImageView的effect属性：
GaussianBlur{ radius: 40 }，radius表示模糊渐变发范围的大小，数值越大，模糊度越大。

      ImageView {
        x: 20
        y: 60
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 250
        }
        effect:  GaussianBlur { radius: 40 }
      }

由于我们需要显示几朵不同大小的白云，我们需要把白云Image（cloud2.png）作大小调整，上面码中，我们通过改变width的值，并设置preserveRatio=true来保证长宽比例不变，这样就“创造”出不同大小的云块。相关代码段如下：( 本文见：http://www.javafxblogs.com )

  preserveRatio: true
  width: 250

还有要说明的一点是，在木牌子上的“许愿树”3个字，我们采用了维度变换（ PerspectiveTransform ）的效果,可以把2维的文字变成具有3维感觉的字形，呈梯形状。在PerspectiveTransform需要定义梯形的4个角的坐标，从而把原来长方形的区域映射成变形的字体。相关代码如下：

 Text {
        x:170
        y: 450
        content: "许愿树"
        fill: Color.YELLOW
        font: Font.font ( null, FontWeight.BOLD, 30);
        effect: PerspectiveTransform {
                  ulx: xx    uly: yy
                  urx: xx+80 ury: yy-10
                  llx: xx-2  lly: yy+40
                  lrx: xx+80 lry: yy+38
                }
        }

好了，到这里许愿树程序的界面就完成了，在下一篇文章中会继续介绍如何在树上“悬挂”愿望星星。如果你有JDK 1.5以上的环境（JDK1.6更佳），快点击下图来看看这个JavaFX版本的“愿望树”吧。当你的浏览器首次运行JavaFX程序时，会有一些等待下载的时间。

参见：http://www.javafxblogs.com（ 未完待续, 完整代码可在下一篇文章中下载 ）

JavaFX的sequence是与java中的数组类似的一种数据结构。sequence使用起来比数组灵活，例如可以支持元素的插入和删除，应该说更像Collection这样的数据结构。和数组明显不同的是，sequence不支持多维结构。因此，当我们需要使用多维数组时，可以在Java语言中定义一个多维数组，然后在JavaFX中调用。

下面是一个包含2维数组的Java程序：

/**
 *
 * @author Henry Zhang
 * JavaFX技术应用 http://www.javafxblogs.com
 *
 */
public class ArrayClass {

  public static int arr [ ][ ] = new int[2][2];

  static {
    for ( int i=0; i<2; i++)
      for ( int j=0; j<2; j++ )
        arr[i][j] = i+j;
  }
}

在JavaFX中我们可以这样调用:

var x = ArrayClass.arr;

for ( i in [0..1] )
  for ( j in [0..1] )
    println("array[{i}][{j}] = {x[i][j]}");

输出结果如下：

array[0][0] = 0
array[0][1] = 1
array[1][0] = 1
array[1][1] = 2

JavaFX 技术应用
JavaFX技术交流应用中心

最近写一些关于JavaFX的文章，发现需要一个语法显示工具以方便读者阅读。其实常用的IDE如NetBeans、Eclipse等都可以对语法的关键字、字符串常量等语法成分进行区别加亮显示。在博客或网页上通常有一类称为Syntax Highlighter的软件，可以是client端或server端的工具，把文章中的程序代码转化为彩色字体显示出来。常见的编程语言如Java,C/C++,C#,VB,JavaScript,Php等都有语法工具的支持，但JavaFX还没有，于是我决定自己做一个。

无论用那种工具，有关JavaFX的关键字列表都是必需的。因此，我花了些时间在google上，终于在openjfx网站上找到了所有关键字（保留字）。接下来就是改写javascript和CSS，最终生成JavaFX语法显示的页面。例如下面的代码范例：

package pacman;
import java.lang.Math;
import pacman.MazeData;
import pacman.PacMan;

/**
 * @author Henry Zhang
 */

public class MoveDecision {

  // x and y of an intended move
  public var x: Number;
  public var y: Number;

  // evaluate if the move is valid and its score if it's valid
  public function evaluate(pacMan:PacMan, isHollow:Boolean): Void {
    if ( x < 1 or y < 1 or y >= MazeData.GRID_SIZE
         or x >= MazeData.GRID_SIZE){
      score = -1;
      return ;
    }
  }
 . . .
}

如果要使用这个Syntax Highlighter，可以先下个SH 1.5.1的版本 ，然后再增加我这几个文件：

shBrushJavaFX.js
SyntaxHighlighter.css

具体的使用说明可以参考该工具的说明文档。