JavaFX学习曲线日记-2：声明用户接口 - 编程入门网
{
preferredSize: {height: 200, width: 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, width: 400}
row: imageRow
column: mainCol
border: LineBorder
}
]
}
visible: true
}
JavaFX学习曲线日记-2：声明用户接口(6)时间:2011-05-07 译者：cleverpig这段代码生成了更加完美的布局。框架中的组件之间进行了很好的分割，并且与框架的 左右两侧分别对齐。
图 4. JFX图片查询UI 虽然在这个框架中使用的组件前一个例子中相同，但这里使用了GroupPanel，而不是 FlowPanel和Box。当你查看原始的UI时，你会发现五个不同的行：检索行、匹配图片进度行 、列表行、选择图片进度行、被选择图片行。在这些组件被顺序放置在一个居中的列内。 而我的第二个版本也具有五行和一列。框架的主要content是一个GroupPanel，这个组件 包含了几个GroupPanel和其它组件。下面便让我们看一下在GroupPanel中是如何实现这五行 和一列的：
l 第一个GroupPanel包括一个组件的数组和一个用于检索关键字输入的GroupPanel（这里 称为第二个GroupPanel）。下面就是用于检索关键字输入的GroupPanel的行列属性设置：
GroupPanel具有两个非常重要的属性：autoCreateGaps和autoCreateContainerGaps，它 们定义了如何在组件和容器之间创建间隔。这两个属性默认值为true，但由于这里已经在组 件之间创建了间隔，在第一个GroupPanel和其中包含的第二个GroupPanel之间不需要额外的 间隔，因此这里将其autoCreateContainerGaps设置为false来取掉额外的间隔。否则，检索 文本输入行将被插入不必要的边缘。要使检索文本行所在的GroupPanel组件填充父容器的相 应行、列，我们需要设置它的行和列属性为searchRow和mainCol。 检索文本行所在的GroupPanel定义了它自己的行和列，在其中包含了检索标签和文本输 入框：
|
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
