开发者社区> kjmeng> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaFX脚本入门

简介: 原文地址: http://www.onjava.com/pub/a/onjava/2007/07/27/introduction-to-javafx-script.html        JavaFX是什么?        在2007年春季Sun发布了一个新的框架,叫做JavaFX。
+关注继续查看
原文地址: 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后缀。)
运行tutorial.jnlp指南
           图1   运行tutorial.jnlp指南

        花些时间浏览一下这些示例及其源码。其中有些有趣的效果使用几行JavaFX代码就可以实现。
        如果你仍旧对JavaFX的功能有所怀疑,那就看一下这两个demo:StudioMoto和Tesla Motors网站的部分重建。点击JavaFX Script Studiomoto DemoJavaFX 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)。
运行JavaFXPad编辑器        
       图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所示的框架:
在NetBeans5.5中运行Hello World程序
     图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(对应byteshortintlongBigInteger)。

        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|< 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。这个功能由selectforeach操作符实现。这里有两个从一个区间获得偶数的例子(一个使用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
        }

    }

    }

}

运行代码表11
图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
}

运行代码表13
图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
}
;

运行代码表14
图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, 5050);
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
    }

运行代码表18
图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
    }

    }

}

运行代码表19
图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]
    }

    }

}

运行代码表20
图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的著作。
                  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java入门 - 面向对象 - 03.多态
多态是同一个行为具有多个不同表现形式或形态的能力。 多态就是同一个接口,使用不同的实例而执行不同操作,如图所示
175 0
JavaWev初识 Servlet生命周期
JavaWeb是通过请求运行的 通过求情激发运行 通过请求激发运行 Servlet 家族 javax,servlet.Servlet 规范接口 javax.
829 0
Java入门(一)---面向对象
二狗子.jpeg 面向对象: 关注现实存在的事物的各个方面的信息,从对象的角度出发,根据事物的特征进行程序设计。 类 类,是抽象的概念,可以理解为一个模型,用来确定对象将会拥有的特征(属性)和行为(方法) 对象,是类的实例表现形式,一个实体。
549 0
java入门应该看那些书
java入门应该看那些书
7146 0
java打包成可执行的jar或者exe的详细步骤
Java程序完成以后,对于Windows操作系统,习惯总是想双击某个exe文件就可以直接运行程序,现我将一步一步的实现该过程.最终结果是:不用安装JRE环境,不用安装数据库,直接双击一个exe文件,就可以运行程序     下面介绍过程:第一步:完成Java GUI程序在Eclipse下,程序能够正常运行.
1967 0
Java泛型--泛型入门
<h1>1、认识泛型</h1> <div> <img src="http://img.blog.csdn.net/20131014100333250" alt=""><br> </div> <div> <span style="white-space:pre"></span>按照此定义格式,定义一个point类。</div> <div> <pre name="code" class
1156 0
java 生成订单号
public class Order { private static int orderNum = 0001; public static String getOrderNo(){ long No = 0; SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String nowdate = sdf.
724 0
+关注
kjmeng
专注可用系统,分享所得
211
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载