设计模式在BREW UI系统中的应用

摘要：MVC模式和Decorator模式是Graphic User Interface设计实现中的常用模式。高通在其BREW平台上提供的GUI系统（BUIW），为了便于OEM厂商和软件开发公司的扩展，在其实现中大量使用了设计模式。本文选择其中应用比较多，比较典型的两种设计模式MVC和Decorator进行描述和分析。

关键词：设计模式；UI；MVC

中图分类号：TP311.1 文献标识码：A 文章编号：1007-9599 (2011) 21-0000-02

Design Patterns Application in BREW UI System

Xi Fulai,Wang Xiaowei

(Southeast University,College of Software Engineering,Nanjing 211102,China)

Abstract:MVC pattern and the Decorator pattern is a Graphic User Interface design and implementation of the common patterns.Qualcomm's BREW platform to provide its GUI system(BUIW),in order to facilitate the OEM manufacturers and software development company's expansion,its implementation in the extensive use of design patterns.This choice of which applications are more typical of the two MVC and the Decorator design pattern to describe and analyze.

Keywords:Design pattern;UI;MVC

一、概述

BREW（Binary Runtime Environment for Wireless）是高通设计实现的针对手机使用的嵌入式平台。BREW的GUI系统BUIW（BREW UI Widget）中提供了大量的组件。为了便于各个手机制造商和软件开发商的扩展，高通在其BUIW中大量使用了设计模式。考虑到在嵌入式上的性能，以及可扩展性，BUIW是基于COM的架构使用C语言实现的。根据我的初步学习，其中至少使用了工厂模式，Strategy模式，Composite模式，MVC模式，Decorator模式，Observer模式等设计模式。BUIW部分是高通BREW系统中技术含量最高最难以掌握的部分之一。

MVC（Model-View-Controller）模式是当前交互式软件设计中的常用模式。MVC模式是一套比较精妙复杂的结构。通过Model-View-Controller三者之间的关系和触发机制，巧妙的保持了数据和视图的一致性。当视图和数据复杂的时候MVC的结构实现起来也是有一定复杂度的。

Decorator模式也是GUI系统中的常用设计模式。Decorator模式的功能就是：动态的给一个对象添加一些额外的职责，就像在墙上刷油漆.使用Decorator模式相比用生成子类方式达到功能的扩充显得更为灵活.其实很多Decorator模式能够简单实现的东西，用继承的方式是很难实现的，而且Decorator模式的灵活性比继承的方式好的多。

二、MVC和Decorator模式的介绍和体会

（一）MVC模式的设计思想

模型（Model）：在MVC模型中代表了数据，主要用于存储，修改，控制数据。Model中不只是保存了数据，同时也封装了业务流程的处理过程。提供了对数据的各种访问接口，物理数据的存储，修改，维护方法对其它层来说是不可见的，模型接受视图请求的数据，并返回最终的处理结果。Model可以说是MVC最主要的基础，它从应用技术实现的角度对模型做了进一步的划分，以便充分利用现有的组件，它告诉我们按这种模型设计就可以利用某些技术组件，从而减少了技术上的困难。对一个开发者来说，就可以专注于业务模型的设计。

在Brew的BUIW系统中，任何一个UI组件都会至少用到一个Model。一般情况下都会有两个Model，一个View Model用于保存处理界面实时显示的数据，另一个是Data Model用于保存处理这个UI组件相关的数据。

视图（View）代表用户交互界面，拿手机来说，屏幕上的各个被画出来的UI组件都代表了这些组件的View。对于用户来说，View是唯一可见的东西。用户不关心你把数据存放在了什么地方，你用什么方法保持了View和数据的一致性。用户关心的是看到的是不是正确的，操作是不是符合常理，使用是不是方便，界面是不是比较漂亮，是不是能够个性化。为了满足用户的这些需求我们就要设计好如何把从Model中获得的数据按照用户的需求很好的表现出来。同时View还有从用户那搜集用户的输入的职责。用户在哪个UI组件上案了哪个键都是View的职责所在。

控制（Controller）完成对各种事件（Event）的处理。对于手机来说，事件是繁多的，除了用户进行的各种操作系统会通过事件的方式通知Controller之外，系统还会产生其他事件，比如电池没电了，有电话打进来了，信号强度发生变化了等。这些事件都会有Controller来接收，将模型与视图匹配在一起，共同完成各种事件的处理。划分控制层的作用也很明显，它清楚地告诉你，它就是一个分发器，选择什么样的模型，选择什么样的视图，可以完成什么样的事件处理。控制层并不做任何的数据处理。例如，用户点击一个连接，控制层接受请求后，并不处理业务信息，它只把用户的信息传递给模型，告诉模型做什么，选择符合要求的视图返回给用户。因此，一个模型可能对应多个视图，一个视图可能对应多个模型。

模型、视图与控制器的分离，使得一个模型可以具有多个显示视图。如果用户通过某个视图的控制器改变了模型的数据，所有其它依赖于这些数据的视图都应反映到这些变化。因此，无论何时发生了何种数据变化，控制器都会将变化通知所有的视图，导致显示的更新。这实际上是一种模型的变化-传播机制。

图-1说明了MVC的工作流程。（1）Event发给了Controller。（2）Controller根据业务逻辑，去更新相应得Model或者View。（3）如果View被要求更新，则View到Model中取数据然后重画更新自己。（4）如果Model被Controller更新，则Model要求注册过的View，更新。

MVC设计模式告诉我们，把应用的模型按一定的规则抽取出来，抽取的层次很重要，这也是判断开发人员是否优秀的设计依据。抽象与具体不能隔得太远，也不能太近。MVC并没有提供模型的设计方法，而只告诉你应该组织管理这些模型，以便于模型的重构和提高重用性。

（二）Decorator模式的设计思想

Decorator模式也是GUI实现中常用的方式。Decorator模式就是动态的给某些加一些特殊的效果。Decorator模式可以给单个对象扩展功能，而不至于为了给某个对象扩展功能而不得不使用继承的方法生成一个子类，增加了系统的复杂性，增加了维护难度。Decorator模式给对象增加能需是要由用户动态决定加入的方式和时机.Decorator提供了"即插即用"的方法，在运行期间决定何时增加何种功能。这种方式既不会增加太多的系统复杂度，又可以很灵活的动态使用。在Brew的BUIW中，Decorator的使用非常多，用于显示列表的List Widget，用于显示滚动条的Scroll Bar Widget等都是Decorator。大多数的UI组件都可以使用Decorator，来给自己增加Decorator提供的新的功能。

前面也提到继承同样可以实现对对象的功能追加。我们就来对比一下继承的方式和Decorator模式的不同点：

Decorator模式 继承

不需要产生子类 需要产生子类

对单个对象起作用 对某一类对象起作用

动态的 静态的

不明显增加系统复杂度 没生成一个子类都会增加系统复杂度

容易扩展增加 不容易扩展

有统一的行为 行为不统一

从这些对比点可以看出，当需要对不同的类中的某些特定使用场景的时候需要增加功能的时候，Decorator模式是行之有效的方式，它既灵活，有不会增加系统的复杂性。当静态的需要对某个类的所有对象都增加某些功能的时候使用继承的方式生成子类是比较好的方式。

三、MVC和Decorator模式在Brew的UI系统BUIW中的应用

Brew提供的UI系统BUIW，是基于MVC模式以COM的架构用C语言实现的。Brew是以手机为主要应用对象的，手机上的芯片比PC的处理能力相差甚远，而且ARM编译器上C语言的效率比C++好的多，所以整个系统都是用C语言实现的。因为要实现类似C++的继承以及类似C++虚函数的动态绑定功能用以来实现COM结构，便于手机制造商，软件开发商对UI进行扩展，而且BUIW的实现中使用了大量的设计模式，所以BUIW的代码不容易读懂。

MVC是BUIW的基础。其中的每一个组件都是基于MVC模式设计的。下面具几个例子来说明一下。Number Picker Widget是实验中自己基于BUIW实现的新的UI组件。

（一）Number Picker Widget

Number Picker Widget：BUIW中的一个UI组件，是用来输入数字的。如下图所示，按上下的按钮可以增加或者减小数字。它的工作流程如下：

（1）当用户按下上或者下的按钮时候，触发Controller；（2）然后Controller去修改Text Model中的数据；（3）Model中的数据发生改变，通知View重构；（4）View从Model中取出新的数据，重构自己。

这个流程执行后，就可以看出当用户按上下按钮之后，数字就可以跟着增大、减小。这个UI组件就是MVC模式的一个应用。BUIW中的所有UI组件都是按照MVC模式设计的。

（二）ScrollBar Widget

ScrollBar Widget是一个Decorator类型的UI组件。它有横、竖两个滚动条和Client区域组成。它的Client区域是空白的，其他的UI组件可以放到ScrollBar的Client区域中，这样被放到Client区域中的UI组件就有了滚动条。

图-3中，把一个文本显示UI组件放在了ScrollBar中。文本显示组件本来是没有滚动条功能的，现在通过Decorator的模式，整个被放到Client区域的文本显示组件对象有了滚动条的功能。如果一个文本显示UI组件，不需要滚动条，我们就可以不把它放到ScrollBar的Client区域中。所以这种Decorator的模式可以动态的给指定的对象增加功能，而不改变该对象所属类的行为，也没必要产生新的子类。Decorator模式是一种灵活的动态的模式。

四、MVC和Decorator模式总结

MVC模式和Decorator模式都是GUI设计中常用而且行之有效的设计模式。通过对Brew平台上的BUIW的学习，深入的了解了MVC和Decorator模式的设计思想，基本掌握了如何把MVC模式和Decorator模式应用到实际的项目中去。

参考文献：

[1]Simson L.Garfinkel."Design Principles and Patterns for Computer".2005

[2]Heer,Agrawala"Software Design Patterns for Information Visualization".IEEE Transactions on Visualization and Computer Graphics,Oct.2006

[3]Erich Gamma,Richard Helm,Ralph Johnson,John Vlissides.设计模式:可复用面向对象软件的基础[M].机械工业出版社,2004,9

[4]Elisabeth Freeman,Eric Freeman,Bert Bates,Kathy Sierra.深入浅出设计模式[M].东南大学出版社,2006,1