接第一部分，本章将讨论目前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.*;classButtonClickModel{attribute numClicks:Number;}var model =newButtonClickModel(); var win =Frame{ width:300 height:200 content: GridPanel{ border:EmptyBorder{top:30left:30bottom:30right: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: " }] } visible:true};运行程序显示如下：
点击按钮三次后显示如下：
注意：Button的action和mnemonic属性将在后面讨论...
在该示例中，通过给GridPanel的columns、rows和vgap属性赋值，GridPanel被配置为一列、两行以及行间垂直间距10像素, 如果您想在列间增加间距，GridPanel还有一个hgap属性。GridPanel的四周的被设置为30个像素大小的空边框。
按钮和标签通过将指派给cells属性来添加到面板中。GridPanel通过在其底部的JPanel添加或删除组件来实现对它的cells属性的插入或删除。
JavaFX支持的其他布局管理器原理与此类似，以下表格是这些布局管理器的概述：
JavaFX Widget Layout Manager
GridPanel GridLayout
GridBagPanel GridBagLayout
FlowPanel FlowLayout
BorderPanel BorderLayout
Box BoxLayout
StackPanel Romain Guy's StackLayout
CardPanel CardLayout
GroupPanel org.jdesktop.layout.GroupLayout
下面是JavaFX边框类和其对应Swing边框类的概述：
JavaFX Border Swing Border
EmptyBorder EmptyBorder
LineBorder LineBorder
BevelBorder BevelBorder
SoftBevelBorder SoftBevelBorder
MatteBorder MatteBorder
TitledBorder TitledBorder
菜单
让我们在前面的示例中加入简单的菜单，新的代码如下：
import JavaFX.ui.*;import java.lang.System;classButtonClickModel{attribute numClicks:Number;}var model =newButtonClickModel(); 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:30left:30bottom:30right: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: " }] } 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代码来直接退出应用的操作。
