JavaFX学习曲线日记-2：声明用户接口 - 编程入门网
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: {width: 425}
}
]
},
FlowPanel {
alignment: LEADING
content: [
SimpleLabel {
text: "Matched Images"
},
ProgressBar {
preferredSize: {width: 378}
}
]
},
ListBox {
preferredSize: {height: 200 }
},
FlowPanel {
alignment: LEADING
content: [
SimpleLabel {
text: "Selected Image"
},
ProgressBar {
preferredSize: {width: 382 }
}
]
},
Label {
opaque: true
preferredSize: {
height: 250
}
border: LineBorder
}
]
}
visible: true
}
JavaFX学习曲线日记-2：声明用户接口(4)时间:2011-05-07 译者：cleverpig在JavaFXPad中输入以上内容后，上方的window中将显示相应的执行结果。如果使用 NetBeans IDE创建项目时，请将项目配置为使用FXShell类执行JFXImageSearchUI1.fx文件 ；这样我们所期望的窗体框架将会被显示出来。虽然我硬性编码了文本输入栏和进度条的宽 度以使其看起来和原始UI一样大小，但对于第一次尝试用JavaFX创建UI来讲，其效果还算称 得上成功。:-)
图 3. 复制好的UI 框架的内容是一个Box组件。这个组件的orientation（朝向）属性是VERTICAL，这意味 着在Box中的内容将被垂直放置，而不是水平放置。Box组件具有一个content属性。你可以 在其content属性中放置多个组件。如果你插入了多个组件，那么则必须将这些组件以数组 的形式写在方括号中，而在数组中的组件之间使用逗号分割：
FlowPanel组件常常用于创建一对Label组件。我使用多个FlowPanel来组织Label和其它 的组件，例如TextField或者ProgressBar。当将FlowPanel的alignment属性设置为LEADING 时，框架中的面板将向左侧对齐，这样UI看上去最漂亮。 尽管这个UI看上去已经很不错了，但其布局仍然需要硬性编写进度条的宽度，以使其充 满整个框架。不幸的是，我们完全不可能非常精确地将进度条对齐到框架的右侧。你可以从 上面的UI中发觉查询文本框和匹配图片进度条并没有完全对齐。 JavaFX学 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
