Web界面模型的设计与实现

周红志,张宝玉

（阜阳师范学院 信息工程学院，安徽 阜阳 236041）

Web界面模型的设计与实现

周红志,张宝玉

（阜阳师范学院 信息工程学院，安徽 阜阳 236041）

目前MVC模式已经成为Web应用系统的架构主流，针对MVC模式中的表示层，提出一种分层的Web界面模型.该模型主要是对MVC模式中的表示层再进行分层，把界面元素结构、界面元素的表示和行为分层设计；采用XML标签方式来描述界面构件，用界面构件来表现界面元素，在表示层采用CSS和数据库结合的方式存储数据，在行为层采用JavaScrip技术和DOM技术相结合实现系统与用户的交互.结果表明，这种设计思想能很好的实现界面描述、数据和事件的分离.

MVC；Web界面模型；分层

1 引言

在传统的Web界面中，浏览器中看到的网页，是由结构、表示和行为这三层信息构成的一个共同体，所以在大多数的Web应用系统中，呈现给用户的界面都是一样的.随着网络的广泛应用，Web应用系统使用面越来越大，使用者也越来越多，用户会对系统提出诸多的要求，用户由于职责和工作领域不同也会提出一些个性化的服务，需要的界面也就不同.目前，MVC技术被用于许多的web框架模型中，较好地解决了模型中存在的交叉问题，有效地改变网页的基本模式存在的业务逻辑和表现难以分离的情况.本文提出的一种通用的分层设计方案，解决了现实开发中Web界面表示数据和界面元素紧密耦合的现象.

2 Web界面模型

2.1 Web界面模型的可定制性

Web界面模型的可定制是为了满足用户对界面的个性化需求，按照业务流程模式进行设计的界面模型[1].将窗体的结构、表示和行为分离开来是模型的描述采用的主要结构思想.结构层描述界面的各个元素及其属性的集合，包括控制管理和合法性检查等，表示层描述界面元素的表示，即采用何种控制部件和响应何种事件，行为层是界面元素对事件做出的反应，即用户通过对界面元素的操作改变表示层信息.Web界面模型如图1所示：

2.1.1 Web界面模型结构层

结构层为Web界面模型的信息层，用于对具体的用户界面组件的描述.例如：对下拉框组件定义其属性，绑定具体的数据.这种分层可以实现界面显示的设备独立性，因为不同的设备可以定义不同的显示样式，在不改变内容的情况下，同样的界面元素可以在不同的设备中显示.

图1 Web界面模型结构图

2.1.2 Web界面模型表示层

Web界面模型表示层是给显示信息的提供一个层次.表示层提供结构层界面元素的显示风格，对每一个界面元素定义显示样式，而且也为不同的显示设备和软件的形式，提供不同的显示方式.例如，对一个从Web界面，可以分别定义其在PC浏览器、手机、PDA等中的显示样式.

2.1.3 Web界面模型行为层

Web界面模型行为层负责定义用户界面的事件，即界面应如何应对事件.用户在操作Web界面时会产生一些事件，比如右击事件、单击事件、双击事件等.传统的Web界面技术通常采用的是数据同步的交互方式.比如：用户点击页面上的按钮，触发的请求被提交到Web服务器，Web服务器接收请求后，与数据库服务器交换数据，再将交换过后的数据或页面返回给用户.用户从发出请求到得到响应这段时间中，浏览器大多处于等待的状态，造成了资源的浪费.而Ajax技术为用户的请求提供相当大的灵活性，相当于在客户端和服务器间增加了一个引擎，用户操作与服务器就能实现异步刷新，增强界面的交互性[9].利用这种技术，在可定制的Web界面中，随着用户事件的改变，界面元素可以重新布局，且行为层可以改变表示的层数据，并能实时刷新浏览器界面内容.

2.2 WEB界面模型设计

界面模型主要由界面元素，数据和事件组成[5].

数据主要包括界面表示数据和业务数据等，其来源比较广泛，有关系数据库，XML数据，CSS文件等.因此需要一个统一的数据网关来处理.事件包括业务事件和界面控制事件，由一个统一的控制器来处理.

2.2.1 数据网关

数据网关是基于服务的数据交换中间件，为异构系统之间的数据整合提供数据服务，能按照一定的格式表示数据类型、属性、操作、参数等.来自不同的关系数据库、XML数据和应用程序的中间结果等各类异构数据，可以使用相同的方式来访问和更新.表示层界面元素的显示需要表示数据，界面元素的业务内容需要业务数据，它们都可以通过统一的数据网关存取底层数据，而不必关心数据的位置.

2.2.2 控制器

控制器负责处理用户输入事件，例如点击鼠标和敲击键盘，然后决定是否把这些事件转化成对模型或视图的改变.控制器分为两类：表示层控制器和业务处理控制器.表示层控制器：逻辑关系的定义、界面内部功能的完成、界面元素的初始化，界面组件生命周期的控制、界面元素的处理如自定义事件等.业务处理控制器：主要处理后台业务，从表示层控制器中接受事件，在业务规则基础上，处理相应的模块.数据网关接受其传回的数据结果，表示层控制器接受其生成的中间事件.

2.3 Web界面模型实现的策略

2.3.1 Web界面模型结构层

结构层通常使用标记语言描述，例如XML，HTML，XHTML等，使用标签显示界面元素.标签描述界面元素及内容的语义，不同的界面元素对应不同的标签.为了实现界面定制，设计了基于元数据的界面构件，使用XML标签描述界面组件，用界面组件表示界面元素.

2.3.2 Web界面模型表示层

在表示层通过层叠样式表（Cascading Style Sheet）技术控制相同元素在不同页面的样式，这样能简化代码并且便于维护.采用CSS下载数据，用数据库存储表示层数据和用户定制信息中，把通用界面数据存放在CSS文件中，实现数据的分离，提高访问界面数据的速度.

2.3.3 Web界面模型行为层

行为层使用Javascript技术和DOM方法.

文档对象模型（DOM）是用于HTML和XML文档的编程接口，它提供一种结构化的方法.以层次结构组织的节点或信息片断的集合的方式来解析文档.利用Javascript和DOM可以掌控、操纵和创建动态的界面元素，实现行为层与表示层的交互.

2.3.4 数据网关

数据网关实现数据的统一访问.在数据网关中，采用相同的方式来表示来自不同数据库的各类异构数据，采用树状结构描述数据对象的属性和操作.比如：XML文档采用SAX和DOM解析器实现对数据的读取；CSS文件采用字符串的正则表达式技术读取文件中的样式数据.

数据网关设计的接口类屏蔽了访问的底层差异，对上提供统一的数据访问接口.只要实现这个接口类，就可扩展数据网关，从而实现对其他数据的读取访问.

2.3.5 控制器

控制器主要采用Javascript和Ajax技术，Javascript技术实现构件的初始化和对事件的接收处理、请求的分发等，与后台业务的交互使用Ajax技术实现.控制器功能的实现都在一个Javascript库，控制器中供各个页面继承使用的接口都在Javascript库做了抽象说明.

3 结束语

用户界面与实际需求相对应，是经常变化的，采用三层结构模式将业务处理与显示分离，使应用更具有拓展性，增强其个性化特征.

〔1〕李小将，胡正国.嵌入式软件系统界面可定制模型[J].西北工业大学学报，2001，19(3)：418-421.

〔2〕张文波基于任务模型的用户界面自动生成研究 [D].济南：山东大学计算机科学技术学院，2007.

〔3〕戚艳军，李继玲.图形界面开发语言XIJL应用研究[J].计算机技术与发展，2007，17(3)：233-235．

〔4〕冯仕红.基于设计特征和参数化的工程化界面设计模式研究[D].山东大学：计算机软件与理论，2008.

〔5〕赵祺，黄罡．一种基于Web的服务组装构件模型[J].计算机科学与探索，2008，2(4)：378-388．

〔6〕辛刚，王清心.基于Ajax的Java Web应用的研究与开发[J].山西电子技术，2010(1)：57-58.

〔7〕申利民，李伟伟.基于构件的柔性Web用户界面模型[J].计算机应用研究，2011(3)：25-26．

〔8〕熊文，熊淑华．Ajax技术在Web2.0网站设计中的应用研究[J].计算机技术与发展，2012(3)：42-43.

TP.11.13

A

1673-260X（2013）02-0023-02

阜阳师范学院科研项目资助（2011FSKJ15）