JavaFX Script. 是为了便于创建富客户机和 Internet 应用程序而设计的脚本编制语言。该语言具有高度可移植性，可以在任何支持 Java 技术的系统上运行，并且无需本地安装。它使用底层 Java 技术，使您可以轻松创建任何规模或复杂度的 GUI。

本文讲解 JavaFX Script. 语言的基础，并通过一个示例应用程序介绍一些 GUI 组件。为了从本文中获益，您应该对 Java 编程语言有很好的理解，并拥有 Swing 方面的开发经验。

JavaFX Script. 许可 在撰写本文之际，JavaFX Script. 是 Sun Microsystems 的 JavaFX 产品家族中的一员（另外一个家族成员是 JavaFX Mobile，它为支持 Java 技术的设备提供操作和应用环境）。Sun 已经宣布，JavaFX Script. 将在 GNU Public License v2 下颁发许可。与此同时，为了共享早期版本的 JavaFX Script. 语言，并对它进行合作开发，Sun 建立了 JavaFX 社区（参见 参考资料）。

准备使用 JavaFX Script.

在使用 JavaFX Script. 开发应用程序时，需要安装一个 JavaFX Script. 开发环境。目前已经有一些专门为 JavaFX Script. 设计的 IDE，也有一些用于其他 Java 开发环境的 JavaFX Script. 插件。对于本文，我们推荐针对 Eclipse 的 JavaFX Script. 插件（请参阅 参考资料，了解关于这个开发选项和其他开发选项的更多信息）。

JavaFX Script. 概述

JavaFX Script. 是一种静态类型（statically typed）语言，这意味着每个变量、参数和方法返回值的数据类型在编译时是已知的。JavaFX Script. 也是一种声明性（declarative）编程语言：它描述应用程序的状态，而不是如何创建它。决定如何在屏幕上显示应用程序的算法则留给支持软件（Swing 的 Java 2D API）。由于这些特征，JavaFX Script. 非常适合于创建 GUI。

为了帮助您理解示例应用程序代码和它用到的 JavaFX Script. GUI 组件，我们首先概述一下 JavaFX Script. 语法的基础。

变量和原语类型

JavaFX Script. 提供四种原语类型：String、Boolean、Number 和 Integer。表 1 显示它们对应的 Java 类型：

表 1. JavaFX Script. 原语类型和对应的 Java 类型

这些类型的变量都通过关键字 var 引入。与 Java 语言不同，JavaFX Script. 不要求在声明中指定变量的类型。解释器可以根据用法来推断变量的类型。但是，由于 JavaFX Script. 是静态类型的，声明的变量的类型在其生命周期中必须始终保持一致。例如，JavaFX Script. 中的 var myString = "Hello"; 相当于 Java 代码中的 var myString:String = "Hello";。

操作符

表 2 和表 3 列出了 JavaFX Script. 中使用的操作符以及 Java 中对应的操作符。在用 JavaFX Script. 创建表达式时，可以参考这两个表。

表 2. JavaFX Script. 关系操作符

函数和操作

JavaFX Script. 使用关键字 function 来表示程序的一个功能子集。在 JavaFX Script. 中，函数可以包含变量声明和一个返回语句，所有语句都包含在花括号中。这对于简单的数学函数或 getter 和 setter 类非常理想。清单 1 显示了一个示例 JavaFX Script. 函数，该函数将两个数相加：

清单 1. 示例函数

function add(a,b) ...{
   var c = a + b;
   return c;
}

JavaFX Script. 中的所有程序都以关键字 operation 表示，其中可以包含任意数量的语句。清单 2 显示了一个简单的操作：

清单 2. 示例操作

operation helloWorld() ...{
   System.out.println("Hello world.");
}

JavaFX Script. 示例应用程序

为了演示 JavaFX Script. 的一些基本的 GUI 功能，我们创建了一个简单的计算器应用程序，这个应用程序拥有 Microsoft® Windows® 操作系统中系统计算器提供的部分功能。图 1 显示了这个计算器：

图 1. JavaFX Script. 计算器

框架和菜单

JavaFX Script. 应用程序的显示由一个 Frame 对象提供。它是一个顶级窗口，具有边框、标题和可选菜单栏。清单 3 显示了计算器应用程序的 frame. 的声明：

清单 3. Frame 声明

Frame ...{
   menubar: MenuBar ...{
      ...
   }
   //text displayed in title bar
   title: "Calculator"
   //size of frame
   height: 200
   width: 200
   //begin content layout
   content: GridBagPanel ...{
      ...
   }
   visible: true
}

在 JavaFX Script. 中，对象的属性是在声明中定义的。在清单 3 中，menubar、title、height、width、content 和 visible 都是 Frame 对象的属性。title 属性包含一个 String 值，这个字符串将在窗口的标题栏显示。我们将这个值设置为 Calculator（注意 图 1 中的标题）。height 和 width 属性定义窗口的大小，单位为像素。visible 是一个 Boolean 属性，用于决定在初次呈现时，该框架是否可见。

在清单 3 中，Frame 对象中声明的 menubar 属性的值为一个 MenuBar 对象。这个 MenuBar 对象可以包含一个或多个 Menu 对象，这些对象定义计算器窗口顶端菜单的名称和内容。我们的应用程序声明一个 File 菜单，其中包含一个操作：Exit。它的声明如清单 4 所示：

清单 4. Menu 声明

menubar: MenuBar ...{
   menus: Menu ...{
      text: "File"
      //first item in the menu
      items: MenuItem ...{
         text: "Exit"
         //on-click operation
         action: operation() ...{
            //exit the application
            System.exit(0);
         }
      }
   }
}

Menu 对象有一个 text 属性，该属性的值是一个 String，表示要显示的菜单的标题 — 本例为 File。Menu 对象还包含一个名为 items 的属性，该属性的值可以是一个或多个 MenuItem 对象。MenuItem 表示当前菜单中的一个操作。text 属性定义 MenuItem 的名称，action 属性包含一个决定菜单项行为的操作。当计算器应用程序的用户选择 File > Exit 时，action 属性中定义的操作将被执行，应用程序退出。

布局和边框

请再次查看 清单 3 中的 Frame 声明。content 属性也许是最重要的 Frame 对象属性。它的值是一个小部件对象，它定义了窗口中在标题和菜单栏以下显示的内容。计算器的文本字段和按钮就是在 content 属性中创建的。为了有序地组织计算器上的按钮，我们创建了一个格式化的面板，如清单 5 所示：

清单 5. GridBagPanel 声明

content: GridBagPanel ...{
   border: EmptyBorder ...{
      ...
   }
   cells: ...{
      ...
   }
}

JavaFX Script. 布局管理器封装相应的 Swing/AWT 布局，并用指定的布局管理器实例化一个 JPanel 实例。然后，通过 JavaFX Script. 对象提供的属性将组件添加到 JPanel。表 4 显示了 JavaFX Script. 小部件和每个小部件对应的 Swing/AWT 布局管理器：

表 4. JavaFX Script. 布局

类似地，每个 JavaFX Script. 边框封装一个 Swing 边框对象。每个 JavaFX Script. 边框有一些属性，它们对应于 Swing 边框的配置选项。表 5 显示了对应的边框：

表 5. JavaFX Script. 边框

如 清单 5 所示，我们在计算器应用程序中使用一个 GridBagPanel。GridBagPanel 通过一个网格（水平和垂直方向）对组件进行布局，不要求组件具有相同的大小。每个 GridBagPanel 都维护一组单元格，每个组件占用一个或多个单元格。GridBagPanel 有两个属性：border 和 cells。border 属性定义 GridBagPanel 中显示的边框的类型（表 5 中的一个对象）。对于计算器应用程序，我们选择使用一个 EmptyBorder 对象，如清单 6 所示：

清单 6. EmptyBorder 声明

border: EmptyBorder ...{
   top: 5
   left: 5
   bottom: 5
   right: 5
}

空的边框是完全透明的。它占用了由 border 属性指定的空间，但是并没有描绘出来。EmptyBorder 的属性包括 top、left、bottom 和 right。这些属性的值定义边框在显示区域的各个方向上占用的空间大小，单位为像素。在这个例子中，我们在网格组件与面板的各个边缘之间预留 5 个像素，作为一个透明的边框。

GridPanel 的 cells 属性定义网格中的组件。这个属性的值是一个 GridCell 对象数组。每个 GridCell 对象表示网格中的一个组件。GridCell 属性规定如何显示对象，以及对象在面板中的位置。计算器应用程序包含 19 个 GridCell 对象。其中 1 个 GridCell 对应于计算器顶端的文本字段，还有 2 个对应于 Back 和 Clear 按钮，其余 16 个对应于数字和操作符按钮，如 图 1 所示。清单 7 显示了计算器的文本字段、Back 和 Clear 按钮以及前两个数字对应的 GridCell 对象：

清单 7. GridCell 声明

cells:
      [ GridCell ...{
         anchor: WEST
         fill: HORIZONTAL
         //horizontal grid position
         gridx: 0
         //vertical grid position
         gridy: 0
         //column span
         gridwidth: 4
         content: textField
      }, GridCell ...{
         anchor: WEST
         fill: HORIZONTAL
         gridx: 0
         gridy: 1
         gridwidth: 2
         content: Button ...{
            text: "Back"
            ...
         }
      }, GridCell ...{
         anchor: WEST
         fill: HORIZONTAL
         gridx: 2
         gridy: 1
         gridwidth: 2
         content: Button ...{
            text: "Clear"
            ...         
         }
      }, GridCell ...{
         anchor: WEST
         fill: HORIZONTAL
         gridx: 0
         gridy: 2
         content: Button ...{
            text: "7"
            ...
         }
      }, GridCell ...{
         anchor: WEST
         fill: HORIZONTAL
         gridx: 1
         gridy: 2
         content: Button ...{
            text: "8"
            ...
         }
      }]

如清单 7 所示，每个 GridCell 对象包含 5 个属性：anchor、fill、gridx、gridy 和 content。当组件小于它的显示区时，将用到 anchor 属性，该属性规定将组件放在显示区中的哪个位置。可能的值有 NORTH、SOUTH、EAST、WEST、NORTHWEST、NORTHEAST、SOUTHWEST、SOUTHEAST 和 CENTER。

当组件的显示区比组件大时，还将用到 fill 属性。如果需要对组件进行调整的话，该属性规定如何调整组件。表 6 描述了可能的值：

表 6. GridCell fill 的值

计算器中的所有组件都偏向西侧，并沿水平方向填满显示区。

GridCell 的 gridx 和 gridy 属性定义组件在网格中的位置。这两个值指定包含组件显示区的起始角的单元格，第一个单元的位置为 gridx = 0，gridy = 0。

清单 7 中定义的 3 个 GridCell 组件还包含 gridwidth 属性。该属性指定组件在网格的行方向上应占用的单元格数量。例如，清单 7 中的第一个 GridCell 对象（计算器的文本字段）有一个 gridwidth 属性，其值为 4。这个值规定文本字段组件应该占 4 列。它的 gridx 和 gridy 值都是 0，表明文本字段显示区最左边的角应该从网格的第一行、第一列开始。

文本字段和按钮

清单 7 中定义的每个 GridCell 组件都包含一个 widget 值，这个值定义要在单元格的显示区中描绘什么。计算器应用程序中的单元格包含文本字段和按钮部件。

在 清单 7 中，我们直接在 content 属性中定义新的对象。现在，我们通过另一个场景来展示 JavaFX Script. 的多面性，在此场景中，我们将文本字段定义为 content 属性外的一个名为 textField 的变量。清单 8 中显示了这个声明。定义好文本字段后，用于文本字段的 GridCell 的 content 属性可包含这个变量名作为它的值。

清单 8. TextField 声明

var textField = TextField ...{
   //indicates default value to appear in text field
   value: "."
   //indicates justification<

13270562_200803102350221.gif

13270562_200803102350222.gif

13270562_200803102350223.gif

13270562_200803102350224.gif

13270562_200803102350225.gif

13270562_200803102350226.gif

13270562_200803102350341.gif

13270562_200803102350342.gif

13270562_200803102350343.gif

13270562_200803102350344.gif

13270562_200803102350345.gif

13270562_200803102350227.jpg

13270562_200803102350346.gif

13270562_200803102350228.gif

13270562_200803102350229.gif

13270562_2008031023502210.gif

13270562_200803102350347.jpg

13270562_200803102350348.gif

13270562_200803102350349.gif

13270562_2008031023503410.gif

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/13270562/viewspace-202015/ ，如需转载，请注明出处，否则将追究法律责任。