接第一部分，本章将讨论目前JavaFX语言可用的各种GUI组件并且给出一些如何使用的示例。我们会同时对比Swing的GUI组件进行讨论。

我们将分四个章节完成GUI组件的讲解，本章要阐述的GUI组件如下：

• 边框和布局管理器
• 菜单
• 标签

边框和布局管理器

在JavaFX语言中，边框和布局管理器的使用同样也是声明性的。每个Swing/AWT布局管理器都被封装为一个JavaFX类，该类使用特定的布局管理器实例化一个JPanel。组件通过声明的方式使用JavaFX类提供的属性被添加到（底部的）JPanel上。每个Swing边框类型也被封装成一个属性对应与边框的配置选项的JavaFX类。以下是一个使用EmptyBorder和GridPanel的简单示例。和您猜想的一样，EmptyBorder对应于javax.swing.border.EmptyBorder，而GridPanel与java.awt.GridLayout一致。

import javafx.ui.*; class ButtonClickModel { attribute numClicks: Number;} var model = new ButtonClickModel(); var win = Frame {   width: 300   height:200   content: GridPanel {     border: EmptyBorder {  top: 30  left: 30  bottom: 30  right: 30     }     rows: 2     columns: 1     vgap: 10     cells:    [Button {      text: "I'm a button!"      mnemonic: I      action: operation() {        model.numClicks++;       }      },     Label {        text: bind "Number of button clicks: {model.numClicks}"      }]  }   visible: true};

运行程序显示如下：

点击按钮三次后显示如下：

注意：Button的action和mnemonic属性将在后面讨论...

在该示例中，通过给GridPanel的columns、rows和vgap属性赋值，GridPanel被配置为一列、两行以及行间垂直间距10像素, 如果您想在列间增加间距，GridPanel还有一个hgap属性。GridPanel的四周的被设置为30个像素大小的空边框。

按钮和标签通过将指派给cells属性来添加到面板中。GridPanel通过在其底部的JPanel添加或删除组件来实现对它的cells属性的插入或删除。

JavaFX支持的其他布局管理器原理与此类似，以下表格是这些布局管理器的概述：

下面是JavaFX边框类和其对应Swing边框类的概述：

菜单

让我们在前面的示例中加入简单的菜单，新的代码如下：

import javafx.ui.*;import java.lang.System; class ButtonClickModel { attribute numClicks: Number;} var model = new ButtonClickModel(); var win = Frame {   width: 300   height:200   menubar: MenuBar {     menus: Menu {       text: "File"       mnemonic: F       items: MenuItem {         text: "Exit"         mnemonic: X         accelerator: {           modifier: ALT           keyStroke: F4           }         action: operation() {          System.exit(0);           }        }      }   }   content: GridPanel {     border: EmptyBorder {  top: 30  left: 30  bottom: 30  right: 30     }     rows: 2     columns: 1     vgap: 10     cells:    [Button {      text: "I'm a button!"      mnemonic: I      action: operation() {        model.numClicks++;       }      },     Label {        text: bind "Number of button clicks: {model.numClicks}"      }]  }   visible: true};

运行后，按Alt+F键，显示如下：

正如您所见的，菜单栏通过给窗口的menubar属性赋值一个MenuBar类的新示例而创建。您通过将菜单指定给菜单栏的menus属性来将它们添加到菜单栏中。在该示例中，只添加了一个菜单，但是任何返回Menu对象列表的表达式都可以被使用。

要定义菜单，它的的text、mnemonic和items属性值必须被设定。

您可能已经猜到，text属性的类型是String，而mnemonic属性是KeyStroke类型，它的值F是KeyStroke类的一个枚举实例。在JavaFX中，属性初始化属性的静态类型（和Java中的静态字段情况）的枚举值时可以不使用规范类别名直接访问（其他地方您必须使用F:KeyStroke替代F）。

一个菜单条目，一个text为“Exit“及其mnemonic为X的MenuItem被创建。它accelerator属性同样被赋了值。注意，在声明中值类型名Accelerator被省略了，这是允许的。如果没有指定类型名，将使用属性的静态类型，在示例中是Accelerator。此外，accelerator的modifier和keyStroke被初始化使用枚举值。

最后，MenuItem的action属性为function类型（例如，它是一个函数，而不是一个对象），在示例中，是一行通过调用某些已经编写的Java代码来直接退出应用的操作。

13270562_200803190835091.jpg

13270562_200803190835092.jpg

13270562_200803190835093.jpg