基于MVVM模式的水資源公報生成系統(tǒng)設計與開發(fā)

宋 杰，陳明明，吳 勇

（安徽大學 計算機科學與技術學院， 安徽 合肥 230601）

基于MVVM模式的水資源公報生成系統(tǒng)設計與開發(fā)

宋 杰，陳明明，吳 勇

（安徽大學 計算機科學與技術學院， 安徽 合肥 230601）

為解決水資源公報的生成這一現(xiàn)實問題，文中應用了一種新的設計模式--MVVM，提出了一套基于MVVM模式的系統(tǒng)開發(fā)方案.介紹了MVVM模式設計思想，以實際項目為例，給出了具體的實現(xiàn).實例表明，將MVVM模式應用于系統(tǒng)開發(fā)，可以成功地將數(shù)據(jù)、表示和業(yè)務邏輯分離，用戶界面設計師和應用程序開發(fā)者可以并行工作，從而提高系統(tǒng)的可維護性及開發(fā)效率，使系統(tǒng)具有結構清晰、可擴展、易測試的特點.

WPF；MVVM；數(shù)據(jù)綁定

目前，安徽省防汛抗旱指揮系統(tǒng)、水雨情監(jiān)測系統(tǒng)等一系列水利信息化工程都已經(jīng)全面啟動，有的已初步建成投入使用，并在相關業(yè)務應用中發(fā)揮了重要作用.但是，由于需要大量的統(tǒng)計以及計算，作為水資源情況的概覽——水資源公報的生成一直是水資源管理部門的難題.現(xiàn)在，水雨情等數(shù)據(jù)庫已經(jīng)建成投入使用，計算機軟件開發(fā)技術日益成熟，水資源公報生成系統(tǒng)設計與開發(fā)也就被提上日程.盡快開展安徽省水資源公報生成系統(tǒng)建設是實現(xiàn)全面落實水利信息化建設總體部署的現(xiàn)實需要.

本文提出了一套結合了WPF和MVVM等技術的水資源公報生成系統(tǒng)設計與開發(fā).文章以下部分將論述MVVM模式和本系統(tǒng)的設計、實現(xiàn).

1 WPF簡介

WPF(Windows Presentation Foundation)是微軟推出的新一代顯示系統(tǒng)，運行在.NET Framework 3.0及以上版本，用于生成給用戶帶來震撼視覺體驗的 Windows客戶端應用程序和瀏覽器承載的應用程序（見圖1）.WPF的核心是一個與分辨率無關且基于向量的呈現(xiàn)引擎.WPF是 Microsoft.NET Framework的子集 ，它使用 Extensible Application Markup Language(XAML)標記語言，XAML是基于 XML的標記語言，實現(xiàn)應用程序外觀，同時又用托管語言（例如 C#或 VB）實現(xiàn)其行為代碼[1].這種方式是界面描述與程序代碼的分離，降低了耦合度，提高了開發(fā)效率，而且可以使用多種工具開發(fā)XAML外觀.WPF在多媒體服務處理中，幾乎涵蓋了所有的媒體類型：DirectX3D效果、硬件加速，同時在動畫處理上也不遜色于 Adobe Flash，WPF使用的 ClearType技術，可以利用硬件加速來提高性能，以減少 CPU負載和系統(tǒng)內(nèi)存需求.通過使用像素著色器和圖形卡的視頻內(nèi)存，ClearType可以更快的呈現(xiàn)文本.當使用動畫時，此優(yōu)勢更為明顯.

圖1 WPF核心組件

2 MVVM 簡介

MVVM（Model-View-ViewModel）框架是MVP（Model -View-Presenter）模式與WPF結合產(chǎn)生的一種新型架構框架，它立足于原有 MVP框架并且把 WPF的數(shù)據(jù)綁定技術與命令綁定技術等新特性揉合進去，以應對客戶日益復雜的需求變化[2-4]（見圖2）.

圖2 MVVM架構圖

MVVM模式的推出則徹底解放了 View層，它使用 WPF特有的綁定技術，使用簡單的 XAML綁定屬性就能夠將ViewModel層的數(shù)據(jù)與命令雙向連接到 View層，如圖 3.這樣便使得應用程序構建 UI非常的容易[5].

圖3 View、ViewModel和 Model的交互圖

以下因素是 MVVM模式實現(xiàn)的重要條件:

數(shù)據(jù)綁定機制.數(shù)據(jù)綁定機制保障了層次之間的通信.通過 View中用 XAML描述的綁定語句和數(shù)據(jù)上下文語句建立 View層和 ViewModel層的聯(lián)系，綁定系統(tǒng)將會構建和實現(xiàn) View層和 ViewModel層的通信[6].

命令(Command).按照 MVVM模式的設計原則，View層中不應該包含業(yè)務邏輯，因此每一個 View類的后臺代碼文件中，除了類構造器中樣板代碼 InitializeComponent以外，基本沒有什么處理事件的方法.但當用戶與 View對象上的控件交互，比如點擊 Button控件時，程序要能夠處理和滿足用戶需求.這些控件功能實現(xiàn)的保證歸功于建立于 View類中控件(例如 Hyperlink，Button，MenuItem)上 Command屬性的綁定.

3 實現(xiàn)及示例應用

3.1 實現(xiàn)及示例應用

本系統(tǒng)前臺界面采用 WPF編程實現(xiàn),采用了.NET Framework 4.0平臺架構.界面設計應用兩種工具:微軟的Expression Blend 4(以下簡稱 EB4)和 Visual Studio 2010.其中 EB4主要負責界面設計,包括控件的布局,背景色,界面的樣式及自定義控件等,有助于設計出更加漂亮的界面與動畫;Visual Studio 2010主要完成界面上按鈕的響應及界面之間的跳轉,完成系統(tǒng)與用戶之間的信息交互，如圖 4、5.

圖4 公報生成系統(tǒng)工程結構圖

圖5 公報生成系統(tǒng)數(shù)據(jù)導入界面

本系統(tǒng)主要分為數(shù)據(jù)導入，數(shù)據(jù)查看與修改，公報輸出（如圖 6）三個部分.其中數(shù)據(jù)庫使用的是 MICROSOFT SQL SERVER 2008，公報輸出是使用插件 ASPOSE.WORDS，這是一款對 WORD操作性能極佳的插件，提供的方法多且全. MVVM框架使用的是 MVVMLight，這是一個輕量級的框架，相比微軟提供的 Prism而言，MVVMLight專注于 MVVM的實現(xiàn)，所以更加靈活[7].

圖6 公報生成系統(tǒng)生成界面

3.2 使用 MVVM模式的幾大好處

（1）低耦合.View和 Model是相互獨立的.

（2）可重用性.一個 ViewModel可以綁定到多個 View上.

（3）獨立開發(fā).開發(fā)團隊可以關注創(chuàng)建健壯的 ViewModel類，而設計團隊可以關注設計界面友好的 View.要融合兩個團隊的輸出，只需要在 View的 XAML上進行正確的綁定即可.

（4）可測試性.由于模塊與模塊之間的聯(lián)系少了，便于將模塊獨立出來，放入測試環(huán)境進行各種測試.

4 結束語

MVVM模式是隨著微軟.Net Framework以及 WPF的發(fā)展而來的，因此它充分利用了 WPF的 XAML和 Data Binding的特性，使得系統(tǒng)體現(xiàn)了“高內(nèi)聚、低耦合”的原則.應用結果表明，MVVM模式很好地將數(shù)據(jù)、表示和業(yè)務邏輯分離開來，使得在開發(fā)過程中設計師和代碼編寫員中可以很好地并行工作，有效地提高了系統(tǒng)的可維護性及開發(fā)效率，值得應用和推廣.

〔1〕Moliliang．WPF_ 百 度 百 科 ［EB/OL］．2008．http://baike. baidu.com/view/292311.htm.

〔2〕Li Changping，Peng Guojun．Chaos in Chen’s system with afractional order ［J］．Chaos， solitons and fractals，2004，22(2):443 － 450．

〔3〕陳明，李猛坤，張強．一種基于擴展 MVVM 模式的 SaaS面向 服務計算 模 型 ［J］．微電子學 與 計算機，2010，27(8)：27－30．

〔4〕Building Enterprise Applications with Windows(R)Presentation Foundation and the Model View ViewModel Pattern-New from Microsoft Press.Targeted News Service(Mar 23,2011),p.n/a.2011.

〔5〕程國雄，胡世湖．數(shù)字化圖書及英語交互學 習 RIA 平 臺的研究［J］．計算機工程與設計，2010，31(13)：3103-3107.

〔6〕J.Sm ith."WPF Apps With The Model-View-View-Model Design Pattern,"in MSDN Magazine,Feb. 2009.

〔7〕Laurent Bugnion．MVVM Light Toolkit［EB/OL］．2009．http://galasoft.ch/mvvm/.

TP311

A

1673-260X（2014）08-0009-02