一种基于Ext.NET的Web控件二次包装方法研究

陈鸿皖,　周国祥,　石　雷

(合肥工业大学 计算机与信息学院,安徽 合肥　230009)



一种基于Ext.NET的Web控件二次包装方法研究

陈鸿皖,周国祥,石雷

(合肥工业大学 计算机与信息学院,安徽 合肥230009)

在大型信息系统开发过程中,相似的功能和操作往往会反复出现。这些相似的操作如果不处理好,会使系统中出现大量重复的代码,不利于系统的开发和拓展。文章介绍了B/S架构下富英特网应用(rich internet application,RIA)技术在软件项目开发中的重要作用,提出了在开发过程中代码复用的现象,进而引出Web控件的二次包装方法,并结合Ext.NET技术具体实现该方法,从而提高系统的开发效率。该方法已经在某矿山在线统一监管平台中得到应用,效果良好。

管理信息系统;富英特网应用技术;B/S架构;Ext.NET控件

0　引　　言

在管理信息系统(management information system,MIS)开发过程中,随着客户需求的增大,对功能的需求越来越高,软件规模也越来越大,会出现许多重复功能的代码。这不仅增加程序编写者的工作量,也降低了代码的可读性,浪费了大量的时间和精力,增大开发成本。因此代码的重用性问题对于系统开发来说是一个亟待解决的问题。

过去的HTTP静态单页面表示技术和Web服务大多以文本传输为主要形式,在网页更新、数据传递与存储、多窗口切换和网络维护等方面存在一定的局限性,难以满足网络用户和网络技术开发人员的要求[1]。而富因特网应用[2](rich internet application,RIA)技术可以支持动态的图像、视频、音频、双向的数据通信和创建复杂的窗体,为创建应用程序用户接口提供了一个高效而完善的开发环境[3]。

RIA技术提供了更好的用户交互界面,用户的视觉体验更加突出[4]。RIA技术还可以在已有的Web应用架构基础上进行升级,从而无需大规模替换Web应用程序[5]。

现在软件项目中比较流行的RIA技术主要有Java applet、Microsoft的WPE/E、Adobe的flex、AJAX等。AJAX在大多数现代浏览器中都能使用而且不需要专门的软件或硬件。Ext是基于Web的RIA框架,也是基于标准W3C技术构建的。

Ext.NET是一套支持AJAX的Web控件,因为AJAX的种种优势,所以Ext.NET也在应用程序的开发中被广泛使用,通过它的应用有助于快速实现.NET平台下富客户端的AJAX应用开发[6],减少了很多的美工精力,使程序员可以专注于后台代码的编写。这非常适合于企业内部那些大量的中小规模B/S模式的建设[7]。

在MIS的实际发过程中,传统的调用Ext.NET控件方法是在需要使用该控件的应用程序前台页面直接设置该控件各属性值和触发函数,后台编写响应函数和连接数据库函数。然而一些应用控件在不同功能模块中会被重复使用,这些应用控件有相似的结构和操作(如各属性值的设置),因此这些应用控件被运用的次数越多就会产生越多重复的代码,基于这些情况的出现,在基于RIA基础上,对于部分常用的、使用频率较高的Ext.NET控件进行二次包装,开发适合本平台的用户控件就显得十分必要。这些应用控件被二次包装为用户控件,重写它的方法,重新设置其属性[8]、编写其事件,就可以在应用程序页面直接调用,无需在每个调用的页面都重复设置[9]，从而既减少了开发的代码量,也降低了错误率,增强程序的可读性。

本文结合某矿山在线统一监管平台,根据系统的建设需求,探讨将系统中使用频率较高的控件包装为UserControl及其在系统中的应用,并将其与传统调用方式分析比对来说明该方法的实用性和有效性。

1　系统建设需求

1.1系统体系结构

某矿山在线统一监管平台针对有众多分支部门的大型企业开发,集成了在线地图和实时视频监测功能,可以对大量的数据进行高效归类和管理,按照流程化模式对数据进行增删查改。系统体系结构如图1所示。

图1　系统体系结构

某矿山在线统一监管平台采用B/S架构,在Web服务器集中部署[10],各终端将信息输入终端数据库,通过网络将数据传输到远端数据库服务器,用户通过平台身份认证后即可依据权限使用Web浏览器工作。业务处理流程和数据流程设计如图2所示。

图2　业务处理流程和数据流程

1.2系统中存在的典型用户控件

本平台将终端设备采集的数据输入到数据库,通过网络和服务器将采集的数据发送到远程终端,用户通过终端登陆系统进行信息查询、系统菜单管理和登陆用户权限管理等操作。

本系统开发实现过程中使用了多种控件,但其中某些典型控件(如ComboBox等)在各模块的使用较多。

在本系统中用于查询功能的部分都会显示查询范围内可供选择的内容,本文选用的控件为ComboBox,对于所需要查询的磅房终端可能还会需要添加,还有系统菜单中的某些项(如公司单位信息)是可以由系统管理员增删的,因此这些项在查询列表都是不定的,如果单纯使用ComboBox的基本功能,无法满足系统的实际需求。在系统管理模块中,对于各种信息的管理,如公司部门信息、用户基本信息和菜单管理等,需要一个树形结构列表[11],以供登陆用户直观地查看该部分信息的从属关系,该处所用的控件是DataTree。系统多处需要用到这个结构相似、具体内容不同的DataTree,部分还需要增删树中的内容,因此传统方式也是难以满足本系统的需求。DataList控件也是本系统中使用频率较高的控件,它绑定数据源以表的形式呈现数据,通过对控件进行配置,使用户能够编辑或删除表中的记录[12]。在本系统中,信息的显示基本上都是以列表形式呈现的。DataList、DataTree和ComboBox在系统中的实现应用如图3所示。

图3　系统界面

2　开发过程

2.1解决方法

在系统中用户可以通过多重的条件筛选来查询,因此界面中多处设置了搜索框,即使用ComboBox控件。ComboBox控件是Ext.NET控件中较常使用的,它是一个下拉列表显示控件,在本系统中多处用到。各处调用的ComboBox控件略有不同,首先因为不同页面的布局不完全一样,各处的ComboBox控件的外观不同,长短不一,文本框是否可编辑等;其次选择项不同,即下拉列表中显示内容不同,显示的内容或是随着控件属性同步固定设置,或是取决于读取操控的数据库表;最后在具体页面的操控事件功能不同,有的选择过后会激活其他功能,有的选取后获得选取内容等。

一般来说,ComboBox控件下拉列表显示内容是固定的,都添加在其items属性中,用ListItem逐条添加内容,在JS代码里编写列表内容的触发事件函数,后台代码部分编写连接数据库的函数,以获取显示欲查询的数据库表值。这种方式的调用,每一处的ComboBox的列表内容无论是否相同都需要在items属性里重新定义,当页面出现很多相同的ComboBox时,就会产生大量的重复代码,既增加了工作量，也降低了工作效率。

用户控件(UserControl)扩展名为.ascx,在结构上与.aspx相似,是页面中加载的功能块。用户控件文件不能作为独立的Web窗体页执行,必须嵌入到.aspx页面或者其他用户控件才能使用,它适用于页面上的重复元素。将重复元素封装到用户控件中可以减少代码量,用户控件能根据应用程序的需要方便地定义控件。因此为解决上述问题,可将使用频率较高的Control包装为一个用户控件,这样就能够在界面中直接调用该控件,节省了大量重复的代码,同时也增强了程序的可读性。

本文通过一个实际项目中的调用实例来介绍如何将ComboBox控件二次包装为一个UserControl。

2.2准备工作

开发环境要求Microsoft Visual Studio 2005以上、Windows 2000 Professional以上版本和Microsoft SQL2005数据库管理软件。

2.3应用开发

在VS环境下创建用户控件文件,以DataComboBox.ascx命名。

〈%@ Control Language=“C#” AutoEventWireup=“True” CodeBehind=“DataComboBox.ascx.cs” Inherits=“NewTywz.UserControl.DataComboBox”%〉

在页面添加Ext.NET引用,需要使用Ext.NET的页面都要在文件头添加此项。本文将从数据层、控制层和表示层3个层面来描述具体二次包装的具体实现过程。

(1) 数据层。在该监管平台中并不是所有的ComboBox控件都能够整合为一个UserControl,只有当查询涉及到的数据库表的结构一致、字段名称相同时，才可以调用包装后的UserControl。

在信息总览模块中,所在区域、公司名称和视频名称这3个查询框均调用了包装整合后的ComboBox,区域信息、公司信息和视频信息对应的数据库表分别为tblRegionInfo、tblDepartmentInfo和tblVideoInfo,因此在3个表设置有相同的属性字段如编号ID、名称、经纬度等,3个表中相同的属性字段见表1所列。

表1　数据库表中相同字段

3个数据库表之间又通过外码互相关联,如视频信息表中的外码所属公司与部门职务信息表关联,表tblDepartmentInfo中的外码所属区域(RegionID)与区域信息表(tblRegionInfo)关联。

通过SelectedItem.Value和GetValue()来连接选择相应数据库表,通过Select OnEvent=“ItemChange”触发事件获取对应的Items内容。

(2) 控制层。在DataComboBox.ascx.cs文件中,编写控制控件的函数,包括定义字段、控件初始化、清空、设置字段值、获取字段值和触发事件等。设定的value值,如控件的坐标、读写性和可编辑性等;函数public int InitCtrl(string name, bool order, string where, bool bDelFlag)实现对控件的初始化,通过数据库拼接语句string sSQL=“select ID,Name from ”+name+“ where ”的执行找到需要操作的数据库表;public string GetValue()获取当前选中的value;public void SetValue(string sValue)设置当前combobox选择项;public event EventHandler SelChange添加事件句柄;调用页面通过激活事件public void ItemChange(Object Sender,EventArgs e)完成事件的传出。

初始化函数InitCtrl()首先编写连接数据库的SQL语句string sSQL=“select ID,Name from ”+name+“ where ”,根据查询到的表的Value和Text新建一个List,然后动态绑定数据源,返回数据的记录数,至此完成对该控件的初始化。

(3) 表示层。在DataComboBox.ascx文件中对控件的外形属性进行设定,不同调用页面显示的ComboBox外观略有不同,所以此处不能将长度固定限制,而是在调用处对Width赋值,实现动态控制长短。

ComboBox原本可以对列表内容进行编辑,但是在系统中不需要这项功能,故将Editable属性值设为false。

具体代码如下:

〈EmptyText=“无建议值” runat=“server” ID=“DataComboBox_cmbBox” StoreID=“DataComboBox_storeInfo” DisplayField=“Text”ValueField=“Value” Editable=“False”〉

在应用程序页面调用这个控件,本文以某矿山在线统一监管平台中单位查询框为例进行介绍说明。

首先将包装过的ComboBox控件嵌入到“InfoView.aspx”这个页面中,但是使用之前必须引用DataComboBox,使之与该用户控件相关联。

〈%@ Register TagPrefix=“UserControl” TagName=“DataComboBox” Src=“/UserControl/DataComboBox.ascx”%〉

文件的后台代码用来实现调用的过程:初始化控件,依据匹配条件,连接与欲显示在此页面列表框的数据相关的数据库表。代码如下:

ReportManage_cmbCompany.InitCtrl(“tblDepartmentInfo”, true, “ParentIndex=1”)。

因为显示的数据是从数据库直接查询得到显示出来的,所以数据库表中值的信息被修改了,那么页面刷新后显示的内容将与数据库表中保持一致,这样即达到及时动态地显示的效果。页面中如果有其他筛选条件,只需在响应事件函数中调用DataComboBox中相应的函数,即可经过SQL语句重新查询显示想要显示的内容。程序运行结果如图4所示。

图4　程序运行结果

至此,完成了ComboBox从二次包装到程序的实际应用的过程,流程如图5所示。

图5　调用流程

3　性能对比

同样实现上述功能,传统方式是直接在页面编写设定ComboBox的属性值,代码如下:

〈ext:ComboBox ID=“ ReportManage_cmbCompany” runat=“server” FieldLabel=“所属单位 ” LabelAlign=“Right” LabelWidth=“70” ForceSelection=“true” TriggerAction=“All” SelectOnFocus=“true”〉

〈Items〉

〈ext:ListItem Value=“0” Text=“龙桥矿业有限公司”/〉

〈ext:ListItem Value=“1” Text=“新中远小岭硫铁矿”/〉

…

〈/Items〉〈/ext:ComboBox〉

这种方式实现这个基础的显示功能还需在JS中编写触发事件,在后台再编写相应的响应查询函数,大概共需要60行代码。包装1个ComboBox大概需要255行代码,实际简单调用只需要5行,总共是260行代码。

单纯从单个代码数量来看,两者相比较而言,二次包装控件调用所需要编写的代码反而较原始方法更加繁多,并没有简化代码,但是这仅仅是针对单个控件调用的情况。随着软件规模的扩大,控件调用次数也会不断增多,代码累积起来情况就会不同,如果需要调用10次,第1种方法因为每次调用都必须全部重写代码,因此需要编写60×10=600行代码;而第2种方法,DataComboBox部分不需要改动,所以代码量是255+5×10=305行,比第1种方式节省了49.2%的代码,随着调用的次数增多,节省的比率也越来越高。2种方法对比结果如图6所示。如果需要修改控件的样式,第1种方式要逐个去修改调用的页面,而第2种方式只要修改UserControl部分就可以了。前面也提到过传统方式的调用item中值是固定的,如果要添加删除也必须程序员后台操作,但是对于后者来说,这种问题是无需担忧的,如图7所示。由图7可以看出对ComboBox的二次包装对于项目开发具有较高的实用价值,提高了工作效率,增强了可读性,降低了开发成本。

图6　2种方法调用对比结果

图7　需要对控件修改时2种调用方式对比

4　结　　论

用户控件是ASP.NET中的组件,是封装到可重用控件中的Web表单,是用来保存网站中许多页面所需要的重用代码块,其适用于页面上的重复元素。将重复元素封装到用户控件中,减少了每页的代码量。用户控件还能够根据应用程序的需要方便地定义控件[10]。将某些应用控件包装为用户控件,节省了代码量,降低了错误率,改进了控件原本的功能，满足了客户需求,对于系统开发来说有着十分重要的意义。本文所提出的方法已经在某矿山在线统一监管平台中有效使用,并取得了很好的效果。

[1]周静,谭亮. 浅谈RIA技术及其发展趋势[J].电子技术与软件工程,2013(10):27-28.

[2]KEVIN M.The essence of effective rich internet application[EB/OL].[2014-12-01].http://download.macromedia.com/pub/solutions/download/business/essence_of_ria.pdf..

[3]田建华.富客户端技术在软件项目中的应用[J].硅谷,2011(22):154.

[4]HU Jingfang,LI Busheng.Design and research of e-commerce Web site based on RIA[C]//2013 Fifth International Conference on.Computational and Information Sciences (ICCIS),2013: 501-503.

[5]冉春玉,刘炼,刘刚.AJAX技术在Web页面开发中的应用[J].软件导刊,2007(4):60-61.

[6]毛冲.基于富客户端技术的Web应用[J].中国新通信, 2013(10):54-55.

[7]赵慧娟,骆解民..NET中User Control与Web Custom Control的辨析[J].科技创新导报,2009(34):211.

[8]王刘杨..NET平台下快速的富客户端AJAX Web应用开发[J].硅谷,2011(17):82-83.

[9]丁桂娟.用户控件和自定义控件的异同[J].黑龙江科技信息, 2009(18):65.

[10]罗军红,韩江洪,张利,等.基于Web Service的多层分布式体系结构[J].合肥工业大学学报(自然科学版),2004,27(1):18-22.

[11]张庆,王浩.基于RIA架构的网络监控系统的研究和实现[J].计算机应用与软件,2012，29(4):163-166.

[12]冯山,王晓勤,钱基德.ASP.NET环境下的查询关键字输入智能提示控件的设计与实现研究[J].四川师范大学学报(自然科学版),2013，36(1):152-158.

(责任编辑张镅)

A Web control secondary packaging method based on Ext.NET

CHEN Hongwan,ZHOU Guoxiang,SHI Lei

(School of Computer and Information, Hefei University of Technology, Hefei 230009, China)

In the process of the development of large-scale information systems, similar functions and operations tend to be repeated. If these similar actions cannot be handled well, a large number of repetitive codes will be made in the system, which is not conducive to the development and expansion of the system. In this paper, the important role of rich internet application(RIA) under B/S architecture in software project development is introduced, and the phenomenon of code reuse in the development process is presented. Then a Web control secondary packaging method based on Ext.NET technology is put forward to improve the efficiency of the system development. The proposed method has been applied effectively in the online unified regulatory platform of a mine.

management information system(MIS); rich internet application(RIA) technology; B/S architecture; Ext.NET control

2015-01-05；

2015-03-18

陈鸿皖(1989-),女,安徽滁州人,合肥工业大学硕士生;

周国祥(1956-),男,安徽合肥人,合肥工业大学教授,硕士生导师.

10.3969/j.issn.1003-5060.2016.08.012

TP317.1

A

1003-5060(2016)08-1066-06