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

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

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

我使用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.setPref

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!