基于UC客戶端的MVVM應(yīng)用與研究

呂磊 楊雪 朱禮鵬 謝俊虎 金元

（1 國網(wǎng)眉山供電公司，四川眉山 511402）（2 國網(wǎng)洪雅供電有限責任公司，四川成都 620365）

基于UC客戶端的MVVM應(yīng)用與研究

呂磊1楊雪1朱禮鵬1謝俊虎1金元2

（1 國網(wǎng)眉山供電公司，四川眉山 511402）（2 國網(wǎng)洪雅供電有限責任公司，四川成都 620365）

針對統(tǒng)一通信客戶端軟件的界面控制邏輯和通信業(yè)務(wù)邏輯存在的耦合問題，通過分析MVVM的模式結(jié)構(gòu)和工作原理，提出了應(yīng)用MVVM模式構(gòu)建統(tǒng)一通信客戶端軟件的設(shè)計思路和解決方法，以實現(xiàn)業(yè)務(wù)邏輯和界面間的松耦合。重點分析了MVVM的模型、視圖、視圖模型的三層架構(gòu)，以及數(shù)據(jù)綁定和命令機制等特性；在對語音業(yè)務(wù)流程分析的基礎(chǔ)上，應(yīng)用MVVM模式進行了實現(xiàn)，對各層的實現(xiàn)做了解析和說明。并討論了如何利用視圖模型進行單元測試。

MVVM ViewModel統(tǒng)一通信WPF數(shù)據(jù)綁定

1 引言

為了支持各種通信業(yè)務(wù)，統(tǒng)一通信（Unified Communication,UC）客戶端往往將業(yè)務(wù)封裝成為不同的服務(wù)，通過訂閱在通信過程中產(chǎn)生的各種事件完成數(shù)據(jù)處理和控制邏輯，同時將結(jié)果反饋給用戶界面（User Interface,UI）。眾多分散的控制和事件處理邏輯，導致了用戶界面與業(yè)務(wù)邏輯間具有較強的耦合性，用戶界面的呈現(xiàn)邏輯復雜且難以維護。尤其是當用戶界面進行重構(gòu)或修改時，往往需要對程序進行多處修改，限制了系統(tǒng)的可維護性和可擴展性。

隨著微軟WPF(Windows Presentation Foundation)技術(shù)的出現(xiàn)，其革命性的創(chuàng)建軟件方式和全新的Windows圖形用戶界面技術(shù)，使其越來越成為主流的開發(fā)選擇[1,2]。同時，MVVM模式（Model View ViewModel,MVVM）利用WPF的新特性和對界面的封裝，更加徹底地實現(xiàn)了業(yè)務(wù)邏輯和界面的分離，能夠很好解決統(tǒng)一通信系統(tǒng)客戶端的復雜UI邏輯的問題。

2 MVVM模式分析

2.1 MVVM的發(fā)展

從出現(xiàn)用戶界面開始，就出現(xiàn)了與之相關(guān)的設(shè)計模式，目標是實現(xiàn)界面和業(yè)務(wù)間的松耦合，使設(shè)計人員專注于設(shè)計良好的界面，開發(fā)人員專注于業(yè)務(wù)邏輯的實現(xiàn)。較早出現(xiàn)的MVP模式[3]（Model View Presenter,MVP）目前已被廣泛使用到UI開發(fā)平臺上，由模型Model提供數(shù)據(jù)，視圖View負責顯示，展示器Presenter負責邏輯處理。由于展示器包含了對視圖的渲染，二者進行頻繁地交互，使得展示器與特定的視圖的聯(lián)系過于緊密，一旦視圖變更，那么展示器也往往需要變更。

2004年，Martin Fowler提出了PM模式（Presentation Model，PM），該模式在MVP基礎(chǔ)上分離了視圖中的動作和狀態(tài)，并通過對視圖的抽象創(chuàng)建表示模型，使視圖僅僅成為表示模型的一個呈現(xiàn)。但是，該模式的表示模型負責視圖的狀態(tài)更新和同步，導致作為表示模型的類比較龐大和復雜，較難維護。

2005年，John Gossman在MVP和PM的基礎(chǔ)上提出了MVVM模式[4,5]。與MVP中的展示器Presenter不同，MVVM中的視圖模型ViewModel并不需要對視圖的引用，也不需要維護視圖與視圖模型的交互。而MVVM與PM不同之處在于，雖然都對視圖做了抽象，但Fowler提出的PM是與UI平臺無關(guān)的抽象，而MVVM是利用WPF的核心特性（數(shù)據(jù)綁定和命令機制）進行了簡化，是專門針對WPF和Silverlight平臺[6]提出的。在MVVM模式中，視圖View不知道模型Model的存在，模型Model也不知道視圖模型ViewModel和視圖View的存在，充分實現(xiàn)了界面與業(yè)務(wù)邏輯的分離。

視圖模型ViewModel是MVVM模式的核心內(nèi)容，連接了模型Model和視圖View，實現(xiàn)數(shù)據(jù)與呈現(xiàn)的同步，并執(zhí)行來自視圖的動作。視圖模型通過對視圖的抽象，以數(shù)據(jù)屬性的形式向視圖提供必需的數(shù)據(jù)，以命令屬性的形式向視圖提供執(zhí)行的操作。而視圖模型的數(shù)據(jù)和命令屬性，可以認為是對模型的數(shù)據(jù)和業(yè)務(wù)的再次封裝，從而實現(xiàn)了模型和視圖之間的松耦合。

總之，在MVVM模式中視圖僅需考慮良好的數(shù)據(jù)呈現(xiàn)和友好的交互方式；模型則專注于建立數(shù)據(jù)和業(yè)務(wù)模型，實現(xiàn)業(yè)務(wù)邏輯；視圖模型則承上啟下，實現(xiàn)了簡單有效的數(shù)據(jù)同步以及靈活的命令操作。

3 MVVM工作原理

2.2 MVVM模式結(jié)構(gòu)

實現(xiàn)MVVM模式的關(guān)鍵是利用了WPF的2個重要特性數(shù)據(jù)綁定以及命令機制。

優(yōu)數(shù)據(jù)綁定

數(shù)據(jù)綁定是在用戶界面和業(yè)務(wù)數(shù)據(jù)之間建立連接的過程，而進行數(shù)據(jù)綁定的關(guān)鍵是使用Binding對象，該對象將源屬性和目標屬性粘在一起，并在兩者間建立了合適的通信機制。只需要進行一次綁定，那么在清除綁定前，就會由這個綁定對象負責所有的同步工作，如圖2所示。

MVVM模式由模型（Model）、視圖（View）和視圖模型（ViewModel）三部分組成，其體系結(jié)構(gòu)如圖1所示。

模型Model通過建立數(shù)據(jù)和業(yè)務(wù)模型，負責系統(tǒng)中的核心數(shù)據(jù)和業(yè)務(wù)處理邏輯。通常該層下面還包括了一個數(shù)據(jù)訪問層，負責完成對底層數(shù)據(jù)訪問的封裝，如對數(shù)據(jù)庫、數(shù)據(jù)文件的操作等。

圖1 MVVM模式體系結(jié)構(gòu)

視圖View是系統(tǒng)與用戶的圖形接口，即交互界面，在WPF中表現(xiàn)為XAML文件。在視圖上綁定視圖模型的特定屬性，實現(xiàn)數(shù)據(jù)同步和命令響應(yīng)，這些屬性是在視圖模型中暴露的模型的數(shù)據(jù)和業(yè)務(wù)。視圖和視圖模型屬性間的綁定是通過設(shè)置視圖模型對象到視圖的DataContext屬性實現(xiàn)的。如果視圖模型中的屬性值發(fā)生變化，新值通過綁定對象自動傳播給視圖。當用戶在界面上點擊按鈕時，一個位于視圖模型上的Command被執(zhí)行請求的動作。

圖2 屬性間的綁定

目標屬性必須是依賴屬性，利用內(nèi)建的傳遞變更通知能力實現(xiàn)更新時自動通知源屬性，在WPF的UI控件中大部分的屬性為依賴屬性。源屬性需要實現(xiàn)INotifyPropertyChanged接口來通知更新目標屬性，從而實現(xiàn)數(shù)據(jù)同步。數(shù)據(jù)綁定使得屬性間的數(shù)據(jù)同步更新變得異常簡單，僅需要在XAML文件中將源屬性綁定到對應(yīng)的控件屬性上即可。

悠命令機制

只使用數(shù)據(jù)綁定，還無法做到用戶界面的友好交互，因而，需要WPF提供的內(nèi)建的命令機制支持。命令表示的是與用戶界面分離的動作，相對于控件的事件，更為抽象和松耦合。將實現(xiàn)了ICommand接口的命令屬性綁定到視圖中控件的Command屬性上，當控件的命令被觸發(fā)時，命令屬性所表示的操作將被執(zhí)行；當命令屬性對應(yīng)的操作失效時，就會禁用該控件，從而自動實現(xiàn)了命令屬性與控件狀態(tài)的同步。

4 MVVM模式的應(yīng)用

在統(tǒng)一通信系統(tǒng)的客戶端，存在著眾多分散的控制和事件處理邏輯，對于用戶界面的顯示和控制邏輯也相對更復雜。為此，使用MVVM模式構(gòu)建統(tǒng)一通信系統(tǒng)客戶端可以大大簡化對界面的呈現(xiàn)控制，避免將界面呈現(xiàn)控制代碼嵌入到通信業(yè)務(wù)邏輯中。下面以語音通信為例，分析MVVM模式的應(yīng)用。

4.1 流程分析

統(tǒng)一通信的客戶端既可以作為語音呼叫者，也可以作為被呼叫者。從一方發(fā)起語音呼叫開始，再到語音通話結(jié)束，在整個呼叫和通話過程中接收不同命令，呈現(xiàn)出不同的呼叫流程和通話狀態(tài)。以發(fā)送語音呼叫為例，其流程如圖3所示。在發(fā)送出語音呼叫后，還有可能取消呼叫命令；在判斷是否建立通話時，還需要判斷是否接聽、拒接或呼叫超時；在通話中還可能出現(xiàn)保持通話以及恢復通話的命令；在通話完成后還要結(jié)束通話。

圖3 語音呼叫流程

4.2 應(yīng)用設(shè)計

對語音呼叫流程進行分析，從呼叫開始到整個過程結(jié)束，包括呼叫者、被呼叫者、語音通話等數(shù)據(jù)模型；發(fā)送語音呼叫、取消語音呼叫、保持通話、恢復通話、結(jié)束通話等命令；對于界面呈現(xiàn)包括呼叫者身份信息、被呼叫者身份信息、語音通話狀態(tài)等。使用MVVM模式實現(xiàn)該業(yè)務(wù)，其構(gòu)造的類圖如圖4所示，圖中僅列出了關(guān)鍵類、屬性和操作。

在類圖中可以清晰看出MVVM模式的結(jié)構(gòu)，視圖類AudioSessionView、視圖模型類AudioSessionViewModel以及模型類AudioSession。視圖AudioSessionView對應(yīng)著窗口文件AudioSessionView.xaml，即使用XAML描述的界面，只需要在初始化時完成對AudioSessionViewModel的引用，并在XAML文件中進行數(shù)據(jù)和命令綁定。視圖模型AudioSessionViewModel引用了AudioSession對象，并將暴露給視圖的數(shù)據(jù)和命令封裝為屬性，如CallerDisplayName、CalleeDisplayName、DialCallCommand、HangupCommand等，作為視圖模型層還可以引用多個模型對象，以封裝不同的數(shù)據(jù)和業(yè)務(wù)邏輯。模型AudioSession是基礎(chǔ)的數(shù)據(jù)模型，包含了呼叫者AudiaoCaller和被呼叫者AudioCallee，同時包含了業(yè)務(wù)處理邏輯MakeCall、HangupCall等，可由視圖模型完成調(diào)用。

圖4 語音呼叫類圖

4.3 關(guān)鍵實現(xiàn)說明

在實現(xiàn)MVVM模式時必須滿足以下條件，才能進行正確的數(shù)據(jù)同步更新和命令響應(yīng)。

①視圖模型必須實現(xiàn)INotifyPropertyChanged接口，該接口含有一個PropertyChanged事件。AudioSessionViewModel通過父類實現(xiàn)INotifyPropertyChanged接口，并提供觸發(fā)事件的方法OnPropertyChanged；

②在視圖模型AudioSessionViewModel中封裝數(shù)據(jù)屬性時，在set方法中調(diào)用OnPropertyChanged方法，并傳入正確屬性名稱；

③在視圖模型AudioSessionViewModel中封裝命令屬性時，必須返回ICommand對象；在RelayCommand類中實現(xiàn)ICommand接口，AudioSessionViewModel的命令屬性僅需要生成和返回RelayCommand對象，并通過其構(gòu)造函數(shù)傳遞命令執(zhí)行的代理方法；

④在視圖AudioSessionView中對需要控制顯示的控件綁定數(shù)據(jù)屬性；

⑤在視圖AudioSessionView中對需要響應(yīng)命令的控件綁定命令屬性。

5 利用ViewModel實現(xiàn)單元測試

MVVM模式不僅提供了界面和業(yè)務(wù)邏輯的分離，它的視圖模型ViewModel也非常易于進行單元測試。在使用MVVM模式開發(fā)WPF程序時，整個應(yīng)用程序的交互邏輯在一組ViewModel類中，并且不依賴任何UI對象，通?？梢圆挥每紤]界面是否已經(jīng)實現(xiàn)，就可以完成單元測試。利用Visual Studio提供的單元測試機制，可以輕松編寫測試程序，自動執(zhí)行完成單元測試，從而提高了開發(fā)和測試的效率。

6 結(jié)束語

在UC系統(tǒng)客戶端應(yīng)用MVVM模式，可以使開發(fā)人員專注于關(guān)鍵的業(yè)務(wù)實現(xiàn)，而不用關(guān)心繁雜的界面邏輯，提高了程序的可測試性和可維護性，充分體現(xiàn)了軟件設(shè)計“高內(nèi)聚，低耦合”的原則。但是，由于MVVM模式過渡依賴WPF的特性，使它的應(yīng)用范圍受到了嚴格的限制。盡管如此，在合適的場景下應(yīng)用MVVM模式，將最大程度地提升軟件的質(zhì)量和擴展性。

[1]琚彬.基于WPF平臺的自定義控件開發(fā)[D].西安電子科技大學,2008.

[2]徐滔.WPF控件設(shè)計綜述[J].現(xiàn)代計算機(專業(yè)版),2009(7): 102-105.

[3]王建平.MVC&MVP集成模式在RIA開發(fā)中的應(yīng)用[J].軟件導刊,2009(7):115-117.

[4]劉立.MVVM模式分析與應(yīng)用[J].微型電腦應(yīng)用,2012(12): 57-60.

[5]李猛坤,陳明.一種基于擴展MVVM模式的面向服務(wù)軟構(gòu)件模型[J].科學技術(shù)與工程,2011(10):2349-2352.

[6]李龍澍,華驍飛.Silverlight下的MVVM模式的應(yīng)用[J].計算機技術(shù)與發(fā)展,2013(12):203-207.

Application and Research on MVVM Based on UC Client

LV Lei1,YANG Xue2,ZHU Li-peng1,XIE Jun-hu1,JIN Yuan2
(1 State Grid Meishan Power Supply Company,Meishan Sichuan 511402,China; 2 State Grid Hongya Power Supply Company,Chengdu Sichuan 620365,China)

Aiming at the coupling problem in the interface control logic and communication service logic of UC client software,the design ideas and solutions for constructing UC client software by MVVM mode are presented on the basis of analyzing the mode structure and operating principle of MVVM,so as to implement the loose coupling between service logic and interface.The features of MVVM such as three-layer architecture-model,view and view model,as well as data binding and command mechanism are analyzed in detail;on the basis of analyzing voice service flow,the implantation is achieved by MVVM mode,and the analysis and explanations for all layers are made.The solution of unit test by using view model is discussed.

MVVM;View Model;UC;WPF;data binding

TP311.1

A

1008-1739（2015）05-55-4

定稿日期：2015-02-12