GraphNode图片和文字上下排列

前言

  靶场平台中的节点，图片和文本是左右排列的，老师想改成图片和文本上下排列，很早以前就提过这个要求，但是当时需求比较急，而且自己当时也比较菜，就没着重去改。最近项目结了，没有当时做项目那么急，老师让完善一下靶场平台，就打算把这个问题解决了。

解决过程

  节点用的是Zest框架的GraphNode对象（估计老的都没人用），当时发现这个对象并没有提供设置图片和文本位置的方法，就觉得如果要实现上下排列的效果就得自己重新自定义一个节点对象，这可把我唬住了，觉得这个问题很难，而且当时也没找到Zest源码，没法分析源码。前几天在GitHub上找到了Zest的源码，下载下来研究了一番。
  我是这么想的，既然它能显示图片和文本，那我就找找到底图片和文本是在哪里显示和存储的。进到GraphNode源码里，找到setImage()和setText()函数，如下：

//setText
public void setText(String string) {
	if (string == null) {
		string = "";
	}
	super.setText(string);
	if (nodeFigure != null) {
		updateFigureForModel(this.nodeFigure);
	}
}

//setImage
public void setImage(Image image) {
	super.setImage(image);
	if (nodeFigure != null) {
		updateFigureForModel(nodeFigure);
	}
}

  发现这里面调用了父类的setImage()和setText()方法，那就去看看它父类是啥，发现父类是Item类，父类的setImage()和setText()函数就是把image和text赋值给自己的属性，而且没有其他什么显示之类的代码。我就想看看是不是Item是不是还有父类啥的，结果还真有，Item的父类是Widget，但是是个抽象类，肯定就没有什么实现代码了。
  这个时候我就想往回看，看GraphNode的setImage()方法里还有啥。这个时候发现setImage()和setText()函数里都出现了一个nodeFigure对象和updateFigureForModel方法。根据updateFigureForModel这个方法名我就感觉是不是显示代码在这里面。代码如下：

//省略了部分代码，只保留了关键代码
protected void updateFigureForModel(IFigure currentFigure) {
	GraphLabel figure = (GraphLabel) currentFigure;
	if (!checkStyle(ZestStyles.NODES_HIDE_TEXT)) {
		figure.setText(this.getText());
	}
	figure.setIcon(getImage());
}

  这个方法里把传进来的参数currentFigure强转成了GraphLabel类对象，然后调用了GraphLabel类的setIcon()和setText方法()。那就去看看传进来的参数是什么，发现就是上面提到的nodeFigure对象。那再看看nodeFigure对象是什么，在下面找到了一个createFigureForModel()方法，在这个方法里给nodeFigure赋值了一个GraphLabel类型的值（这就和上面代码把参数强转为GraphLabel类对象对应上了），而且还把image和text传了进去。那就再看看GraphLabel的构造函数里是怎么处理image和text的。进到构造函数里发现它调用了自己的setIcon()和setText函数，在它的setIcon()和setText()函数里又调用了自己父类CachedLabel的setIcon()和setText()函数。那就接着套娃往进走，看看CachedLabel的父类里是怎么处理的。果不其然，CachedLabel又调用了它的父类Label的setIcon()和setText()函数。那就接着套，但是这时候我并没有Label的源码，就去找Label的源码，在找源码的过程中发现Label是属于Draw2d里面的组件。Draw2d是Eclipse开发出来专门进行图像显示的一个轻量级框架。还找到了一个Label类开发文档，尝试性的搜了一下跟icon和text相关的函数，还真发现一个setTextPlacement，是专门设置图片和文字相对位置的函数。

  这不是得来全不费功夫吗，再看看参数，能设置文本相对于图片的位置，我应该设置SOUTH。点击去发现SOUTH的值是4，原来的默认是EAST是16。

  这样只需要在新建节点的时候获取到节点的nodeFigure对象，然后强转为Label对象，调用Label对象setTextPlacement()传参为4，完事儿。代码如下：

//获取nodeFigure对象
IFigure nodeFigure = node.getNodeFigure();
//nodeFigure强转为Draw2d的Label对象
org.eclipse.draw2d.Label l = (org.eclipse.draw2d.Label)nodeFigure;
//4表示SOUTH
l.setTextPlacement(4);

总结

  读了源码后，感觉Zest就是把Draw2d又封装了一下提供了一个更方便简洁的组件。解决这个问题的方法也不像开始我想象的需要自定义节点，Label对象提供了相关方法，只不过是之前自己没找到，而且有点被自己刚开始的想法吓到了，觉得这是个很难得问题，以后遇到问题还是多思考，多看看，不能自己乱断定了。