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                   要在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关键字声明，如下例所示：       
          JavaFX操作符（JavaFX Operators）

          在Java中被熟知的操作符&&、||和!，在JavaFX中为：
          Java：&&     JavaFX：and
          Java：||         JavaFX：or
          Java：!          JavaFX：not

          JavaFX函数（JavaFX Functions）

          JavaFX支持函数。下面是一个简单的函数示例，包含了参数、变量声明和一个返回语句：

          JavaFX if语句（JavaFX if Statement）

        在JavaFX中，可以通过 if语句构造条件语句块。在 if语句中必须使用花括号。如果 else子句是另外一个 if语句，可以跳过花括号：

         JavaFX while语句（JavaFX while Statement）

         JavaFX的 while语句类似Java的 while语句。该语句中要必须包含花括号：

          JavaFX for语句（JavaFX for Statement）

          for语句用来在一个区间（区间使用方括号[]和..符号表示）上循环：

           JavaFX过程（JavaFX Procedures）

          JavaFX的过程使用 operation关键字标识。下面是一个简单的示例：

         JavaFX类（JavaFX Classes）

        JavaFX的类使用 class关键字标识。JavaFX的类可以继承多个类，使用 extends关键字，其后面是逗号分隔的那些基类的名称。在花括号中，可以放置属性、函数和操作，如下例所示：
        注意，属性使用 attribute关键字声明，并且函数体和过程体并不在类的内部。它们在类声明的后面定义，接下来就可以看到。
        inverse子句是可选的，它说明了该属性和类的其他属性的双向关系。如此，JavaFX可以自动执行更新（插入<insert>、替换<replace>和删除<delete>）。
        可以在Java.net上找到 更加完整的指南。

        玩转JavaFX（Playing Around wih JavaFX）

        在这一部分中，我们将会看到一系列示例，涵盖JavaFX各种功能和特性。这些示例的主要目的是使你熟悉JavaFX的代码编写和JavaFX程序的逻辑。第二个目的是使你确信，当你需要使用几行代码开发酷GUI、动画和漂亮的效果时，应该优先考虑JavaFX。所有的例子都将会介绍JavaFX的特定技巧。
        每个例子之前都有一段描述，所有不要期望行注释。只要你亲自运行，所有的这些例子都应该是非常容易理解的，我们开始吧。
        当需要使用System.out.println 打印变量/属性的值时，可以替换引号中间的其名称，如代码表2所示：
        代码表2

        结果是：Number is: 10

         JavaFX支持一个非常有用的功能，即变量基数。这个功能使用接下来的三个操作符实现：
            ?：可选（可能是null）
            +：1或多个
             *：0或多个

          代码表3：

          结果是：Numbers are: 1 2 7

        JavaFX中，变量声明时没有指定变量的类型。这并不会产生错误，因为JavaFX会根据变量的用法自动判断其类型。
        代码表4：

           结果：You have to work: Monday, Friday, Sunday

           可以使用sizeof操作符获得数组的大小：
           代码表5：

         结果：Array Size: 6
         要从一个数组中获得其满足条件的子数组，可以使用[]操作符。条件包含在[]中，求值结果为Boolean类型。这很类似于XPath谓词。
         代码表6：

        结果：Numbers smaller than 10 are: 1 2 7 3 6 4
        可以使用indexof操作符得到数组中某一位置上的元素：
        代码表7：

          结果：Number of four: 30

          当需要向数组中插入一个元素时，可以使用insert语句和下面中的一个：
              at first：插入到第一个位置
              at last：插入到最后一个位置上（默认值）
              before：在某个位置之前插入
              after：在某个位置之后插入
         从数组中删除一个元素时，可以使用delete语句：
         代码表8：         

         结果：
         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：     

        结果：Odd numbers:2.0 4.0 6.0 8.0 10.0
        代码表10（和9相同，不过是使用foreach）        

        下面的例子说明foreach在创建漂亮的效果时非常有用。
         代码表11 

图4   运行代码表11

        如果需要使用的变量或者属性和JavaFX的关键字名字一样，可以把名字放在尖括号中间，如下：
        代码表12：

         结果：for = 0 for = 1 for = 2 for = 3

         如果需要开发开发Swing接口时，JavaFX可以是一个非常棒的工具。因为JavaFX可以相当明显地减少代码量，并且可以非常良好地和javax.swing.*包协同工作。在前面的部分中（使用NetBeans5.5的JavaFX插件测试Hello World程序），已经看到了创建一个简单的框架是多么容易。下面的两个例子，分别创建一个Button和一个TextField。
        代码表13：

图5 运行代码表13

       代码表14：

图6  运行代码表14

       可以Java.net上找到一个使用JavaFX创建Swing接口的指南。
        JavaFX代码可以很容易地集成到Java代码中。这里有一个示例，使用JavaFX将图片加载到一个框架内，允许用户选择一个矩形区域并保存。捕获和保存的操作由Java代码完成。
        代码表15：

         注意bind的使用。这是JavaFX一个重要的操作符，用来属性的增量和懒惰求值（incremental and lazy evaluation of attributes）。你可以在JavaFX编程语言文档上找到更多关于该操作符的信息。
         同样，需要注意的是，在上面的应用程序中使用了两个鼠标事件进行交互：鼠标点击（onMouseClicked）和鼠标移动（onMouseMoved）。JavaFX支持下列鼠标事件：
        onMouseClicked
        onMouseMoved
        onMousePressed
        onMouseExited
        onMouseEntered
        onMouseReleased
        onMouseDragged
        使用JavaFX的do later语句可以异步执行代码，如下：
        代码表16：

         结果：My name is Anghel Leonard
         JavaFX允许把部分代码放在do语句中，然后在一个单独的线程中执行。使用AWT事件分发线程（AWT Event Dispatch Thread）技术可以处理所有引入的事件。下面是一个示例，在do语句中使用了无限循环。注意，即使有一个无限循环仍然可以正常关闭窗口。
        代码表17：

        使用JavaFX的Label类可以将JavaFX代码和HTML代码集成到HTML代码中。这个类支持和web应用程序中同样方式的HMTL和CSS。下面是一个渲染HTML表格的例子。
        代码表18

图7  运行代码表18
        在本文的最后异步部分，我们将要看到两个程序，它们演示了使用JavaFX创建复杂动画是多么容易。第一个程序模拟钟表。这个设计基于四个使用JavaFX代码实现其动画的图片。
        代码表19

图8 运行代码表19
       注意dur（持续时间）操作符。JavaFX提供了此操作符来创建动画。它用来将数组异步应用到一个时间间隔上。在从数组中返回一个元素之前，JavaFX会等待以毫秒为单位的一段时间。这个过程会持续到返回数组中的所有元素。有以下四种插值（interpolation）类型：
        linear
        easein
        easeout
        easeboth
        默认值是ease-in和ease-out的结合。

        第二个程序模拟一系列的弹出菜单，并且可以在屏幕上拖动。点击菜单顶部时会使用漂亮的透明效果来隐藏或者显示该菜单。该例中使用JavaFX的绘画能力完成整个设计：
       代码表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的著作。