鄧夢德

【摘要】在遠(yuǎn)程教學(xué)系統(tǒng)中,學(xué)習(xí)者良好的體驗(yàn)?zāi)茱@著提升學(xué)習(xí)效率,而傳統(tǒng)教學(xué)系統(tǒng)是基于HTML的、用戶全方位的體驗(yàn)要求難以得到滿足。Flex將客戶端的設(shè)計從以頁面為中心提升到以組件為中心,改進(jìn)了客戶端程序的設(shè)計,它還能將桌面應(yīng)用程序的用戶體驗(yàn)與傳統(tǒng)Web應(yīng)用的部署靈活性結(jié)合起來。文章就Flex在遠(yuǎn)程教學(xué)系統(tǒng)界面設(shè)計、交互設(shè)計、離線應(yīng)用三方面做了探討。

【關(guān)鍵詞】遠(yuǎn)程教學(xué)系統(tǒng);富因特網(wǎng)應(yīng)用程序(RIA);Flex;離線應(yīng)用

引言

目前,絕大多數(shù)遠(yuǎn)程教學(xué)系統(tǒng)都是基于HTML的,而HTML拋棄了很多重要的UI功能,使得基于HTML的教學(xué)系統(tǒng)可視化特性較差,此外,“請求—響應(yīng)—刷新”模型使得基于HTML的應(yīng)用系統(tǒng)要求多次提取網(wǎng)頁來完成一項(xiàng)事務(wù)處理,從而導(dǎo)致交互速度過慢,影響了用戶體驗(yàn)。隨著Internet速率的提升,用戶不再滿足于傳統(tǒng)的“圖像+文本”的表現(xiàn)形式,越來越希望Web在表現(xiàn)上能夠更智能、更人性化、更具個性化,這一點(diǎn)在遠(yuǎn)程教育領(lǐng)域體現(xiàn)得特別明顯。作為富因特網(wǎng)應(yīng)用程序(RIA)技術(shù)的領(lǐng)航者,Flex采用異步方式和服務(wù)器端通信,它既彌補(bǔ)了傳統(tǒng)B/S結(jié)構(gòu)應(yīng)用系統(tǒng)頁面表現(xiàn)單調(diào)、數(shù)據(jù)處理不智能的缺陷,又解決了C/S結(jié)構(gòu)應(yīng)用系統(tǒng)的難于部署不易維護(hù)和更新的問題。Flex 提供了一系列獨(dú)特的功能, 包括:表現(xiàn)力、高執(zhí)行效率、豐富媒體支持、脫機(jī)支持等,Flex在遠(yuǎn)程教學(xué)系統(tǒng)中的應(yīng)用可以改變遠(yuǎn)程學(xué)習(xí)者與教學(xué)系統(tǒng)的交互方式、改進(jìn)教學(xué)系統(tǒng)界面質(zhì)量、帶來良好的學(xué)習(xí)者體驗(yàn)。

一 Flex在遠(yuǎn)程教學(xué)系統(tǒng)界面設(shè)計中的應(yīng)用

為了實(shí)現(xiàn)對數(shù)據(jù)和應(yīng)用系統(tǒng)的快速訪問,HTML拋棄了一些重要的UI功能,基于HTML的Web 系統(tǒng)不具備C/S模式應(yīng)用程序的豐富數(shù)據(jù)展示效果、用戶界面局限性明顯、可視化特性較差。Flex用規(guī)范的、標(biāo)準(zhǔn)化的MXML描述界面,用ActionScript實(shí)現(xiàn)程序邏輯,實(shí)現(xiàn)了內(nèi)部邏輯與外部界面的相互分離。MXML文件經(jīng)解釋后生成矢量格式的SWF文件,對客戶端環(huán)境無特殊要求,客戶端只需安裝Flash Player即可,基于Flex的應(yīng)用系統(tǒng)部署靈活、易于維護(hù)。

Flex提供了Alert、DateChooser、DividedBox、Hslider等組件,用Flex能實(shí)現(xiàn)可視化特性優(yōu)越的用戶界面,增強(qiáng)用戶的沉浸感。Flex還提供了大量用于數(shù)據(jù)呈現(xiàn)的組件,如ComboBox、List、Tree、DataGrid等,這些組件支持?jǐn)?shù)據(jù)綁定。組件提供了豐富的用戶接口,使得Flex較傳統(tǒng)的HTML應(yīng)用更有優(yōu)勢。

HTML基于“請求—響應(yīng)—刷新”模型,應(yīng)用程序的請求會導(dǎo)致整個頁面信息的提交,會在網(wǎng)絡(luò)中傳輸大量重復(fù)的數(shù)據(jù),頻繁的批量數(shù)據(jù)交互導(dǎo)致較長的等待時間和較重的網(wǎng)絡(luò)負(fù)荷,用戶更高的、全方位的體驗(yàn)要求難以得到滿足。同基于HTML的系統(tǒng)相比,Flex可通過應(yīng)用程序狀態(tài)的切換或使用Accordion容器組件等方法實(shí)現(xiàn)無刷新的快捷界面響應(yīng)。

在教學(xué)系統(tǒng)界面設(shè)計中常采用狀態(tài)切換和組件技術(shù)實(shí)現(xiàn)課程內(nèi)容的切換:

1狀態(tài)法解決方案

根據(jù)遠(yuǎn)程教學(xué)系統(tǒng)功能需要,將界面分成相對獨(dú)立的部分,界面隨用戶的交互動作或系統(tǒng)事件在各個部分之間切換。通過狀態(tài)的應(yīng)用實(shí)現(xiàn)了多頁面的訪問,在頁面切換時無頁面刷新。狀態(tài)的切換可通過鼠標(biāo)單擊事件觸發(fā)以實(shí)現(xiàn)類似超鏈接的效果。圖1是一MXML狀態(tài)定義,在ActionScript代碼中用currentState=index進(jìn)行狀態(tài)的切換。狀態(tài)切換時可以播放組合到一起的一種或多種效果,實(shí)現(xiàn)狀態(tài)切換時的過渡效果。

圖1 狀態(tài)定義示例

2容器法解決方案

Flex提供了多種導(dǎo)航組件,如TabNavigator、Accordion和ViewStack等。這些組件由若干個子容器組成的,某一時刻只有一個子容器是可見的。在ActionScript中可以通過對selectedChild屬性設(shè)置實(shí)現(xiàn)容器的切換,TabNavigator與Accordion則提供了可視化的標(biāo)簽條來切換容器。布局容器的使用能清晰地劃分功能模塊。

在實(shí)際教學(xué)系統(tǒng)開發(fā)時,一般結(jié)合使用狀態(tài)法和容器法來實(shí)現(xiàn)頁面的切換,在具有明顯功能差別的設(shè)計中用狀態(tài)法實(shí)現(xiàn),在同一功能模塊中的切換使用容器法,從而使系統(tǒng)整體框架清晰、給學(xué)習(xí)者提供良好的導(dǎo)航。

二 Flex在遠(yuǎn)程教學(xué)系統(tǒng)交互設(shè)計中的應(yīng)用

Flex提供了大量的用戶交互組件,通過這些封裝完善的組件能夠接受用戶輸入、導(dǎo)航、大量數(shù)據(jù)的批量處理、查詢和瀏覽。這些組件的組合使用能夠提供給用戶豐富的交互方式、多樣化的數(shù)據(jù)展示接口,Flex組件也可以按需要進(jìn)行擴(kuò)展。

Web系統(tǒng)中樹型導(dǎo)航菜單使用頻率較高,傳統(tǒng)B/S系統(tǒng)一般使用Javascript等客戶端技術(shù),菜單結(jié)構(gòu)內(nèi)嵌于腳本中,菜單項(xiàng)不易更新。使用Flex提供的Tree控件,可以將導(dǎo)航菜單數(shù)據(jù)存放在數(shù)據(jù)庫中,查詢數(shù)據(jù)庫后將返回的XML格式數(shù)據(jù)綁定到Tree控件。運(yùn)行效果如圖2所示。

圖2 TREE控件綁定外部XML文件運(yùn)行效果圖

在傳統(tǒng)HTML應(yīng)用中,客戶端數(shù)據(jù)的驗(yàn)證過多地依賴于JavaScript、VBScript等腳本,這種方法實(shí)現(xiàn)起來既繁瑣又容易出現(xiàn)錯誤,并且使得客戶端臃腫、腳本載入時間較長、占用客戶端CPU資源嚴(yán)重、執(zhí)行效率不高。此外,腳本受客戶端設(shè)置的影響,可能不能正常執(zhí)行,致使驗(yàn)證功能不能正常使用。

Flex提供了類似于Asp.net中的驗(yàn)證控件的機(jī)制,可以使用其驗(yàn)證機(jī)制對表單內(nèi)元素進(jìn)行驗(yàn)證。驗(yàn)證類簡化了對用戶輸入內(nèi)容進(jìn)行驗(yàn)證的工作,它們能自動生成相應(yīng)腳本,實(shí)現(xiàn)了交互性和對用戶友好性更加良好的應(yīng)用。驗(yàn)證時Flex能自動維護(hù)控件狀態(tài)、自動定位到未通過驗(yàn)證的項(xiàng)。常用的驗(yàn)證類有StringValidator,NumberValidator,DateValidator,EmailValidator,驗(yàn)證類的使用顯著提升了程序開發(fā)效率、提升了程序的可讀性和可維護(hù)性、增強(qiáng)了程序的交互性。

三 Flex離線應(yīng)用研究

遠(yuǎn)程學(xué)習(xí)者學(xué)習(xí)進(jìn)程通常受制于網(wǎng)絡(luò)環(huán)境,通過在客戶端存儲數(shù)據(jù),Flex應(yīng)用程序能確保遠(yuǎn)程學(xué)習(xí)者在脫機(jī)、低帶寬或網(wǎng)絡(luò)不穩(wěn)定的情況下學(xué)習(xí)進(jìn)程不會中斷。Flex應(yīng)用程序在客戶端把數(shù)據(jù)保存在一個本地數(shù)據(jù)存儲中,當(dāng)網(wǎng)絡(luò)連接斷開時,程序依然可以訪問本地的數(shù)據(jù)存儲,從而用戶可在離線狀態(tài)下對客戶端數(shù)據(jù)進(jìn)行修改,當(dāng)恢復(fù)網(wǎng)絡(luò)連接時再將本地數(shù)據(jù)與服務(wù)器端數(shù)據(jù)同步。

基于Flex的遠(yuǎn)程教學(xué)系統(tǒng),客戶端要求安裝Flash Player虛擬機(jī),在Flash設(shè)置管理器中允許設(shè)置本地存儲容量。數(shù)據(jù)存儲在客戶端可提供內(nèi)容豐富且響應(yīng)迅速的用戶界面,以及強(qiáng)大的客戶端處理能力。數(shù)據(jù)在客戶端的存儲能最大限度地使用本地資源以及將本地資源集成到客戶端應(yīng)用程序,可以使應(yīng)用程序更好、更有效地利用客戶端的計算能力,極大地提高客戶端表現(xiàn)能力與性能、加速網(wǎng)絡(luò)教學(xué)系統(tǒng)。

在Flex應(yīng)用程序中,URLRequest、URLLoader對象能得到當(dāng)前網(wǎng)絡(luò)狀態(tài),當(dāng)應(yīng)用程序加載遠(yuǎn)程數(shù)據(jù)時IOErrorEvent.IO_ERROR事件發(fā)生,表示網(wǎng)絡(luò)中斷;Event.COMPLETE事件發(fā)生,表示網(wǎng)絡(luò)通信狀況良好。在這兩個事件的偵聽器中設(shè)置應(yīng)用程序的狀態(tài)并設(shè)置一邏輯變量標(biāo)識目前的網(wǎng)絡(luò)狀態(tài),在NETWORK_CHANGE事件處理程序中,改變標(biāo)識變量的值。在線狀態(tài)時應(yīng)用程序從服務(wù)器端加載數(shù)據(jù),離線狀態(tài)則從本地加載數(shù)據(jù)。當(dāng)網(wǎng)絡(luò)狀態(tài)變化時,發(fā)生NETWORK_CHANGE事件,在該事件處理程序中實(shí)現(xiàn):

1 設(shè)置應(yīng)用程序的狀態(tài)(currentState);

2 離線加載本地文件,在線加載遠(yuǎn)程文件并保存到本地;

3 如果網(wǎng)絡(luò)狀態(tài)從離線切換到在線時,加載并同步更新遠(yuǎn)程文件。

Flex應(yīng)用程序的離線運(yùn)行能力使用戶能對數(shù)據(jù)進(jìn)行可視化、搜索或排序等復(fù)雜的數(shù)據(jù)操作。在網(wǎng)絡(luò)教學(xué)系統(tǒng)中,服務(wù)器端的數(shù)據(jù)更新頻率低,數(shù)據(jù)在客戶端直接存儲使遠(yuǎn)程學(xué)習(xí)者可使用本地數(shù)據(jù)而不需要連接服務(wù)器重新獲取數(shù)據(jù),從而能脫機(jī)使用數(shù)據(jù),直至網(wǎng)絡(luò)正常再重新連接到服務(wù)器。

四 回顧及展望

Web的發(fā)展經(jīng)歷了以HTML為代表的標(biāo)記語言、以CSS為代表的樣式語言以及以JavaScript為代表的程序設(shè)計語言、以ASP為代表的服務(wù)器端環(huán)境,以Flex為代表的RIA應(yīng)用,Web的表現(xiàn)能力已經(jīng)越來越豐富了。在RIA開發(fā)領(lǐng)域,Flex處于領(lǐng)航者的位置,最新版本的Flex3.0擁有全新的腳本語言ActionScript3.0、擁有豐富的類庫和卓越的運(yùn)行效率,它已經(jīng)受到了越來越多的開發(fā)者關(guān)注。

快速響應(yīng)用戶的請求、減輕服務(wù)器的負(fù)載、平衡應(yīng)用的資源、提供豐富的交互方式已經(jīng)成為了基于Web的遠(yuǎn)程教學(xué)系統(tǒng)的發(fā)展趨勢。Flex致力于實(shí)現(xiàn)瀏覽器、桌面和移動平臺的支持,能支持包括移動學(xué)習(xí)在內(nèi)的多種學(xué)習(xí)模式,能實(shí)現(xiàn)網(wǎng)絡(luò)學(xué)習(xí)評價、智能導(dǎo)航、反饋,Flex在遠(yuǎn)程教學(xué)系統(tǒng)開發(fā)中具有廣泛的應(yīng)用前景。

參考文獻(xiàn)

[1] 袁勤勇.XHTML實(shí)例精解[M].北京:清華大學(xué)出版社,2002:23-31.

[2] 于鵬.網(wǎng)頁設(shè)計語言教程(HTML/CSS)[M].北京: 電子工業(yè)出版社,2003:3-12.

[3] 呂曉鵬.Flex3.0—基于ActionScript3.0實(shí)現(xiàn)[M].北京:人民郵電出版社,2008:5-9.

[4] 武法提.網(wǎng)絡(luò)課程設(shè)計與開發(fā)[M].北京:高等教育出版社,2007:3-9.

[5] 尹增明.ASP.NET WEB應(yīng)用開發(fā)[M].北京:機(jī)械工業(yè)出版社,2008:103-117.

[6] Sandeep Singhal等.網(wǎng)絡(luò)虛擬環(huán)境設(shè)計與實(shí)現(xiàn)[M].北京:電子工業(yè)出版社,2006:12-27.

Research on Flexs Application in the Development of Distance Teaching System

DENG Meng-de

(Institute of Educational Science and Technology, China West Normal University, Nanchong, Sichuan 637002, China)

Abstract:In the distance teaching system, excellent experience could significantly improve the learning efficiency, but most traditional teaching systems are based on HTML, users experience is difficult to be met. Flex brought new pattern for client design, that is: page-centered to component-centered, Flex also could combine the deployment flexibility of B/S model and excellent user experience of C/S model. This article discusses these areas: interface design, interactive design, and offline application.

Keywords: Distance Teaching System; Rich Internet Application; Flex; Offline Application