| 习曲线日记-2：声明用户接口(5)
时间:2011-05-07 译者：cleverpig
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
|
