劉 杰，索 靜

（太原工業(yè)學(xué)院，山西太原 030008）

可視化編程VP（Visual Programming）是指借助框圖、流程圖、圖符或各種圖示表達(dá)式來(lái)完成或輔助程序的一種編程方式。可視化編程環(huán)境VPE（Visual Programming Environment），將VP與文本化編程語(yǔ)言相結(jié)合并以圖示化工作方式的CASE工具。本文對(duì).NET平臺(tái)上的可視化Web應(yīng)用程序開發(fā)工具的工作原理進(jìn)行了分析，并介紹了其開發(fā)模式。對(duì)實(shí)現(xiàn)可視化中的諸多關(guān)鍵技術(shù)進(jìn)行了分析，同時(shí)描述了其工作流程，進(jìn)而解釋了其如何實(shí)現(xiàn)Web應(yīng)用程序的可視化開發(fā)。

1 基于事件驅(qū)動(dòng)的開發(fā)模式

傳統(tǒng)的Web應(yīng)用程序是基于線性處理模型的，運(yùn)行過(guò)程按照代碼編寫的順序依次執(zhí)行，基于.net平臺(tái)開發(fā)的Web應(yīng)用程序采用的是事件驅(qū)動(dòng)開發(fā)模式。在這種模式中，由瀏覽器捕獲用戶的操作事件并發(fā)送消息給遠(yuǎn)程Web應(yīng)用程序，并在遠(yuǎn)程端選擇相應(yīng)事件處理函數(shù)進(jìn)行處理［2］，最后將執(zhí)行結(jié)果返回瀏覽器。程序的執(zhí)行過(guò)程由用戶觸發(fā)的事件來(lái)驅(qū)動(dòng)（如圖1），在.Net中它可以為這種開發(fā)模式的Web應(yīng)用程序生成其開發(fā)框架。該框架對(duì)開發(fā)人員屏蔽了服務(wù)器與瀏覽器之間的數(shù)據(jù)通信處理，引入了面向?qū)ο蟮某绦蜷_發(fā)環(huán)境，使得程序員能夠以可視化的方式設(shè)計(jì)頁(yè)面，并以頁(yè)面上各個(gè)交互控件編寫事件處理函數(shù)的形式完成程序的開發(fā)。

圖1 .net平臺(tái)事件驅(qū)動(dòng)Web應(yīng)用程序框圖

2 可視化的Web頁(yè)面設(shè)計(jì)

.NET引入了可視化的WebForm設(shè)計(jì)環(huán)境，并結(jié)合一些比較成熟的“所見即所得”頁(yè)面設(shè)計(jì)工具的方法更好地實(shí)現(xiàn)界面設(shè)計(jì)的可視化。使用該設(shè)計(jì)環(huán)境將常用的窗體和與用戶交互的元素被抽象為控件，以圖標(biāo)的方式集中放置于與開發(fā)環(huán)境的控件工具面板上，設(shè)計(jì)人員以拖放和移動(dòng)圖標(biāo)的形式來(lái)設(shè)計(jì)界面部分，設(shè)計(jì)得到的就是模板文件［1］。在這個(gè)文件中包含有普通的HTML語(yǔ)言代碼和標(biāo)簽元素，例如:＜asp:TextBox id="TextBox1"runat="server"＞密碼＜/asp:TextBox＞表示在頁(yè)面當(dāng)前位置存在一個(gè)名為TextBox1，用于接收用戶在瀏覽器端輸入信息的控件，其中HTML代碼控制頁(yè)面的布局和顯示模板中的靜態(tài)文本，＜asp:..＞標(biāo)簽的元素能夠在程序邏輯代碼中用其id作為對(duì)象名來(lái)引用并顯示程序的輸出。在程序執(zhí)行完畢時(shí)將用輸出結(jié)果替換asp標(biāo)簽元素形成標(biāo)準(zhǔn)的HTML/XML文本并返回給客戶端瀏覽器。

3 界面與程序邏輯相分離

與傳統(tǒng)Web應(yīng)用系統(tǒng)不同，.Net將應(yīng)用系統(tǒng)的界面和程序邏輯部分分離，使得程序的邏輯機(jī)構(gòu)更加明晰，可讀性和可維護(hù)性也大大增強(qiáng)。同時(shí).Net中引入了WebForm的概念，它由兩部分構(gòu)成，一個(gè)是由可視化元素形成模板用于控制頁(yè)面的顯示代碼編寫在后綴為.aspx的文件;另一個(gè)是將處理業(yè)務(wù)邏輯的代碼編寫在.cs（C#代碼）或者.vbx（VB.Net代碼）中。為了關(guān)聯(lián)兩個(gè)文件，在.aspx文件的頭部會(huì)指明用于處理該頁(yè)面的業(yè)務(wù)邏輯的代碼文件名。例如aspx文件的文件頭包含如下代碼:

＜%@Page language="c#"Codebehind="WebForm1.aspx.cs"AutoEventWireup="false"Inherits="WritePaper01.WebForm1"% ＞其中 Codebehind="WebForm1.aspx.cs"指明了用于處理該頁(yè)面的業(yè)務(wù)邏輯的代碼文件為WebForm1.aspx.cs。

當(dāng)程序設(shè)計(jì)人員將頁(yè)面設(shè)計(jì)工具面板上的控件拖動(dòng)到WebForm中時(shí)，該控件對(duì)應(yīng)的外觀屬性的類代碼也隨即生成，同時(shí)在其代碼文件生成對(duì)該對(duì)象的定義［3］。例如開發(fā)人員從控件面板上拖動(dòng)一個(gè)textbox到頁(yè)面上時(shí)在aspx文件中會(huì)生成以下代碼＜asp:TextBox id="TextBox1"runat="server"＞的頁(yè)面代碼，而同時(shí)在.cs文件則生成protected System.Web.UI.WebControls.TextBox TextBox1的程序代碼（定義了一個(gè)名為textbox1的對(duì)象）。

4 事件的捕捉與處理

.NET平臺(tái)采用面向?qū)ο笤O(shè)計(jì)思想通過(guò)事件的響應(yīng)來(lái)完成操作。在瀏覽器端采用Java/VB腳本語(yǔ)言捕捉用戶的輸入，返回＜form＞……＜/form＞標(biāo)簽中頁(yè)面元素，進(jìn)而將本頁(yè)面中所有對(duì)象的值采用post方法提交到服務(wù)器。在有服務(wù)器端返回到客戶端瀏覽器時(shí)，Java腳本捕捉用戶操作并調(diào)用函數(shù)—doPostBack（eventTarget，eventArgument）與服務(wù)器交互，其中隱藏了兩個(gè)頁(yè)面元素:"—EVENTTARGET"用于指明了引發(fā)事件的控件id和"__EVENTARGUMENT"用于指明事件參數(shù)。例如對(duì)于網(wǎng)頁(yè)中的chexkbox有代碼＜input id="CheckBox1"type="checkbox"name="CheckBox1"onclick="—doPostBack（ ＇CheckBox1 ＇，＇）"language="javascript"/＞checkbox的id為CheckBox1，當(dāng)它被單擊時(shí)，事件發(fā)生，__doPostBack函數(shù)就將該控件的id和事件參數(shù)一起提交給服務(wù)器進(jìn)行處理。

5 頁(yè)面狀態(tài)的自動(dòng)保存與恢復(fù)

.NET采用對(duì)頁(yè)面狀態(tài)自動(dòng)進(jìn)行編碼加密、客戶端保存狀態(tài)以及回送后自動(dòng)回復(fù)這一機(jī)制解決了傳統(tǒng)Web應(yīng)用程序服務(wù)器不會(huì)保存用戶之前訪問(wèn)的狀態(tài)信息這一難題。

采用.NET技術(shù)開發(fā)的Web應(yīng)用程序在其返回給客戶端瀏覽器的網(wǎng)頁(yè)中都包含有名為__VIEWSTATE的隱藏頁(yè)面元素。

例如:＜input type="hidden"name="__VIEWSTATE"

value="dDw3MzU1MTQ5MzY7Oz7QLMm2KHUqNvTPn PuRSdwMj/uZbA=="/＞，該元素的值是按照特定格式進(jìn)行編碼和加密的頁(yè)面狀態(tài)信息，記錄當(dāng)前Web頁(yè)面中所有與用戶交互控件（如textbox、checkbox等）的當(dāng)前值。當(dāng)用戶對(duì)當(dāng)前頁(yè)面進(jìn)行繼續(xù)操作并引發(fā)一個(gè)新的事件時(shí)，"__VIEWSTATE"與當(dāng)前用戶新的輸入值被一起以post方法提交給服務(wù)器。服務(wù)端應(yīng)用程序首先根據(jù)"__VIEWSTATE"的值恢復(fù)頁(yè)面的所有用于與用戶交互的對(duì)象的先前狀態(tài)，然后根據(jù)用戶新的輸入和請(qǐng)求調(diào)用應(yīng)用程序的事件處理函數(shù)，之后將當(dāng)前頁(yè)面的所有狀態(tài)信息再次進(jìn)行編碼并與程序的執(zhí)行結(jié)果一起返回給瀏覽器。

6 Web應(yīng)用程序工作流程

服務(wù)器端的Web應(yīng)用程序在接受到瀏覽器的請(qǐng)求后，首先根據(jù)輸入?yún)?shù)viewstate恢復(fù)頁(yè)面狀態(tài)，進(jìn)而根據(jù)事件參數(shù)e的來(lái)源和輸入?yún)?shù)轉(zhuǎn)入執(zhí)行開發(fā)人員寫好的用于處理該事件的業(yè)務(wù)邏輯處理程序，之后按照?qǐng)?zhí)行結(jié)果替換所有的＜asp＞頁(yè)面元素標(biāo)簽，并按照當(dāng)前頁(yè)面狀態(tài)形成新的viewstate，以HTML/XML格式發(fā)送給客戶端瀏覽器，這樣就實(shí)現(xiàn)了類似桌面應(yīng)用程序的事件相應(yīng)處理的模式。

7 結(jié)束語(yǔ)

基于.net平臺(tái)的可視化Web應(yīng)用程序引入了事件驅(qū)動(dòng)的開發(fā)模式，并將界面與代碼進(jìn)行分離，采用頁(yè)面狀態(tài)自動(dòng)保存與恢復(fù)機(jī)制，瀏覽器端用腳本語(yǔ)言捕捉操作事件并自動(dòng)向服務(wù)器進(jìn)行提交等技術(shù)實(shí)現(xiàn)了Web應(yīng)用程序的可視化開發(fā)。該工具的使用改善了編程人員表達(dá)程序邏輯以及理解程序工作的能力，同時(shí)該工具具有簡(jiǎn)單、具體、直觀和反饋及時(shí)等優(yōu)點(diǎn)，大大提高了程序編寫的效率。

［1］Fred Barwell，Richard Blair.PROFESSIONAL VB.NET，WROX，2002.

［2］Matthew Reynolds，Richard Blair etc.，BEGINNING Visual Basic.NET，WROX，2002.

［3］潘愛民.COM原理與應(yīng)用［M］.北京:清華大學(xué)出版社，1999.

［4］劉瑜，王立福，張世琨.軟件框架開發(fā)過(guò)程研究［J］.計(jì)算機(jī)工程與應(yīng)用，2004-40，26-29.