宰鸡焉用牛刀——testLink界面改造的那些事儿(1)

 TestLink是一款开源的进行测试管理的工具。下载和详细的介绍请点击 http://testlink.sourceforge.net/docs/testLink.php。主要的功能包括对测试产品管理，测试需求的管理，测试规范、测试计划管理（包括编辑和搜索测试用例）。由于其开源的特性，在各个项目的测试组中都能够得到广泛的应用。

  但是，使用过TestLink的用户都能够体会到，它那糟糕的用户界面已经严重影响到了用户体验。如果界面能够再友好些，那么使用效果（起码是使用者的心情）能够提高。

  TestLink是由php语言进行编写的，至于界面则是由smarty模板编写。对TestLink界面进行改造需要有简单的php知识，smarty模版编写基础和一定的html基础。进入TestLink的源码结构中，有几个重要的文件夹：lib（TestLink的各种功能php文件均存放于此），index.php（testLink点击之后第一一个调用的php），gui（与页面相关的文件夹），locale（语言包文件夹，进行汉化时需要用到）。

  首先谈谈mainPage的页面布局。TestLink本身将mainPage作为两个frame，上面是navbar，下面是操作窗口。navbar作为菜单栏，起到了导航的功能，通过点击上面的链接，可以在“主页”，“需求”，“测试规范”等页面中进行跳转。但是缺点是，没进入一个页面之后，测试人员都会进行一些操作，但是这些操作就没法进行跳转，而只能再点击navbar上面的链接回到主页再进行选择。改造界面的第一件事就是在主页中增加导航栏，而这个导航栏包括所有的操作链接，通过该导航栏就能够实现各个功能的跳转。该导航栏在每个页面都应该存在，以方便用户点击。当然，除此之外，做的越漂亮越好了。index.php启动之后，通过“$smarty->display('main.tpl')”调用tpl模板。main.tpl就是主页的模板，将原有的主页两个frame划分为四个frame。代码如下：

 

<frameset id =top rows="70,*" frameborder="0" framespacing="0">

   <frame  src="{$titleframe}" name="titlebar" scrolling="no" noresize="noresize" />

   <frameset id = main cols="200,6,*" frameborder="0" framespacing="0"> 

        <frame id=leftframe src="{$leftframe}" scrolling='auto' name='leftframe' />

        <frame id=handleframe src="mainPageHandle/handle.htm" scrolling='no' name='handleframe' /> 

        <frame id = rightframe src="{$mainframe}" scrolling='auto' name='mainframe' /> 

</frameset> 

  titlebar作为原有的菜单栏存在，leftframe是新建的导航栏frame，handleframe中会有一个图标，点击该图标会将导航栏收缩。rightframe中存放操作界面。在leftframe中使用了ext的viewport控件，使布局更加美观些。handleframe需要重新写个html文件，以进行收缩的处理。当用户点击收缩 图标时，可以将导航栏收缩，当用户点击显示图标时，会再显示导航栏。而rightframe的src $mainframe则来源于原有的testlink定义变量。值得一提的是，为了避免界面改造过程中触及过多testlink原有的模块，简化改造难度，在使用viewport构造导航栏时，containEl（包含的HTML内容）均采用原有的testlink html定义。

  导航栏的收缩和恢复功能则是通过修改frameset的布局完成，代码如下：

收缩部分：

 

if(top.main.lastcols == "200,6,*")

{

top.main.cols="0,6,*";

}

恢复部分：

if(top.main.lastcols == "200,6,*")

{

top.main.cols="0,6,*";

}

然后再用图标包装一下，就显得既美观又实用了。

  TestLink的图标都在gui/themes/default/images文件夹下，还可以通过修改适当的图标文件，使界面更加美观。还有一个就是添加字库，在strings.txt文件中（/locale/zh_CN文件夹下），按照相应的格式$TLS_xxx = "内容" ，然后在tpl模板中labels中声明，以$labels.xxx使用。这样就可以使用中文字符了。

  通过对testlink的主页界面改造，发现其实真正的工作很简单，大概花了3天时间搞定，主要的工作在于定位，找到改造的那个点之后，就能不费周折的改进，哪里不爽改哪里。真可谓是宰鸡不用杀牛刀。