一个智能的 Web 界面测试系统 -5 使用 Flex 实现的管理站点

look_w

使用 Flex 实现的管理站点Web 管理站点在整个测试系统中起到了画龙点睛的作用。它的功能涵盖了下载控制，测试脚本控制和测试报告发布。用户可以通过它来新建，修改，删除和浏览各模块的当前配置。当然，也可以根据项目的需要添加其他模块，比如播放产品的 demo，显示项目的进度等等。
该 Web 管理站点由 Flex 技术实现。基于前文的介绍，作为一个 RIA 技术，Flex 可以帮助我们快速实现一个丰富多彩、灵活互动的客户端（整体效果参见图 9）。
图 9. 图形管理界面站点的客户端定义了一个新的布局器 PodLayoutManagers， 它让用户通过 XML 文件来配置当前显示的视图（view），各个视图所包含的模块（pod）（参见以下代码）。每种 view 和 pod 类型都有自己的 ID。此外 , 每个 pod 模块需要定义所属的类型。用户可以自定义新类型，但是每个类型都要继承于 PodContentBase 控件，并给出模块的标题（title）, 读写的 XML 文件（dataSource）。有些类型还详细到具体读取的 XML 文件中的属性 , 以及它们在表格上门显示的列名。比如，在 XML 中我们定义了一个管理视图，叫做 Project Management Console，它有四个模块，分别是 list, form、case 和 film 类型。其中 , 第二个 pod 标题为“Download To Do”, 读取的数据文件为 data 目录下的 tasks.xml。它会读取文件中的 Name、Type、Weedday、time、Source Url、Target Url 属性 , 并将它们以 name、type、weekday、time、source、target 显示在列表中（参见上文） 。
清单 10.tasks.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<?xml version="1.0" encoding="utf-8"?> <views> <view     id="view1"     label="Project Management Console">     <pod         id="pod1"         type="list"         title="Unit Test Report"         dataSource="data/testreport.xml"         selectedViewIndex="1"/>     <pod         id="pod2"         type="form"         title="Download To Do"         dataSource="data/tasks.xml"         labels="Name,Type,Weedday,time,Source Url,Target Url"         dataFields="name,type,weekday,time,source,target" />     <pod         id="pod3"         type="case"         title="Test Case" dataSource="data/TestNG.xml"         labels="Test Case"         dataFields="name" />     <pod         id="pod4"         type="film"         title="Product demo"         dataSource="data/news.xml"/>     </view> </views>

Form 和 case 类型可以选择两种显示的方式：Grid 和 Form。在 Grid 模式下，模块会以列表形式显示数据。在 Form 模式下，模块会显示一个表单，用户可以新建，修改和删除一条记录（参见图 10）。
图 10. 下载管理界面在这个页面中，首先要在 PodContentBase 控件中加入一个 HBox 来切换两个不同的视图。然后定义一个 ViewStack，并在其中加入两个控件：VBox 和 Canvas。VBox 显示表单，而 Canvas 中用 DataGrid 读取 dataFields 中的数据并以表格方式显示。而页面上面的 Action 主要在 Script 中实现。具体实现参见图 11：
图 11. 管理界面页面代码Flex 可以与各类服务器端技术相结合。该 Web 管理站点采用 J2EE 作为服务器端技术，通过 serve let 同客户端通信，完成对各 XML 配置文件的修改。由于篇幅有限，具体实现方式可以参考文章《 Flex 开发入门》。