鄧夢德

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

【關鍵詞】遠程教學系統(tǒng);富因特網(wǎng)應用程序(RIA);Flex;離線應用

引言

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

一 Flex在遠程教學系統(tǒng)界面設計中的應用

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

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

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

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

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

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

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

2容器法解決方案

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

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

二 Flex在遠程教學系統(tǒng)交互設計中的應用

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

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

圖2 TREE控件綁定外部XML文件運行效果圖

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

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

三 Flex離線應用研究

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

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

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

1 設置應用程序的狀態(tài)(currentState);

2 離線加載本地文件,在線加載遠程文件并保存到本地;

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

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

四 回顧及展望

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

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

參考文獻

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

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

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

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

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

[6] Sandeep Singhal等.網(wǎng)絡虛擬環(huán)境設計與實現(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