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后缀。）

           图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的著作。
        
         

时间： 2024-10-29 04:58:10

JavaFX脚本入门的相关文章

JavaFX学习曲线日记-1：探索JavaFX脚本

本文由SDN全职作者兼开发者John O'Conner编写,文中坦 率地记录了他在学习JavaFX脚本语言过程中的经历.本学习曲线日记系列将致力于介绍 JavaFX技术并指导初学者开始使用它. JavaFX脚本在2007年3月的JavaOne大会上面 世,虽然这个技术非常新鲜,但Sun和技术社区一直在努力使其每周都有引人注目的进步. 因此现在是学习这种语言的好机会,你可以马上下载并使用它.这里提供一些展现JavaFX语 言特性的漂亮的演示应用. JavaFX脚本是一种全新的脚本语言,开发者能用来

shell脚本入门篇

shell脚本入门篇 简介 通常情况下,我们从命令行输入一个命令就能得到系统的响应.但是,当我们要一个接一个的输入命令而只是希望得到最后的结果时,这样做就显得没有效率了.要达到这样的目的,我们利用shell脚本来实现. shell参数 位置参数 由系统提供的参数称为位置参数.位置参数的值可以用$N得到,N是一个数字,即,如果N=1,那么位置参数为$1,和c语言中的数组比较类似.Linux中,会把输入的命令字符串进行分段并进行编号,从0开始.第0号表示为程序名字,从1开始就是表示传递给程序的参数.

JavaFX和JavaFX脚本的关系？

问题描述 最近接触JavaFX,有一个问题搞不懂.我在Oracle官网上看JavaFX的教程,都是用基本的Java语句写的,而我看一些书(如JavaFX本质论)却是用Java脚本写的.请问这两者有什么关系?现在哪种用的多?PS.Eclipse安装了JavaFX插件之后竟然没发现有创建Java脚本的选项...是我哪里搞错了么?请有经验的朋友出来讲解下,谢谢!

深入学习JavaFX脚本语言(面向Swing程序员) ---(下)

如果点击在ListBox中的"Pig.gif"(或者选择"Pig.gif"的RadioButton或ToggleButton),将出现下面的变化: 如果打开菜单,你将看到它也发生了同样的变化: ComboBoxes(下列选择框) JavaFX ComboBox与Swing JComboBox组件相关.我们将在上一个示例中添加两个组件来演示如何使用ComboBox.示例代码如下:

深入学习JavaFX脚本语言(面向Swing程序员) ---(上)

内容 比较声明式语法与过程式语法 为程序增加动态行为 学习更多的JavaFX GUI组件 关于译者 比较声明式语法和过程式语法 正像我们在前一节所看到的,JavaFX语言提供了一种声明式语法来表达结构和用户接口组件的内容.为了帮助你理解,让我们以纯过程的方式重写上面的程序,就像我们在编写Swing程序时经常做的那样: var win = new Frame(); win.title = "Hello World JavaFX"; win.width = 200; var label =

Shell脚本入门笔记

编写第一个shell脚本 如同其他语言一样,通过我们使用任意一种文字编辑器,比如 nedit.kedit.emacs.vi 等来编写我们的 shell 程序.程序必须以下面的行开始(必须方在文件的第一行):#!/bin/sh符号#!用来告诉系统它后面的参数是用来执行该文件的程序.在这个例子中我们使用/bin/sh 来执行程序.当编辑好脚本时,如果要执行该脚本,还必须使其可执行.要使脚本可执行:chmod +x filename然后,您可以通过输入: ./filename 来执行您的脚本. She

CGI脚本入门学习资料_其它

CGI脚本是什么? CGI脚本是怎样工作的? 一个简单的例子 我能用CGI脚本吗? 你的服务器配置允许CGI脚本吗? 你能编程吗? 你应该用什么编程语言? 你的服务器设置正确吗? 如果你的服务器不是UNIX系统呢? 解剖CGI脚本 输出头部 输出数据部 带阐述的脚本 传递其他信息给脚本 创建特殊的脚本输出 以装载另一个文本响应 无响应 处理表单的脚本 表单格式和表单脚本 GET 和 POST URL 编码 问题 CGI 变量 解码程序 uncgi cgi-lib.pl 解码文件上传的输入 自己做

MOOON通用的进程监控重拉起bash脚本

#!/bin/sh # http://code.google.com/p/mooon # 进程监控脚本,当指定进程不存在时,执行重启脚本将它拉起 # 特色: # 1.本监控脚本可重复执行,它会自动做互斥,保证总是只有一个监控脚本进程存在 # 2.互斥不仅依据监控脚本文件名,而且包含了它的命令行参数,只有整体相同时互斥才生效 # 3.对于被监控的进程,可以只指定进程名,也可以包含命令行参数 # 4.不管是监控脚本还是被监控进程,总是只针对属于当前用户下的进程 # 需要指定个数的命令行参数 # 参数

JavaFX学习曲线日记-2：声明用户接口

我已经使用Java语言定义用户接口近十年了,当我第一次体验JavaFX脚本时便马上感到 了这两种不同环境之间的差异.尽管程序员在Java语言中使用过程式代码来定义用户接口, 而在JavaFX脚本语言中你能够使用声明语句来定义用户接口.这是两者之间最大的不同,要 适应后者的确需要花费一定的时间和精力. 为了学习这种创建UI的全新声明风格, 我决定将一个从前使用Java语言实现的应用UI移植到JavaFX脚本上.于是我挑选了一个在 Java语言中心的Swingworker教学中使用的图片浏览应用.原