重点推荐JavaFX文章：怎样用JavaFX编写游戏：吃豆人（Pac-Man）
在文章《 用JavaFX的effect实现许愿树(2) 》中，我们增加了鼠标事件处理逻辑和扩展多边形Polygon来画成的愿望星，我们已经可以在 JavaFX 的许愿树上悬挂许多五彩缤纷的愿望星了。现在，我们给程序再增加些功能，使得我们可以在星星上记录下许愿者的名字和愿望，那样就知道星星是谁的了。你可以点击以下画面启动许愿树，点击许愿树后，可以看到一个弹出的窗口来输入你的名字和愿望，点击“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技术应用博客
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++];
}
}
};
至此，单机版的许愿树就完成了。代码可以在这里下载：JavaFX许愿树源代码。下一步，我们会把这个单机版的改成联网版，这样不同的用户可以通过网页在同一棵许愿树上许愿了。需要做的工作包括把用户的许愿请求发送到网站，然后存入数据库中，再通过许愿树展现出来。服务器端的代码可重用原来PHP版本的代码，或者新写都可以。
本文同步发表于： JavaFX许愿树程序:Effect功能的应用(3)
