基于?Flex?的水庫調(diào)度信息發(fā)布系統(tǒng)研發(fā)與實(shí)現(xiàn)

李 琳，李聶貴，于興晗，徐 紅

（1.中國水利水電科學(xué)研究院，北京 100038；2.南京水利科學(xué)研究院，江蘇 南京 210029）

0 引言

水庫調(diào)度信息發(fā)布系統(tǒng)主要用于發(fā)布電廠水庫調(diào)度的相關(guān)信息。系統(tǒng)由服務(wù)器、網(wǎng)絡(luò)、客戶端組成[1]。系統(tǒng)通過網(wǎng)絡(luò)連接服務(wù)器，可以實(shí)時(shí)地將流域站點(diǎn)的雨水量、水位流量、水庫運(yùn)行情況的數(shù)據(jù)發(fā)布出去，也可以進(jìn)行在線洪水預(yù)報(bào)和報(bào)表的計(jì)算。

目前，水庫調(diào)度信息發(fā)布系統(tǒng)已經(jīng)在水利行業(yè)逐漸得到廣泛使用。但是大多水調(diào)信息發(fā)布系統(tǒng)程序開發(fā)仍基于頁面的、服務(wù)器端數(shù)據(jù)傳遞的模式，把網(wǎng)絡(luò)程序的表示層建立于 HTML 頁面之上，功能單一、人機(jī)交互性差且安全性不高。

Flex 技術(shù)[2]是一個(gè)高效、免費(fèi)的開放源框架，可用于構(gòu)建具有表現(xiàn)力的 Web 應(yīng)用程序，它可以滿足用戶更高要求的、全方位的體驗(yàn)要求[3]，并使Web 應(yīng)用程序的 UI（User Interface）層的功能更加強(qiáng)大。Flex 應(yīng)用程序最終編譯成 Flash SWF 文件，可以方便的跨平臺(tái)和瀏覽器使用。

XML[2]是一個(gè)通用的可擴(kuò)展標(biāo)記語言，常用于數(shù)據(jù)的描述、封裝和結(jié)構(gòu)化處理。XML 具有統(tǒng)一的標(biāo)準(zhǔn)語法，語法簡單靈活，可以更加方便和標(biāo)準(zhǔn)地對(duì)數(shù)據(jù)進(jìn)行讀取、傳輸和操作。它使得任何系統(tǒng)和產(chǎn)品所支持的 XML文檔，都具有統(tǒng)一的格式和語法，并具有跨平臺(tái)跨系統(tǒng)的特性。

基于 Flex 和 XML 的優(yōu)勢，采用相關(guān)技術(shù)開發(fā)瀏覽速度快、性能高、展現(xiàn)方式靈活的跨平臺(tái)水庫調(diào)度信息發(fā)布系統(tǒng)已經(jīng)勢在必行。

1 技術(shù)架構(gòu)

水庫調(diào)度信息發(fā)布系統(tǒng)架構(gòu)分為 UI 層、邏輯層和數(shù)據(jù)層[4]，如圖1所示。

圖1 系統(tǒng)總體架構(gòu)

其中：UI 層為客戶端；邏輯層為應(yīng)用服務(wù)器端[5]，這里指 .Net 端；數(shù)據(jù)層為數(shù)據(jù)庫服務(wù)器端，這里指 SQL Server 或 Oracle 數(shù)據(jù)庫服務(wù)器。本系統(tǒng) UI 層開發(fā)采用 Flex 技術(shù)，并通過 XML，Http 與.Net 端交互，.Net 端通過 ODBC，ADODB 等與數(shù)據(jù)庫服務(wù)器端通訊。各層之間開發(fā)完全分離，各個(gè)層之間使用接口函數(shù)，便于不同層次開發(fā)人員之間的合作，也增加了代碼的可重用性[6]。

2 數(shù)據(jù)交互

2.1 數(shù)據(jù)傳輸方式

在 Flex 中，數(shù)據(jù)傳輸方式包括內(nèi)部數(shù)據(jù)、文件流方式、XML 方式傳輸和其他等傳輸方式。

內(nèi)部數(shù)據(jù)傳輸適用于同一文件、類或不同文件間采用賦值方式進(jìn)行傳輸?shù)臄?shù)據(jù)；對(duì)于簡單的文本數(shù)據(jù)，一般采用文件流方式傳輸；對(duì)于 XML 數(shù)據(jù)，一般采用 XML 方式傳輸；對(duì)于復(fù)雜數(shù)據(jù)，如大型數(shù)據(jù)庫中的數(shù)據(jù)，需要通過其他程序輔助數(shù)據(jù)傳輸。

XML 方式的優(yōu)點(diǎn)是簡單小巧、存儲(chǔ)方便、檢索快速。所以，XML 常用于數(shù)據(jù)存儲(chǔ)和交換。依照水文數(shù)據(jù)的特點(diǎn)和要求，本系統(tǒng)采用 XML 方式進(jìn)行數(shù)據(jù)傳輸。

Flex 文件首先通過發(fā)出命令（通常通過 url 中帶參數(shù)傳遞）來請求對(duì)應(yīng)的 XML 文件，依照請求返回XML 結(jié)果集合，得到所需的結(jié)果。傳輸數(shù)據(jù)如圖2所示。

圖2 數(shù)據(jù)傳輸

2.2 與 .Net 的交互

Flex 本身并不支持直接與數(shù)據(jù)庫交互，但可以通過3種間接的通訊方式與數(shù)據(jù)庫交互，分別為 WebService，HttpService 和 Remoting 通訊[7]。HttpService 既可以直接獲取 XML 中的數(shù)據(jù)，還可以通過 JSP，ASP（asp.net）及 PHP 讀取數(shù)據(jù)庫中的數(shù)據(jù)，因此本系統(tǒng)采用 HttpService 方式通過 asp.net 讀取并連接數(shù)據(jù)庫。

在 Flex 端，HttpService 是基于 Http 協(xié)議發(fā)送Post 和 Get 請求外部數(shù)據(jù)，然后通過指定的監(jiān)聽方法來處理響應(yīng)[8]?？梢酝ㄟ^標(biāo)簽實(shí)例化 HttpService 組件。這樣，HttpService 對(duì)象也擁有了自己的 result 和 fault 事件。為2個(gè)事件注冊事件偵聽器，分別接受 mx.event.ResultsEvent 和mx.event.FaultEvent 對(duì)象。訪問 ResultEvent.result 或HttpService.lastResult 屬性可獲得返回?cái)?shù)據(jù)。

在系統(tǒng)實(shí)現(xiàn)過程中，數(shù)據(jù)交換頻繁發(fā)生，因此研制了數(shù)據(jù)交互共用模塊（sendData），用于與 asp.net程序交互所需數(shù)據(jù)，流程如圖3所示。

圖3 數(shù)據(jù)交互共用模塊流程

代碼如下所示：

在 asp.net 應(yīng)用程序中，系統(tǒng)使用一組相關(guān)的類，通過一定的順序來處理客戶端的請求（Request），asp.net 應(yīng)用程序的處理模式可稱之為 Http 處理管道。HttpModule 和 IhttpHandler 就是這個(gè)處理管道上的2個(gè)處理環(huán)節(jié)。IhttpHandler 真正地對(duì)客戶端請求的服務(wù)器頁面做出編譯和執(zhí)行，并將處理過后的信息附加在 Http 請求信息流中再次返回到 HttpModule中。主要流程如圖4所示。

圖4 .Net 端數(shù)據(jù)交互流程

在 Web.con fig 文件[9]中代碼如下所示：

這里，verb 可以是“GET”或“POST”，表示對(duì)Get 或 Post 的請求進(jìn)行處理，對(duì)應(yīng)用從 Flex 端傳過來的參數(shù) format；Path 指明對(duì)相應(yīng)的文件進(jìn)行處理，對(duì)應(yīng)用從 Flex 端傳過來的參數(shù) url。

這種方式的好處是不用建立靜態(tài) .aspx 頁面，當(dāng)請求處理完成后，*.aspx 頁面自動(dòng)消失，這樣可以大大減少系統(tǒng)占用資源和生成靜態(tài)頁面時(shí)間，提高系統(tǒng)效率。

3 UI 層的實(shí)現(xiàn)

系統(tǒng)的 UI 層由 Flex 實(shí)現(xiàn)。Flex 提供了模塊化架構(gòu)，靈活可定制的可視化組件和豐富便捷的圖表組件，提供了視圖的狀態(tài)和動(dòng)畫特效，真正讓 UI 層具有較好的可視性和可操作性。

3.1 模塊化架構(gòu)

Flex 支持應(yīng)用程序的模塊化，分別對(duì)每個(gè)模塊進(jìn)行編譯，每個(gè)模塊都能夠被主程序動(dòng)態(tài)地進(jìn)行加載和卸載，因此運(yùn)行時(shí)并非所有模塊都被加載到主程序中，而是只加載當(dāng)前需要的使用的模塊，從而提高程序執(zhí)行效率，節(jié)省系統(tǒng)資源。Flex 通過ModuleManager 和 ModuleLoader 這2個(gè)ActionScript對(duì)象進(jìn)行模塊化編程的管理和加載控制。

水調(diào)信息化系統(tǒng) UI 層的模塊化架構(gòu)如圖5所示。

圖5 水調(diào)信息化信息發(fā)布系統(tǒng) UI 層架構(gòu)

3.2 圖表組件

Flex 數(shù)據(jù)可視化組件中的 mx.charts 包中，列出了內(nèi)置的9種圖表控件類[2]，水調(diào)信息化系統(tǒng)主要用到的圖形組件如下：

1）雨量柱狀圖。使用 ColumnChart 組件，將選定時(shí)段的測站雨量通過柱狀圖顯示出來，可以顯示多站雨量。

2）水位過程圖。使用 LineChart 組件，將選定時(shí)段的測站水位通過折線圖顯示出來。

3）洪水預(yù)報(bào)分析圖。組合使用 LineChart 和ColumnChart 組件，將所選場次洪水的預(yù)報(bào)流量、校正流量、實(shí)測流量、加降雨流量和雨量顯示出來。

3.3 個(gè)性化組件

Flex 的組件可以分為容器、導(dǎo)航和工具控件3個(gè)基本大類[10]。通過3類控件組合可以自定義生成系統(tǒng)開發(fā)需要的組件。直接拖拽就可以隨意使用到應(yīng)用程序頁面，省去了重復(fù)開發(fā)的麻煩。系統(tǒng)開發(fā)過程中自定義了多種組件，如圖6所示。

圖6 系統(tǒng)自定義組件

在水調(diào)自動(dòng)化信息發(fā)布系統(tǒng)中，流域監(jiān)視頁面中為了將站點(diǎn)的水位、流量和雨量以圖形形式直觀顯示出來，定制了2個(gè)組件：分別為 ChartWindow1及 ChartWindow2組件。ChartWindow1和ChartWindow2通過使用 LineChart，ColumnChart，TextInput 組件及其后臺(tái)頁面的編程實(shí)現(xiàn)顯示所選站點(diǎn)在所選時(shí)段內(nèi)的水位、流量的過程和雨量累積的可能。定制的組件可以重復(fù)使用，并可以方便靈活地應(yīng)用于其他信息發(fā)布系統(tǒng)中。

4 結(jié)語

應(yīng)用 Flex 和 XML 開發(fā)水調(diào)自動(dòng)化信息發(fā)布系統(tǒng)，主要有以下幾個(gè)優(yōu)點(diǎn)：1）系統(tǒng)的模塊化設(shè)計(jì)結(jié)構(gòu)，有效提高了系統(tǒng)開發(fā)部署效率；2）實(shí)現(xiàn)了跨平臺(tái)和跨瀏覽器運(yùn)行[2]；3）頁面設(shè)計(jì)更方便靈活，用戶體驗(yàn)有很大改善。

目前，水調(diào)自動(dòng)化信息發(fā)布系統(tǒng)除了水務(wù)報(bào)表子模塊外，其他子模塊均可以通過簡單配置適用于電廠。各模塊可以靈活配置，也可以個(gè)性化定制，基本滿足單個(gè)電廠的水調(diào)信息發(fā)布需求。目前該系統(tǒng)已經(jīng)在安康電站、張家界水電廠等多個(gè)電廠投入運(yùn)行，運(yùn)行狀況良好。經(jīng)過現(xiàn)場運(yùn)行測試，客戶反應(yīng)良好，該系統(tǒng)在防汛期間發(fā)揮了重要作用。

[1] 陳森林，高仕春.水電站水庫運(yùn)行與調(diào)度[M].北京：中國電力出版社，2008: 176.

[2] 楊占坡，楊銘.Flex3RIA 開發(fā)詳解與精深實(shí)踐[M].北京：清華大學(xué)出版社，2009: 5-183.

[3] 魏志軍.淺析 RIA-Flex 技術(shù)在 Web 應(yīng)用開發(fā)中的應(yīng)用[J].信息系統(tǒng)工程，2011（3）: 52.

[4] 朱付保，郭倩倩，楊金梅.基于 Flex 的應(yīng)急網(wǎng)絡(luò)地理信息系統(tǒng)架構(gòu)的設(shè)計(jì)與實(shí)現(xiàn)[J].鄭州輕工業(yè)學(xué)院學(xué)報(bào)：自然科學(xué)版，2012（3）: 21.

[5] 季永峰，李志.ASP.NET 辦公自動(dòng)化系統(tǒng)開發(fā)實(shí)例導(dǎo)航[M].北京：人民郵電出版社，2004: 3.

[6] 季永峰.專家門診—ASP.NET 開發(fā)答疑200問[M].北京：人民郵電出版社，2005: 19.

[7] 沈繼輝，張宏軍，陳剛，等.基于 Flex 和 J2EE 架構(gòu)的數(shù)據(jù)發(fā)布系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].軟件導(dǎo)刊，2011（10）: 146.

[8] Tariq Ahmed,Jon Hirschi.Flex3實(shí)戰(zhàn)[M].北京：清華大學(xué)出版社，2010: 290.

[9] 明日科技，房大偉，龐婭娟，等.ASP.NET 開發(fā)典型模塊大全[M].北京：人民郵電出版社，2010: 50.

[10] 董龍飛，肖娜.Adobe Flex 大師之路[M].北京：電子工業(yè)出版社，2010: 11-126.