`

GUI应用的若干问题和模式

 
阅读更多

  摘选(http://www.infoq.com/cn/articles/gui-application-patterns) 


  我们所开发的应用程序大多都需要提供一个图形用户界面(GUI)。关于GUI应用的架构设计, 已经有了很多模式, 比如Martin Fowler的blog中有一篇"GUI Architectures “, 里面介绍了Form & Control、MVC、MVP、Passive View、Presentation Model、 Supervising Controller、Event Aggregator, Observer Synchronization等多种模式。模式可以帮助我们建立优雅的架构, 但前提是弄清楚模式的应用场景。这些模式自然不是凭空产生的, 都是为了解决具体的问题. 模式在实现上的差别, 通常都体现了在约束间的不同取舍, 以及问题的差别. 弄清楚GUI应用面临的设计上的问题, 有助于我们正确的挑选设计方案. 下面我们来看一些GUI应用常见的设计问题。


      第一个问题就是界面的变化和业务的变化频率不同, 通常是界面变化更频繁, 而我们希望一方的变化不至于影响另一方的逻辑. 对于这个问题, 一个自然的解决方案就是分离界面显示逻辑和后台业务逻辑. MVC和MVP都涉及到了这一点, 它们的共同特点就是把View和应用程序的其它部分分开了. 这是一个关键的分离, 从此之后应用被分为两部分, 抛开它们彼此可以独立的变化不说. 最大的好处是这两部分的问题也可以分而治之。应用程序的其它部分有自己的问题和方案, 不在我们讨论范围内. 我们后面将聚焦在View和相关的显示逻辑方面的问题.

当然这种分离也不是没有代价的, 一个立即的问题就是View如何更新. MVC和MVP把View分出来制造了这个问题, 它们也同时提供了手段解决这个问题。

  • MVP中Presenter完成业务逻辑后可以拿到最新的Model, 它可以操控视图, 根据最新的Model来设置视图的各种属性并刷新。

  • MVC中Controller在完成业务逻辑操作后更新Model, Model变化时可以发出事件, View订阅Model更新事件来更新自己。

  • MVC有各种变体, 一种是Controller直接把Model推给View, View自己从Model中取出感兴趣的数据来刷新自己。

对视图更新的处理是MVC和MVP在实现上的主要区别: MVP中View不需要知道Model, Presenter直接操作View。MVC中View知道Model, 自己根据Model来更新自己的状态。

(图片来自: http://msdn.microsoft.com/en-us/library/ff647859.aspx )

跟View相关的另一个常见问题就是可测试性. 即使其它分出去的部分可以独立测试, 但剩下来的View依然Hold住了一部分显示相关的逻辑. 显示逻辑也是逻辑, 也需要测试, 而通常直接测试GUI界面是相对难以测试的. 现有直接测试GUI的测试工具都面临以下问题:

  • 测试耗时长, 因为要启动真实的应用

  • 测试比较脆弱, 无论是可靠性还是可维护性, 因为界面元素的变化很频繁, 而通过编程来控制界面和用户真实操作经常有细微的差别, 尤其是时序相关的问题

一个思路就是把显示逻辑从View中分离, 让View退化为简单的GUI控件的容器. MVP做出了最初的努力, 而另外两个模式更加强调了这一点: Presentation ModelPassive View

  • Passive View针对可测试性的方案是把所有的显示逻辑都从View中移除, View不再依赖任何Model, 只是提供接口完全被动的由Controller或者Presenter来设置显示所需数据并刷新。

  • Presentation Model则封装了Domain Model拥有的数据到View显示所需数据之间的映射。 View不再需要与Domain Model打交道自己来把业务数据转换成显示需要的数据, View只需从Presentation Model中取数据, 映射逻辑都在Presentation Model中。 而View所需数据和Presentation Model是简单的一一对应关系。

我们上面讨论的都是相对简单的GUI, 比如我们其实假定了View和Model的一一对应, 甚至也假定了应用只有一个View。 然而我们还有多视图的情况。 多视图带来了以下问题:

  • 当Model变化时如何保持多个视图间的一致性

  • 多个视图间的交互的可控性

  • 事件的循环触发问题

Martin Fowler blog中描述的Flow SynchronizationObserver Synchronization 为当Model变化时刷新多个视图提供了两种方式, 分别应对不同的情况。

  • Flow Synchronization 在Model变化后的某些明确定义的时机明确的更新所有受影响的View。 它的优点是显式, 直观, 可控, 缺点是很容易造成多个View之间彼此有依赖, 不易扩展, 因此它适用于视图较少的情况

  • Observer Synchronization则是让多个View都订阅Model的更新事件。 这是Observer模式在同步方面的应用, 具有Observer松耦合的特点。 缺点也不意外, 它让用户交互的影响变的隐式了, 不易于理解应用整体行为和开发时调试等。

传统上还有一种用于解决交互的可控性并让View之间彼此解耦的模式, 就是Mediator。 当我们在应用Flow Synchronization时, 如果把View之间的交互都抽取到一个中介者对象里面, 每个View都不知道其它View, 只知道中介者对象, 当有事件发生时, 由中介者对象来更新Model和其它View, 则我们可以获得相对清晰的交互和相对松散的耦合。 来看一下<<设计模式>>里面对Mediator的描述:

意图:

  • 用一个中介对象来封装一系列对象交互。中介者使各对象不需要显式的相互引用,从而使其耦合松散,而且可以独立改变他们之间的交互

适用性:

  • 一组对象以定义良好但是复杂的方式进行通信。产生的相互依赖关系结构混乱且难以理解
  • 一组对象引用其它很多对象并且直接与这些对象通信,导致难以复用该对象

效果:

  • 它将各Colleague解耦。有利于各Colleague间的松耦合。可以独立的改变和复用各Colleague类和Mediator类
  • 简化了对象协议。用Mediator和各Colleague间的一对多的交互来代替多对多的交互
  • 对对象如何协作进行了抽象?将中介作为一个独立的概念并将其封装在一个对象中,有助于弄清一个系统中的对象是如何交互的
  • 控制集中化。 中介者模式将交互的复杂性变为中介者的复杂性

多视图的另一个问题就是事件的循环触发问题。 场景如下:事件A发生->事件A处理函数->处理过程中触发了事件B->事件B处理函数->处理过程中又触发了事件 A->……一个简单的例子比如界面上有两个文本框, 要保证它们的和一直都是100。 比如文本框A输入30的时候, 文本框B要显示70。 文本框B输入40的时候, 文本框A要显示60。 我们在处理第一个输入事件的时候需要设置第二个文本框的值, 而这个设值动作会触发第二个文本框的事件处理, 它也要设置第一个文本框的值……如此循环。

通常的处理方式有几种, 目的都相同:尽量减少不必要的事件发送

  • 状态真正改变时才发事件, 状态没有改变的话就不发事件。 上面例子中的TextBox控件。 如果连续用相同的参数调用其 SetText, 除了第一个调用可能会触发TextChanged事件外, 后续的操作都不会触发, 因其Text并未真的改变。 在我们的领域模型中触发事件可以遵循相同的Pattern

  • 避免重入。 当事件处理函数开始事件处理的时候, 把自己置成一个不同的状态, 比如"处理中", 事件处理结束的时候再置回正常状态。 当在事件处理过程中触发新的事件又导致事件处理函数被调用, 可以检查自己是否在"处理中"的状态, 如果是的话忽略即可。

  • 根据事件的源头来决定是否处理。 这需要在事件的上下文中加入额外信息, 比如事件的发送者sender。 微软的CAB框架允许指定事件的Scope, 这样处理函数可以只处理自己感兴趣范围内的事件。

  • 严格遵循CQRS原则, 更新Model的函数和刷新视图的函数应该是两个函数, 分别是对用户输入事件的响应和Model改变事件的响应。 这样刷新视图不会再引入新的事件, 减少循环的几率。

  • 使用细粒度的事件。 粒度过粗会引发不必要的响应, 增加循环的可能

谈到事件的粒度, 过细的粒度会引起另外一个问题:注册事件处理函数太繁琐, 不易看清交互。 Event Aggregator 可以来解决这个问题。

模式

最后回过头来看一下已有的几个模式各自的重点 :


  MVC MVP Presentation Model Passive View Flow Synchronization Observer Synchronization Mediator
显示逻辑与业务逻辑的分离 Yes Yes Yes        
视图的更新   Yes Yes Yes      
视图与数据的分离(可测试性) Yes Yes   Yes      
多视图间的一致性         Yes Yes  
交互的可控性             Yes

 其中:

  • MVP比MVC更强调显示逻辑跟视图的分离。

  • MVP, Presentation Model和Passive View都强调视图跟显示逻辑的分离, 程度不同: MVP引入这一分离, Passive View分离的最彻底最可测, Presentation Model介于两者之间。

  • Presentation Model比MVP和Passive View更强调的是为显示逻辑创建单独的Model, 而不是依赖于Domain Model。

更全面的比较, 请参见老马的"GUI Architectures “, 及里面的链接。

分享到:
评论

相关推荐

    09.北京大学-李元春-深度学习在GUI测试中的应用.pdf

    深度学习在GUI测试中的应用可以提高测试效率和代码覆盖率,减少测试时间和成本,并提高软件的质量和可靠性。该技术已经被广泛应用于移动应用、Web应用和桌面应用的测试中,并将继续推动软件测试技术的发展。

    C++ gui qt4 高清版(带详细目录)

    C++ GUI Qt4是开发图形用户界面(GUI)应用程序的一种强大工具,尤其适用于跨平台的桌面应用。Qt4是Qt库的一个旧版本,它提供了丰富的...通过深入学习和实践,你将能够利用C++ GUI Qt4创建出功能强大的图形界面应用。

    MATLAB_GUI仿真在波动光学演示实验中的应用.pdf

    MATLAB GUI仿真技术在波动光学教学实验中的应用是一项创新的研究,该研究...这种结合计算机技术和传统物理实验的教学模式,有助于学生形成系统的物理观念,提高实验操作和问题解决的能力,是教学方法创新的重要方向。

    TFTLCD触摸屏--基于51单片机GUI设计

    在51单片机上实现GUI设计,需要对TFTLCD的驱动电路有深入理解,包括初始化设置、颜色模式配置、像素点的读写等。此外,为了实现触摸功能,还需要与触摸屏控制器进行通信,通常通过I2C或SPI接口。 GUI设计主要包括...

    基于51单片机GUI设计TFTLCD触摸屏实验软件例程源码-字符数字显示(竖屏).rar

    总的来说,这个实验软件例程是一个宝贵的教育资源,它涵盖了51单片机、TFTLCD触摸屏、GUI设计和C51编程等多个领域,适合电子工程、嵌入式系统开发和物联网应用的学生或从业者学习和参考。通过实践这个例程,开发者...

    3 模板模式-课程内容.rar

    6. **模板模式的应用**:列举模板模式在实际项目中的应用案例,如GUI框架、数据库操作等,帮助理解其实际价值。 7. **模板模式与其他设计模式的对比**:对比模板模式与策略模式、工厂模式等其他设计模式的异同,...

    matlab_gui计算器,只有基础运算,如需功能复杂的计算器请慎下载,含详细报告交作业

    MATLAB GUI(图形用户界面)计算器是一种通过交互式界面进行数学计算的应用,它为用户提供了一种简单易用的方式来执行基本的数学运算。本项目提供的MATLAB GUI计算器具有基础的数学功能,适合初学者或者需要简单计算...

    基于CS和BS模式架构的图书管理系统设计

    当前,基于客户端-服务器(Client/Server, CS)模式和浏览器-服务器(Browser/Server, BS)模式的信息系统已经成为主流。 #### 二、CS模式架构 CS模式是一种传统的分布式计算模型,其中客户端(Client)负责用户交互,而...

    MATLAB多方法车牌识别系统(bp+模板+GUI)-毕业设计.zip

    7. **毕业设计**:这个项目作为一个毕业设计,意味着它可能是学生在完成学业时的一个综合性课题,旨在检验和提升学生的编程技能、理论知识应用以及问题解决能力。 通过以上介绍,我们可以理解这个MATLAB车牌识别...

    基于Java的GUI多线程下载器的设计与实现.pdf

    在当前的信息时代,网络资源的下载需求日益增长,这促使了下载器软件的广泛应用。...在众多下载器中,Java语言编写的GUI多线程...通过采用合理的架构设计模式和编程技术,可以构建出功能强大、用户体验良好的下载器软件。

    基于工学结合模式的Matlab软件课程教学改革.pdf

    教学改革涉及教学内容、教学模式和教学方法等方面的重构。 1. 教学内容的构建应依据Matlab编程工作岗位的职业能力需求,结合学生的认知规律和课程的可持续发展性。自编校本教材,并将教学内容分为基础模块、应用...

    nuklear-rust:与Nuklear 2D立即GUI库的绑定

    Nuklear是一个轻量级、高效的库,设计用于为游戏、工具和其他实时应用创建快速、简洁的GUI。通过Nuklear-Rust,开发者可以利用Rust的强大特性和类型安全来构建GUI,同时保持Nuklear的高效性能。 首先,我们来看看...

    基于深度学习的车牌识别GUI项目.zip

    深度学习通过学习样本数据的内在规律和表示层次,使机器能够模仿视听和思考等人类活动,从而解决复杂的模式识别难题。 深度学习的核心是神经网络,它由若干个层次构成,每个层次包含若干个神经元。神经元接收上一...

    java编写的Hannoi塔应用程序

    Hannoi塔游戏通常由三根柱子和若干个不同大小的圆盘组成,玩家需要将所有圆盘从一根柱子移动到另一根柱子,遵循每次只能移动一个盘子且大盘子不能在小盘子之上的规则。此Java程序不仅实现了游戏的基本逻辑,还增加了...

    Java+Swing图形界面开发与案例详解实例代码

    例如,一个简单的GUI应用可能包含一个主窗口(JFrame),在窗口内有若干个按钮和文本框,用户可以通过点击按钮和输入信息来与程序交互。 Swing组件的布局管理器是构建GUI的重要工具。Java Swing提供了多种布局管理...

    《Java程序设计》平台课建设课程改革.pdf

    6. 综合应用模块:此模块致力于提升学生综合应用Java解决实际问题的能力,要求学生结合所学知识进行实际项目的开发,实现软件工程的基本流程,包括需求分析、系统设计、编码实现和系统测试。 7. 混合教学模式:采用...

    数据库系统开发工具PPT学习教案.pptx

    * VB 的三种工作模式:设计模式、运行模式和中断模式。 VB 程序的特点: * 采用面向对象的程序设计方法。 * 程序由若干对象组成。 * 对象的 3 要素:属性、方法、事件。 * 属性:描述对象的性质或特征。 * 方法:...

    课程设计之通讯录管理系统

    8. **设计模式**:在构建这样的系统时,开发者可能会应用设计模式,如工厂模式用于创建联系人对象,单例模式用于管理数据库连接,或策略模式用于实现不同的排序算法。 9. **数据库集成**:虽然描述中没有明确提到,...

Global site tag (gtag.js) - Google Analytics