北大師生互動祝福感謝墻的設計與實現

楊公義+劉國超

摘 要 祝福感謝墻是一種流行時尚的互聯網互動形式。設計開發一個祝福感謝墻系統，利用此功能，學生可以在節日向教師表達祝福與感謝，可以選擇留言條的顏色和形狀。祝福與感謝的內容存入后臺數據庫中，前臺展示以Adobe Flex技術開發，用戶可以拖動每條祝福與感謝卡片，支持按院系查看、搜索教師姓名查看等多種模式。與HTML技術的感謝墻相比，Flex技術開發的Flash動態效果更加出眾，給教師和學生帶來耳目一新的感覺，開拓網絡教學環境中新穎的互動方式，拉近師生間距離，增進交流。

關鍵詞 Flex；祝福感謝墻；師生互動

中圖分類號：TP315 文獻標識碼：B

文章編號：1671-489X（2017）06-0057-04

Abstract Blessing wall is a popular form of Internet interaction. This paper designed and developed a blessing wall system. Using this system， students can express their wishes and thanks to the teacher in the festival. Students can choose the color and shape of the message. The blessing contents are stored into the database. The interfaces are developed using Adobe Flex technology. The user can drag each blessing card， view the content sorted by departments， search by the teachers name. Compared with HTML technology for blessing wall，Flash dynamic effect technologys blessing wall is more outstanding. It brings teachers and students fresh and new feeling. It develops anovel interactive network teaching environment， narrows the dis-tance between teachers and students， enhances intercommunion.

Key words Flex； blessing wall； teacher-student interaction

1 引言

祝福感謝墻是一種流行時尚的互聯網互動形式。傳統的不采用Flex+AJAX技術的html感謝墻，用戶體驗差，不支持賀卡拖動，不支持賀卡折疊，不能選擇賀卡主題等。為了使北大師生有更好的體驗，感覺像是在墻上給教師做賀卡一樣表達祝福與感謝，北大采用Adobe Flex技術結合AJAX異步交互技術開發前臺效果，后臺采用數據庫技術把祝福與感謝的元數據分類存儲。

2 祝福感謝墻的系統設計

北大師生互動祝福感謝墻（限校內訪問http：//162.105.14.149/course/wishwall/）首頁如圖1所示，用戶可以拖動每條祝福與感謝，內容支持分頁。可以通過“教師姓名”進行模糊搜索，用戶輸入“院系名稱”時支持AJAX自動補全功能。如輸入“數學科學學院”，單擊搜索，并把祝福和感謝的紙條拖成圓形，如圖2所示。進一步輸入教師姓名“張寧”，單擊搜索，如圖3所示。首頁單擊“點此送出祝福”進入北大統一認證，學生輸入計算中心的統一認證賬戶和密碼之后，可以給某個院系的某個教師編寫祝福和感謝，如圖4所示。院系名稱的輸入與圖1類似，支持AJAX自動補全功能，學生可以選擇賀卡的顏色和形狀；為了顯示上的美觀，對輸入字數作了限制，學生在留言的同時，實時顯示還能輸入多少個字。圖4單擊“提交”后，系統給出一段文字和鏈接：“感謝您的留言，請選擇繼續留言還是點擊關閉。”為保障系統安全，只有經過管理員審核通過的祝福與感謝才顯示。后臺管理員的審核頁面如圖5所示，管理員可以批準和刪除學生的留言。批準一列，如果狀態是“待批”，單擊它就變成“已批”，反之亦然[1-2]。

3 客戶端Flex程序與服務器端J2EE程序進行數據交互的關鍵技術

圖1中所有的祝福與感謝內容來自數據庫，查詢與分頁都要與數據庫交互；圖4學生輸入完祝福與感謝的內容并單擊提交之后，要把內容存入數據庫，所以客戶端Flex應用程序要與遠程服務器端J2EE應用程序進行交互。遠程服務器端采用tomcat，Web應用名稱為course，后臺數據庫采用Oracle，編程語言采用Java，開發框架采用Spring，Java后端與前端Flex的交互采用BlazeDS。關于這些技術使用及整合的方法不在本文論述范圍內[3-4]。客戶端利用Flash Builder創建名稱為MDIWishWall的Flex Web項目。主應用程序為multiCustomTitleWin2.mxml，用該文件構造圖1所示的界面，用css文件進行修飾

source="mycss.css"/>。

4 用Flex技術架構互動祝福感謝墻的關鍵技術

multiCustomTitleWin2.mxml是Flex主應用程序，這里定義遠程服務引用feedback Service，啟動函數find RecTotal（），2個異步調用結果findRecTotalResult和find PageResultResult，將每條祝福感謝寫入用戶選擇的紙條的方法addWindowWithObject（），把所有的祝福感謝紙條排成整齊祝福感謝墻的方法tileAuto（）。

遠程服務引用和啟動函數 導入1個遠程服務引用的命名空間并定義啟動函數，關鍵代碼為

service=″pku.metc.feedback.service.*″creationComplete=″find

RecTotal（）″>，其中pku.metc.feedback.service.*是通過Flash的DCD技術調用服務器端BlazeDS遠程服務[5]。

定義id=″feedbackService″的遠程服務引用，來調用遠程服務器的BlazeDS類型的feedbackService服務，該服務從數據庫中分頁查詢祝福和感謝。關鍵代碼為

FeedbackService id=″feedbackService″ fault=″Alert.show（event.

fault.faultString+′＼n′+event.fault.faultDetail）″ showBusyCursor

=″true″/>。

啟動函數findRecTotal（）是通過creationComplete觸發的。findRecTotal（）用于異步調用遠程服務feedback

Service的findRecTotal（）方法，查詢數據庫中祝福感謝的記錄數，將調用結果存入findRecTotalResult.token，

關鍵代碼為protected function findRecTotal（）：void{findRecTotal

Result.token = feedbackService.findRecTotal（″from Feedback po

where 1=1 and po.dateb<>null and po.longa=″+Const.LONGA+

″order by po.dateadesc″）；}。

異步調用結果findRecTotalResult存儲記錄總數并觸發分頁查詢方法

result=″findRecTotalResult_resultHandler（event）″/>，id表示異步調用結果的標識為″findRecTotalResult″，result表示當有異步調用的結果返回時，即當findRecTotalResult.token被賦值時，會自動觸發的方法，該方法能通過findRec

TotalResult.lastResult得到異步調用的結果。因為本異步調用的結果是值，所以可以直接取得，即varRecTotal：int=

findRecTotalResult.lastResult。關鍵代碼為protectedfun

ction findRecTotalResult_resultHandler（event：ResultEvent）：void{varRecTotal：int=findRecTotalResultlastResult；vararray：Array=new Array（RecTotal）；vararrayCollection：ArrayCollecion=

new ArrayCollection（array）；myDG.init（arrayCollection）； }。代碼中myDG.init（arrayCollection）的作用是根據參數數組的大小初始化分頁組件，設置總頁數totalPage為數組大小，當前頁currentPage=0，頁面大小pageSize為組件中的常量，并調用findPageResult （iPageNo：int， iPageSize：

int）分頁查詢方法。該方法關鍵代碼為public function find

PageResult（iPageNo：int， iPageSize：int）：void{findPageResultRe

sult.token = feedbackService.findPageResult（″from Feedback

po where 1=1 and po.dateb<>null and po.longa=′″+Const.LONGA

+″′ order by po.dateadesc″， iPageNo， iPageSize）；}。通過為find

PageResultResult.token賦值，觸發了id=″findPageResult

Result″的異步調用結果。

異步調用結果findPageResultResult存儲記錄總數并觸發分頁查詢

result=″findPageResultResult_resultHandler（event）″/>。其中find

PageResultResult_resultHandler函數作用為根據查詢結果更新祝福感謝墻。先把祝福感謝墻擦掉，再把從數據庫中查到的結果以小紙條的形式貼到墻上。關鍵代碼為

protectedfunction findPageResultResult_resultHandler（event：Re

sultEvent）：void{varlist：IList=TypeUtility.convertToCollection

（findPageResultResult.lastResult.list）；varlengthold：int=popup

Array.length；for（varj：int=0；j

vePopUp（popUpArray[j]）；}for（var k：int=0；k

{popUpArray.pop（）；} for（var i：int=0；i

backVO：FeedbackVO=list.getItemAt（i） as FeedbackVO；add

WindowWithObject（feedbackVO）；}tileAuto（popUpArray，10）；}。

因為異步調用的結果是集合，所以需要用com.adobe.seria

lizers.utility.TypeUtility進行類型轉換，varlist：IList=

TypeUtility.convertToCollection（findPageResultResult.lastRe

sult.list）。代碼中函數addWindowWithObject（feedbackVO）

的作用是將每條祝福感謝寫入用戶選擇的顏色的紙條。函數tileAuto（popUpArray，10）根據數據條數，自動算出幾行幾列，并排成整齊的祝福感謝墻的形式。

將每條祝福感謝寫入用戶選擇的顏色的紙條的方法add

WindowWithObject 該方法的參數feedbackVO表示祝福感謝對象，是為學生輸入的一條祝福感謝，是從數據庫中查詢得到一個記錄封裝成的對象。

private function addWindowWithObject（feedbackVO：FeedbackVO）：void{

//創建一個默認的藍色紙條

var pop：CustomTitleWin2 = （PopUpManager.createPopUp（this，CustomTitleWin2，false，PopUpManagerChildList.POPUP） as CustomTitleWin2）；

//從feedbackVO祝福感謝對象的integera屬性中得到用戶選擇的紙條的顏色

varintegera：int= feedbackVO.integera；

//如果紙條顏色為紅色

if （integera==1） {pop.setStyle（″skinClass″，Class（ygyTitle

Win1））；pop.RichTextTitle.styleName=″myTitleW″；pop.myRich

Text.styleName=″myfontstyleW″；pop.myRichTextSignature.styleName=″myfontstyleW″；}

//如果紙條顏色為藍色

else if（integera==2）pop.setStyle（″skinClass″，Class（ygyTitle

Win2））

//如果紙條顏色為橙色

else if （integera==3） pop.setStyle（″skinClass″， Class（ygy

TitleWin3））

//如果紙條顏色為綠色

else if （integera==4） pop.setStyle（″skinClass″，Class（ygyTitleWin4））

//默認紙條顏色為藍色

else pop.setStyle（″skinClass″， Class（ygyTitleWin2））

//**院系，**教師

pop.RichTextTitle.text=feedbackVO.stringd+"，"+feedback

VO.stringe+"老師"；

//祝福感謝內容

pop.myRichText.text=feedbackVO.stringa；

//留言者簽名和日期

pop.myRichTextSignature.text=feedbackVO.stringf+″ ″+

DateTime.DateToCRMDate（feedbackVO.datea）；

//將寫滿內容的紙條推進數組。

popUpArray.push（pop）；}

把所有的祝福感謝紙條排成整齊的祝福感謝墻的形式的方法tileAuto

public function tileAuto（popUpArray：Array，gap：Number = 0）：void{

//變量col：列數，row：行數。

varcol：int = 0；var row：int = 0；

//swf在網頁中的寬度

varavailWidth：Number = this.stage.width；

//swf在網頁中的高度

varavailHeight：Number = this.stage.height；

//第一行距離頁面頂部的空隙

varfirstRowTopMargin：int=100；

//小紙條個數

numWindows = popUpArray.length；

//定義一個默認小紙條

var pop：CustomTitleWin2；

//如果小紙條個數大于0

if（numWindows> 0）{

//列數：由舞臺寬度/每條留言的寬度并向上取整

varnumCols：int = Math.ceil（availWidth / Const.Custom

TitleWin2With）-2；

//行數：總紙條數/列數并向上取整

varnumRows：int = Math.ceil（numWindows / numCols）；

vartargetWidth：Number =Const.CustomTitleWin2With+

gap； //每條留言的寬度

vartargetHeight：Number= Const.CustomTitleWin2Height+

gap； //每條留言的高度

var x：int =0； //小紙條位置的x坐標

var y：int =0； //小紙條位置的y坐標

for（var i：int = 0； i

[i]； //取出一個小紙條

//每行的結尾要換行

if（i % numCols == 0 &&i> 0）

{row++； //行+1

col = 0； //置首列

}else if（i> 0）{col++； //非首列，則列+1

}

x=col * targetWidth； //當前紙條x坐標

//每一行的開頭第一列左側留出空隙：頁面總寬度減去小紙條占的總寬度除以3再向下取整

varfirstColLeftMargin= Math.floor（（availWidth-targetWidth

*numCols）/3 ）；

//x坐標增加一點兒左側的空隙

x+=firstColLeftMargin；

y=row * targetHeight； //y坐標增加

y+=firstRowTopMargin； //第一行的開頭留下空隙

if（col > 0） //非首列x坐標的增加量

x += gap * col；

if（row > 0） //非首行y坐標的增加量

y += gap * row；

pop.move（x，y）； }}} //根據x和y的坐標將小紙條移到相應的位置

5 結論

北大采用Adobe Flex技術結合AJAX異步交互技術開發祝福感謝墻前臺效果，用戶體驗好，學生可以在墻上以賀卡的形式向教師表達祝福與感謝，可以選擇賀卡的顏色和形狀，可以任意拖動賀卡的位置，可以重疊賀卡，支持分頁，輸入院系名稱時支持AJAX自動補全，可以按教師姓名模糊搜索。北大師生互動祝福感謝墻良好穩定地滿足了北大師生的需求，增進了師生感情，活躍了校園文化氣氛，目前共有祝福和感謝111條。北大師生互動祝福感謝墻中的技術和算法可直接應用于類似需求的開發場景。

參考文獻

[1]楊公義，張亦工.北京大學教室管理系統的設計與實現[J].現代教育技術，2015（4）：115-120.

[2]楊公義，張亦工.基于Red5的網絡教育電視臺的設計與實現[J].現代教育技術，2012（8）：109-112.

[3]陳飛，楊公義，李志剛，等.基于Blackboard系統的“北大教學網”擴展開發研究[J].北京大學教育評論，2013（12）：201-211.

[4]Spring BlazeDS Integration[DB/OL].http：//docs.spring.io/spring-flex/docs/1.5.x/javadoc-api/index.html.

[5]Flex Test Drive[DB/OL].http：//www.adobe.com/cn/devnet/flex/testdrive/articles/1_build_a_flex_app2.html.