我已经使用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