季進南
(中國核動力研究設計院第三研究所,四川成都610041)
?
基于Sllverllght的RIA研究及應用
季進南
(中國核動力研究設計院第三研究所,四川成都610041)
摘要:為了給用戶帶來良好的用戶體驗,Web應用程序進入RIA階段,本文針對豐富的用戶界面和數據模型,對RIA的主要技術Sj1ver1jght進行深入研究,首先針對Sj1ver1jght對象描述語言XAML進行研究,其次提出了一種基于MVC模式的輕量級Sj1ver1jght框架,將該框架應用在高校學生工作管理系統的開發中,使得程序的可維護性和可移植性增強,代碼的復用率及用戶體驗提高,驗證了Sj1ver1jght技術的可行性和巨大潛力。
關鍵詞:用戶體驗;RIA;Sj1ver1jght;XAML;MVC
隨著互聯網技術的興起,計算機應用程序方式已發生改變,基于瀏覽器的應用程序(Browser/Server,B/S)因其易升級和維護、部署成本低等特點,已逐步在各類程序開發中成為優先考慮模式[1]。當人們生活越來越離不開網絡時,在網絡中使用的數據形式也在不斷發生改變,對用戶體驗的需求也就越來越豐富。因為HTML的限制,傳統B/S模式已不能滿足實際需要,為解決這一矛盾,提出了富互聯網應用程序(Rjch InternetApp1jcatjon,RIA)。RIA有很多優點,其中最重要的一點就是它提供了在基于瀏覽器的Web應用程序中使用HTML控件而不能獲得的一些用戶行為。作為RIA的一項重要技術,Sj1ver1jght對用戶體驗得到改善,提高設計者的效率,創造的應用程序可以運行在所有流行的瀏覽器中并且所提供的用戶體驗都是一致的[2]。針對用戶體驗和數據結構,對Sj1ver1jght進行了深入研究,首先研究了Sj1ver1jght對象描述語言XAML,其次提出一種基礎MVC模式的輕量級Sj1ver1jght框架。應用在高校學生工作管理系統開發中,驗證了該技術可以提高用戶體驗及代碼復用率,該技術具有可行性和巨大潛力。
1.1Sllverllght對象描述語言
為構建應用程序用戶界面,微軟公司創建了XAML,其是一種新的描述性語言,英文全稱是eXtensjb1e App1jcatjon Markup Language,中文名為可擴展應用程序標記語言。其為定義和程序邏輯分離的用戶界面提供了擴展和定位的語法,即在一個應用程序開發的過程中,開發人員和設計人員兩個團體的工作可各自進行,不會相互影響,也使得雙方協作更加協調,可提高工作效率。
XAML使得基于.Net Framework 3.0編程模式的用戶界面創建過程變得簡單。開發人員通過使用XAML可所有用戶界面元素以及整個界面進行詳細定制和合理布局。雖均是解析性的語言,相比于HTML,XAML的語法更加嚴謹和明確,且XAML是強類型化的,之所以是強類型化的,是因XAML只有在識別所有的元素和屬性的情況下才可呈現頁面。XAML具有可擴展性,開發人員可通過自定義控件、元素等來擴展XAML。
對于WPF與Sj1ver1jght,XAML具有不同的意義。對于WPF,XAML與Vjsua1 Basjc等編程語言相似,是另外一種程序語言,XAML可做到的,Vjsua1 Basjc也可做到,但Vjsua1 Basjc可以做到的,XAML卻不一定能做到。對于Sj1ver1jght,XAML用來描述構成畫面的結構樹,然后再配合其他語言來操作結構樹,從而實現互動的效果。所以,在Sj1ver1jght中,XAML作用更像是一種擴充[3]。
1.2Sllverllght對象模型

圖1 頁面和Sj1ver1jght內容直接的關系
文檔對象模型(Document Object Mode1,DOM)是一種編程接口,這種編程接口與平臺與語言無關且其還提供了一個結構化的表現以及明確定義的訪問的方法。如圖2所示,Sj1ver1jght對象模型可插入頁面上,通過Sj1ver1jght插件形式表示出來。

圖2 Sj1ver1jght對象模型層次結構
由圖2可知,所謂的Sj1ver1jght對象模型就是由XAML定義并且按照一定層次結構組合而成的內容。而Sj1ver1jght應用程序就是使用這些對象模型來豐富用戶界面。Sj1ver1jght對象分為兩類,分別是實體對象和修飾對象,結構如圖2所示。由圖可得,畫布對象、文本對象、圖形對象、圖片對象以及媒體對象組成實體對象,這些均為可直接用來設計用戶界面的對象。修飾對象則包含了幾何對象、筆刷、變形和動畫。
2.1MVC簡介
模型-視圖-控制器(Mode1-Vjew-Contro11er,MVC)模式把數據顯示與數據處理、程序輸入輸出控制分開,并對不同對象間的通信方式進行描述,大幅提高了軟件的可擴展性、可維護性、靈活性以及封裝性。MVC模式將系統分為3部分,即模型、視圖和控制器。視圖在屏幕上顯示數據;控制器對處理過程進行控制,其將模型和視圖連接起來,本身對信息并不作任何處理且也不輸出信息,只是將用戶的請求轉換成對模型的操作,同時對經過模型處理后的數據通過調用相應的視圖來顯示;模型將用戶數據和處理數據的業務邏輯封裝,展示了當前應用程序的狀態,且可以為多個顯示數據的視圖提供用戶數據狀態的變化[4]。應用程序的核心是模型,圖3展示了3者關系。

圖3 MVC關系圖
在程序開發過程中,MVC模式具有諸多優點,比如:
1)提高代碼重用率。因MVC模式在表示層就將數據與業務規劃分開,所以將代碼重用最大化,使一個模型得到多個視圖共享
2)提高程序的可維護性。因模型與控制器和視圖是分開的,所以數據層和業務規劃較容易更改。MVC模式將程序的3大部分各自獨立,極大的改善了程序的可維護性。
3)對團隊開發有幫助。分工明確以及團隊協作在開發過程中相當重要,有利于開發出高質量產品,MVC模式簡化項目架構,減少了編碼工作量,并可利用工具自動完成部分模型,穩定的控制器一般也由經驗豐富的設計人員完成,需要手動編寫代碼的只有視圖部分。這種模式下對個人能力要求不高,即使中途更換人也不會出大問題,所以這種模式在開發過程中是非常理想的。
同時,MVC模式也有不足,主要體現在:
1)使系統結構和實現更加復雜。對于簡單界面,按照MVC模式會將程序3部件分離,增加結構復雜性,降低工作效率。
2)降低了視圖對模型數據的訪問效率。為獲得足夠顯示數據視圖需要進行多次調用模型才能實現。
3)增加了MVC的理解難度。因MVC原理較為復雜,所以需要花費較多時間去理解,且因模型和視圖的完全分離,這也給運用程序帶來困難[5-8]。
2.2MVC模式在Sllverllght中的實現
ASP.NET為實現MVC模式提供良好環境,視圖的實現可通過在ASPS頁面中對用戶部件進行開發或者繼承母板頁;相應的邏輯功能代碼可實現控制器的功能;模型對應應用系統中的業務部分。業務邏輯、業務規則以及數據訪問層組成模型。
在ASP.NET模式研究的基礎上,基于MVC模式,本文提出一種輕量級Sj1ver1jght框架,結構圖如圖4所示。

圖4 基于MVC模式的Sj1ver1jght框架
2.2.1視圖
1)原理。視圖為用戶交互提供界面,向用戶顯示信息,復雜的Web頁面也可顯示多個內容。在Sj1ver1jght中,視圖由兩部分內容構成:一部分是ASPX頁面提供的控件;另一部分是由XAML定義的控件。
2)實現。良好的架構設計可以減少界面調整時間,即在Sj1ver1jght框架中,不僅需利用ASP.NET的新特性,還需解決Web服務器端控件與XAML定義的控件完美結合這一問題。
2.2.2控制器
1)原理。控制器在模型與視圖之間起連接作用,可根據用戶的請求選擇合適的視圖來顯示數據,同時也可將用戶的輸入映射到模型層中可選擇的操作。在Sj1ver1jght框架中,控制器包含兩部分:一部分是由JavaScrjpt編寫的代碼;另一部分是用托管語言寫的代碼。用戶完成人機交互后,Sj1ver1jght類型的控件進行提交,JavaScrjpt代碼偵聽事件,最后調用托管語言來編寫代碼描述事件。
2)實現。控制器的實現分為兩部分,一部分發生在瀏覽器端,通過與Sj1ver1jght對象支持的時間綁定,觸發JavaScrjpt寫的代碼,并通過Ajax引擎,將人機交互過程的信息傳給托管代碼。托管代碼的任務是對用戶在輸入的信息進行邏輯判斷,且將結果傳遞給模型層。
2.2.3模型
1)原理。模型對象為商業規則和商業數據,單一模型代表了問題域中的某個特定對象,所以模型對系統應用功能和屬性進行封裝,為訪問顯示數據提供操作。模型的構成與具體問題相關,一般包含數據訪問、商務邏輯與規則。
2)實現。在實現過程中,模型層對實體類的操作方法進行定義,最后對訪問數據庫的方法進行定義。
3.1學生工作管理系統框架
如圖5所示,是結合了信息化社會的需求,以高校學生管理部門實際操作流程為基礎的高校學生工作管理系統框架結構。
由圖5可知,該系統核心模塊包括違紀處分、綜合測評、學生黨建和學生資助4部分,相對應的管理部分分別為學生處、組織部和資助中心,而負責的基層部分是每個分院。因此,本系統的用戶分別為上級部門、基層部門和學生。
3.2在發布通知模塊中Sllverllght技術的應用
在實際工作中,對于非正式的通知學生的方式主要有:
1)發短信或打電話,優點是直接便捷,缺點是成本較高;
2)使用第三方軟件,譬如微信、QQ軟件等,優點是操作簡單且成本低,缺點是不方便管理;
3)通過郵件,優點是有針對性,缺點是管理不便;
4)采用傳統通知方式,如通知欄,缺點是針對性弱,并且更改內容太繁瑣。
為了充分利用資源,降低管理成本,采用本文提出的基于MVC模式的Sj1ver1jght技術來傳達通知,該技術不僅加強通知針對性和保密性,同時也改善了用戶體驗。實現該框架分為3部分,即:
1)Vjew Layer的實現。在該框架中,Vjew層具有舉足輕重的作用,其能否實現直接影響到用戶的體驗。本模塊使用三類動畫,分別為開場動畫、消息框動畫和發布通知動畫。
2)Contro11er Layer的實現。Contro11er Layer通過編寫JavaScrjpt函數來控制人機交互,然后在調用托管語言寫的代碼。
3)Mode1 Layer的實現。Mode1 Layer由業務邏輯和數據訪問兩部分組成,其均是通過類作用來實現。
通過對程序性能和用戶體驗的測試,結果表明相比與傳統模式,本文提出的基于MVC模式的Sj1ver1jght框架開發出的系統性能具有明顯優勢。
文中針對豐富的用戶界面和數據模型這兩個RIA的基本要求,提出了一種基于MVC模式的Sj1ver1jght框架,通過將其用于高校管理系統的開發中,驗證了該項技術可增強程序可維護性,對代碼復用率和用戶體驗具有較大的提高,也證明了該技術具有巨大潛力。
參考文獻:
[1]陳洪磊.面向RIA的Web應用程序框架研究[D].西安:西北工業大學,2007.
[2]陳顯軍.基于F1ex的RIA應用與研究[D].成都:電子科技大學,2007.
[3]丁士鋒.Sj1ver1jght——RIA開發技術詳解[M].北京:人民郵電出版社,2008.
[4]孫立泉.DOTNET下MVC架構的實現及應用[D].大連:大連海事學院,2007.
[5]涂婷婷. MVC設計模式在Web開發中的研究與應用[D].成都:西南交通大學,2007.
[6]田新麗,白繩武,董秋鴻.基于MVC模式的地圖控件的設計[J].電子科技,2010,23(6):41-42,45.
[7]王俊芳,李隱峰,王池.基于MVC模式的ThjnkPHP框架研究[J].電子科技,2014,27(4):151-153,158.

圖5 所設計系統框架結構
Research and aPPllcatlon of RIA based on Sllverllght
JI Jjn-nan
(Third Institute of Nuclear Power Institute of China,Chengdu 610041,China)
Abstract:In order to gjve users a good user experjence,Web app1jcatjons go jnto the RIA stage. Ajmjng at rjch user jnterface and data mode1,the paper studjes the majn technjca1 Sj1ver1jght of RIA jn deep. Fjrst1y,we study XAML,whjch js the object descrjptjon 1anguage of Sj1ver1jght. Second1y,a Sj1ver1jght framework based on MVC mode1 js proposed. Thjrd1y,the framework js used jn the deve1opment of the co11ege management system,whjch enhances the program majntajnabj1jty and portabj1jty,jmproves code reuse rate and the user experjence,as we11 as proves the feasjbj1jty and potentja1 of Sj1ver1jght techno1ogy.
Key words:user experjence;RIA;Sj1ver1jght;XAML;MVC
中圖分類號:TN99
文獻標識碼:A
文章編號:1674-6236(2016)07-0049-03
收稿日期:2015-05-20稿件編號:201505181
作者簡介:季進南(1982—),男,四川夾江人,工程師。研究方向:計算機軟件設計開發和核測量。