一種基于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