您的位置：首页 > 编程语言 > Java开发

JavaFX脚本入门

2007-08-17 15:54 197 查看

原文地址： 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...{

company: "Software ATV Inc."

phone: "0900090345"

e_mail: "maryj@yahoo.com"

Partners...{

company: "Winkle LTD"

phone: "090849435"

e_mail: "leonaw@yahoo.com"

Partners...{

company: "Press OJ"

phone: "340909879"

e_mail: "joet@yahoo.com"

}]

};

Frame ...{

content: Label ...{

text: bind "<html>

<h2 align='center'>- My Partners -</h2>

<td><b>Company</b></td>

<td><b>Phone</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.company}</td>

<td>...{t.phone}</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的著作。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航