基于RIA平臺的數(shù)據(jù)結(jié)構(gòu)多媒體課件的設(shè)計

謝運(yùn)佳+趙劍冬

摘要：RIA兼有B/S結(jié)構(gòu)的靈活性和C/S結(jié)構(gòu)的強(qiáng)交互性，是未來多媒體課件設(shè)計的一個趨勢。本文結(jié)合“數(shù)據(jù)結(jié)構(gòu)二叉樹”一節(jié)的內(nèi)容，論述如何使用FLEX技術(shù)開發(fā)RIA平臺下的多媒體課件，并針對其中的技術(shù)難點(diǎn)提出相應(yīng)的解決方案，希望能夠?yàn)閺V大RIA多媒體課件制作者提供一個參考和借鑒的案例。

關(guān)鍵詞：富互聯(lián)網(wǎng)應(yīng)用；多媒體課件；FLEX；二叉樹

中圖分類號：G434 文獻(xiàn)標(biāo)識碼：A 論文編號：1674-2117（2017）12-0069-03

● 前言

RIA（Rich Internet Applications）是指富互聯(lián)網(wǎng)應(yīng)用，它將桌面應(yīng)用程序的強(qiáng)交互性與傳統(tǒng)Web應(yīng)用的靈活性結(jié)合起來，為用戶帶來全新的體驗(yàn)。目前，市場上RIA的技術(shù)平臺主要有Flex、XUL、Ajax等。其中，由于Flex有強(qiáng)大的Adobe公司支持，再加上Flash Player播放器的廣泛使用，因此它在RIA市場占據(jù)著主導(dǎo)地位。

數(shù)據(jù)結(jié)構(gòu)是計算機(jī)科學(xué)中一門重要的專業(yè)課，二叉樹又是其中極為重要的一個知識點(diǎn)。目前，許多數(shù)據(jù)結(jié)構(gòu)多媒體課件都是通過動畫的形式來展示二叉樹遍歷的過程。如圖1所示，這是典型的展示型多媒體課件，它利用Flash的幀動畫，動態(tài)地呈示二叉樹的遍歷過程。這與用文字描述的PPT相比，能夠更加容易地讓學(xué)生明白二叉樹的遍歷過程。但它的缺點(diǎn)是，動畫顯示的過程只是針對界面上事先設(shè)置好的那棵樹，如果學(xué)生想觀察其他的二叉樹的遍歷過程，顯然這個課件是無法滿足學(xué)生需求的。

為解決上述多媒體課件的缺點(diǎn)，下面，筆者以“數(shù)據(jù)結(jié)構(gòu)二叉樹”一節(jié)為例，采用Flex3.0技術(shù)，以Adobe Flex Builder 3為開發(fā)環(huán)境，論述基于RIA平臺的多媒體課件的設(shè)計與實(shí)現(xiàn)。

● 基于RIA平臺設(shè)計數(shù)據(jù)結(jié)構(gòu)二叉樹多媒體課件

1.課件設(shè)計總體目標(biāo)

筆者以RIA為平臺，建構(gòu)的數(shù)據(jù)結(jié)構(gòu)二叉樹多媒體課件是根據(jù)教學(xué)大綱的要求并以清華大學(xué)出版社出版的《數(shù)據(jù)結(jié)構(gòu)與算法教程》（第二版）為藍(lán)本進(jìn)行開發(fā)的，其主要目的在于加強(qiáng)課件與學(xué)習(xí)者之間的交互性，學(xué)習(xí)者可以根據(jù)自己的理解，動態(tài)地生成一棵二叉樹，并觀察它的遍歷情況。為了這個目的，該課件會創(chuàng)建一個實(shí)驗(yàn)環(huán)節(jié)，在這個環(huán)節(jié)中學(xué)習(xí)者可以按照自己意愿，以括號輸入法的形式隨意輸入不同的二叉樹。同時，通過按鈕交互，實(shí)驗(yàn)平臺將會根據(jù)學(xué)習(xí)者所輸入的內(nèi)容呈現(xiàn)不同的二叉樹，并按其意愿顯示出該二叉樹先序、中序、后序和層次四種遍歷的演示過程。另外，多媒體課件的建構(gòu)首先要分析數(shù)據(jù)結(jié)構(gòu)二叉樹遍歷的教學(xué)目標(biāo)，具體內(nèi)容如下頁表所示。

2.課件總體框架設(shè)計

數(shù)據(jù)結(jié)構(gòu)二叉樹多媒體課件的制作目標(biāo)是容納數(shù)據(jù)結(jié)構(gòu)二叉樹所有基礎(chǔ)教學(xué)內(nèi)容，利用實(shí)驗(yàn)的方式向?qū)W習(xí)者展示二叉樹遍歷的原理、過程和結(jié)果，并為學(xué)習(xí)者提供掌握鞏固所學(xué)內(nèi)容的強(qiáng)化練習(xí)測試。因此，本課件的框架主要分為課件簡介、教學(xué)大綱、教學(xué)計劃、教學(xué)內(nèi)容、實(shí)驗(yàn)大綱、源碼下載、練習(xí)測試和幫助文檔八個模塊。

①課件簡介模塊：用一個頁面對數(shù)據(jù)結(jié)構(gòu)二叉樹多媒體課件的制作原因和目的進(jìn)行簡單的說明。

②教學(xué)大綱模塊：陳述數(shù)據(jù)結(jié)構(gòu)這門課程的各章節(jié)內(nèi)容的教學(xué)大綱要求。

③教學(xué)計劃模塊：對數(shù)據(jù)結(jié)構(gòu)這門課程的各章節(jié)知識點(diǎn)進(jìn)行課時安排。

④教學(xué)內(nèi)容模塊：展示數(shù)據(jù)結(jié)構(gòu)這門課程各章節(jié)的教學(xué)內(nèi)容。

⑤實(shí)驗(yàn)大綱模塊：列舉數(shù)據(jù)結(jié)構(gòu)這門課程各章節(jié)的實(shí)驗(yàn)大綱要求，并對實(shí)驗(yàn)大綱中所要求的實(shí)驗(yàn)提供模擬實(shí)驗(yàn)室的鏈接。

⑥源碼下載模塊：提供《數(shù)據(jù)結(jié)構(gòu)與算法教程》教材里重要的算法源碼的下載。

⑦練習(xí)測試模塊：為學(xué)習(xí)者提供類型豐富的習(xí)題，以鞏固其學(xué)習(xí)效果。

⑧幫助文檔模塊：為學(xué)習(xí)者提供課件的使用幫助文檔。

為了增強(qiáng)系統(tǒng)的可維護(hù)性和可擴(kuò)充性，該課件的八個模塊在內(nèi)容上都是相互獨(dú)立的，學(xué)習(xí)者可以通過導(dǎo)航進(jìn)入各個模塊內(nèi)部（如圖2）。

為了讓學(xué)習(xí)者能夠清楚直觀地了解二叉樹遍歷的原理、過程和結(jié)果，筆者在實(shí)驗(yàn)大綱模塊中打造一個數(shù)據(jù)結(jié)構(gòu)二叉樹的實(shí)驗(yàn)平臺。其設(shè)計思想是：實(shí)驗(yàn)平臺由實(shí)驗(yàn)?zāi)康?、?shí)驗(yàn)步驟、實(shí)驗(yàn)室和實(shí)驗(yàn)使用幫助四個環(huán)節(jié)組成。學(xué)習(xí)者通過實(shí)驗(yàn)大綱頁面上相應(yīng)的平臺鏈接進(jìn)入到數(shù)據(jù)結(jié)構(gòu)二叉樹的實(shí)驗(yàn)平臺。在實(shí)驗(yàn)平臺上，學(xué)習(xí)者可以了解到數(shù)據(jù)結(jié)構(gòu)二叉樹實(shí)驗(yàn)的實(shí)驗(yàn)?zāi)康?、?shí)驗(yàn)步驟和實(shí)驗(yàn)使用幫助，當(dāng)了解了這一系列的內(nèi)容后，學(xué)習(xí)者就可以進(jìn)入到實(shí)驗(yàn)室。

實(shí)驗(yàn)室主要由四個部分組成，一是給予學(xué)習(xí)者以括號表示法輸入二叉樹的TextInput輸入框，二是給予學(xué)習(xí)者選擇二叉樹遍歷方式的Button交互按鈕，三是文字展示二叉樹遍歷方法的隱性的Text文本框，四是動畫展示二叉樹生成與遍歷過程的Canvas容器。

在實(shí)驗(yàn)室中，學(xué)習(xí)者可以根據(jù)自己的想法用括號表示法的形式在TextInput輸入框中輸入不同的二叉樹，然后點(diǎn)擊“OK”按鈕，實(shí)驗(yàn)室的Canvas容器中就會自動生成該二叉樹的邏輯結(jié)構(gòu)圖。當(dāng)二叉樹的邏輯結(jié)構(gòu)圖生成后，學(xué)習(xí)者就可以在該二叉樹的基礎(chǔ)上自主選擇先序、中序、后序還是層次遍歷，操作方法是單擊所選擇的遍歷所對應(yīng)的“OK”按鈕即可。響應(yīng)這個交互動作后，Text文本框?qū)⒂呻[性轉(zhuǎn)化為顯性，用文字形式展示出該遍歷的方法；而Canvas容器中則會通過動態(tài)畫圓的方法呈現(xiàn)出該二叉樹經(jīng)歷的這種遍歷過程，并且在Canvas容器的左上方輸出該二叉樹在經(jīng)過此種遍歷后所得到的遍歷序列。

3.技術(shù)難點(diǎn)與解決方案

實(shí)驗(yàn)室的制作是數(shù)據(jù)結(jié)構(gòu)二叉樹多媒體課件的技術(shù)難點(diǎn)所在。本課件主要通過ActionScript3.0的算法設(shè)計來實(shí)現(xiàn)這個功能。

首先，設(shè)計“init函數(shù)”“PreOrderPosi函數(shù)”“getNodes函數(shù)”和“getHeight函數(shù)”等一系列函數(shù)，設(shè)計這些函數(shù)的目的都是分析學(xué)習(xí)者所輸入的內(nèi)容。

①init函數(shù)：判斷其輸入的內(nèi)容是否符合根結(jié)點(diǎn)不為空的要求，若滿足，則通過棧從這些輸入的內(nèi)容中分析出所有的二叉樹結(jié)點(diǎn)及其左右孩子結(jié)點(diǎn)，最后返回樹的根結(jié)點(diǎn)。

public static function init（input：String）：BTNode{

// 根據(jù)用戶輸入，動態(tài)地構(gòu)造一棵二叉樹

}

②PreOrderPosi函數(shù)：判斷根結(jié)點(diǎn)是否不為空，若滿足，則通過棧和函數(shù)的遞歸調(diào)用將其所有二叉樹結(jié)點(diǎn)按順序存儲的方式進(jìn)行編號，并存儲在一個一維數(shù)組里返回。

public static function PreOrderPosi（root：BTNode）：void{

// 確定二叉樹先序遍歷的結(jié)點(diǎn)的序號

}

③getNodes函數(shù)和getHeight函數(shù)：若根結(jié)點(diǎn)不為空，則通過函數(shù)的遞歸調(diào)用返回二叉樹的結(jié)點(diǎn)總數(shù)和二叉樹的層數(shù)。

接著，設(shè)計“PreOrder函數(shù)”“InOrder函數(shù)”“PostOrder函數(shù)”和“LevelOrder函數(shù)”等一系列函數(shù)，設(shè)計這些函數(shù)的目的是指導(dǎo)計算機(jī)完成二叉樹的先序、中序、后序和層次遍歷，然后將各種遍歷的過程和結(jié)果呈現(xiàn)在課件界面上。圖3為數(shù)據(jù)結(jié)構(gòu)二叉樹多媒體課件的實(shí)驗(yàn)室技術(shù)實(shí)現(xiàn)圖。

● 結(jié)語

目前，基于Flex技術(shù)的多媒體教學(xué)課件還比較少，但隨著RIA技術(shù)的日益完善，課件制作者水平的提高，RIA多媒體教學(xué)課件必定會迅猛發(fā)展。

參考文獻(xiàn)：

[1]熊冬春.高校網(wǎng)絡(luò)學(xué)習(xí)平臺建設(shè)的新視角[J].教育評論，2010（2）.

[2]王知方.RIA技術(shù)在WebGIS構(gòu)建中的應(yīng)用[D].西安：長安大學(xué)，2010.

[3]廖思云.淺析豐富互聯(lián)網(wǎng)應(yīng)用程序（RIA）的發(fā)展歷史與應(yīng)用趨勢[J].信息與電腦：理論版，2010（4）.

[4]張曉蓉.基于RIA技術(shù)的石油企業(yè)信息化平臺的構(gòu)建[J].西安文理學(xué)院學(xué)報：自然科學(xué)版，2011（1）.

[5]趙志靖，周靜.基于Flash和數(shù)據(jù)庫技術(shù)構(gòu)建網(wǎng)絡(luò)課程的測驗(yàn)?zāi)K[J].中國教育信息化，2009（4）.

[6]宋朝暉.基于RIA技術(shù)的高校精品課程網(wǎng)站的研究與設(shè)計[D].青島：中國海洋大學(xué)，2010.

作者簡介：謝運(yùn)佳，男，講師，碩士，中共黨員，湖南郴州人，主要研究方向?yàn)榻逃畔⒒④浖到y(tǒng)架構(gòu)、推薦系統(tǒng)等；趙劍冬，男，副教授，博士，軟件工程師，中共黨員，廣東湛江人，主要研究方向?yàn)樾畔⑾到y(tǒng)規(guī)劃設(shè)計、技術(shù)創(chuàng)新與管理、教育信息化。

基金項(xiàng)目：廣東省教育廳特色創(chuàng)新項(xiàng)目“智慧校園建設(shè)規(guī)劃與頂層設(shè)計”，項(xiàng)目編號2014WTSCX078；廣東省科技計劃項(xiàng)目“產(chǎn)學(xué)研協(xié)同建設(shè)面向區(qū)域產(chǎn)業(yè)的新型研發(fā)體系”，項(xiàng)目編號2015A080804018。