北京大学移动课堂设计与实现*

杨公义，王胜清

（北京大学，北京 100871）

北京大学移动课堂设计与实现*

杨公义，王胜清

（北京大学，北京 100871）

基于Flex+Spring+BlazeDS技术开发的北大移动课堂能通过rtmp流安全高效地获取远程服务器端的直播流和点播流。功能模块包括院系列表、统一身份认证、院系的课程列表、课程的所有视频列表、视频点播、直播教室的列表、教室直播、意见建议。在服务器端，通过J2EE应用的部署与配置把Spring管理的Bean通过BlazeDS发布成服务。在客户端，通过Flash Builder搭建Flex开发环境，并通过DCD技术调用服务器端BlazeDS远程服务。以开发“院系列表”为例介绍了Flex调用服务器端BlazeDS服务的机制。北大移动课堂实现了让北大师生通过安卓手机点播北京大学视频资源库的教学视频，在线观看北大网络教育电视台15个教室的教学实况，并与学校的统一认证进行了整合。

Flex；Spring BlazeDS集成；Android App开发；移动课堂

一、引言

移动课堂App是移动教育的重要工具，为了让北大师生用Google Android手机或移动终端点播北大视频资源库的教学视频，在线观看北大网络教育电视台15个教室的教学实况，北大自主研发了移动课堂。为保护版权，视频资源库和网络教育电视台均采用了Adobe公司的Flash流媒体服务器。从技术一致性考虑，北大移动课堂的开发采用了Adobe公司的Flex语言，因为用Flex语言能很好地调用基于rtmp协议的Flash流媒体服务器中的直播流或点播流。

二、北京大学移动课堂的界面与功能设计[1]

北大移动课堂App的安装，在Android手机上，用浏览器访问http://www.metc.pku.edu.cn/xiazai/course.apk下载并安装。如果手机上没有Adobe air运行环境，需要访问http://www.metc.pku.edu.cn/xiazai/air.apk下载并安装。course.apk运行之后，首页如图1所示。（为了抓图的方便，本文图片是来自FlashBuilder的手机模拟器，在手机上实际运行的效果会更美观）北大移动课堂与计算中心的统一认证进行了对接，经过认证的用户可以随时随地点播课程录像或看教室直播。用户在图1中单击任一院系名称或者在图6中单击任一教室名称，会进入图2要求通过计算中心的统一认证。“北大移动课堂”的功能主要包括直播和点播。点播：首页（图1）单击“院系课堂”进入“院系列表”，显示所有院系的院系名称、课程门数。系统实现了按“院系名称”模糊查询的功能，查询结果以“课程数量”降序排列。图1中单击任一院系名称，进入该院系的课程列表如图3所示，可浏览该院系的所有课程，并能按“课程名称”模糊查询。图3中单击任一课程名称，进入该课程的“视频列表”，如图4所示，图4中单击任意一个视频，可以全屏播放该视频，如图5所示。播放方式采用RTMP流，使用户只能在线观看，不能下载播放，保证了视频资源的安全性。[2]

图1 首页：默认显示“院系课堂”的“院系列表”

图2 要求通过计算中心的统一认证

图3 通过统一认证后可查看所访问院系的课程列表

图4 单击任一课程后得到该课程的所有视频列表

图5 单击任一视频进入视频点播画面

图6 首页单击直播教室看到直播教室的列表

直播：首页单击“直播教室”。如图6所示，可以浏览北大网络教育电视台中15个直播教室，图6中单击任一教室，进入如图7所示的视频画面，可以在线观看北大某一教室的教学实况。

意见建议：单击导航条的“意见建议”，可以电话、短信、Email的方式进行反馈。返回首页：按手机上面的返回键。这里用代码监听移动设备上的返回键，调用一段自定义代码。关闭：单击导航条的“退出”。

三、服务器端J2EE应用的部署与配置

北大移动课堂客户端程序，需要与远程服务器端的程序协作才能访问北大视频资源库的视频和北大网络教育电视台的频道。[3]应用服务器采用tomcat，Web应用名称为course，编程语言采用Java，开发框架采用Spring，Java后端与前端Flex的交互采用BlazeDS。BlazeDS是一个Adobe推出的基于服务器的Java远程调用和Web消息传递技术，使后台的Java应用程序和前端Flex应用程序能够相互通信。Spring BlazeDS Integration是Adobe与Spring联合开发的一个开源项目，使用该项目开发者可以通过BlazeDS公开Spring管理的Bean而无需额外配置文件。[4]关于这些技术单独使用的方法和需要部署的Jar等请参考官方文档。这几项技术集成及协同工作的关键技术是本文论述的重点。

1.为了集成BlazeDS需要在web.xml中配置监听和servlet

在course应用的web.xml中除了常规web应用和Spring框架需要的配置之外，还需要为集成BlazeDS配置如下监听和servlet。

＜listener-class＞flex.messaging.HttpFlexSession＜/listener-class＞＜servlet＞＜servlet-name＞RDSDispatchServlet＜/servlet-name＞＜servlet-class＞flex.rds.server.servlet.FrontEndServlet＜/servlet-class＞＜init-param＞＜param-name＞useAppserverSecurity＜/param-name＞＜param-value＞false＜/param-value＞＜/init-param＞＜init-param＞＜param-name＞messageBrokerId＜/param-name＞＜param-value＞_message-Broker＜/param-value＞＜/init-param＞＜load-on-startup＞3＜/ load-on-startup＞＜/servlet＞＜servlet-mapping id="RDS_D

ISPATCH_MAPPING"＞＜servlet-name＞RDSDispatch-Servlet＜/servlet-name＞＜url-pattern＞/CFIDE/main/ide. cfm＜/url-pattern＞＜/servlet-mapping＞

2.通过BlazeDS公开Spring管理的Bean

为了能通过BlazeDS公开Spring管理的Bean，需要修改Spring标准配置文件。因为北大移动课堂要访问服务器端三个实体及服务——院系 (department)、课程(course)、视频(video)，每个实体的服务中均提供了操作相应实体的方法，如findPageResult(…)、findByPrimaryKey(…)等，下面以spring-department.xml为例说明。

①在spring的 bean中增加＜flex:remoting-destination/＞，即：＜bean id="departmentService"parent="baseTx-Proxy"＞＜property name="target"＞＜bean class="pku.metc. department.service.impl.DepartmentServiceImpl"parent=" serviceTemplate"/＞＜/property＞＜flex:remoting-destination/＞＜/bean＞。②增加xml命名空间：xmlns:flex=http://www. springframework.org/schema/flex。③在书写xml时需要遵循的语法xsi:schemaLocation中增加：http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www. springframework.org/schema/flex http://www.springframework.org/schema/flex/spring-flex-1.0.xsd"＞。

四、客户端Flex手机项目开发环境的建构

开发北大移动课堂app采用的语言是Flex+Action-Script，项目开发环境是Flash Builder4.5。创建项目的方法为：文件＞新建＞flex手机项目，项目名称：course；Flex SDK版本：4.5.1。单击下一步，目标平台：勾选Apple IOS、BlackBerry Tablet OS、Google Android；应用程序模板：基于视图的应用程序；应用程序设置：自动重定向；DPI：160dpi。单击下一步，服务器设置如图8所示。单击下一步，构建路径，验证RSL摘要，删除未使用的RSL，在调试时使用本地调试运行时共享库，基于依赖项自动确定排序，主源文件夹 src，主应用程序文件 course. mxml，应用程序ID：course。单击完成，自动产生了应用程序入口框架文件course/src/course.mxml和主页视图文件course/src/views/courseView.mxml。因为本应用程序要在首页显示 “院系列表”，所以修改course.mxml中的firstView="views.departmentListView"，并把自动生成的courseView.mxml另存为departmentListView.mxml，得到了实际使用的主页视图文件。

五、客户端使用Flash Builder的DCD技术调用服务器端BlazeDS远程服务

DCD（Data-Centric Development）数据中心开发技术是Flash Builder4.5的一个优点之一，利用 DCD调用BlazeDS远程服务的方法如下。[5]

①确保服务器端已经启动 tomcat，并且 http:// 162.105.137.60:8080/course/通过浏览器是可访问的。在Flash Builder中右击名为course的Flex手机项目＞＞属性＞＞Fex服务器，确保设置如图8所示。②Flash Builder中数据菜单＞＞连接数据/服务＞＞BlazeDS＞＞下一步＞＞不需要密码＞＞确定＞＞如图9所示界面。这里不需要密码的原因是上述 web.xml中为 RDSDispatchServlet设置了useAppserverSecurity参数值为 false。在图 9中 Flash Builder列出了远程tomcat服务器的course应用中所有通过BlazeDS公开的Spring管理的Bean服务。在图9中，从“选择要导入的目标”中勾选要导入的BlazeDS服务如departmetnService院系服务；在“服务包”和“数据类型包”中输入把远程BlazeDS服务导入到Flex手机应用的哪个包中；根据如图9所示的输入，在Flex手机应用course的src下自动生成了pku.metc.department.service.DepartmentService.as和 pku.metc.department.vo.DepartmentVO.as。同样的方法，自动导入BlazeDS远程的课程服务和视频服务。得到pku.metc.course.service.CourseService.as,pku.metc.course.vo.CourseVO.as,pku.metc. video.service.VideoService.as,pku.metc.video.vo.Video-VO.as。为提高服务器端程序的可移性，在Flex手机应用course/src下定义常量类 Const.as，在其中定义常量ENDPOINT:String=http://162.105.137.60:8080/course/。手动修改上面每个service的父类中的一行代码_service-Control.endpoint=Const.ENDPOINT+"messagebroker/amf"。

六、以开发“院系列表”为例介绍Flex调用服务器端BlazeDS服务的机制

图1所示“院系课堂”的“院系列表”的主程序为departmentListView.mxml，为了在本程序中能访问上述已经导入的远程BlazeDS公开的类DepartmentService、对象departmentService、方法findPageResultResult，要做下面几步。

①在＜s:View标签中声明命名空间 xmlns:departmentservice="pku.metc.department.service.*"。②在＜fx: Declarations＞进行如下声明:＜fx:Declarations＞＜s:CallResponder id="findPageResultResult"result="findPageResultResult_resultHandler (event)"/＞＜departmentservice:DepartmentService id="departmentService"/＞＜/fx:Declarations＞

用＜s:List控件实现图1中的“院系列表”的关键代码 为 ：＜s:List id="departmentList"change="departmentList_changeHandler(event)"creationComplete="departmentList_creationCompleteHandler(event)"labelFunction="get_stringb_integera"＞＜s:AsyncListView list="{com. adobe.serializers.utility.TypeUtility.convertToCollection (findPageResultResult.lastResult.list)}"/＞＜/s:List＞

图7 单击任一直播教室进入教室直播的画面

图8 Flex服务器设置

图9 利用DCD技术调用BlazeDS远程服务

说明：①将AsyncListView对象的 list属性绑定到CallResponder对象findPageResultResult的lastResult属性，目的是对查询结果利用TypeUtility.convertToCollection进行类型转换。②labelFunction="get_stringb_integera"作用是：把findPageResultResult.lastResult.list中的每一项进行格式化为图1中的如下形式：“物理学院 共7门课”。③creationComplete="…"表示s:List控件创建完成后自动调用的方法，该方法的作用是通过 departmentService.findPageResult发起服务调用，调用结果存入CallResponder类的对象findPageResultResult的名为token属性中，该token属性是AsyncToken类的一个实例。上面几个方法的详细代码如下：

protected function departmentList_creationComplete-Handler(event:FlexEvent):void{findPageResultResult.token =departmentService.findPageResult("fromDepartment po where 1=1 order by po.integera desc",1,65535); }

private function get_stringb_integera(item:Object): String{return""+item.stringb+""+"共 "+item.integera+"门课";}

实现图 1中按“院系名称”查询：界面关键代码为＜s:TextInput id="searchTxt"prompt="院系名称"/＞＜s:Button id="searchBtn"click="doSearch(event)"＞单击查询按钮调用的doSearch方法，根据用户输入的“院系名称”组合出查询字符串，以此字符串作为参数触发 departmentService.findPageResult方法。doSearch详细代码为：

protected function doSearch(event:Event):void{this.addElement(busyIndicator);if(searchTxt.text!=""){find-PageResultResult.token=departmentService.findPageResult("fromDepartment po where 1=1 and po.stringb like′%"+searchTxt.text+"%′order by po.integera desc",1, 65535);} else {findPageResultResult.token =departmentService.findPageResult"from Department po where 1=1 order by po.integera desc",1,65535);}}

图1中单击任意一个院系名称的处理机制为：为＜s: List定义 change事件为"departmentList_changeHandler (event)"，该方法的作用是判断如果用户没有登录，将“登录视图”logon推送到导航堆栈的顶部。否则就“课程列表视图”courseListView推送到导航堆栈的顶部。详细代码为：

protected function departmentList_changeHandler (event:IndexChangeEvent):void{if(Const.ISLOGIN==false) {navigator.pushView (logon,departmentList.selectedItem);} else{navigator.pushView(courseListView,departmentList.selectedItem)}}

以上以开发“院系列表”实例介绍了Flex调用服务器端BlazeDS服务的机制，大部分的业务逻辑的实现在服务器端，Flex手机应用只是对远程服务和方法的调用。

七、结语

北大移动课堂实现了让北大师生能通过安卓手机点播北京大学视频资源库的教学视频，在线观看北大网络教育电视台的15个教室的教学实况。播放方式均采用RTMP流，使用户只能在线观看，不能下载播放，保证了视频资源的安全性。北大移动课堂和北大的统一认证结合，只有合法用户才能正常访问。基于Flex+Spring+ BlazeDS技术开发的北大移动课堂，良好稳定地满足了北大师生的需求。

[1]杨公义,张亦工.北京大学教室管理系统的设计与实现[J].现代教育技术,2015(4):115-120.

[2]杨公义,张亦工.基于Red5的网络教育电视台的设计与实现[J].现代教育技术,2012(8):109-112.

[3]陈飞,杨公义,李志刚等.基于Blackboard系统的“北大教学网”扩展开发研究[J].北京大学教育评论,2013 (12):201-211.

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

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

（编辑：王天鹏）

G434

：A

：1673-8454（2017）07-0045-04

教育部在线教育研究中心在线教育研究基金(全通教育)“慕课在线教学组织方法实证研究”(项目编号：2016ZD301)资助。