实战Draw2d（1）：一个UML图的例子

原文地址：http://eclipse.org/articles/Article-GEF-Draw2d/GEF-Draw2d.html

网络有人翻译了这篇文章：http://blog.csdn.net/pengpeng2395/archive/2008/09/19/2952230.aspx（不确定是原创者）

 

创建一个普通java项目，把Draw2d（GEF项目附带）和org.eclipse.swt.win32.win32.x86---.jar（Eclipse插件目录中）加到类路径中就可以创建Draw2d项目了。

 

直接分析代码
public class CompartmentFigure extends Figure { public CompartmentFigure() { ToolbarLayout layout = new ToolbarLayout(); layout.setMinorAlignment(ToolbarLayout.ALIGN_TOPLEFT); layout.setStretchMinorAxis(false); layout.setSpacing(2); setLayoutManager(layout); setBorder(new CompartmentFigureBorder()); } public class CompartmentFigureBorder extends AbstractBorder { public Insets getInsets(IFigure figure) { return new Insets(1, 0, 0, 0); } public void paint(IFigure figure, Graphics graphics, Insets insets) { graphics.drawLine(getPaintRectangle(figure, insets).getTopLeft(), tempRect.getTopRight()); } } }

在Draw2d中，Figure及其子类构成了Draw2d GUI的可视部分。
每个Figure都是可以通过调用add方法添加子Figure的，通过参数还可以设置约束或位序，如add(IFigure figure, Object constraint, int index)方法。
既然有了子Figure，就需要管理它们的布局，这交给LayoutManager处理。LayoutManager专门用来放置子Figure并且计算Figure的理想大小。此处使用的是ToolbarLayout，它将所有子Figure排成一行或一列。通过setLayoutManager方法可以设置LayoutManager。
Figure还可以设置Border。Draw2d提供了很多类型的Border，比如最简单的LineBorder，如果要定义特别的Border可以参考其实现。通过setBorder方法可以设置Border。

public class UMLClassFigureTest { public static void main(String args[]) { Display d = new Display(); final Shell shell = new Shell(d); shell.setSize(400, 400); shell.setText("UMLClassFigure Test"); Image classImage = new Image(d, UMLClassFigureTest.class.getResourceAsStream("class_obj.gif")); Image privateFieldImage = new Image(d, UMLClassFigureTest.class.getResourceAsStream("field_private_obj.gif")); Image publicMethodImage = new Image(d, UMLClassFigureTest.class.getResourceAsStream("methpub_obj.gif")); LightweightSystem lws = new LightweightSystem(shell); Figure contents = new Figure(); XYLayout contentsLayout = new XYLayout(); contents.setLayoutManager(contentsLayout); Font classFont = new Font(null, "Arial", 12, SWT.BOLD); Label classLabel1 = new Label("Table", classImage); classLabel1.setFont(classFont); Label classLabel2 = new Label("Column", classImage); classLabel2.setFont(classFont); final UMLClassFigure classFigure = new UMLClassFigure(classLabel1); final UMLClassFigure classFigure2 = new UMLClassFigure(classLabel2); Label attribute1 = new Label("columns: Column[]", privateFieldImage); Label attribute2 = new Label("rows: Row[]", privateFieldImage); Label attribute3 = new Label("columnID: int", privateFieldImage); Label attribute4 = new Label("items: List", privateFieldImage); classFigure.getAttributesCompartment().add(attribute1); classFigure.getAttributesCompartment().add(attribute2); classFigure2.getAttributesCompartment().add(attribute3); classFigure2.getAttributesCompartment().add(attribute4); Label method1 = new Label("getColumns(): Column[]", publicMethodImage); Label method2 = new Label("getRows(): Row[]", publicMethodImage); Label method3 = new Label("getColumnID(): int", publicMethodImage); Label method4 = new Label("getItems(): List", publicMethodImage); classFigure.getMethodsCompartment().add(method1); classFigure.getMethodsCompartment().add(method2); classFigure2.getMethodsCompartment().add(method3); classFigure2.getMethodsCompartment().add(method4); contentsLayout.setConstraint(classFigure, new Rectangle(10, 10, -1, -1)); contentsLayout.setConstraint(classFigure2, new Rectangle(200, 200, -1, -1)); /* Creating the connection */ PolylineConnection c = new PolylineConnection(); ChopboxAnchor sourceAnchor = new ChopboxAnchor(classFigure); ChopboxAnchor targetAnchor = new ChopboxAnchor(classFigure2); c.setSourceAnchor(sourceAnchor); c.setTargetAnchor(targetAnchor); /* Creating the decoration */ PolygonDecoration decoration = new PolygonDecoration(); PointList decorationPointList = new PointList(); decorationPointList.addPoint(0, 0); decorationPointList.addPoint(-2, 2); decorationPointList.addPoint(-4, 0); decorationPointList.addPoint(-2, -2); decoration.setTemplate(decorationPointList); c.setSourceDecoration(decoration); /* Adding labels to the connection */ ConnectionEndpointLocator targetEndpointLocator = new ConnectionEndpointLocator(c, true); targetEndpointLocator.setVDistance(15); Label targetMultiplicityLabel = new Label("1..*"); c.add(targetMultiplicityLabel, targetEndpointLocator); ConnectionEndpointLocator sourceEndpointLocator = new ConnectionEndpointLocator(c, false); sourceEndpointLocator.setVDistance(15); Label sourceMultiplicityLabel = new Label("1"); c.add(sourceMultiplicityLabel, sourceEndpointLocator); ConnectionEndpointLocator relationshipLocator = new ConnectionEndpointLocator(c, true); relationshipLocator.setUDistance(10); relationshipLocator.setVDistance(-20); Label relationshipLabel = new Label("contains"); c.add(relationshipLabel, relationshipLocator); contents.add(classFigure); contents.add(classFigure2); contents.add(c); lws.setContents(contents); shell.open(); while (!shell.isDisposed()) while (!d.readAndDispatch()) d.sleep(); } }

 

3-6行以及72-75行代码是标准的SWT程序代码。

第10行创建了一个LightweightSystem。
LightweightSystem连接了SWT与Draw2d，它使得Draw2d的图形（Figures）可以放置在SWT的画布（Canvas）上。
使用LightweightSystem一般遵从如下步骤：
1. 创建一个SWT的Canvas。（本例中直接使用Shell作为画布）
2. 以Canvas为参数创建一个LightweightSystem。（第10行代码）
3. 创建一个Draw2d图形，并调用LightweightSystem的setContents(IFigure)方法。该图形将成为此Draw2d程序的顶级图形（top-level Figure）。（第71行代码）

11-13行创建了一个Figure，并为它设置了XYLayout类型的布局管理器。XYLayout在前面GEF教程中使用过，它利用XY直角坐标系来管理布局，所有的子图形必须提供Rectangle类型的约束以使得该布局管理器能合理的放置它们。

14-38行创建了两个类图子图形。注意37-38行代码，布局管理器为子图形设置约束。

40-44行创建了一个连接PolylineConnection，并设置了锚点ChopboxAnchor，这些都已经接触过。

46-53行创建了一个连接的装饰PolygonDecoration。
PolygonDecoration继承自Polygon。画一个Polygon需要给定若干个点，PolygonDecoration的template PointList就给出了这些点。默认情况下，template包含三个点(0,0),(-1,1),(-1,-1)，它是一个等腰直角三角形。例子程序重新设置了一个正方形的template。
为什么显示出来的是菱形呢？原来PolygonDecoration还有个setScale方法，他可以分别设置XY方向的放缩比例。默认的放缩比例是(7,3)，即X轴放大7倍，Y轴放大3倍。

55-67行创建了三个连接的标签。这些标签都是通过add方法加到连接上的，所以它们都是连接的子Figure（实际上，上面用来设置装饰的setSourceDecoration方法实现时最终也是调用add方法，PolygonDecoration其实也是连接的子Figure）。
ConnectionEndpointLocator类是Locator接口的一个实现。Locator接口用来控制Figure的位置。ConnectionEndpointLocator以连接的端点（或起点）为参照物来确定目标Figure的位置。通过setUDistance方法设置目标Figure到连接的owner（锚点？）的距离；
通过setVDistance方法设置目标Figure到连接的垂直距离。
这样代码 c.add(targetMultiplicityLabel, targetEndpointLocator) 就是将一个Label图形添加到连接上，并给它设置了一个ConnectionEndpointLocator类型的约束。
PolylineConnection使用DelegatingLayout作为布局管理器。DelegatingLayout专门用来处理Loactor类型的约束。
如此，PolygonDecoration必然也是用Locator做约束的了。没错，它用的是ArrowLocator。