基于动态领域模型的页面设计模式

申新鹏，姚俊松，肖光雁

（金蝶软件（中国）有限公司，广东 深圳518057）

0 引 言

界面是应用软件系统的重要组成部分，用户通过界面与软件系统进行交互，完成需要的功能。界面的好坏直接影响用户的体验。

企业资源计划［1］（enterprise resource planning，ERP）系统集信息技术与先进的管理思想于一身，实现了对企业的采购，生产，销售，分析，决策的全面管理，已经成为当前信息化企业管理的基础。以ERP软件系统为基础，企业能够及时准确地收集数据，分析经营状况、财务状况，提高管理的效率。ERP系统作为一种应用软件系统，除了它本身的强大功能外，界面的好坏，产品的易用性也是用户在购买产品时重点考虑的一个问题。

随着企业管理理念的变化，当前ERP软件系统不仅要实现对企业供应链资源的全面管理，还要完成上下游企业协同工作的管理，为了实现这些功能，现在的ERP软件系统的规模一般比较庞大，例如金蝶K/3Wise 12.0标准版有8万个以上的页面组成。市场要求开发高质量的界面，但传统的界面开发是根据需求对每个界面上的各个元素分别进行设计和实现的，开发效率很低，页面质量的一致性也无法得到保证［2－3］。

ERP软件系统的大量页面需求与页面开发的低效率产生了矛盾。传统的开发模式已经不能满足需求。为了解决这个问题，金蝶公司提出了动态页面设计模式。

1 页面设计现状

在Unix和Dos环境下，字符界面占主导地位，没有图形化界面，使用字符菜单来完成系统与用户间的交互，用户体验很差。

随着Windows等操作系统的发展，出现了图形化的客户端，界面非常友好，但是客户端的开发和部署非常繁琐，经常出现版本问题［4－5］。随着Internet等技术的逐渐成熟，网页成为系统与用户交互的主要媒介［6］。开发好的网页存放在Web服务器上，当用户需要时，从服务器下载使用，解决了系统的部署和运行环境的版本控制问题。

但是网页的开发效率并没有很大的提升。当前普遍采用的页面开发方法是针对每个页面编写HTML文档，然后编码实现业务逻辑。当页面数量很少时，这种方法很有效。但如果系统中页面很多，使用这种方法对每个页面分别进行设计，必然增加开发和维护的成本［7］。

2 动态页面设计模式

ERP系统规模庞大，如果对每个页面分别进行设计、实现，必然造成开发效率低下，开发成本高的问题。

为了大幅提高页面开发的效率，在分析ERP系统特点的基础上，基于动态领域模型［8－9］提出了一种新的动态页面设计模式，较好的解决了ERP软件中页面开发的一系列问题。

2.1 动态页面的继承体系

传统的页面开发流程是根据需求对每个页面上的各个元素分别进行设计，然后对页面的功能进行编码实现。对每个页面，及页面上的每个元素都需要单独进行设计和编码。不同界面间没有任何继承关系。这种方法的开发效率很低，发布成本很高。

为了提高开发效率，根据不同页面的特点，将相似的页面归类，建立母板，将相似的功能在母板实现。具体的页面从母板继承，得到通用的功能，每个页面特定的功能在子类中具体实现。这种方法的界面设计是以页面组为单位，如图1所示，相似的多个页面可以共用一个模型作为母板，比第一种方法有较大的改进。但是如果界面上的元素或操作发生变化，就必须重新设计界面模型，修改代码。不能实现界面在部署环境的按需动态构建。

图1 页面继承

本文提出的动态页面设计模式是采用动态领域模型对页面进一步抽象，将页面上元素的行为进行封装，作为继承对象，从而大大提高了系统的灵活性和质量的一致性。

2.2 动态页面的领域模型

页面是ERP软件系统的基本模块单位。但每个页面要实现的功能不同，页面的设计和实现也千差万别，虽然可以使用母板来提高开发效率，但难以发生本质性的变化。

一个典型的页面由文本输入框、时间输入框、列表、显示信息等多个显示控件和菜单、按钮等多个操作控件组成。

页面作为整体虽然实现的功能有很大的差异，但每个控件实现的功能确是基本固定的。例如文本输入框的功能是输入内容；按钮的功能是执行一个事件。

因此，控件是组成页面的基本单位，如果把页面看作是一种领域模型，控件就是该模型的基本元素，如图2所示。

图2 页面包含的元素

同时，一个页面上相同种类的控件可能会有很多个，它们显示的内容和格式各不相同。例如，一个应收单上有两个文本输入框，一个要输入应收金额，一个要输入收款单位。应收金额只能输入数字，长度20个像素。收款单位可以输入中文和英文，长度100个像素。同一类控件的这种差异性必须在领域模型抽象中得到体现。

控件的这种差异性在领域建模中使用元素的属性来表示。每个元素都有多个可以动态修改的属性。例如文本框有类型、长度、高度、绑定的数据库字段等多个属性。

加入属性后，ERP动态领域模型成为由模型－元素－属性组成的3层体系结构，如图3所示。

图3 三层领域模型结构

文本输入框、列表等显示控件在各种页面上的功能是相似的，采用上面的方法进行领域建模基本可以满足要求。

但菜单、按钮等操作控件在不同的页面上都要执行事件，但相同的事件具体的操作是不同的。在领域建模时，将相同点提取出来，将按钮（菜单）作为基本元素，将事件作为元素的属性，将具体的动作（函数）作为属性的值进行建模。为了提高灵活性，一个事件可以绑定一个或多个动作函数。

例如一个按钮有单击事件要实现删除并保存的功能。在系统中，按钮是一个基本元素，它有一个属性表示单击事件。系统同时定义了新增，保存，检索，删除等多个函数。只要将按钮的单击事件与删除，保存两个函数绑定，就可以实现要求的功能。

2.3 动态页面的MVC模式

将设计好的动态领域模型应用到页面设计中采用继承和MVC来实现。

动态领域建模得到的基本元素是页面继承的对象，因此，这些基本元素的封装性决定了整个产品的质量。为了提高质量的稳定性和易维护性，使用MVC模式［10－11］来设计页面元素，从M（模式），V（视图），C（控制）3个维度分别设计。

M（模式）主要描述页面元素的数据特性，例如页面元素中的数据对应的数据库字段，数据的校验规则等。V（视图）主要描述页面元素的显示特性，例如控件在页面的位置，日期型控件的日历选择显示方法等。C（控制）主要描述页面元素的控制信息，例如光标离开控件执行的代码等。

同一个页面元素的M，V，C分别使用不同的类进行封装，从而有效的实现三者的分离，保证了各自的独立性，提高整个系统的质量。

在设计页面时，先简单地将封装好的页面元素拖放到页面上，然后设定页面元素的属性，例如页面元素的值来源于哪个数据表的字段，如何显示等。页面上的工具栏，菜单项，按钮等的行为特性也都使用属性设定的方法进行确定。页面元素继承如图4所示。

图4 页面元素继承

使用这种方法可以很简单地实现页面的设计。设计好的页面以XML文件形式保存页面元素的各种属性。使用XML的形式可以很好的提供跨平台的功能，不论是PC机，手机还是其他智能终端都能够提供完美的支持。

2.4 动态页面的继承

前面提到了两种页面设计的继承方法：母板继承和页面元素继承。

页面元素继承法具有更好的灵活性，但不可否认，ERP系统中有很多类似的界面，所有这些界面都从页面元素开始进行设计，将大大降低开发效率。在动态页面设计模式中，我们将这两种继承方法结合了起来。

先分析相似界面的共同特点，确定母板的特征。使用抽象了的页面元素完成母板的设计。其他页面继承该母板，并在特定的控件中设定页面特有的属性，从而进一步提高页面开发的效率。

图5 动态页面的继承关系

采用图5所示的继承关系后，多个页面共同的信息由母板XML文件保存，页面XML文件只保存它相对于母板变化的部分（包括增加，删除，修改3种可能）.

采用这种差量保存的方法可以充分利用继承带来的好处，提高系统的兼容性。母板发生变化可以立即反映到具体的页面。

2.5 动态页面的组合

页面继承发生的条件是两个页面的整体有较大的相似之处。在页面设计时，还有另外一种情况，一个页面或多个页面的部分内容非常相似，但不相同的地方又很多。如果采用母板继承方法，继承后要修改的内容很多。这种情况可以使用动态页面组合的技术来解决。具体包括如下几个步骤：

（1）使用动态页面设计方法将页面上的部分内容设计成一个独立的页面。

（2）使用动态页面设计方法设计整体页面，在需要特殊设计的部分放置一个名为Panel的基本元素。

（3）将Panel的属性设定为第一步设计好的独立页面的名字。

经过以上3个步骤就可以实现动态页面的组合功能。如图6所示。

图6 动态页面的组合

采用动态页面组合技术产生的页面，在保存时也使用差量保存的方法。作为整体的页面只保存它的元素及元素的属性（独立页面的名字作为Panel元素的属性保存）。独立页面的内容保存在独立页面自己的XML文件中。

采用这种方法，如果有多个页面使用了同一个独立页面，独立页面的修改可以立即反映到所有这些整体页面上。

2.6 插件的开发和实现

以上的方法解决了大部分ERP系统中页面的设计问题，但是有一些页面具有部分和其他页面不同的行为，使用母板和抽象的页面元素不能完成这些页面的设计。但如果将它们排除在动态页面设计模式之外，这些页面的修改将需要修改代码，重新编译，造成很多问题，是不可行的。必须在页面动态设计模式中解决。

针对这种情况，在动态页面设计模式中，增加了插件功能来解决了这一问题。插件就是在系统中定义接口类和一系列接口函数。当需要实现特定的功能时，先继承该类，然后实现插件类的几个特定的接口函数。并将实现的接口注册到页面的特定元素上。在发布时，插件的功能以单独的动态链接库的形式提供。

在页面设计时，使用MVC模式对页面的模式，显示和控制分别进行设计。同样，插件也分为界面插件和操作插件两种。界面插件通过实现页面生成插件接口，对页面上元素属性、样式进行修改，实现特殊、个性界面。操作插件通过实现页面逻辑服务接口，实现动态页面控制逻辑如界面元素控制、基础资料属性携带、公式计算、数据汇总、操作调用等。

2.7 动态页面的解析

通过前面介绍的方法使用抽象的页面元素以XML文件实现了动态页面的设计。当要加载页面时，需要将XML文件转换为具体的页面，这部分工作由动态解释引擎负责。图7是动态解释引擎的示意图。

图7 页面动态解释引擎

动态解释引擎由展示层，服务层，内核层组成。当XML文档输入解释引擎后，内核层读取元模型数据解析XML文档，并将结果交给服务层。服务层将解析结果封装层可以在网络中传输的JSON数据包，并发送到展示层。展示层收到JSON数据包后，使用不同的页面展示方式，把页面显示给最终用户。

对于使用母板的页面，页面信息分别存放在两个XML文件中，因此页面的解析也分为两个步骤。首先解析母板的XML，得到一个动态页面A，然后解析具体页面的差量XML文件，将差量内容反映到刚刚生成的页面A，使得页面不同于母板的特性可以得到体现。

使用这种差量保存的方法，多个页面共用一个母板，可以使用页面缓存的方法减少母板页面解析的次数，从而大幅度提高页面加载效率。

2.8 基于领域模型的页面设计的动态性

采用本文介绍的基于领域模型的页面设计方法，可以简化页面设计的过程，提高开发效率。另一方面，采用动态领域模型设计后，页面设计的最小单位是页面上的基本元素，具体的操作等都是作为元素的属性存在的，因此设计的页面具有很好的动态性。

例如菜单项的事件（单击）是确定的，但是菜单项具体执行的操作（函数）是作为属性值设定的。只需要简单的操作就可以改变菜单项的功能（从新增改为保存）。

再例如采用动态页面组合技术生成的页面。页面上嵌套的小页面是独立设计的，并且是作为整体页面的Panel元素的属性与整体页面联系在一起的。如果想使用另外一个小页面代替原来的页面，只需要改变Panel元素的属性值即可。

插件作为页面基本功能的补充，是通过实现插件接口，注册到系统中的。当开发出新的更好的插件时，只需要将老的插件移除，将新的插件注册到系统，就可以实现新的功能。

系统中类似的动态改变页面外观及功能的例子还有很多，这些功能都是通过动态领域模型来实现的。

3 实 现

设计了一个 BOS（business operating system）系 统，作为动态页面设计模式实现的载体。使用这种方法基于BOS平台进行页面设计和开发，几乎不需要修改任何代码，而且可以很好地保持界面质量的一致性。

将动态页面设计模式应用到ERP应用系统开发后，开发效率大幅上升，系统的可迁移性得到了显著提高。采用这种技术前，90%的精力花费在页面的设计上，无法专注与ERP业务流程的设计。采用最新的页面设计方法后，页面开发的时间降低为10%，开发人员90%的精力关注业务逻辑设计和系统建模。从而可以开发出更加适合企业需求的产品。另一方面，采用新技术后，系统开发的难度大幅下降，新员工经过简单培训可以开始工作。同时，由于减少了代码修改的数量，系统的质量也得到了大幅提高.

4 结束语

提出了一种新的页面设计方法，这种设计模式大幅提高了ERP系统的设计和开发效率，并有效提升了软件产品的质量。而且这种方法设计出来的页面具有良好的动态性，可以在运行时调整外观和功能，很好地满足了用户的个性需求。基于动态领域模型的页面设计方法可以推广到其他有大量页面开发需求的系统中，具有较高的理论和应用价值。

［1］TANG Xiaobo.Enterprise resource planning system ［M］.Wuhan：Wuhan University Press，2009（in Chinese）. ［唐晓波.企业资源计划 ［M］.武汉：武汉大学出版社，2009.］

［2］CAI Kui，LU Lei，WANG Shuaiqiang，et al.Complicated behaviors modeling and code generation based on Web UI design pattern ［J］.Journal of Computer Applications，2009，29（4）：1139－1142（in Chinese）.［蔡奎，卢雷，王帅强等，基于 Web界面设计模式的复杂行为建模及其代码生成方法 ［J］.计算机应用，2009，29（4）：1139－1142.］

［3］LI Hui，SHI Bing，MA Jun，et al.User interface design model to support access control ［J］.Application Research of Computers，2009，26（11）：4136－4139（in Chinese）.［李慧，石冰，马军，等.一种支持访问控制的用户界面设计模型 ［J］.计算机应用研究，2009，26（11）：4136－4139.］

［4］LI Fan，LI Meng，LI Jing.A model based WEB page automatic generating system：PAGS ［J］，Computer Engineering and Applications，2006，42（27）：84－87（in Chinese）. ［李凡，李梦，李京.基于模型的 WEB页面自动生成系统PAGES［J］.计算机工程与应用，2006，42（27）：84－87.］

［5］MA Yongjie，YANG Zhimin.Reusable use－oriented access control method［J］.Application Research of Computers，2008，25（4）：1108－1110（in Chinese）.［马永杰，杨志民.面向用户的可复用系统菜单权限的设置 ［J］.计算机应用研究，2008，25（4）：1108－1110.］

［6］Martín G，Jorge M，Agueda V，et al.Improving accessibility with user－tailored interfaces ［J］.Applied Intelligence，2009，30（1）：65－71.

［7］WU Lei，LI Fan，LI Jing.EXPAGS：An expansible development tools for web pages ［J］.Computer Applications and Software，2008，25（8）：117－120（in Chinese）.［武磊，李凡，李京.ExPAGS：一种可扩展的Web页面开发工具 ［J］.计算机应用与软件，2008，25（8）：117－120.］

［8］JIAO Feng.Domain modeling and mapping technique based on goal－tree ［J］.Computer science，2011，38（5）：107－112（in Chinese）.［焦锋，基于目标树的领域建模及映射技术 ［J］.计算机科学，2011，38（5）：107－112.］

［9］ZHOU Huiqun，ZUO Chun，CAI Yubao.Research on domainspecific reference data model ［J］.Computer Engineering and Design，2009，30（3）：605－609（in Chinese）. ［周惠群，左春，蔡玉宝.特定领域的数据参考模型建模方法研究 ［J］.计算机工程与设计，2009，30（3）：605－609.］

［10］HU Tengbo，YE Jiankao.Simulation system of WebGIS based on MVC pattern ［J］.Application Research of Computers，2009，26（1）：247－249（in Chinese）. ［胡腾波，叶建栲，基于MVC模式的 WebGIS仿真系统 ［J］.计算机应用研究，2009，26（1）：247－249.］

［11］WU Weiping，WANG Lifang，JIANG Zejun.Research of controler in web application based on MVC ［J］.Microelectronics＆Computer，2008，25（5）：182－184（in Chinese）. ［吴卫平，王丽芳，蒋泽军.基于MVC模式实现Web应用程序的控制器 研 究 ［J］.微电 子 学 与 计 算 机，2008，25（5）：182－184.］