JMeter UI组件使用的一个问题

概述

本文介绍在利用JMeter进行扩展插件，利用JMeter提供的组件的时候碰到的问题，读者如果碰到有类似的问题，通过阅读此篇文章，避免在使用JMeter提供的UI组件的时候浪费宝贵的时间。

问题描述

xmeter君最近在扩展JMeter插件的时候，需要有一个界面允许测试人员来开发测试脚本，而通过JMeter来扩展界面的时候，使用JMeter提供的一些组件能让开发人员提高效率，减少重复造轮子的时间。JMeter提供的一些内置的可重用的UI组件一般都在*.gui包中，比如用于布局的各种layout在core目录的/org/apache/jmeter/gui/util包，比如HorizontalPanel，允许加入该Panel的组件以水平布局的方式加到界面中；又比如说JLabeledTextField，该控件主要用于显示一个Label和TextField的组合，使用该组件可以减少生成UI过程中的代码量（如果读者想设置JMeter的开发环境，可以参考xmeter君写的这篇文章 ）。

如下图所示，xmeter君要开发的这个插件的需求如下。编辑脚本的人员在选择“Functions”下拉列表框的时候，绿色部分的组件是动态变化的：如果当前选择的是add，那么下面出现的带有两个输入参数的控件组合；如果当前的选择变成了另外的，那么绿色部分的组件就会发生变化。其中绿色部分的是一个Panel，每个参数（下图为num1和num2）会单独生成一个Panel，并加入绿色的Panel中。

那今天要说的这个控件的名字就是上文提到的绿色的Panel，使用的是由JMeter提供的HorizontalPanel。在用户选择的Functions有变化之后，代码的大概逻辑如下，

1）监听到用户选择的Functions有变化

2）删除绿色Panel下的所有控件

3）根据新选择的Function，生成新的针对参数的Panel，并加到绿色的Panel中

4）重绘绿色Panel

但是实际上使用JMeter提供的HorizontalPanel后效果如下，可以看到在每次用户更改了一次选择之后，都会“遗留”下一部分内容（下图蓝色和红色是对Panel的border进行着色，这样更易于理解）。看起来是调用HorizontalPanel的删除子组件的方法不能完全删除干净引起的。

查看HorizontalPanel的源代码，在add方法中发现了问题所在，特别是注释中写的：“这个方法在调用remove的时候会有坑，但是目前这个坑还暂时碰不到，所以先不管它了”。可是在xmeter君使用该控件的时候，很不幸踩到了这个坑。由于调用HorizontalPanel的删除组件的方法并不会清除在该组件中定义的另外一个容器组件（subPanel），因此导致在调用删除子组件方法的时候不断有东西被遗留下来。

/**

* {@inheritDoc}

*/

@Override

public Component add(Component c) {

    // This won't work right if we remove components. But we don't, so I'm

    // not going to worry about it right now.

    if (hgap > 0 && subPanel.getComponentCount() > 0) {

        subPanel.add(Box.createHorizontalStrut(hgap));

    }

    if (c instanceof JComponent) {

        ((JComponent) c).setAlignmentY(verticalAlign);

    }

    return subPanel.add(c);

}

解决方法

找到问题的根源之后，解决起来就比较简单了。自己定义一个新的类CustomHorizontalPanel，其它的方法参考JMeter中HorizontalPanel提供的实现，再新增一个方法用于删除容器组件（subPanel）的子组件。在删除上文所说的绿色Panel中的子组件的时候，调用removeSubs方法，这样避免了调用父类继承的remove方法带来的上述问题。

public void removeSubs() {

    subPanel.removeAll();

}

参考资料

JMeter扩展插件实现对自定义协议进行支持 ，该文章描述了自定义JMeter插件的基本流程，包括UI和模型（Sampler的实现）等。