JavaFX学习曲线日记2：声明用户接口

avaFX学习曲线日记-2：声明用户接口

作者：John O'Conner
译者：cleverpig



我 已经使用Java语言定义用户接口近十年了，当我第一次体验JavaFX脚本时便马上感到了这两种不同环境之间的差异。尽管程序员在Java语言中使用过 程式代码来定义用户接口，而在JavaFX脚本语言中你能够使用声明语句来定义用户接口。这是两者之间最大的不同，要适应后者的确需要花费一定的时间和精 力。

为了学习这种创建UI的全新声明风格，我决定将一个从前使用Java语言实现的应用UI移植到JavaFX脚本上。于是我挑选了一个在Java语言中心的Swingworker教学中使用的图片浏览应用。原始应用演示了如何在JavaSE 6.0中使用Swingworker类，正因为其UI本身非常简单，所以我将它作为移植的“原料”。

现存的用户接口

现存的应用为用户提供了查询、列表、从Flickr站点下载并显示图片的功能。用户可以输出查询关键字，应用调用REST API来查询Flickr以获取匹配的缩略图片；而且用户还可以从缩略图片中进行选择，以便查看更大更细致的图片。现存应用的查询结果如下图：
        
        图 1. 带有查询结果的应用UI

这个UI由下列组件构成，按照从上至下的顺序：
        • 主框架窗体容器
        • 查询标签和查询文本输入栏
        • 查询匹配标签和处理进度条
        • 与简短描述（检索关键字）相匹配的缩略图列表
        • 选择标签和处理进度条
        • 显示被选择图片的标签

此UI由以下常见的Swing组件构成：JFrame、Jlabel、JprogressBar、JscrollPane、JList。JList组件具有自定义渲染器，它能够显示缩略图和相应的简短描述。

但 这还是一个相当简单的UI，我们用它来研究如何使用JavaFX脚本描述UI。下一步，我打算尝试使用JavaFX实现整个应用；但是目前，只要完成一个 对现存UI的近似实现就可以了。下面展示了一个毫无生气的UI，它代表了我使用JavaFX脚本进行UI描述来实现的最初目标：
        
        图 2. 应用UI

我使用NetBeans IDE和它的Matisse GUI实现了这个原始的UI。所以源代码都可从Swingworker教学中下载；下面列出了用于生成UI的主要代码。它告诉了我们如何在NetBeans中使用GroupLayout来创建UI。

private void initComponents() {
    lblSearch = new javax.swing.JLabel();
    txtSearch = new javax.swing.JTextField();
    lblImageList = new javax.swing.JLabel();
    scrollImageList = new javax.swing.JScrollPane();
    listImages = new JList(listModel);
    lblSelectedImage = new javax.swing.JLabel();
    lblImage = new javax.swing.JLabel();
    progressMatchedImages = new javax.swing.JProgressBar();
    progressSelectedImage = new javax.swing.JProgressBar();

    setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
    setTitle("Image Search");
    lblSearch.setText("Search");
    lblImageList.setText("Matched Images");

    // ...
    // event listeners, models, and cell renderers removed for this example
    //

    lblSelectedImage.setText("Selected Image");

    lblImage.setBorder(javax.swing.BorderFactory.createLineBorder(
            new java.awt.Color(204, 204, 204)));
    lblImage.setFocusable(false);
    lblImage.setMaximumSize(new java.awt.Dimension(500, 500));
    lblImage.setMinimumSize(new java.awt.Dimension(250, 250));
    lblImage.setOpaque(true);
    lblImage.setPreferredSize(new java.awt.Dimension(500, 250));

    javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
    getContentPane().setLayout(layout);
    layout.setHorizontalGroup(
        layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
            .addContainerGap()
            .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING)
                .addComponent(lblImage, javax.swing.GroupLayout.Alignment.LEADING, 
                        javax.swing.GroupLayout.DEFAULT_SIZE, 462, Short.MAX_VALUE)
                .addComponent(scrollImageList, javax.swing.GroupLayout.DEFAULT_SIZE, 
                        462, Short.MAX_VALUE)
                .addGroup(javax.swing.GroupLayout.Alignment.LEADING, layout.createSequentialGroup()
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                        .addComponent(lblImageList)
                        .addComponent(lblSelectedImage))
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                        .addComponent(progressMatchedImages, javax.swing.GroupLayout.DEFAULT_SIZE, 
                                350, Short.MAX_VALUE)
                        .addComponent(progressSelectedImage, javax.swing.GroupLayout.DEFAULT_SIZE, 
                                350, Short.MAX_VALUE)))
                .addGroup(javax.swing.GroupLayout.Alignment.LEADING, layout.createSequentialGroup()
                    .addComponent(lblSearch)
                    .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                    .addComponent(txtSearch, javax.swing.GroupLayout.DEFAULT_SIZE, 
                            411, Short.MAX_VALUE)))
            .addContainerGap())
    );
    layout.setVerticalGroup(
        layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(layout.createSequentialGroup()
            .addContainerGap()
            .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                .addComponent(lblSearch)
                .addComponent(txtSearch, javax.swing.GroupLayout.PREFERRED_SIZE, 
                        javax.swing.GroupLayout.DEFAULT_SIZE,                                    
                        javax.swing.GroupLayout.PREFERRED_SIZE))
            .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
            .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                .addComponent(lblImageList)
                .addComponent(progressMatchedImages, javax.swing.GroupLayout.PREFERRED_SIZE,
                        javax.swing.GroupLayout.DEFAULT_SIZE,
                        javax.swing.GroupLayout.PREFERRED_SIZE))
            .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
            .addComponent(scrollImageList, javax.swing.GroupLayout.PREFERRED_SIZE, 235, 
                    javax.swing.GroupLayout.PREFERRED_SIZE)
            .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
            .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                .addComponent(lblSelectedImage)
                .addComponent(progressSelectedImage, javax.swing.GroupLayout.PREFERRED_SIZE,
                        javax.swing.GroupLayout.DEFAULT_SIZE, 
                        javax.swing.GroupLayout.PREFERRED_SIZE))
            .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
            .addComponent(lblImage, javax.swing.GroupLayout.DEFAULT_SIZE, 305, Short.MAX_VALUE)
            .addContainerGap())
    );
    pack();
}

使 用NetBeans IDE进行UI布局非常简单——只需要鼠标的拖、拽操作便可。在本示例中，NetBeans通过使用javax.swing.GroupLayout生成 了UI代码，javax.swing.GroupLayout这个类为我们提供了跨平台的正确大小、位置、组件之间的间隔。虽然生成的代码并不便于阅读， 但从工具支持性来讲它确实是非常优秀的，而且无需任何人工编写代码。

声明JavaFX脚本接口

尽管JavaFX脚本并没有提供GUI工具，NetBeans也没有提供支持JavaFX脚本语言的UI设计界面，但我们可以使用JavaFXPad这个OpenJFX站点提供的演示应用。通过使用JFXPad，你能够人工输入UI代码，并马上见到代码所呈现的效果。尽管它是一个演示应用，但的确是一个超级好用的简单工具。

本 接口所需的所有GUI组件都在javafx.ui包中。JavaFX脚本和Java语言一样支持包（package）结构和导入（import）语句。我 在学习过程中并不是导入整个包，而是每次导入要用到的组件类。这样可以让我们在查看代码时能够准确地识别出使用了哪些组件。

JavaFX 脚本组件具有height、width、text、content等属性。其中content属性可以包含子组件，每个content属性可以包含被声明 为数组的多个组件。在声明图片检索应用的用户接口时，我选用并使用了适合的JavaFX脚本组件，并设置了它们的属性。

例如，下面简短的脚本定义了一个不含有任何内容的空白框架。

import javafx.ui.Frame;
Frame {
    title: "JFX Image Search"
    height: 500
     500
    visible: true
}

在JavaFX 脚本中与Swing的Jframe等价的是javafx.ui.Frame。这里的title属性声明了window的标题。Height和width属 性则以像素为单元定义了整个框架的大小。最后，visible属性声明了框架是否可见，这与在Swing中的Jframe类的setVisible方法类 似。

FlowPanels 和 Boxes

javafx.ui包中包含了Label、SimpleLabel、Box、FlowPanel、ProgressBar、ScrollPane和ListBox这些组件。它们的名称听起来与Swing组件非常相似，因此我首先尝试使用它们来实现目标UI。

尽 管JavaFX脚本支持GroupLayout和GroupPanel组件，但我还是尽量在首次尝试时避开这些组件。我并不认为GroupLayout有 多好，因为在Java语言中使用它时你不得不人工编写代码，从这一点出发我对在JavaFX脚本中使用GroupLayout存在着同样的顾虑。于是我选 择了更加简单的FlowPanel和Box组件来创建下面的JavaFXImageSearchUI1.fx代码：

package com.sun.demo.jfx;

import javafx.ui.Frame;
import javafx.ui.Box;
import javafx.ui.FlowPanel;
import javafx.ui.SimpleLabel;
import javafx.ui.Label;
import javafx.ui.TextField;
import javafx.ui.ScrollPane;
import javafx.ui.ListBox;
import javafx.ui.ProgressBar;
import javafx.ui.LineBorder;
import javafx.ui.EmptyBorder;
import javafx.ui.Color;

Frame {
    title: "JFX Image Search"
    content: Box {
        border: EmptyBorder {
            top: 10
            left: 10
            right: 10
            bottom: 10
        }
        orientation: VERTICAL
        content: [
        FlowPanel {
            alignment: LEADING
            content: [
            SimpleLabel {
                text: "Search"
            },
            TextField {
                preferredSize: { 425}
            }
            ]
        },
        FlowPanel {
            alignment: LEADING
            content: [
            SimpleLabel {
                text: "Matched Images"
            },
            ProgressBar {
                preferredSize: { 378}
                
            }
            ]
        },
        ListBox {
            preferredSize: {height: 200 }
        },
        FlowPanel {
            alignment: LEADING
            content: [
            SimpleLabel {
                text: "Selected Image"
            },
            ProgressBar {
                preferredSize: { 382 }
            }
            ]
        },
        Label {
           opaque: true
            preferredSize: {
                height: 250
            }
            border: LineBorder 
        }
        ]
    }
    visible: true
}

在JavaFXPad 中输入以上内容后，上方的window中将显示相应的执行结果。如果使用NetBeans IDE创建项目时，请将项目配置为使用FXShell类执行JFXImageSearchUI1.fx文件；这样我们所期望的窗体框架将会被显示出来。虽 然我硬性编码了文本输入栏和进度条的宽度以使其看起来和原始UI一样大小，但对于第一次尝试用JavaFX创建UI来讲，其效果还算称得上成功。:-)
        
        图 3. 复制好的UI

框 架的内容是一个Box组件。这个组件的orientation（朝向）属性是VERTICAL，这意味着在Box中的内容将被垂直放置，而不是水平放置。 Box组件具有一个content属性。你可以在其content属性中放置多个组件。如果你插入了多个组件，那么则必须将这些组件以数组的形式写在方括 号中，而在数组中的组件之间使用逗号分割：

content: [
    SimpleLabel {
        text: "Search"
    },
    TextField {
        preferredSize: { 425}
    }
]

FlowPanel 组件常常用于创建一对Label组件。我使用多个FlowPanel来组织Label和其它的组件，例如TextField或者ProgressBar。 当将FlowPanel的alignment属性设置为LEADING时，框架中的面板将向左侧对齐，这样UI看上去最漂亮。

尽管这个UI看上去已经很不错了，但其布局仍然需要硬性编写进度条的宽度，以使其充满整个框架。不幸的是，我们完全不可能非常精确地将进度条对齐到框架的右侧。你可以从上面的UI中发觉查询文本框和匹配图片进度条并没有完全对齐。

GroupPanel 和 GroupLayout

为了实现能够自动设置组件大小并使其充满容器空间的布局，我决定尝试javafx.ui.GroupPanel接口。这个接口使用了Swing的GroupLayout，因此它能够实现更加精确地表现布局。

GroupPanel 组件使用行和列来定位在表格中的组件。它能够自动在组件和其容器之间提供平台特定（platform-specific）的间隔，以达到布局的目的。另 外，它能够很好地对齐组件。GroupPanel简化了Swing的GroupLayout，使其更加易于编写。

下面是UI的第二个版本JFXImageSearchUI.fx：

package com.sun.demo.jfx;
import javafx.ui.Frame;
import javafx.ui.GroupPanel;
import javafx.ui.Row;
import javafx.ui.Column;
import javafx.ui.SimpleLabel;
import javafx.ui.Label;
import javafx.ui.TextField;
import javafx.ui.ProgressBar;
import javafx.ui.LineBorder;
import javafx.ui.ListBox;

Frame {
    title: "JavaFX Image Search"
    content: 
        // main panel within the frame
        GroupPanel {
        // define the five rows and main column
        var searchRow = new Row
        var matchedProgressRow = new Row
        var thumbNailRow = new Row {resizable: true}
        var selectedProgressRow = new Row
        var imageRow = new Row {resizable: true}
        var mainCol = new Column {resizable: true}
        
        // declare the five rows and the column
        rows: [searchRow, matchedProgressRow, thumbNailRow, selectedProgressRow, imageRow]
        columns: mainCol
        // provide the array of components in the frame
        content: [
        // search text row
        GroupPanel {
            autoCreateContainerGaps: false
            row: searchRow
            column: mainCol
            var row = new Row
            var searchLabelCol = new Column
            var searchTextFieldCol = new Column { 
                resizable: true 
            }
            rows: row
            columns: [searchLabelCol, searchTextFieldCol]
            content: [
            SimpleLabel {
                text: "Search:"
                row: row
                column: searchLabelCol
            },
            TextField {
                row: row
                column: searchTextFieldCol
                columns: 50
            }
            ]
        },
        // matching images progress panel row
        GroupPanel {
            autoCreateContainerGaps: false
            row: matchedProgressRow
            column: mainCol
            var row = new Row
            var lblCol = new Column
            var progressBarCol = new Column {resizable: true}
            rows: row
            columns: [lblCol, progressBarCol]
            content: [
            SimpleLabel {
                text: "Matched Images"
                row: row
                column: lblCol
            },
            ProgressBar {
                row: row
                column: progressBarCol
            }
            ]
        },
        // thumbnail list row
        ListBox {
            preferredSize: {height: 200,  400}
            row: thumbNailRow
            column: mainCol
        },
        // selected image progress row
        GroupPanel {
            autoCreateContainerGaps: false
            row: selectedProgressRow
            column: mainCol
            var row = new Row
            var lblCol = new Column
            var progressBarCol = new Column {resizable: true}
            rows: row
            columns: [lblCol, progressBarCol]
            content: [
            SimpleLabel {
                text: "Selected Image"
                row: row
                column: lblCol
            },
            ProgressBar {
                row: row
                column: progressBarCol
            }
            ]
        },
        // selected image display row
        Label {
            opaque: true
            preferredSize: {height: 300,  400}
            row: imageRow
            column: mainCol
            border: LineBorder
        }
        ]
    }
    visible: true
}

这段代码生成了更加完美的布局。框架中的组件之间进行了很好的分割，并且与框架的左右两侧分别对齐。
        
        图 4. JFX图片查询UI

虽然在这个框架中使用的组件前一个例子中相同，但这里使用了GroupPanel，而不是FlowPanel和Box。当你查看原始的UI时，你会发现五个不同的行：检索行、匹配图片进度行、列表行、选择图片进度行、被选择图片行。在这些组件被顺序放置在一个居中的列内。

而我的第二个版本也具有五行和一列。框架的主要content是一个GroupPanel，这个组件包含了几个GroupPanel和其它组件。下面便让我们看一下在GroupPanel中是如何实现这五行和一列的：

content: GroupPanel {
    var searchRow = new Row
    var matchedProgressRow = new Row
    var thumbNailRow = new Row {resizable: true}
    var selectedProgressRow = new Row
    var imageRow = new Row {resizable: true}
    var mainCol = new Column {resizable: true}
        
    rows: [searchRow, matchedProgressRow, thumbNailRow, selectedProgressRow, imageRow]
    columns: mainCo

l

第一个GroupPanel包括一个组件的数组和一个用于检索关键字输入的GroupPanel（这里称为第二个GroupPanel）。下面就是用于检索关键字输入的GroupPanel的行列属性设置：

// search text row
GroupPanel {      
    autoCreateContainerGaps: false
    row: searchRow
    column: mainCol

GroupPanel 具有两个非常重要的属性：autoCreateGaps和autoCreateContainerGaps，它们定义了如何在组件和容器之间创建间隔。这 两个属性默认值为true，但由于这里已经在组件之间创建了间隔，在第一个GroupPanel和其中包含的第二个GroupPanel之间不需要额外的 间隔，因此这里将其autoCreateContainerGaps设置为false来取掉额外的间隔。否则，检索文本输入行将被插入不必要的边缘。要使 检索文本行所在的GroupPanel组件填充父容器的相应行、列，我们需要设置它的行和列属性为searchRow和mainCol。

检索文本行所在的GroupPanel定义了它自己的行和列，在其中包含了检索标签和文本输入框：

            var row = new Row
            var searchLabelCol = new Column
            var searchTextFieldCol = new Column { 
                resizable: true 
            }
            rows: row
            columns: [searchLabelCol, searchTextFieldCol]

行、列定义被创建好后，让我们继续使用声明式语法定义content的数组：

content: [
    SimpleLabel {
        text: "Search:"
        row: row
        column: searchLabelCol
    },
    TextField {
        row: row
        column: searchTextFieldCol
        columns: 50
    }
]

余下的代码都遵循相应的模式。包含多个组件的行被封装在一个GroupPanel中。具有单个组件的行，例如下拉列表和图片标签，则使用row和column属性与外部的GroupPanel相关联。

尽 管我最初对使用GroupPanel很担心，但JavaFX脚本将GroupLayout封装后使其变得非常易用，我在尝试GroupPanel后便打消 了担忧。另外NetBeans IDE的编辑器插件和JavaFXPad演示程序提供了上下文敏感的代码自动完成功能，它可以根据输入内容弹出相关可用的属性。通过使用简单的行列布局和 代码自动完成，本人感觉使用JavaFX脚本的GroupPanel并没有想象中那样困难。下面的图片展示了在IDE或者JavaFXPad中按下 CTRL+SPACE出现的弹出选项。
        
        图 5. 弹出选项


总结

为 了探索在创建UI过程中如何使用声明式语法，我将现有应用的UI进行了大胆的移植。原始应用的UI使用了Swing的GroupLayout来定位、对齐 组件。尽管NetBeans IDE没有提供用于JavaFX脚本的图形化设计工具，但通过编写JavaFX代码进行布局并非我所想象的那样困难。通过使用GroupPanel和其它 组件，我实现了和原始应用完全相同的UI。方便的GroupPanel组合加上NetBeans IDE插件、上下文敏感的代码自动完成功能使工作变得轻松。