Go语言视频零基础入门到精通

javalearner

接第一部分，本章将讨论目前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
};[/code]
运行程序显示如下：

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

注意：Button的action和mnemonic属性将在后面讨论...
在该示例中，通过给GridPanel的columns、rows和vgap属性赋值，GridPanel被配置为一列、两行以及行间垂直间距10像素, 如果您想在列间增加间距，GridPanel还有一个hgap属性。GridPanel的四周的被设置为30个像素大小的空边框。
按钮和标签通过将指派给cells属性来添加到面板中。GridPanel通过在其底部的JPanel添加或删除组件来实现对它的cells属性的插入或删除。
JavaFX支持的其他布局管理器原理与此类似，以下表格是这些布局管理器的概述：
  
   
   
     
   
   
    JavaFX Widget
    Layout Manager
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.GridPanel]GridPanel[/url]

复制代码

    GridLayout
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.GridBagPanel]GridBagPanel[/url]

复制代码

    GridBagLayout
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.FlowPanel]FlowPanel[/url]

复制代码

    FlowLayout
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.BorderPanel]BorderPanel[/url]

复制代码

    BorderLayout
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.Box]Box[/url]

复制代码

    BoxLayout
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.StackPanel]StackPanel[/url]

复制代码

    Romain Guy"s StackLayout
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.CardPanel]CardPanel[/url]

复制代码

    CardLayout
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.GroupPanel]GroupPanel[/url]

复制代码

    org.jdesktop.layout.GroupLayout
   
   
  
下面是JavaFX边框类和其对应Swing边框类的概述：
  
   
   
     
   
   
    JavaFX Border
    Swing Border
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.EmptyBorder]EmptyBorder[/url]

复制代码

    EmptyBorder
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.LineBorder]LineBorder[/url]

复制代码

    LineBorder
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.BevelBorder]BevelBorder[/url]

复制代码

    BevelBorder
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.SoftBevelBorder]SoftBevelBorder[/url]

复制代码

    SoftBevelBorder
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.MatteBorder]MatteBorder[/url]

复制代码

    MatteBorder
   
   
   

1. [url=http://blogs.sun.com/chrisoliver/resource/widgets.html#f3.ui.TitledBorder]TitledBorder[/url]

复制代码

    TitledBorder
   
   
  
菜单
让我们在前面的示例中加入简单的菜单，新的代码如下：
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
};[/code]
运行后，按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代码来直接退出应用的操作。
标签（Labels)
JavaFX Label类支持HTML内容。使用Label您可以使用HTML和CSS创建样式文本和图像，非常类似于典型的Web应用。此外，通过使用JavaFX嵌入表达式，您可以在Swing应用中象Web页面作者使用类似JSTL或Velocity工具一样创建动态的HTML内容。
考虑以下虚拟购物车示例：
import javafx.ui.*;
               
        class Item {
            attribute id: String;
            attribute productId: String;
            attribute description: String;
            attribute inStock: Boolean;
            attribute quantity: Number;
            attribute listPrice: Number;
            attribute totalCost: Number;
        }

        attribute Item.totalCost = bind quantity*listPrice;

        class Cart {
            attribute items: Item*;
            attribute subTotal: Number;
        }

        operation sumItems(itemList:Item*) {
            var result = 0.00;
            for (item in itemList) {
                result += item.totalCost;
            }
            return result;
        }

        attribute Cart.subTotal = bind sumItems(items);

        var cart = Cart {
            items:
            [Item {
                id: "UGLY"
                productId: "D100"
                description: "BullDog"
                inStock: true
                quantity: 1
                listPrice: 97.50
            },
            Item {
                id: "BITES"
                productId: "D101"
                description: "Pit Bull"
                inStock: true
                quantity: 1
                listPrice: 127.50
            }]
        };
        Frame {
             content: Label {
                text: bind

                   "<html>
                       <h2 align="center">Shopping Cart</h2>
                       <table align="center" border="0" bgcolor="#008800" cellspacing="2" cellpadding="5">
                          <tr bgcolor="#cccccc">
                             <td><b>Item ID</b></td>
                             <td><b>Product ID</b></td>
                             <td><b>Description</b></td>
                             <td><b>In Stock?</b></td>
                             <td><b>Quantity</b></td>
                             <td><b>List Price</b></td>
                             <td><b>Total Cost</b></td>
                             <td> </td>
                           </tr>

                           {
                             if (sizeof cart.items == 0)
                             then "<tr bgcolor="#FFFF88"><td colspan="8"><b>Your cart is empty.</b></td></tr>"
                             else foreach (item in cart.items)
                                 "<tr bgcolor="#FFFF88">
                                  <td>{item.id}</td>
                                  <td>{item.productId}</td>
                                  <td>{item.description}</td>
                                  <td>{if item.inStock then "Yes" else "No"}</td>
                                  <td>{item.quantity}</td>
                                  <td align="right">{item.listPrice}</td>
                                  <td align="right">{item.totalCost}</td>
                                  <td> </td>
                                  </tr>"
                           }

                           <tr bgcolor="#FFFF88">
                                <td colspan="7" align="right">
                                   <b>Sub Total: </b>
                               </td>
                               <td> </td>
                            </tr>
                         </table>
                      </html>"
                }
                visible: true
        }[/code]
运行以上程序，显示如下：

如果您编程删除购物车内容：
delete cart.items;[/code]
您将看到如下内容：

在以上示例中，内嵌的JavaFX表达式（粗体显示）动态创建HTML表格列和表格单元的内容。当这些表达式依赖的对象有变化时，Label的HTML内容将自动更新。
以上示例还非常有趣，因为其演示了使用表达式定义属性值的用法。Item类的totalCost属性和Cart类的subTotal属性被绑定为表达式以计算它们的值。任何时候这些表达式的依赖对象发生变化，属性值将被自动重新计算并更新。考虑在电子表格中，某些单元格包含指向其他单元格的表达式，当您在这些其他单元格输入数据，包含依赖它们的表达式的单元格值也被自动更新了。
HTML中的图像
JavaFX Label类实际上封装了一个特殊的JEditPane，该JEditorPane使用一个支持用Java类转载器从JAR文件中载入图像的共享图像缓存。因此，您可以就像普通的文件URL一样使用HTML的<img>元素引用您的应用的图像资源包。
超链接
Label类同样支持HTML超链接，内嵌一个特殊的URL给HTML<a>元素的href属性。
这样的URL使用JavaFX #操作符创建，该操作符生成一个字符串化对象引用（Stringified Object Reference）指向后续可以被JavaFX复引用的操作对象。?操作符，例如：
var a = 20;
var b = #a;
assert b instanceof String; // 通过
var c = (Number) ?b;
assert a == c;  // 通过[/code]
Label类的HTML显示器认识诸如HTML的<a href=url>这样的URL，使用URL来响应元素的鼠标点击，并且如果URL值指向一个函数或操作的话，它可以调用该函数或操作。
例如，以下是使用带超链接标签代替按钮的前面按钮点击示例的重写版本：
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:
    [Label {
       text: bind
       "<html>
          <a href="{#(operation() {model.numClicks++;})}">
            I"m a hyperlink!
          </a>
        </html>"
       },
     Label {
       text: bind "Number of button clicks: {model.numClicks}"
      }]
  }
  visible: true
};[/code]
以上示例中粗体的表达式创建一个新的递增model的numClicks属性的操作。使用#操作符生成后续将被键入到HTML标记中的指向该操作的URL。
运行该程序，显示如下：

点击超链接两次后，显示如下：

未完，待续...


  
  
   
   

     
   

     
   
  

复制代码