观察者模式在图形编辑系统中的应用

观察者模式在图形编辑系统中的应用 //.paper.edu - 1 - 中国科技 论文 政研论文下载论文大学下载论文大学下载关于长拳的论文浙大论文封面下载 在线 观察者模式在图形编辑系统中的应用 王洪波，刘湘黔** 作者简介:王洪波(1986)，男，硕士生，嵌入式软件开发 通信联系人:刘湘黔(1971),男，副教授，主要研究语音识别与合成、网络控制等 (北京交通大学计算机与信息技术学院，北京 100044) 5 摘要:观察者模式是面向对象软件 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 中常用的设计模式，为了解决传统复杂图形编辑系统 固有的由模型与视图天然的强依赖关系导致的开发效率慢、可重用性不强的问 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 ，在系统设 计中引入观察者设计模式。文章首先深入研究了观察者模式原型与应用场景，然后在此理论 基础上，设计开发了一个基于 GEF 框架的模型与视图低耦合交互的图形编 辑系统，最后客观 分析了观察者模式的应用给系统设计带来的便利。实践证明，设计模式的应 用，有效地提高10 了软件的可维护性和扩展性，使得软件系统的质量和开发效率都得到了很大 的提升。该方法 具有较高的理论和实践意义。 关键词:软件工程;观察者模式;设计模式;图形编辑系统 中图分类号:tp31 15 Observer Pattern in Graphics editing system wanghongbo 1 , liuxiangqian 2 (1. School of Computer and information technology ,Beijing Jiaotong University,Beijing 100044; 2. School of Computer and information technology,Beijing jiaotong University,Beijing 100044) Abstract: Observe pattern is a common design pattern in Object oriented software design. In order 20 to solve the Low reusability and low Development efficiency problem caused by the Strong dependence between model and 6><#00aa00'>view in traditional graphical edit system, we introduce observe pattern in the system design. First, the paper maked a deep research on the prototype and Application scenarios of observer pattern. Second, we design a graphics editing systems with low-coupling interaction between model and <#00aa00'>view based on GEF framework. Final, we analysis 25 the convenience which the observe pattern can bring objectively. The experiment results prove that the application of design patterns can improve maintainability and scalability of the software effectively, which improve the quality and development efficiency of software system greatly. The proposed approach has a high theoretical and practical significance. Key words: Software Engineering; Observer Pattern ;Design pattern ;Graphics editing system 30 0 引言 在图形界面系统中，模型层和视图层的抽象分离增强了系统逻辑的清晰性。传统的图形 编辑系统中，基础业务逻辑和图形界面的频繁交互使得模型和视图之间的依赖性很强。 MVC [1][2]设计模式的最主要的目的就是模式独立于视图，这样的设计有悖于模式的初衷。具体35 的实现框图如下: //.paper.edu - 2 - 中国科技论文在线 模型 属性一 视图一 直接调用 属性二 视图二 直接调用 视图三 直接调用 图 1 传统图形编辑系统模型与视图关系 Fig. 1 relationship of model and <#00aa00'>view in traditional graphics editing system 在系统开发过程中，业务要求随时可能发生变化，好的设计要求我们不能影响到图形界40 面的设计，同时图形界面的更改也不能给基础业务要求带来连带影响。上图中图形界面和模 型虽然分层设计，但是之间没有清晰的界限，这种设计方式修改任何一部分都会对整体造成 严重的影响。此外，当系统要扩展时，每个模型和视图的增加都需要对已定义的类的代码进 行修改，这种修改的工作量非常大并且也增加了出错的概率。 1 观察者模式 45 观察者<Observer>模式[3][4][5](有时又被称为发布-订阅<Publish/Subscribe>模式、模 型-视图<Model/<#00aa00'>View>模式、源-收听者<Source/Listener>模式或从属者<Dependents>模 式)。它定义对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖它 的对象都得到通知并被自动更新。在此种模式中，一个目标管理所有相依于它的观察者，并 且在它本身的状态改变时主动发出通知。这通常通过呼叫各观察者所提供的方法来实现。此50 种模式通常被用来实作事件处理系统。观察者模式结构如下图所示: 目标类 注册(观察者) 删除(观察者) 通知() 观察者类 更新 具体目标类 获取状态 设置状态 具体观察者类 更新 多个观察者 目标 //.paper.edu - 3 - 中国科技论文在线 图 2 观察者模式结构图 Fig. 2 structure chart of observer pattern 我们可以看到，目标和观察者之间是典型的一对多的关系，观察者和目标是单向依赖的，只55 有观察者依赖于目标，而目标是不会依赖于观察者的。它们之间联系的主动权掌握在目标手 中，只有目标知道什么时候需要通知观察者。在整个过程中，观察者始终是被动的，被动地 等待目标的通知，等待目标传值给它。对目标而言，所有的观察者都是一样的，目标会一视 同仁的对待。 2 系统中观察者模式的实现 60 在系统中，一个模块对应多个视图，当一个模型发生变化的时候，我们的编辑器视图， 大纲视图，属性页视图都要都要做出相应的改变。每个视图都是有自己的控制器来控制的， 所以模型和控制器之间的关系就是一对多的关系，应用观察者模式可以很好的解决控制器对 模型的监听。模式的实现类图如下: +activate()() +deactivate() NodePart +setTitle() Node +propertyChange() <<接口>> PropertyChangeListener +addPropertyChangeListener() +firePropertyChange() +removePropertyChangeListener() PropertyChangeSupport -n 0..* -1 1 65 图 3 观察者模式类图 Fig. 3 class diagram of observer pattern 2.1 观察者模式的具体实现 2.1.1 观察者(控制器) 70 系统中控制器(Part)主要负责模型和视图的同步，控制器要监听模型的属 性改变的事 件，并通知视图更新。在设计中，控制器作为观察者，在生效时把自己作为 监听器注册到模 型中，相关代码如下: public void activate() { ((Node) getModel ()).addPropertyChangeListener (this); 75 } 在失效时，把自己从模型中删除 public void deactivate() { ((Node) getModel ()).removePropertyChangeListener (this); } 80 2.1.2 模型(目标) 模型与控制器是一对多的关系，多个控制器监听一个模型的变化。在模式中，模型作为 //.paper.edu - 4 - 中国科技论文在线 被观察的目标通过持有PropertyChangeSupport对象来管理注册的观察者，与控制层交互。相 关代码如下: public void addPropertyChangeListener(PropertyChangeListener 85 listener) { listeners.addPropertyChangeListener (listener); } public void removePropertyChangeListener(PropertyChangeListener l) { listeners.removePropertyChangeListener(l); 90 } 当模型属性(例如标题)发生变化时，它会通知所有的观察者(控制器)。 public void setTitle(String title) { String oldTitle = this.title.getValue(); this.title.setValue(title); 95 firePropertyChange(TITLE, oldTitle, title); } 3 系统实现 在GEF[6][7][8]的基础上，设计开发了一款基于设计模式的图形编辑软件， 视图保存为对象 流的同时保存为可解析的xml文件，系统具有松耦合、易复用的特点。通过使用观察者模式，100 方便快捷的实现了对模型进行各种基本操作(创建、编辑、删除、移动、链接等)的功能。接 下来，将介绍编辑器软件的部分设计类图，包括模型、控制器以及观察者模式的使用给系统 带来的好处。 //.paper.edu - 5 - 中国科技论文在线 +addPropertyChangeListener() +firePropertyChange() +fireStructureChange() +readObject() +removePropertyChangeListener() -listeners : PropertyChangeSupport element +addChildren() +removeChildren() +getLayout() : Rectangle +setLayout() -name : string -layout : Rectangle -children : Node -parent : Node Node <<接口>> Serializable Rectangle -target : Node -source : Node Connection -outputs : Connection -inputs : Connection -id : string -className : string Business property1 : Property - -property2 : Property 业务模块1 -name : string -value : string Property -property1 : Property -property2 : Property 业务模块2 -property1 : Property -property2 : Property 业务模块3 +activate() +deactivate() +performRequest() AppAbstractEditPart +refreshVisuals() +createFigure() +createEditPolicies() +propertyChange() NodePart DirectEditManager +performRequest() +propertyChange() +createFigure() +refreshVisuals() +createEditPolicies() -manger : DirectEditManager PropertyEditPart PropertyChangeSupport --n 0..* --1 1 <<接口>> PropertyChangeListener 105 图4 系统设计类图 Fig. 4 class diagram of system design 如上图所示，左侧是模型层，右侧为控制器，控制器操作视图层，通过使用观察者模式，巧110 妙的构建了系统的 MVC架构。所以说 GEF 框架式观察者模式与 MVC 模式的有效结合，实现了 模型层与视图层的高度的解耦。 4 分析 如果两个类通过直接彼此调用实现互相访问或通信，它们就会有非常紧密的耦合关系。根据 上面的观察者模式类图结构可以看出，系统中 NodePart 类作为观察者模式中的目标类与具115 体的观察者(Node)类是通过 PropertyChangeSupport 这个接口的来实现彼此的访问或通信 的，具体观察者(Node)类是负责具体实现该接口以及函数的类，这种结构完成了实现与 接口的分离。这种设计也使具体观察者与具体目标不是直接的关联关系，当具体目标发生变 化时通知相应的观察者，只需通过注册的观察者接口完成更新操作，实际的更新操作是由具 体的观察者实现的。这样以来，具体目标类甚至不知道具体观察者的存在，减少了目标类的120 设计复杂度，有利于目标类中具体业务逻辑的实现。同时降低了具体观察者类与目标类的耦 合度，减少了模型对视图的依赖，有益于系统的扩展和维护。 //.paper.edu - 6 - 中国科技论文在线 5 结论 文中通过对 Eclipse GEF中观察者模式的研究，分析了 GEF框架中观察者模式与 MVC 模式完美的组合使用。最后，通过使用观察者模式，很好的实现了模型和控 制者之间的交互，125 解决了传统图形界面系统中模型与视图的强依赖关系，提高了系统的可维护 性和扩展性。并 且通过实例很好的解决了传统 GEF 框架的复杂性，并通过对框架中观察者 模式的应用研究， 提高了复杂面向对象图形编辑系统的开发效率。 [参考文献] (References) [1] 陆荣幸,郁洲,阮永良等.J2EE平台上MVC设计模式的研究与实现[J].计 算机应用研究,2003,20(3):144-146. 130 [2] Ning, Wang,Liming, Li,Yanzhang, Wang et al.Research on the Web Information System Development Platform Based on MVC Design Pattern[C].//Web Intelligence and Intelligent Agent Technology, WI-IAT, 2008 IEEE/WIC/ACM International Conference on; Sydney,Australia.2008:203-206. [3] 马争,周艳,谢世波等.设计模式在网管系统中的设计与实现[J].电子科 技大学学报,2004,33(5):523-526. [4] 廖志刚,李增智,寇雅楠等.设计模式在网管系统中的应用[J].计算机工 程与应用,2002,38(12):7-9，81. 135 [5] 刘浩,董秋鸿.基于观察者模式的屏幕布局控件设计[J].电子科技,2010,23(8):110-111 [6] 刘 绪 斌 , 王 良 , 闫 有 朋 等 .Eclipse GEF 框 架 中 命 令 模 式 的 应 用 研 究 [J]. 计 算 机 技 术 与 发 展,2010,20(8):100-103,127 [7] 胡博 ,朱建彬 ,杨荣等 .基于 GEF 框架的本体图形编辑器的设计与实现 [J].武汉科技学院学 报,2008,21(6):10-14. 140 [8] 刘冰,施洪洁,王泽生等.Eclipse 中图形编辑器的研究[J].科技信息,2009,(33):74-75.