Google Git
Sign in
eclipse / www.eclipse.org / articles / a2faa7caa2a7308e6940420465562059af7b711a / . / Article-GEF-diagram-editor / shape_cn.html
blob: ba2743e9811b77e0da32c2e350ba53507cb1b55c [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0069)http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html -->
<HTML lang=en><HEAD><TITLE>A Shape Diagram Editor</TITLE><LINK
href="A Shape Diagram Editor.files/default_style.css" rel=stylesheet>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="Bo Majewski" name=author>
<META content="MSHTML 6.00.2800.1515" name=GENERATOR>
<style type="text/css">
<!--
.style1 {color: #FF0000}
.style2 {color: #0000FF}
-->
</style>
</HEAD>
<BODY>
<DIV align=right>&nbsp; <SPAN
style="FONT-SIZE: small; FONT-FAMILY: Times New Roman, Times, serif">Copyright &copy;
2004 Cisco Systems Inc.</SPAN>
<TABLE cellSpacing=0 cellPadding=2 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top align=left bgColor=#0080c0 colSpan=2><SPAN
style="FONT-WEIGHT: bold; COLOR: #ffffff; FONT-FAMILY: Arial,Helvetica">&nbsp;Eclipse
Corner Article</SPAN> </TD></TR></TBODY></TABLE></DIV>
<DIV align=left>
<H1><IMG height=86 alt=tag src="images/Idea.jpg" width=120
align=middle></H1></DIV>
<P>&nbsp;</P>
<H1 align=center>几何图形编辑器</H1>
<BLOCKQUOTE><B>概要</B> <BR>
<P>图形编辑框架（Graphical Editing Framework － GEF）为创建用于可视化编辑任意模型的编辑器提供了强大的基础。它的功能依赖于模块化的结构，合理选用的设计模式，和相对独立的组件，这些组件构成了一个完整的编辑器。对于一个新手来说，GEF中所涉及的大量概念和技术可能是令人难以承受的。然而，一旦&#36825;&#20123;&#25216;&#26415;被掌握并正确使用，它们就可以帮助开发出具有高扩展性和维护性的软件。本文将对GEF作相对全面的介绍。文中将描述一个几何图形编辑器作为例子－它虽然简单，但是覆盖了GEF中的核心概念。</P>
<P><B>作者 Bo Majewski, Cisco Systems, Inc.</B><BR>
<FONT size=-1>2004年12月8日 </FONT></P>
<P><strong>译者 Qi Liang</strong> <br>
2005年9月7日 </P>
</BLOCKQUOTE>
<HR width="100%">
<H2>简介</H2>
<P><A href="http://www.eclipse.org/gef/">绘图编辑框架</A>（GEF）被设计用来以图形而不是文本的方式来编辑用户数据，一般被称为<em>模型</em>（<EM>model</EM>）。当处理包含多对多，一对多以及其他复杂关系的实体时，GEF是一种很有价值的工具。随着Eclipse
<A href="http://www.eclipse.org/articles/Article-RCP-1/tutorial1.html">Rich
Client Platform</A> 的流行，使得编辑器的开发不仅仅局限于编程，GEF的重要性也与日俱增。比如说，数据库schema编辑器
<A class=cite
href="http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html#zoio">[7]</A>，逻辑电路编辑器和任务流管理器，这些例子都很好地展示了GEF是一种可以用于各个不同领域的，具有强大功能和灵活性的框架。</P>
<P>然而，任何通用框架都设计复杂，难于学习，GEF也不例外。到现在为止，最小的例子也将涉及75个类。即使对于最勤勉的开发者来说，要从GEF用户定义类型和GEF提供的上百种类型之间相互作用来理解GEF的独特之处，对耐心和智力的都是一种考验。为了改变这种状况，一个全新的，规模更小的编辑器例子被添加进即将到来的Eclipse 3.1（译：翻译此文时，Eclipse 3.1已经发布）。这个几何图形编辑器（看<a href="http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html#fig1">图1</a>）允许你创建，编辑简单的图。它处理两种对象，矩形和椭圆。你可以在实线和虚线这两种连接类型中选择一种来连接两个对象。每一个连接都是有方向的，也就是说从一个源对象开始，在目标对象处终止。箭头用来表示连接方向。连接可以转移，也就是通过拖动它的源点或目标点到一个新的对象上。编辑器中的对象可以点击选中，也可以通过拖拉一个区域来选择。选中的对象可以被删除。所有的模型操作，比如添加，删除对象，移动对象，改变大小等等，都可以undo或redo。最后，编辑器集成了两个Eclipse标准视图<EM>Properties</EM>和<EM>Outline</EM>。这个编辑器的价值不是在于它的可用性，而是作为例子，通过有限的两种用户定义类型来演示在一个成熟GEF编辑器中会碰到的大多数概念和技术。</P>
<P> <A name=fig1></A></P>
<DIV class=figure>
<CENTER style="MARGIN-BOTTOM: 1em"><IMG height=464
alt="Screen shot of the diagram editor"
src="images/shape_screenshot2.jpg" width=673> </CENTER>
<DIV class=figure-caption><SPAN class=figure-number>图 1</SPAN>. 运行在Linux下的几何图形编辑器</DIV>
</DIV>
<P><IMG alt="Try it!" src="images/tryit.gif" align=middle>将最新的Eclipse 3.1 GEF例子从<a href="http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html#gamma">GEF项目下载页面</a>下载下来，并解压缩至你的Eclipse目录中。按<EM>Ctrl-N</EM>，会弹出创建向导，将<EM>Examples</EM>目录展开，选择<EM>Shapes Diagram</EM>。下面给出几何图内部工作的详细的全面介绍。在我们接触代码前，我们先来看看GEF主要思想。</P>
<H2> GEF核心概念</H2>
<P>GEF帮助你为数据构造一个可视化的编辑器。数据可以是带有简单温度旋钮的温度调节器，也可以是一个包含几百个路由器，连接和服务质量策略的虚拟局域网。幸亏GEF设计者，他们设法建立一种框架，使得它能够和任何数据一起工作，用GEF的术语来说，就是任何<strong>模型（model）</strong>。这是通过严格遵循了模型－视图－控制器模式（MVC）来做到的。模型就是你的数据。对于GEF，模式可以是任何普通的Java对象（POJO）。模型不应该知道任何有关于控制器或视图的信息。<strong>视图（view</strong>）是模型或其某一部分在屏幕上的可视化表示。它可以是矩形，线或椭圆这样的简单图形，也可以是彼此嵌套的逻辑电路。同时，视图也应该对模型和控制器一无所知。虽然任何实现<CODE>IFigure</CODE>接口的类都可以作为视图，但是GEF使用Draw2D<strong>可视图形（figure）</strong>。<strong>控制器</strong>，可称为<strong>编辑部件（edit
part）</strong>，是模型和视图之间的桥梁。当你开始编辑你的模型时，一个顶层的控制器被创建出来。如果模型由若干个片段组成，顶层控制器就会将这个信息通知GEF。接下来，每个片段的子控制器被创建出来。如果它们又包含子片段，这个过程就会一直继续下去，直到所有组成模型的对象都有它们的控制器。控制器的另一个任务是创建可视图形来表示模型。一旦模型被设置到某个控制器，GEF就向控制器要合适的<CODE>IFigure</CODE>对象。既然模型和视图彼此都不知道对方，控制器负责监听模型的修改，并更新模型的可视化表示。结果，在许多GEF编辑器中，一个常见的模式就是模型发<CODE>PropertyChangeEvent</CODE>通知。当一个编辑部件收到事件通知时，它通过调整模型的外观或结构上的表示来作相应的改变。</P>
<P>可视编辑的另一个方面就是对用户动作和鼠标，键盘事件作出响应。这里的挑战在于提供一种机制，提供合理的缺省行为，并且允许重新定义行为来覆盖缺省行为，以适应所编辑模型。比如鼠标拖动事件，如果我们假设每次检测到鼠标拖动事件，所选中对象都被移动的话，我们就限制编辑器开发者的自由。很有可能有人希望在鼠标拖动的时候，提供放大，缩小的行为。GEF通过使用工具（tool），请求（request）和策略（policy）解决了这个问题。</P>
<P><strong>工具</strong>是一种有状态的对象，它将象鼠标按钮被按下，被拖动等低层事件翻译成高层的由<CODE>Request</CODE>对象表示的<strong>请求</strong>。发送哪个请求取决于所激活的工具。例如，连接工具在收到鼠标按钮被按下这样的事件时，会发送一个连接开始或结束的请求。如果是一个创建工具，我们就会收到一个创建请求。GEF包含了大量预定义的工具以及创建应用特定工具的方法。工具可以由程序控制激活，也可以在用户实施一个动作后激活。在大多数情况下，工具将请求发送给鼠标位置下面的图形的<CODE>EditPart</CODE>。例如，如果你点击一个代表widget的矩形，与此相关的编辑部件就会收到一个选中请求或者直接编辑的请求。有时候，请求会发送给区域中的所有可视图形的编辑部件，比如<CODE>MarqueeSelectionTool</CODE>就是这样。无论一个或多个编辑部件怎样被选择为请求目标，它们自己并不处理请求。而是将这个任务交给所注册的<B>编辑策略</B>（ <B>edit policies</B>）。每个编辑策略都会为该请求提供一个命令。不希望处理请求的策略将返回一个<CODE>null</CODE>。使用策略而不是编辑部件来响应请求的机制使得策略和编辑部件都尽可能短小，功能集中。同时，也意味着调试和维护代码变得更容易。GEF的最后一个部分就是<strong>命令</strong>（<strong>command</strong>）。GEF并没有直接修改模型，它要求你使用命令来做实际的修改。每个命令应该实现执行对模型或模型一部分的修改和撤销修改。这样，GEF编辑器自动支持模型修改的undo/redo。</P>
<P> 除了能够提升你的技能以及设计模式方面的知识外，使用GEF的一个重要的优点在于它能够和Eclipse平台完全集成在一起。在编辑器中选中的对象可以为标准<EM>Properties</EM>视图提供属性。Eclipse向导可以用来创建，初始化GEF编辑器编辑的模型。<EM>Edit</EM>菜单中的<EM>Undo</EM>和<EM>Redo</EM>可以触发GEF编辑修改的撤销和重做。简单地说，GEF编辑器实现<CODE>IEditorPart</CODE>接口，是Eclipse平台中的一员，它和文本编辑器或其他workbench编辑器处于同样的集成层次。
</P>
<H2>模型</H2>
<P>创建GEF编辑器的第一步是创建模型。在我们的例子里，模型由四类对象组成：几何图（包含所有的图形），两种类型的图形，和图形间的连接。在我们为这些类编写代码前，我们准备了一些基础结构。</P>
<H3>核心模型类</H3>
<P>当你创建模型时，你可以参考下面的内容：</P>
<UL>
<LI><strong> 模型存储了所有用户可以编辑或浏览的数据。</strong>这同时也包括和可视化表示相关的数据，比如边界。你不能依赖编辑部件或可视图形来保存这些数据，因为这些对象可能根据需要创建或丢弃。如果你不喜欢将你的可视数据和你的业务数据绑定在一起，可以参考<A class=cite
href="http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html#hudson">[3]</A>中的建议。
<LI><strong>提供持久化模型的方法。</strong>确信当编辑器在关闭时，你的模型被持久化。当同样的编辑器被打开时，实现方法使得模型状态可以从持久存储器中恢复。
<LI><strong>模型必须保持与视图或控制器无关。</strong>不要存储任何对视图或控制器的引用。GEF在某种条件下会丢弃视图或控制器。如果你保持了这些引用，你可能会碰到一个失效的可视图形或编辑部件。
<LI><strong>提供方法允许别人监听模型的变化。</strong>这使得控制器可以及时响应修改，并对视图作适当调整。既然你不能保持对控制器的引用，唯一的方法就是为控制器提供一种途径，使得它能够作为一个事件接受者注册（和撤销注册）在模型上。一个好的办法就是使用<CODE>java.beans</CODE>包中的属性修改事件通知。</LI>
</UL>
<P>上面所列的规则对于所有模型都是相同的，为基本类建立类层次来强化这些规则是很有好处的。<CODE>ModelElement</CODE>类继承了Java的<CODE>Object</CODE>类，并提供了三个功能：持久化，属性改变和属性源支持。简单的模型持久化可以通过实现<IMG height=13 alt=tag
src="images/tag_2.gif" width=24 align=middle><CODE>java.io.Serializable</CODE>接口以及<IMG height=13 alt=tag
src="images/tag_3.gif" width=24 align=middle><CODE>readObject方法来完成。这使得你可以将编辑器的模型以二进制格式存储。当需要和某种应用一起工作时，这并不能提供的格式的可移植性。在复杂的情况下，你需要实现将模型以XML或类似的格式存储。模型的改变通过属性改变事件来通知。这个基本类允许编辑部件<IMG height=13
alt=tag src="images/tag_4.gif" width=24 align=middle>注册和<IMG height=13 alt=tag src="images/tag_5.gif"
width=24 align=middle>撤销注册为属性改变通知的接受者。属性改变通知是通过调用<IMG height=13 alt=tag
src="images/tag_6.gif" width=24 align=middle>firePropertyChange方法触发的。最后，为了帮助和workbench的<EM>Properties</EM>视图集成，需要实现IPropertySource接口（细节在图2中忽略）。</CODE></P>
<DIV class=figure><PRE class=program>public abstract class ModelElement implements <IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> IPropertySource, <IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> Serializable {
private transient PropertyChangeSupport pcsDelegate =
new PropertyChangeSupport(this);
<IMG height=13 alt=tag src="images/tag_4.gif" width=24 align=middle> public synchronized void addPropertyChangeListener(PropertyChangeListener l) {
if (l == null) {
throw new IllegalArgumentException();
}
pcsDelegate.addPropertyChangeListener(l);
}
<IMG height=13 alt=tag src="images/tag_6.gif" width=24 align=middle> protected void firePropertyChange(String property,
Object oldValue,
Object newValue) {
if (pcsDelegate.hasListeners(property)) {
pcsDelegate.firePropertyChange(property, oldValue, newValue);
}
}
<IMG height=13 alt=tag src="images/tag_3.gif" width=24 align=middle> private void readObject(ObjectInputStream in) throws IOException,
ClassNotFoundException {
in.defaultReadObject();
pcsDelegate = new PropertyChangeSupport(this);
}
<IMG height=13 alt=tag src="images/tag_5.gif" width=24 align=middle> public synchronized void removePropertyChangeListener(PropertyChangeListener l) {
if (l != null) {
pcsDelegate.removePropertyChangeListener(l);
}
}
...
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 2</SPAN>. 所有模型对象的基类</DIV>
</DIV>
<P>椭圆和矩形这两类对象，在许多方面是相同的，它们的公共功能可以被提取出来放在公共类中。尤其是两者都代表着占据某个位置，具有一定大小的对象。它们可以彼此连接。这些属性的任何修改都需要通知监听者。更进一步地说，它们的位置和大小属性都可以通过<CODE>IPropertySource</CODE>接口暴露，这允许用户通过<EM>Properties</EM>视图来查看，和修改它们。</P>
<P>对象间连接的管理很值得仔细看一下。这里并没有一个全局的用于存储所有连接的地方。GEF要求模型部件报告它们之间的连接的情况，是源还是目标。这些信息都以<CODE>List对象的形式</CODE>提供。<CODE>Shape</CODE>类维护了两个数组列表，分别存储<IMG height=13 alt=tag
src="images/tag_1.gif" width=24 align=middle>源连接和<IMG height=13 alt=tag src="images/tag_2.gif" width=24
align=middle>目标连接。源连接是指那些以当前图形作为源的连接，目标连接是指以当前图形作为目标的连接。两个包可见方法（<IMG height=13 alt=tag
src="images/tag_3.gif" width=24 align=middle>和<IMG
height=13 alt=tag src="images/tag_4.gif" width=24
align=middle>）使得图形和连接可以彼此知道相互之间的关系。此外，两个公有方法（<IMG height=13 alt=tag
src="images/tag_5.gif" width=24 align=middle>和<IMG
height=13 alt=tag src="images/tag_6.gif" width=24
align=middle>）使得<CODE>model</CODE>包外面的类知道图形的连接情况。这些方法都会被相关的图形（形状）控制器所使用，具体内容将在接下来的部分中加以介绍。</P>
<DIV class=figure><PRE class=program>public abstract class Shape extends ModelElement {
private Point location = new Point(0, 0);
private Dimension size = new Dimension(50, 50);
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> private List sourceConnections = new ArrayList();
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> private List targetConnections = new ArrayList();
public Point getLocation() {
return location.getCopy();
}
public void setLocation(Point newLocation) {
if (newLocation == null) {
throw new IllegalArgumentException();
}
location.setLocation(newLocation);
firePropertyChange(LOCATION_PROP, null, location);
}
<IMG height=13 alt=tag src="images/tag_3.gif" width=24 align=middle> void addConnection(Connection conn) {
if (conn == null || conn.getSource() == conn.getTarget()) {
throw new IllegalArgumentException();
}
if (conn.getSource() == this) {
sourceConnections.add(conn);
firePropertyChange(SOURCE_CONNECTIONS_PROP, null, conn);
} else if (conn.getTarget() == this) {
targetConnections.add(conn);
firePropertyChange(TARGET_CONNECTIONS_PROP, null, conn);
}
}
<IMG height=13 alt=tag src="images/tag_4.gif" width=24 align=middle> void removeConnection(Connection conn) {
if (conn == null) {
throw new IllegalArgumentException();
}
if (conn.getSource() == this) {
sourceConnections.remove(conn);
firePropertyChange(SOURCE_CONNECTIONS_PROP, null, conn);
} else if (conn.getTarget() == this) {
targetConnections.remove(conn);
firePropertyChange(TARGET_CONNECTIONS_PROP, null, conn);
}
}
<IMG height=13 alt=tag src="images/tag_5.gif" width=24 align=middle> public List getSourceConnections() {
return new ArrayList(sourceConnections);
}
<IMG height=13 alt=tag src="images/tag_6.gif" width=24 align=middle> public List getTargetConnections() {
return new ArrayList(targetConnections);
}
...
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 3</SPAN> 图形功能</DIV>
</DIV>
<H3>顶层模型类</H3>
<P>通过上面的准备，我们可以开始编写顶层模型类。<CODE>Connection</CODE>类表示两个图形间的连接。它存储连接的源和目标。通过调用<CODE>disconnect</CODE>或<CODE>reconnect</CODE>方法可以修改连接。连接含有一个boolean值来表示连接是否存在。命令会使用这个值来验证某种操作的合法性。源连接和目标连接都保持一个到源图形的引用，这样使得被断开的连接可以很容易地被重新连接。连接包含一个属性，就是线的类型。<CODE>EllipticalShape</CODE>和<CODE>RectangularShape</CODE>类都扩展了<CODE>Shape</CODE>类，添加了很少的功能。</P>
<P><CODE>ShapeDiagram</CODE>类是<CODE>ModelElement</CODE>类的子类，它可以作为一种容器。它维护一组图形，并通知监听器这组图形的变化。命令可以调用<IMG
height=13 alt=tag src="images/tag_1.gif" width=24
align=middle><CODE>addChild</CODE>和<IMG height=13 alt=tag
src="images/tag_2.gif" width=24 align=middle><CODE>removeChild</CODE>方法，并检查返回的boolean值来验证它们的操作。这个类也提供了<IMG height=13
alt=tag src="images/tag_3.gif" width=24 align=middle>公共方法给控制器类。</P>
<DIV class=figure><PRE class=program>public class ShapesDiagram extends ModelElement {
...
private Collection shapes = new Vector();
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> public boolean addChild(Shape s) {
if (s != null &amp;&amp; shapes.add(s)) {
firePropertyChange(CHILD_ADDED_PROP, null, s);
return true;
}
return false;
}
<IMG height=13 alt=tag src="images/tag_3.gif" width=24 align=middle> public List getChildren() {
return new Vector(shapes);
}
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> public boolean removeChild(Shape s) {
if (s != null &amp;&amp; shapes.remove(s)) {
firePropertyChange(CHILD_REMOVED_PROP, null, s);
return true;
}
return false;
}
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 4</SPAN>.
<CODE>ShapeDiagram</CODE> - 图形的容器</DIV>
</DIV>
<H3>实现上需要注意的地方</H3>
<P>细心的读者一定意识到这个模型创建了一个有向图的实现，图形作为顶点，连接作为边，所有图形，连接构成的图就是图。这里所形成的表示方式称为邻接点列表表示法，它很适合稀疏图。只要略作修改，这个模型的代码就可以转变为一般的图表示。这里对算法书中的图实现所需要做的就是添加代码使得图，节点，和边在发生改变的时候发送事件。不象数学上的图，节点不是零维的点，而是有矩形边框。最后，图存储了所有的边，而图形并没有存储连接，因为GEF并没有要求这么做。</P>
<P>值得注意的是，由上面的类所提供的解决方案并不是唯一的方法。那些开发计算机图形的人更愿意用另一种方法来存储连接，安排节点和边之间的通信。然而，这些细节并不是那么重要。设计者可以自由地选择他们认为更具普遍性，更快，或者功能更强的模型表示。关键的地方在模型改变的消息通知，模型修改的维护，包括对可视属性和模型持久化的支持。其余的都取决于你的经验和需要，你可以自由地进行选择。</P>
<H2>视图</H2>
<P>由于这个图形编辑器非常的简单，我们不必创建可视图形来表示我们的模型，而是使用预定义的可视图形。<CODE>Figure</CODE>类加上<CODE>FreeformLayout</CODE>布局管理器用来表示图。这允许我们将对象拖放到任何位置。<CODE>RectangleFigure</CODE>和<CODE>Ellipse</CODE>都可以表示对象。使用预定义的可视图形来表示部分模型并不是通常的做法。即使你的视图没有引用模型或控制器，它都必须为每个用户可能需要查看或修改的模型重要方面都定义可视化属性。因此常常会定义拥有大量可视化属性，比如颜色，文本，嵌套可视图形等，的复杂可视图形，每个属性都对应于它们所表示的模型属性。有关创建复杂可视图形的详细处理，请参考 <A
class=cite
href="http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html#lee">[4]</A>。</P>
<H2>部件（part）</H2>
<P>对于模型的每个独立部分，我们都必须定义控制器。所谓“独立”，指的是这个实体都可以作为用户操作的对象。一个比较好的原则就是任何可以被选择，或删除的对象都应该有它自己的编辑部件。</P>
<P>编辑部件知道模型，监听模型改变所产生的事件，然后更新视图。由于在模型层所做的设计选择，所有的编辑部件都必需遵循图5所示的模式。每个部件<IMG
height=13 alt=tag src="images/tag_1.gif" width=24
align=middle>都实现<CODE>PropertyChangeListener</CODE>接口。当它被激活时<IMG height=13 alt=tag src="images/tag_2.gif" width=24
align=middle>，它将自己注册为模型的属性修改事件的接收者。当失活时<IMG height=13 alt=tag
src="images/tag_3.gif" width=24 align=middle>，它将自己从监听器的列表中移除。最后，当它收到属性修改事件时<IMG height=13 alt=tag src="images/tag_4.gif" width=24
align=middle>，它会根据属性名和新旧值来刷新表示模型的可视图形。事实上，这个模式使用非常普遍，在大的应用中，它会建立一个基类来提供这样的行为。</P>
<DIV class=figure><PRE class=program>public abstract class SpecificPart extends AbstractGraphicalEditPart
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> implements PropertyChangeListener {
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> public void activate() {
if (!isActive()) {
super.activate();
((PropertyAwareModel) this.getModel()).addPropertyChangeListener(this);
}
}
<IMG height=13 alt=tag src="images/tag_3.gif" width=24 align=middle> public void deactivate() {
if (isActive()) {
((PropertyAwareModel) this.getModel()).removePropertyChangeListener(this);
super.deactivate();
}
}
<IMG height=13 alt=tag src="images/tag_4.gif" width=24 align=middle> public void propertyChage(PropertyChangeEvent evt) {
String prop = evt.getPropertyName();
...
}
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 5</SPAN>. 知道属性变化的编辑部件</DIV>
</DIV>
<H3><TT>DiagramEditPart</TT> 类 </H3>
<P>当编辑器成功载入一个几何图，并将它设置在一个图形viewer上，<CODE>就要求ShapesEditPartFactory创建一个编辑部件来控制图。它创建一个新的DiagramEditPart实例，并将图设置为它的模型。当新创建的编辑部件被激活时，它将自己注册为模型的监听器，并创建一个使用free form布局管理器的可视图形，这种布局管理器允许通过它们的边界来定位图的可视图形。DiagramEditPart通过getModelChildren方法来获取图中包含的所有图形。就象前面提到的，GEF为返回的所有子模型对象都会创建编辑部件和可视图形。</CODE></P>
<P><CODE>DiagramEditPart</CODE>类安装了三个策略。所有的策略都在<CODE>AbstractEditPart</CODE>类的<CODE>createEditPolicies</CODE>方法中定义，同时所有继承自<CODE>AbstractGraphicalEditPart的实类都必需实现这个方法。编辑部件使用这些策略来处理工具发出的请求。在最简单的情况下，策略负责生成许多命令。策略使用String类型的索引字注册在编辑部件上，这个索引字被称为策略角色。这些索引字对编辑部件本身来说没有什么意义。然而，对软件开放人员，就有意义了，它使得其他人，尤其是扩展你的控制器的人，可以通过这些索引字来关闭或移除策略。就GEF而言，你的索引字可以是“foobar”。然而，你最好告诉你程序员同伴，当布局管理器改变的时候，为了设置新的布局策略，需要安装新的“foobar”策略。由于这可能很有趣，且不是那么显而易见，所以推荐你使用EditPolicy接口定义索引字，这些名字需要很好的表达该策略在编辑部件中的角色。</CODE></P>
<P>安装的第一个策略<IMG height=13 alt=tag src="images/tag_1.gif"
width=24 align=middle>的索引字是<CODE>EditPolicy.COMPONENT_ROLE</CODE>，它负责阻止模型的根被删除。它重写了<CODE>createDeleteCommand</CODE>方法，并返回一个不能被执行的命令。第二个策略<IMG height=13 alt=tag src="images/tag_2.gif" width=24
align=middle>的索引字是<CODE>LAYOUT_ROLE</CODE>，它处理创建请求和边界修改请求。当新的图形被放置到图中，第一个请求被发送出来。布局策略返回一个命令，这个命令添加新的图形到图编辑器中，并把它放置在适当的位置。用户修改图中已存在的图形大小或移动它时，都会发出边界修改请求。第三个<CODE>installEditPolicy</CODE>调用<IMG height=13 alt=tag
src="images/tag_3.gif" width=24 align=middle>删除一个策略。它在用户点击模型根所在区域时，阻止根部件提供选择反馈。这里也可以看出一个有意义的策略索引字的重要性。</P>
<DIV class=figure><PRE class=program>protected void createEditPolicies() {
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> installEditPolicy(EditPolicy.COMPONENT_ROLE, new RootComponentEditPolicy());
XYLayout layout = (XYLayout) getContentPane().getLayoutManager();
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> installEditPolicy(EditPolicy.LAYOUT_ROLE, new ShapesXYLayoutEditPolicy(layout));
<IMG height=13 alt=tag src="images/tag_3.gif" width=24 align=middle> installEditPolicy(EditPolicy.SELECTION_FEEDBACK_ROLE, null);
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 6</SPAN>. 图编辑部件中安装的策略 （译：这里和Eclipse 3.1 GEF提供的例子代码略有出入） </DIV>
</DIV>
<P>图编辑部件监视子编辑部件的添加，移除事件。当任何新的图形添加或移除时，<CODE>ShapesDiagam</CODE>类将发送这些事件。当图编辑部件检测到这两种属性修改事件时，图编辑部件都会调用<CODE>AbstractEditPart</CODE>类中定义的<CODE>refreshChildren</CODE>方法。这个方法会遍历所有子模型对象，并相应地添加，移除，或重新排序子编辑部件。</P>
<H3><TT>ShapeEditPart</TT> 类 </H3>
<P><CODE>ShapeEditPart</CODE>类管理所有的图形。当<CODE>DiagramEditPart</CODE>会返回子模型列表时，<CODE>ShapeEditPart</CODE>由<CODE>ShapesEditPartFactory</CODE>类根据每个模型对象的类型创建。工厂类创建的每个部件都拥有一个它们所控制的子模型。一旦模型对象被设置，编辑部件被要求创建可视图形来表示模型对象。根据模型对象的类型，返回椭圆或矩形的编辑部件。</P>
<P>这个编辑部件关注四类属性修改事件：大小，位置，源连接，和目标连接。如果图形改变了大小或位置，<IMG height=13 alt=tag src="images/tag_6.gif" width=24
align=middle><CODE>refreshVisual</CODE>方法会被调用。这个方法在可视图形被创建的时候就会由GEF自动调用。在这个方法中，可视图形的可视属性应该根据模型的状态做相应调整。重用模型更新方法是GEF编辑器中经常碰到的又一种模式。在我们这个编辑部件类中，新的位置和大小被获取并储存在表示图形的可视图形中。此外，新的边界会传给父控制器的布局管理器。当源连接或目标连接改变时，源连接或目标连接改编辑部件会调用<CODE>AbstractGraphicalEditPart</CODE>类中的方法刷新。和<CODE>refreshChildren</CODE>方法相似，这些方法会遍历所有的连接，并相应添加，删除，或重新定位它们的编辑部件。</P>
<DIV class=figure><PRE class=program>class ShapeEditPart extends AbstractGraphicalEditPart
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> implements PropertyChangeListener, NodeEditPart {
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> protected List getModelSourceConnections() {
return getCastedModel().getSourceConnections();
}
<IMG height=13 alt=tag src="images/tag_3.gif" width=24 align=middle> protected List getModelTargetConnections() {
return getCastedModel().getTargetConnections();
}
<IMG height=13 alt=tag src="images/tag_4.gif" width=24 align=middle> public ConnectionAnchor getSourceConnectionAnchor(ConnectionEditPart connection) {
return new ChopboxAnchor(getFigure());
}
<IMG height=13 alt=tag src="images/tag_5.gif" width=24 align=middle> public ConnectionAnchor getSourceConnectionAnchor(Request request) {
return new ChopboxAnchor(getFigure());
}
public void propertyChange(PropertyChangeEvent evt) {
String prop = evt.getPropertyName();
if (Shape.SIZE_PROP.equals(prop) || Shape.LOCATION_PROP.equals(prop)) {
refreshVisuals();
}
if (Shape.SOURCE_CONNECTIONS_PROP.equals(prop)) {
refreshSourceConnections();
}
if (Shape.TARGET_CONNECTIONS_PROP.equals(prop)) {
refreshTargetConnections();
}
}
<IMG height=13 alt=tag src="images/tag_6.gif" width=24 align=middle> protected void refreshVisuals() {
Rectangle bounds = new Rectangle(getCastedModel().getLocation(),
getCastedModel().getSize());
figure.setBounds(bounds);
((GraphicalEditPart) getParent()).setLayoutConstraint(this, figure, bounds);
}
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 7</SPAN>. 图形控制器</DIV>
</DIV>
<P>由于图形可以连接到其他图形，图形编辑部件重写了<CODE><IMG height=13 alt=tag src="images/tag_2.gif" width=24
align=middle>getModelSourceConnections</CODE>方法和<CODE><IMG height=13
alt=tag src="images/tag_3.gif" width=24 align=middle>getModelTargetConnections</CODE>方法。这两个方法的任务就是要通知GEF有关该图形的源连接和目标连接。此外，<CODE>ShapeEditPart</CODE>实现了<CODE><IMG height=13 alt=tag
src="images/tag_1.gif" width=24 align=middle>NodeEditPart接口。通过实现这个接口，编辑部件可以定义源锚点和目标锚点，锚点就是图形和连接接触的连接点。逻辑电路编辑器的例子使用这个功能来指定线如何连接到一个逻辑门元件。既然图形并没有特定的连接点，我们就使用包围矩形锚点，它将连接设置在可视图形的包围矩形上。如果你愿意，你可以为椭圆返回EllipseAnchor，它将返回一个椭圆边界上的点。对于更加复杂的图形,你应该继承AbstractConnectionAnchor类，并实现getLocation方法。注意，有两种方法需要实现：一个使用ConnectionEditPart对象作为参数，另一个使用Request对象。当一个新的连接被创建时，第二个方法<IMG height=13 alt=tag
src="images/tag_5.gif" width=24 align=middle>会被调用以便用户得到反馈，而第一个方法<IMG height=13 alt=tag
src="images/tag_4.gif" width=24 align=middle>用于已建立的连接。</CODE></P>
<P>图形编辑部件安装了两个策略。<CODE>ShapeComponentEditPolicy</CODE>提供命令将一个图形从图删除。第二个策略处理图形间连接的创建和转移，它的索引字是<CODE>GRAPHICAL_NODE_ROLE</CODE>。连接创建工具创建新的连接需要两个步骤。当用户点击模型元素的可视图形时，该策略被要求<IMG height=13 alt=tag
src="images/tag_1.gif" width=24 align=middle>创建一个连接命令。如果这个方法返回<CODE>null</CODE>，表示这个连接不能从所给的模型元素开始。如果允许连接的话，将创建新的命令，并作为起始命令存储在请求中。当用户点击另一个可视图形时，会要求策略提供一个<IMG height=13 alt=tag
src="images/tag_2.gif" width=24 align=middle>连接完成命令。这是一个根据起始命令创建的新命令，而起始命令中包含了连接结束点的信息。</P>
<DIV class=figure><PRE class=program>new GraphicalNodeEditPolicy() {
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> protected Command getConnectionCreateCommand(CreateConnectionRequest request) {
Shape source = (Shape) getHost().getModel();
int style = ((Integer) request.getNewObjectType()).intValue();
ConnectionCreateCommand cmd = new ConnectionCreateCommand(source, style);
request.setStartCommand(cmd);
return cmd;
}
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> protected Command getConnectionCompleteCommand(CreateConnectionRequest request) {
ConnectionCreateCommand cmd =
(ConnectionCreateCommand) request.getStartCommand();
cmd.setTarget((Shape) getHost().getModel());
return cmd;
}
...
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 8</SPAN>. 图形节点编辑策略</DIV>
</DIV>
<P>图形节点编辑策略的另一个任务是提供连接的转移命令。连接可以修改连接的源或目标实现转移。连接转移命令和连接创建命令有同样的规则。尤其是当一个连接不能转移时，策略返回null。策略也可能通过<CODE>canExecute</CODE>方法返回false来得到一个拒绝执行的命令。由于篇幅限制，这些命令的细节就不多说了，读者可以参考代码。</P>
<H3><TT>ConnectionEditPart</TT> 类 </H3>
<P>由于连接也是用户可编辑的模型对象，它们必须有自己的控制器。连接的控制器是由<CODE>ConnectionEditPart</CODE>类实现，它继承自<CODE>AbstractConnectionEditPart</CODE>类。和其他控制器类似，它也实现了<IMG height=13 alt=tag
src="images/tag_1.gif" width=24 align=middle><CODE>PropertyChangeListener</CODE>接口，并注册自己为模型的监听器。连接部件<IMG height=13 alt=tag
src="images/tag_2.gif" width=24 align=middle>返回一个带有箭头的线作为可视图形。它安装了两个编辑策略。第一个是<IMG height=13 alt=tag
src="images/tag_3.gif" width=24 align=middle><CODE>ConnectionComponentPolicy，它提供删除命令给<EM>Delete</EM>菜单项所需要的action。第二个<IMG height=13 alt=tag
src="images/tag_4.gif" width=24 align=middle>比较有意思。它含有一个被选择的连接，这个连接包括起始端和结束端的标识。没有这个策略，就不可能转移连接，因为当一个连接被拖动时，GEF没有办法获取连接两端的标识。GEF的设计者建议所有的ConnectionEditParts都应该有这个策略，即使连接的两端都不能拖动。至少这个策略提供了一种视觉上的选择反馈。propertyChange方法可以收到<IMG height=13 alt=tag
src="images/tag_5.gif" width=24 align=middle>线风格属性的变化，并对线figure作相应的调整。</CODE></P>
<DIV class=figure><PRE class=program>class ConnectionEditPart extends AbstractConnectionEditPart
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> implements PropertyChangeListener {
protected IFigure createFigure() {
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> PolylineConnection connection = (PolylineConnection) super.createFigure();
connection.setTargetDecoration(new PolygonDecoration());
connection.setLineStyle(getCastedModel().getLineStyle());
return connection;
}
protected void createEditPolicies() {
<IMG height=13 alt=tag src="images/tag_3.gif" width=24 align=middle> installEditPolicy(EditPolicy.CONNECTION_ROLE, new ConnectionEditPolicy() {
protected Command getDeleteCommand(GroupRequest request) {
return new ConnectionDeleteCommand(getCastedModel());
}
});
<IMG height=13 alt=tag src="images/tag_4.gif" width=24 align=middle> installEditPolicy(EditPolicy.CONNECTION_ENDPOINTS_ROLE,
new ConnectionEndpointEditPolicy());
}
public void propertyChange(PropertyChangeEvent event) {
String property = event.getPropertyName();
<IMG height=13 alt=tag src="images/tag_5.gif" width=24 align=middle> if (Connection.LINESTYLE_PROP.equals(property)) {
((PolylineConnection) getFigure()).
setLineStyle(getCastedModel().getLineStyle());
}
}
...
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 9</SPAN>. 连接控制器</DIV>
</DIV>
<H2>几何图形编辑器</H2>
<P>几何图形编辑器继承了<CODE>GraphicalEditorWithFlyoutPalette</CODE>类。这个类是图形编辑器的一种特殊形式，它本身也是一种编辑部件，并可以拥有一个提供工具的面板。使用这个类必须实现两个方法，<CODE>getPaletteRoot</CODE>和<CODE>getPalettePreferences</CODE>。第一个方法必须返回包含所有工具选项的面板的根节点。工具选项是一种特殊的面板选项，它将工具安装在编辑器的编辑域上。它们必须位于面板抽屉中，面板抽屉将工具选项很方便地组合起来。一般推荐有一个工具选项作为整个工具面板的缺省选项。一个典型的解决方法就是直接使用<CODE>SelectionToolEntry</CODE>类的实例。第二个方法返回的面板首选项中包含的内容有，报告面板是可见还是被折叠起来了，面板停靠的位置，以及面板的宽度。通常的解决方法是将它们存在plug-in的首选项存储区中。</P>
<P>我们上面提到的编辑域起了一个中心控制器的作用。它负责保存工具，载入缺省工具，维护当前激活的工具，并将鼠标和键盘事件转发给当前激活的工具，以及处理命令栈。GEF提供了缺省实现，<CODE>DefaultEditDomain</CODE>，你应该在编辑器的构造函数中设置它的实例。</P>
<P>图形编辑器的另一部分工作是创建并初始化图形viewer。图形viewer是一种特殊的<CODE>EditPartViewer</CODE>，它能够做点击测试。我们可以使用<CODE>GraphicalEditor</CODE>类提供的缺省viewer。然而，还是需要做一些事。在<CODE>configureGraphicalViewer</CODE>方法<IMG height=13 alt=tag
src="images/tag_1.gif" width=24 align=middle>中设置编辑部件的工厂类。这个工厂类必须实现一个接口<CODE>EditPartFactory，这个接口只有一个方法，createEditPart(EditPart,
Object)。它的第一个参数是编辑部件，它一般是所创建的编辑部件的父部件，第二个参数是新创建的编辑部件所对应的模型部件。其他要做的包括设置键处理器，上下文菜单等。</CODE></P>
<DIV class=figure><PRE class=program>protected void configureGraphicalViewer() {
super.configureGraphicalViewer();
GraphicalViewer viewer = getGraphicalViewer();
viewer.setRootEditPart(new ScalableRootEditPart());
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> viewer.setEditPartFactory(new ShapesEditPartFactory());
viewer.setKeyHandler(
new GraphicalViewerKeyHandler(viewer).setParent(getCommonKeyHandler()));
ContextMenuProvider cmProvider =
new ShapesEditorContextMenuProvider(viewer, getActionRegistry());
viewer.setContextMenu(cmProvider);
getSite().registerContextMenu(cmProvider, viewer);
}
protected void initializeGraphicalViewer() {
super.initializeGraphicalViewer();
GraphicalViewer graphicalViewer = getGraphicalViewer();
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> graphicalViewer.setContents(getModel());
<IMG height=13 alt=tag src="images/tag_3.gif" width=24 align=middle> graphicalViewer.addDropTargetListener(createTransferDropTargetListener());
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 10</SPAN>. 配置并初始化一个图形viewer</DIV>
</DIV>
<P>一旦工厂类被设置，你应该在图形viewer中<IMG height=13 alt=tag
src="images/tag_2.gif" width=24 align=middle>设置内容。内容自然就是从<CODE>IEditorInput</CODE>实例恢复得到的对象，<CODE>IEditorInput</CODE>实例通过<CODE>setInput</CODE>方法传递给编辑器。这个例子在图形viewer上添加<IMG height=13 alt=tag
src="images/tag_3.gif" width=24 align=middle>一个目标放置监听器。它允许用户使用拖放的方式添加新图形，而不是选择加点击的方式。这个目标放置监听器使用<CODE>TemplateTransferDropTargetListener</CODE>的子类，它使用<CODE>CreateRequest</CODE>来获得添加对象到模型的命令，这个模型当然就是拖放动作结束时所在的编辑部件所表示的模型。</P>
<P>除了上面谈到的任务，编辑器还负责监视命令栈来报告当前编辑的内容是否被修改。这是一个比较好的解决方法，因为它可以使这个标记和用户所做的undo和redo同步起来。注意，命令栈含有上次存储的位置信息，这个信息在<CODE>doSave</CODE>和<CODE>doSaveAs</CODE>这两个方法中被标记。编辑器的其他细节，比如模型的实际存储和恢复，这里就不讨论了，因为它们和具体的应用相关。接下来，我们讨论编辑器的如何将编辑器内容暴露给其视图，如何将菜单选项和编辑器的action联系起来，以及其他workbench协作的技术。</P>
<H2>和workbench集成在一起</H2>
<P>到目前为止，我们谈的都是这个几何图形编辑器如何工作。然而，它没有和workbench很好地集成。例如，<EM>Edit</EM>菜单动作，比如<EM>Delete</EM>，<EM>Undo</EM>和<EM>Redo</EM>，就不能工作。其他视图不能用其他方式显示编辑器内容。换句话说，目前所完成的编辑器没有很好地利用Eclipse workbench的优势。在下面的三小节，将解释如何将这个孤立的编辑器变成workbench的一部分。</P>
<H3>编辑器Action</H3>
<P><CODE>ShapesEditor</CODE>类创建了大量缺省<span class="figure-caption">动作</span>，它们在编辑器初始化过程中被<CODE>createActions</CODE>方法中创建。这些<span class="figure-caption">动作</span>是undo，redo，select all，delete，save和print。为了将标准菜单选项连接到这些<span class="figure-caption">动作</span>，你应该在<CODE>plugin.xml</CODE>文件中定义一个action bar contributor。在这个action bar contributor中，你需要实现两个方法。第一个是<IMG height=13 alt=tag src="images/tag_1.gif" width=24
align=middle><CODE>buildActions</CODE>，它可以为undo，redo和delete创建可重定位的<span class="figure-caption">动作</span>。如果你需要使用键盘选择所有的widget，你需要在第二个方法<CODE>declareGlobalActionKeys</CODE>中为所选择的<span class="figure-caption">动作</span><IMG height=13 alt=tag
src="images/tag_2.gif" width=24 align=middle>添加一个全局<span class="figure-caption">动作</span>关键字。</P>
<P>
<DIV class=figure><PRE class=program>public class ShapesEditorActionBarContributor extends ActionBarContributor {
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> protected void buildActions() {
this.addRetargetAction(new UndoRetargetAction());
this.addRetargetAction(new RedoRetargetAction());
this.addRetargetAction(new DeleteRetargetAction());
}
public void contributeToToolBar(IToolBarManager toolBarManager) {
super.contributeToToolBar(toolBarManager);
toolBarManager.add(getAction(ActionFactory.UNDO.getId()));
toolBarManager.add(getAction(ActionFactory.REDO.getId()));
}
protected void declareGlobalActionKeys() {
<IMG height=13 alt=tag src="images/tag_2.gif" width=24 align=middle> this.addGlobalActionKey(ActionFactory.SELECT_ALL.getId());
}
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 11</SPAN>. 连接菜单动作</DIV>
</DIV>
<P>我们来仔细看一下当用户在<EM>Edit</EM>菜单中选择<EM>Delete</EM>时发生了些什么（看图12）。<CODE>ShapesEditor</CODE>类的父类将删除动作添加到动作注册表中。当删除动作被执行时，它检查当前的所选择的对象是否是<CODE>EditPart</CODE>类的实例。对每个对象，它都从编辑部件中请求一个命令。接下来，每个编辑部件检查是否有编辑策略可以处理删除请求。对几何图形，<CODE>ShapeComponentEditPolicy</CODE>可以处理删除请求，并且返回<CODE>ShapeDeleteCommand</CODE>实例。动作执行该命令，从而将图形从图中删除。图发送一个属性修改事件，<CODE>DiagramEditPart</CODE>收到该事件，最终使得代表被删除图形的矩形或椭圆从显示中被删除。</P>
<DIV class=figure>
<CENTER><IMG height=340 alt="Delete action call sequence"
src="images/delete_action3.gif" width=575> </CENTER>
<DIV class=figure-caption><SPAN class=figure-number>图 12</SPAN>. 删除动作执行序列</DIV>
</DIV>
<H3>提供属性</H3>
<P>每个图形编辑器都是可以发送选择事件。你可以建立一个视图，并将它作为选择监听器注册在workbench site的页面上。每次你在图形编辑器中选择一个对象，你的视图都会在<CODE>selectionChanged</CODE>方法中收到一个通知。Eclipse的一个标准视图，<EM>Properties</EM>视图，会监听选择事件，并且每次都检查这个对象是否实现了<CODE>IPropertySource</CODE>接口。如果是的话，它使用这个接口的方法来查询所选择的对象属性，并以表格的方式显示出来。</P>
<P>通过上面所描述的，在图形编辑器中提供对象的属性只要实现<CODE>IPropertySource</CODE>接口就可以了。通过查看<CODE>Shape</CODE>类，你可以看到对象的位置和大小是如何在<EM>Properties</EM>视图中显示的。</P>
<H3>提供Outline</H3>
<P><EM>Outline</EM>视图是另一种，常常也是更简洁的查看模型对象的方式。在Java编辑器中，它可以用来显示一个类所import的类，所包含的变量，和方法，却不需要用户深入代码。图形编辑器也可以使用这个视图。图形编辑器和逻辑电路编辑器类似，可以以树的方式显示所编辑的内容（看<a href="http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html#fig1">图1</a>）。数据库schema编辑器<A class=cite
href="http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html#zoio">[7]</A>也提供了类似的视图。</P>
<P>为了将所编辑的内容提供给<EM>Outline</EM>视图，你需要重写<CODE>getAdapter</CODE>方法，并当adapter类为<CODE>IContentOutlinePage</CODE>接口时，返回一个outline实现。实现outline的最简单的方法是扩展<CODE>ContentOutlinePage</CODE>类，并提供适当的<CODE>EditPartViewer</CODE>。</P>
<DIV class=figure><PRE class=program>public Object getAdapter(Class type) {
// returns the content outline page for this editor
<IMG height=13 alt=tag src="images/tag_1.gif" width=24 align=middle> if (type == IContentOutlinePage.class) {
if (outlinePage == null) {
outlinePage = new ShapesEditorOutlinePage(this, new TreeViewer());
}
return outlinePage;
}
return super.getAdapter(type);
}</PRE>
<DIV class=figure-caption><SPAN class=figure-number>图 13</SPAN>. 提供一个outline</DIV>
</DIV>
<P>在我们这个例子中，编辑部件视图是有一个TreeViewer实现的。你应该和主编辑器一样提供给它同样的编辑域。TreeViewer，就象其他<CODE>EditPartViewer</CODE>，需要一个创建子编辑部件的方法。编辑器和<CODE>DiagramEditPart</CODE>一样，都是设置一个编辑部件工厂。此外，outline中的选择和主编辑窗口的选择需要通过选择同步器同步起来，选择同步器是一个GEF工具类，它协调两个编辑部件的选择状态。<CODE>ShapesTreeEditPartFactory</CODE>根据模型类型，返回<CODE>ShapeTreeEditPart</CODE>或<CODE>DiagramTreeEditPart</CODE>的实例。通过这些类，读者应该可以轻易地发现这些模式很熟悉。两个编辑部件都实现了<CODE>PropertyChangeListener</CODE>接口，并通过调整模型的可视化表示来对属性变化做出响应。它们都安装编辑策略来控制通过它们所暴露的交互类型。</P>
<H2>GEF用到的设计模式</H2>
<P>GEF通过大量使用设计模式来得到它的灵活性。下面是一下经常碰到的模式的小结。详细内容，请参考 <A class=cite
href="http://www.eclipse.org/articles/Article-GEF-diagram-editor/shape.html#gamma">[2]</A>。
<DL>
<DT>模型－视图－控制器（Model-View-Controller ）
<DD>MVC模式被GEF用来解除用户界面，行为和表示之间的耦合。模型可以用任何Java对象来表示。视图必须实现<CODE>IFigure</CODE>接口。控制的类型必须是<CODE>EditPart</CODE>或它的子类。
<DT>命令（Command ）
<DD>命令封装了模型修改，因此支持可撤销的操作。
<DT>责任链（Chain of Responsibility ）
<DD>责任链通过将请求传递给多个对象，并给这些对象机会处理请求，从而将请求的发送者和接受者解除耦合。在GEF中，多个编辑策略可以收到请求，返回<CODE>Commands</CODE>，这些<CODE>Commands</CODE>以链的方式组织在一起。<DT>状态（State ）
<DD>允许编辑器在内部状态发生改变的时候，修改编辑器的行为。对于GEF编辑器，用户切换工具可以改变编辑器的状态。例如，对于鼠标按下事件，编辑器在激活选区工具和激活创建工具下的行为是截然不同的。
<DT>抽象工厂（Abstract Factory ）
<DD>提供接口创建一系列相关或相依赖的对象。这个模式在根据模型部件创建编辑部件时被使用。
<DT>工厂方法（Factory Method ）
<DD>定义了方法创建对象，但是允许子类决定实例化的类。这个模式没有被单独讨论，但是它是创建编辑部件的另一种可选的方法。<CODE>createChild</CODE>方法允许你不使用工厂就创建子编辑部件。</DD>
</DL>
<H2>总结</H2>
<P>我希望能够对这个简单图形编辑器的大多数方面作详细的描述。提供足够的信息使得人们能够读完这篇文章，去看更大的例子，比如逻辑电路编辑器。通过理解象<CODE>CircuitEditPart</CODE>，<CODE>AndGateFigure和其他类的角色，你可以关注其他例子的更复杂的方面。在GEF的众多领域和技术中，有很多我甚至都没有涉及过。然而，这些技术只有在很好地理解基础内容的情况下，才可能去学习。毕竟，如果你为了使<EM>Select All</EM>菜单项工作都要花数小时，那么设计一个拖反馈的目的又是什么呢？</CODE></P>
<H2>感谢</H2>
<P>我想感谢Randy Hudson，他的意见帮助提高了本文结构和准确性。我也感谢Jill Sueoka仔细检查我所写一个又一个版本。</P>
<H2>参考书目</H2>
<TABLE>
<TBODY>
<TR>
<TD vAlign=top><A name=bordeau></A>[1]</TD>
<TD>Eric Bordeau, <A
href="http://www.eclipse.org/articles/Article-GEF-dnd/GEF-dnd.html"><I>Using
Native Drag and Drop with GEF</I></A>, Eclipse Corner Article, August 2003
</TD></TR>
<TR>
<TD vAlign=top><A name=gamma></A>[2]</TD>
<TD>Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides, <I>Design
Patterns: Elements of Reusable Object-Oriented Software</I>, Addison
Wesley, 1995, ISBN 0-201-63361-2</TD></TR>
<TR>
<TD vAlign=top><A name=hudson></A>[3]</TD>
<TD>Randy Hudson, <A
href="http://www-106.ibm.com/developerworks/opensource/library/os-gef/"
target=_blank><I>Create an Eclipse-based application using the Graphical
Editing Framework</I></A>, <A
href="http://www-136.ibm.com/developerworks/java/">IBM developerWorks</A>,
July 2003 </TD></TR>
<TR>
<TD vAlign=top><A name=lee></A>[4]</TD>
<TD>Daniel Lee, <A
href="http://www.eclipse.org/articles/Article-GEF-Draw2d/GEF-Draw2d.html"><I>Display
a UML Diagram using Draw2D Diagram</I></A>, Eclipse Corner Article, August
2003 </TD></TR>
<TR>
<TD vAlign=top><A name=mehaut></A>[5]</TD>
<TD>Xavier Mehaut et al., <A
href="http://eclipsewiki.editme.com/GefDescription"
target=_blank><I>Synthetic GEF description</I></A>, June 2004 </TD></TR>
<TR>
<TD vAlign=top><A name=moore></A>[6]</TD>
<TD>William Moore, David Dean, Anna Gerber, Gunnar Wagenknecht and
Philippe Vanderheyden, <I><A
href="http://www.redbooks.ibm.com/abstracts/sg246302.html"
target=_blank>Eclipse Development using the Graphical Editing Framework
and the Eclipse Modeling Framework</A></I>, IBM RedBooks, 2004, ISBN
0738453161</TD></TR>
<TR>
<TD vAlign=top><A name=zoio></A>[7]</TD>
<TD>Phil Zoio, <A
href="http://www.eclipse.org/articles/Article-GEF-editor/gef-schema-editor.html"><I>Building
a Database Schema Diagram Editor with GEF</I></A>, Eclipse Corner Article,
September 2004 </TD></TR></TBODY></TABLE>
<P><SMALL>Java and all Java-based trademarks and logos are trademarks or
registered trademarks of Sun Microsystems, Inc. in the United States, other
countries, or both.</SMALL></P></BODY>
</HTML>