原文地址：
http://www.onjava.com/pub/a/onjava/2007/07/27/introduction-to-javafx-script.html JavaFX是什么？
在2007年春季Sun发布了一个新的框架，叫做JavaFX。这只是一个通用性的名字，因为JavaFX有两个主要的组成部分：脚本（Script）和移动（Mobile），并且，将来Sun会开发为它开发更多的部分。
JavaFX的核心是JavaFX脚本，它是一种声明型的脚本语言。它和Java代码非常不同，但是却与Java类保持了高度的交互性。JavaFX脚本的很多类被设计用来更加容易地实现Swing和Java2D功能。使用JavaFX脚本，你只需要几行简单易懂的代码就可以开发GUI、动画和文字及图像炫酷效果。另外，还可以把Java和HTML代码封装到JavaFX脚本中。
第二个组成部分，JavaFX移动（JavaFX Mobile），是用来为移动设备开发Java应用的平台。最终它必将成为JavaFX脚本的主要平台，但是现在和本文内容并不相关。
JavaFX应用程序的一些示例（Some Examples of JavaFX Applications）
在我们开始学习一门新的语言之前，先看一些JavaFX代码的示例。可以在
JavaFX的官方网站上找到一些很好的示例资源。点击
JavaFX脚本2D图形指南（JavaFX Script 2D Graphics Tutorial）下载这些示例。在下载完成后，只需双击
tutorial.jnlp文件。几秒后，你就应该可以如图1所示的程序（如果没有看到，那么你必须配置Java Web Start支持
.jnlp后缀。）
图1 运行tutorial.jnlp指南
花些时间浏览一下这些示例及其源码。其中有些有趣的效果使用几行JavaFX代码就可以实现。
如果你仍旧对JavaFX的功能有所怀疑，那就看一下这两个demo：StudioMoto和Tesla Motors网站的部分重建。点击
JavaFX Script Studiomoto Demo和
JavaFX Script Tesla Demo可以下载它们的demo。它们都需要使用Java Web Start来运行，根据系统配置的不同，它们可能自动启动，或者需要手动运行下载.jnlp文件。
下载和安装JavaFX（Download and Install JavaFX）
如果你有兴趣学习开发JavaFX应用程序，那么你应该知道至少三种使用JavaFX的工作方式。同样，了解JavaFX应用程序不是基于浏览器的也非常重要。最简单、最快的方式是基于一个称为JavaFXPad的轻量级工具。使用这个工具最大好处是，可以几乎是立即看到在编辑器上做的任何改变的效果。点击
JavaFX Script JavaFXPad Demo从Project OpenJFX上下载这个工具。 再次说明，需要使用Java Web Start运行该工具（见图2）。
图2 运行JavaFXPad编辑器
使用JavaFX脚本的另外一个方式是使用NetBeans5.5的JavaFX脚本插件或者Eclipse3.2的JavaFX脚本插件（当然，在下载和安装这些插件之前，你必须已经安装了NetBeans 5.5或者Eclipse 3.2）。
如果你决定使用NetBeans5.5 JavaFX插件开始，那么在Project OpenJFX上的
JavaFX for NetBeans指南应该有所帮助。类似地，如果想使用Eclipse的JavaFX插件，就去
JavaFX for Eclipse。注意，本文的所有示例都在NetBeans5.5的JavaFX插件上通过了测试，同样应该可以在其他列出的方式中运行。
使用NetBeans5.5的JavaFX插件测试Hello World应用程序（Testing the Hello World Application with JavaFX Plug-In for NetBeans5.5）
按照学习新语言的同样方式，我们首先编写一个必不可少的Hello World程序：
代码表1
import javafx.ui.*;
import java.lang.System;
Frame ...{
centerOnScreen: true
visible: true
height: 50
width: 350
title: "HelloWorld application..."
background: yellow
onClose: operation() ...{System.exit(0);}
content: Label ...{
text: "Hello World"
}
}
要在NetBeans5.5中开发和运行这个简单的示例，有以下步骤：
1、启动NetBeans5.5。
2、从主菜单中选择File->New Project。
3、在New Project窗口中，选择General，接着是Java Application（点击Next）。
4、在New Java Application窗口中，在Project Name文本框中输入“FXExample”。
5、在同一个窗口中，使用Browse按钮选择项目的存放位置。
6、取消选择“Set as main project”和“Create main class”复选框（点击Finish）。
7、右键点击FXExample->Source Packages，然后选择New->File/Folder。
8、在New File窗口中，选择Other，然后是JavaFX File文件类型（点击Next）。
9、在New JavaFX File窗口中，File Name输入“HelloWorld”，Folder输入“src”（点击Finish）。
10、从代码表1中复制代码，粘贴到
HelloWorld.fx中。
11、右键点击一个FXExample项目，选择Properties。
12、在Project Properties - FXExample中，从Categories面板中选择Run节点。
13、在Arguments文本框中输入“Hello World”（点击OK）。
14、右键点击
FXExample项目，选择Run Project选项。
如果一切正常，应该可以看到图3所示的框架：
图3 在NetBeans5.5运行Hello World应用程序
现在已经有了开发和运行JavaFX程序的软件支持。
JavaFX语法（JavaFX Syntax）
在开始JavaFX之前，我们首先看一下语法中的一些亮点（fine points）。如果已经熟悉Java语言的语法，那么JavaFX的大部分语法看起来非常相似，但是其中一些完全不同。
JavaFX的原始类型（JavaFX Primitive Types）
JavaFX支持四种原始类型：
String（对应
java.lang.String）、
Boolean（对应
java.lang.Boolean）、
Number（对应
java.lang.Number）和
Integer（对应
byte、
short、
int、
long、
BigInteger）。
JavaFX的变量（JavaFX Variables） JavaFX的变量使用
var关键字声明，如下例所示：
var x:Number = 0.9;
var name:String = "John";
var y:Integer = 0;
var flag:Boolean = true;
var numbers:Number = [1,2,3,4,5];
JavaFX操作符（JavaFX Operators）
在Java中被熟知的操作符&&、||和!，在JavaFX中为：
Java：&& JavaFX：and
Java：|| JavaFX：or
Java：! JavaFX：not
JavaFX函数（JavaFX Functions）
JavaFX支持函数。下面是一个简单的函数示例，包含了参数、变量声明和一个返回语句：
function taxes(x) ...{
var t:Number = (19.0/100.0)*x;
return t;
}
JavaFX if语句（JavaFX if Statement） 在JavaFX中，可以通过
if语句构造条件语句块。在
if语句中必须使用花括号。如果
else子句是另外一个
if语句，可以跳过花括号：
if (place_your_condition_here) ...{
//do something
} else if (place_your_condition_here) ...{
//do something
} else ...{
//do something
}
JavaFX while语句（JavaFX while Statement） JavaFX的
while语句类似Java的
while语句。该语句中要必须包含花括号：
while (place_your_condition_here)
...{
//do something
}
JavaFX for语句（JavaFX for Statement）
for语句用来在一个区间（区间使用方括号[]和..符号表示）上循环：
//i will take the values: 0, 1, 2, 3, 4, 5
for (i in [0..5])
...{
//do something with i
}
JavaFX过程（JavaFX Procedures）
JavaFX的过程使用
operation关键字标识。下面是一个简单的示例：
operation startClock() ...{
do...{
while(true)
...{
if(seconds>=360)
...{seconds = 0; seconds = [0,6..360] dur 60000 linear;}
if(minutes>=360)
...{minutes = 0; minutes = [0,6..360] dur 3600000 linear;}
if(hours>=360)
...{hours = 0; hours = [0,6..360] dur 43200000 linear;}
}
}
}
JavaFX类（JavaFX Classes）
JavaFX的类使用
class关键字标识。JavaFX的类可以继承多个类，使用
extends关键字，其后面是逗号分隔的那些基类的名称。在花括号中，可以放置属性、函数和操作，如下例所示：
class Order ...{
attribute order_nr: String;
attribute ordertype: Order inverse Order.products;
attribute products: Order* inverse Order.ordertype;
function getOrderNr(): String;
operation addOrder(order: Order);
}
注意，属性使用
attribute关键字声明，并且函数体和过程体并不在类的内部。它们在类声明的后面定义，接下来就可以看到。
inverse子句是可选的，它说明了该属性和类的其他属性的双向关系。如此，JavaFX可以自动执行更新（插入<insert>、替换<replace>和删除<delete>）。
可以在Java.net上找到
更加完整的指南。
玩转JavaFX（Playing Around wih JavaFX）
在这一部分中，我们将会看到一系列示例，涵盖JavaFX各种功能和特性。这些示例的主要目的是使你熟悉JavaFX的代码编写和JavaFX程序的逻辑。第二个目的是使你确信，当你需要使用几行代码开发酷GUI、动画和漂亮的效果时，应该优先考虑JavaFX。所有的例子都将会介绍JavaFX的特定技巧。
每个例子之前都有一段描述，所有不要期望行注释。只要你亲自运行，所有的这些例子都应该是非常容易理解的，我们开始吧。
当需要使用System.out.println
打印变量/属性的值时，可以替换引号中间的其名称，如代码表2所示：
代码表2
//expressions within quoted text
import java.lang.System;
var mynumber:Number = 10;
System.out.println("Number is: {mynumber}");
结果是：Number is: 10
JavaFX支持一个非常有用的功能，即变量基数。这个功能使用接下来的三个操作符实现：
?：可选（可能是null）
+：1或多个
*：0或多个
代码表3：
//cardinality of the variable
import java.lang.System;
var mynumbers:Number* = [1,2,7];
System.out.println("Numbers are: {mynumbers}");
结果是：Numbers are: 1 2 7
JavaFX中，变量声明时没有指定变量的类型。这并不会产生错误，因为JavaFX会根据变量的用法自动判断其类型。
代码表4：
//the variable's type is optional
import java.lang.System;
var days = ["Monday,","Friday,","Sunday"];
System.out.println("You have to work: {days}");
结果：You have to work: Monday, Friday, Sunday
可以使用sizeof操作符获得数组的大小：
代码表5：
//getting the size of an array
import java.lang.System;
var lotto = [21,30,11,40,5,6];
System.out.println("Array size:{sizeof lotto}");
结果：Array Size: 6
要从一个数组中获得其满足条件的子数组，可以使用[]操作符。条件包含在[]中，求值结果为Boolean类型。这很类似于XPath谓词。
代码表6：
//using the [] operator - similar to its use in XPath
import java.lang.System;
var mynumbers = [1,2,7,3,30,15,14,6,4];
var numbers = mynumbers[n|n < 10];
System.out.println("Numbers smaller that 10 are: {numbers}");
结果：Numbers smaller than 10 are: 1 2 7 3 6 4
可以使用indexof操作符得到数组中某一位置上的元素：
代码表7：
//returning the ordinal position of an element within an array
import java.lang.System;
var mynumbers = [1,2,7,3,30,15,14,6,4];
var number_four = mynumbers[indexof . == 4];
System.out.println("Number four:{number_four}");
结果：Number of four: 30
当需要向数组中插入一个元素时，可以使用insert语句和下面中的一个：
at first：插入到第一个位置
at last：插入到最后一个位置上（默认值）
before：在某个位置之前插入
after：在某个位置之后插入
从数组中删除一个元素时，可以使用delete语句：
代码表8：
//insert and delete statement
import java.lang.System;
var mynumbers = [1,2,7];
System.out.println("Before inserting anything:
...{mynumbers}");
insert 10 into mynumbers;
System.out.println("After inserting at the end
the "10" value:{mynumbers}");
insert [8,6,90] as first into mynumbers;
System.out.println("After inserting at the first
positions the "8,6,90" values:{mynumbers}");
insert 122 as last into mynumbers;
System.out.println("After inserting at the
end the "122" value:{mynumbers}");
insert 78 before mynumbers[3];
insert 11 after mynumbers[3];
System.out.println("After inserting the "78"
and "11" values before/after the 3rd
element:...{mynumbers}");
delete mynumbers[. == 122];
System.out.println("After deleting:{mynumbers}");
结果：
Before inserting anything: 1 2 7
After inserting the 10 value at the end: 1 2 7 10
After inserting the 8, 6 and 90 values at the first position: 8 6 90 1 2 7 10
After inserting the 122 value at the end:8 6 90 1 2 7 10
After inserting the 78 and 1 value before/after the 3rd element: 8 6 90 78 11 1 2 7 10 122
After deleting: 8 6 78 11 1 2 7 10
JavaFX的一个重要的功能是其list comprehension。这个功能由select和foreach操作符实现。这里有两个从一个区间获得偶数的例子（一个使用select，一个是用foreach）。
代码表9：
//JavaFX select and foreach operators
import java.lang.System;
function odd(p:Number) ...{
return select i from i in [1.0 ..p]
where (i%2 == 0.0);
}
var result = odd(10.0);
System.out.println("Odd numbers:{result}");
结果：Odd numbers:2.0 4.0 6.0 8.0 10.0
代码表10（和9相同，不过是使用foreach）
//JavaFX select and foreach operators
import java.lang.System;
function odd(p:Number) ...{
return foreach (i in [1.0 ..p] where (i%2 == 0.0)) i;
}
var result = odd(10.0);
System.out.println("Odd numbers:{result}");
下面的例子说明foreach在创建漂亮的效果时非常有用。
代码表11
//JavaFX select and foreach operators
import java.lang.*;
import javafx.ui.*;
import javafx.ui.canvas.*;
Frame ...{
centerOnScreen: true
visible: true
height: 500
width: 500
title: "Foreach demo..."
onClose: operation() ...{System.exit(0);}
content: ScrollPane ...{
background: white
view: Canvas ...{
content: bind foreach (i in [1..8], j in [1..8])
Rect ...{
x: i*30
y: j*30
width:30
height:30
fill: Color ...{red: (100+i) green: (100+j) blue: (100+(i*j))}
stroke:white
strokeWidth:1
}
}
}
}
图4 运行代码表11
如果需要使用的变量或者属性和JavaFX的关键字名字一样，可以把名字放在尖括号中间，如下：
代码表12：
//Identifier quotes
import java.lang.System;
for (<<for>> in [0..3]) ...{
System.out.println("for = {<<for>>}");
}
结果：for = 0 for = 1 for = 2 for = 3
如果需要开发开发Swing接口时，JavaFX可以是一个非常棒的工具。因为JavaFX可以相当明显地减少代码量，并且可以非常良好地和javax.swing.*包协同工作。在前面的部分中（使用NetBeans5.5的JavaFX插件测试Hello World程序），已经看到了创建一个简单的框架是多么容易。下面的两个例子，分别创建一个Button和一个TextField。
代码表13：
import javafx.ui.*;
import java.lang.System;
Frame...{
content: Button ...{
text: "Exit"
action: operation() ...{
System.exit(0);
}
}
visible: true
}
图5 运行代码表13
代码表14：
import javafx.ui.*;
Frame ...{
content: GroupPanel ...{
var myRow = Row ...{ alignment: BASELINE }
var label_col = Column ...{ alignment: TRAILING }
var field_col = Column ...{ alignment: LEADING }
rows: [myRow]
columns: [label_col, field_col]
content:
[SimpleLabel ...{
row: myRow
column: label_col
text: "Type your text here:"
},
TextField ...{
row: myRow
column: field_col
columns: 50
}]
}
visible: true
};
图6 运行代码表14
可以Java.net上找到一个使用JavaFX创建Swing接口的指南。
JavaFX代码可以很容易地集成到Java代码中。这里有一个示例，使用JavaFX将图片加载到一个框架内，允许用户选择一个矩形区域并保存。捕获和保存的操作由Java代码完成。
代码表15：
import java.io.*;
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.awt.Robot;
import java.awt.Rectangle;
import java.awt.image.RenderedImage;
import javax.imageio.ImageIO;
import java.lang.System;
class CaptureExample extends CompositeNode...{
attribute lx: Integer;
attribute ly: Integer;
operation CaptureExample();
}
attribute CaptureExample.lx = 0;
attribute CaptureExample.ly = 0;
operation saveCapture(lx_copy:Integer, ly_copy:Integer) ...{
var robot = new Robot();
var rect = new Rectangle (lx_copy, ly_copy, 50, 50);
var BI=robot.createScreenCapture(rect);
var file = new File(".//capture.jpg");
ImageIO.write((RenderedImage)BI, "jpg", file);
}
function CaptureExample.composeNode() =
Group...{
transform: []
content:[ImageView ...{
transform: []
image: Image ...{ url: ".//app//Sunset.gif" }
cursor: DEFAULT
onMouseClicked: operation(e:CanvasMouseEvent) ...{
saveCapture(e.source.XOnScreen,e.source.YOnScreen);
}
onMouseMoved: operation(e:CanvasMouseEvent) ...{
lx = e.x;
ly = e.y;
}
},
Rect...{
x: bind lx
y: bind ly
width: 50
height:50
strokeWidth: 1
stroke: black
}]
};
Frame ...{
centerOnScreen: true
visible: true
height: 230
width: 300
title: "Capture the screen..."
onClose: operation() ...{System.exit(0);}
content: ScrollPane ...{
background: white
view: Canvas ...{
background: black
cursor: DEFAULT
content: CaptureExample
}
}
}
注意bind的使用。这是JavaFX一个重要的操作符，用来属性的增量和懒惰求值（incremental and lazy evaluation of attributes）。你可以在JavaFX编程语言文档上找到更多关于该操作符的信息。
同样，需要注意的是，在上面的应用程序中使用了两个鼠标事件进行交互：鼠标点击（onMouseClicked）和鼠标移动（onMouseMoved）。JavaFX支持下列鼠标事件：
onMouseClicked
onMouseMoved
onMousePressed
onMouseExited
onMouseEntered
onMouseReleased
onMouseDragged
使用JavaFX的do later语句可以异步执行代码，如下：
代码表16：
Listing 16
//asynchronous execution with do later statement
import java.lang.System;
var s1 = "My name is ";
var s2 = "Anghel Leonard";
do later ...{
System.out.println(s2);
}
System.out.println(s1);
结果：My name is Anghel Leonard
JavaFX允许把部分代码放在do语句中，然后在一个单独的线程中执行。使用AWT事件分发线程（AWT Event Dispatch Thread）技术可以处理所有引入的事件。下面是一个示例，在do语句中使用了无限循环。注意，即使有一个无限循环仍然可以正常关闭窗口。
代码表17：
import javafx.ui.*;
import java.lang.System;
import javafx.ui.canvas.*;
import java.util.Random;
class DoExample extends CompositeNode...{
attribute randomfill: Color;
operation changeOpacity();
}
attribute DoExample.randomfill = Color...{red:0 green:0 blue:0};
operation DoExample.changeOpacity() ...{
do...{
while(true)
...{
var r = new Random();
var g = r.nextInt(255);
randomfill = Color...{red:g green:g blue:g};
}
}
}
function DoExample.composeNode() =
Group ...{
transform: []
content: [
Text ...{
x: 20
y: 20
content: "Because of "do" you can close this window..."
font: Font ...{face: VERDANA, style: [ITALIC, BOLD], size: 20}
fill: bind randomfill
opacity: 0.5
onMouseClicked: operation(e:CanvasMouseEvent) ...{
changeOpacity();
}
}]
};
Frame ...{
centerOnScreen: true
visible: true
height: 100
width: 580
title: ""Do" example..."
onClose: operation() ...{System.exit(0);}
content: ScrollPane ...{
background: white
view: Canvas ...{
background: black
cursor: DEFAULT
content: DoExample
}
}
}
使用JavaFX的Label类可以将JavaFX代码和HTML代码集成到HTML代码中。这个类支持和web应用程序中同样方式的HMTL和CSS。下面是一个渲染HTML表格的例子。
代码表18
import javafx.ui.*;
import java.lang.System;
import javafx.ui.canvas.*;
class Partners ...{
attribute name: String;
attribute company: String;
attribute phone: String;
attribute e_mail: String;
attribute partners: Partners*;
}
var myPartners = Partners ...{
partners: [Partners...{
name: "Mary J"
company: "Software ATV Inc."
phone: "0900090345"
e_mail: "maryj@yahoo.com"
},
Partners...{
name: "Leona W"
company: "Winkle LTD"
phone: "090849435"
e_mail: "leonaw@yahoo.com"
},
Partners...{
name: "Joe T"
company: "Press OJ"
phone: "340909879"
e_mail: "joet@yahoo.com"
}]
};
Frame ...{
content: Label ...{
text: bind "<html>
<h2 align='center'>- My Partners -</h2>
<table align='center' border='0' bgcolor='#BBAAEE'>
<tr bgcolor='#FFEE55'>
<td><b>Name</b></td>
<td><b>Company</b></td>
<td><b>Phone</b></td>
<td><b>E-mail</b></td>
</tr>
...{
if (sizeof myPartners.partners == 0)
then "<tr bgcolor='#432211'><td colspan='8'><b>
I have no partners...</b></td></tr>"
else foreach (t in myPartners.partners)
"<tr bgcolor='#FF25AD'>
<td>...{t.name}</td>
<td>...{t.company}</td>
<td>...{t.phone}</td>
<td>...{t.e_mail}</td>
</tr>"
}
</table>
</html>"
}
visible: true
}
图7 运行代码表18
在本文的最后异步部分，我们将要看到两个程序，它们演示了使用JavaFX创建复杂动画是多么容易。第一个程序模拟钟表。这个设计基于四个使用JavaFX代码实现其动画的图片。
代码表19
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;
class Clock extends CompositeNode...{
attribute seconds: Number+;
attribute minutes: Number+;
attribute hours: Number+;
operation startClock();
}
attribute Clock.seconds = 360;
attribute Clock.minutes = 360;
attribute Clock.hours = 360;
operation Clock.startClock() ...{
do...{
while(true)
...{
if(seconds>=360) ...{seconds = [0,6..360]
dur 60000 linear;}
if(minutes>=360) ...{minutes = 0; minutes = [0,6..360]
dur 3600000 linear;}
if(hours>=360) ...{hours = 0;hours = [0,6..360]
dur 43200000 linear;}
}
}
}
function Clock.composeNode() =
Group ...{
onMouseClicked: operation(e:CanvasMouseEvent) ...{
startClock();
}
transform: []
content:[ImageView ...{
image: Image ...{ url: ".//app//clockempty.gif" }
},
ImageView ...{
transform: bind [translate(203,82),
rotate (seconds,2.5,125)]
image: Image ...{ url: ".//app//l1.gif" }
antialias: true
},
ImageView ...{
transform: bind [translate(203,100),
rotate (minutes,2.5,107)]
image: Image ...{ url: ".//app//l2.gif" }
antialias: true
},
ImageView ...{
transform: bind [translate(203,115),
rotate (hours,2.5,92)]
image: Image ...{ url: ".//app//l3.gif" }
antialias: true
},
Circle ...{
cx: 205
cy: 205
radius: 13
fill: red
strokeWidth: 1
}]
};
Frame ...{
centerOnScreen: true
visible: true
height: 450
width: 450
title: "JavaFX - Clock"
onClose: operation() ...{System.exit(0);}
content: ScrollPane ...{
background: white
view: Canvas ...{
background: black
cursor: DEFAULT
content: Clock
}
}
}
图8 运行代码表19
注意dur（持续时间）操作符。JavaFX提供了此操作符来创建动画。它用来将数组异步应用到一个时间间隔上。在从数组中返回一个元素之前，JavaFX会等待以毫秒为单位的一段时间。这个过程会持续到返回数组中的所有元素。有以下四种插值（interpolation）类型：
linear
easein
easeout
easeboth
默认值是ease-in和ease-out的结合。
第二个程序模拟一系列的弹出菜单，并且可以在屏幕上拖动。点击菜单顶部时会使用漂亮的透明效果来隐藏或者显示该菜单。该例中使用JavaFX的绘画能力完成整个设计：
代码表20
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;
class MenuOptions extends CompositeNode...{
attribute px: Integer;
attribute py: Integer;
attribute lx: Integer;
attribute ly:Integer;
attribute lw:Integer;
attribute itemsOpacity:Number;
attribute menutext: String;
}
trigger on new MenuOptions ...{
this.px = 0;
this.py = 0;
this.menutext = "";
this.lx = 0;
this.ly = 0;
this.lw = 150;
this.itemsOpacity = 0.0;
}
function MenuOptions.composeNode() =
Group ...{
transform: bind []
opacity: bind itemsOpacity
content:[Rect ...{
x: bind lx
y: bind ly
width: lw
height: 20
arcHeight: 10
arcWidth: 10
fill: Color ...{red:190 green:181 blue:215}
stroke: Color ...{red:68 green:54 blue:103}
strokeWidth: 2
onMouseEntered: operation(e:CanvasMouseEvent) ...{
if(itemsOpacity == 0.7) ...{itemsOpacity = 1.0;}
}
onMouseExited: operation(e:CanvasMouseEvent) ...{
if(itemsOpacity == 1.0) ...{itemsOpacity = 0.7;}
}
onMouseClicked: operation(e:CanvasMouseEvent) ...{
eventListener(this.menutext);
}
},
Text ...{
x: bind lx+5
y: bind ly+5
content: bind menutext
font: Font ...{face: VERDANA, style: [BOLD], size: 11}
fill:Color ...{red:68 green:54 blue:103}
}]
};
class MainMenu extends CompositeNode...{
attribute option: String;
attribute px: Integer;
attribute py: Integer;
attribute lx: Integer;
attribute ly:Integer;
attribute lw:Integer;
attribute menutext: String;
attribute step: Integer;
attribute submenu: MenuOptions+;
operation addSubmenu(t:MenuOptions);
operation show_hide();
}
trigger on new MainMenu ...{
this.option = "";
this.px = 0;
this.py = 0;
this.menutext = "";
this.lx = 0;
this.ly = 0;
this.lw = 150;
this.step = 20;
this.submenu = null;
}
operation MainMenu.addSubmenu(t:MenuOptions) ...{
t.lx = this.lx;
t.lw = this.lw;
t.ly = this.ly+step;
step=step+20;
insert t into submenu;
}
operation MainMenu.show_hide() ...{
if(submenu.itemsOpacity[1] == 0.7)...{submenu.itemsOpacity =
[0.7,0.6,0.5,0.4,0.3,0.2,0.1,0.0] dur 1200;}
else if(submenu.itemsOpacity[1] == 0.0)...{
submenu.itemsOpacity =
[0.1,0.2,0.3,0.4,0.5,0.6,0.7] dur 1200;}
}
function MainMenu.composeNode() =
Group ...{
transform: bind []
content:[Rect ...{
x: bind lx
y: bind ly
height: 20
width: bind lw
arcHeight: 10
arcWidth: 10
fill: Color ...{red:68 green:54 blue:103}
stroke: Color ...{red:190 green:181 blue:215}
strokeWidth: 2
onMouseDragged: operation(e:CanvasMouseEvent) ...{
lx += e.localDragTranslation.x;
ly += e.localDragTranslation.y;
submenu.lx += e.localDragTranslation.x;
submenu.ly += e.localDragTranslation.y;
}
onMouseClicked: operation(e:CanvasMouseEvent) ...{
show_hide();
}
},
Text ...{
x: bind lx+5
y: bind ly+5
content: bind menutext
font: Font ...{face: VERDANA, style: [BOLD], size: 11}
fill:Color ...{red:190 green:181 blue:215}
},
bind submenu]
};
var menu_1 = new MainMenu();
menu_1.lx = 120;
menu_1.ly = 140;
menu_1.lw = 128;
menu_1.menutext = "Navigate";
var submenu_11 = new MenuOptions();
submenu_11.menutext = "Go to Class...";
var submenu_12 = new MenuOptions();
submenu_12.menutext = "Go to Test";
var submenu_13 = new MenuOptions();
submenu_13.menutext = "Back";
var submenu_14 = new MenuOptions();
submenu_14.menutext = "Forward";
var submenu_15 = new MenuOptions();
submenu_15.menutext = "Go to Line...";
menu_1.addSubmenu(submenu_11);
menu_1.addSubmenu(submenu_12);
menu_1.addSubmenu(submenu_13);
menu_1.addSubmenu(submenu_14);
menu_1.addSubmenu(submenu_15);
var menu_2 = new MainMenu();
menu_2.lx = 260;
menu_2.ly = 140;
menu_2.lw = 90;
menu_2.menutext = "Refactor";
var submenu_21 = new MenuOptions();
submenu_21.menutext = "Rename....";
var submenu_22 = new MenuOptions();
submenu_22.menutext = "Pull Up...";
var submenu_23 = new MenuOptions();
submenu_23.menutext = "Push Down...";
menu_2.addSubmenu(submenu_21);
menu_2.addSubmenu(submenu_22);
menu_2.addSubmenu(submenu_23);
operation eventListener(s:String) ...{
System.out.println("You choose:{s}");
}
Frame ...{
centerOnScreen: true
visible: true
height: 500
width: 500
title: "JavaFX - Menu"
onClose: operation() ...{System.exit(0);}
content: ScrollPane ...{
background: white
view: Canvas ...{
background: black
cursor: DEFAULT
content: [menu_1, menu_2]
}
}
}
图9 运行代码表20
注意，JavaFX使用触发器（类似SQL）代替构造函数。触发器使用关键字trigger标识，有头和体组成。头说明了在执行触发器体的内容之前必须发生的事件。触发器管理的事件可以是创建（created）、插入（inserted）、删除（deleted）或者替换（replaced）。关于触发器的更多细节请在OpenJFX网站上查找。
总结（Conclusion）
JavaFX脚本（JavaFX Script）一门兼容Java平台的新语言。使用它，你可以轻松创建丰富的、动态的用户界面，而它花费的时间比使用Java Swing和Java 2D创建同样效果要少得多。在本文中，我们逐步学习了基础语法、IDE支持，并且建立了演示程序，它们展示了JavaFX的部分功能。很快，JavaFX就会成为Java开发者工具箱中必不可少的工具。
相关资源（Resources）
Sample code for this article (for running the examples create a new NetBeans project)
The offical JavaFX site: from here you can download demos, specifications and plug-ins
JavaFX classes documentation: get help with JavaFX classes
Plug-in for NetBeans: get the JavaFX plug-in for NetBeans
Plug-in for Eclipse: get the JavaFX plug-in for Eclipse
关于作者
Anghel Leonard是一个有超过12年开发经验的高级Java开发人员，专注于GIS应用开发。他已经写了两本关于XML和Java的著作。