北大师生互动祝福感谢墙的设计与实现

杨公义+刘国超

摘 要 祝福感谢墙是一种流行时尚的互联网互动形式。设计开发一个祝福感谢墙系统，利用此功能，学生可以在节日向教师表达祝福与感谢，可以选择留言条的颜色和形状。祝福与感谢的内容存入后台数据库中，前台展示以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.