基于Sencha Touch框架的网络课程教学平台构建分析*

福建广播电视大学电子信息与计算机系 黄林昊



基于Sencha Touch框架的网络课程教学平台构建分析*

福建广播电视大学电子信息与计算机系 黄林昊

该文介绍Sencha Touch框架的概念与环境配置，在移动网络课程教学平台建设中引入该框架，对该框架的调用过程原理和实施方案进行分析，详细介绍了在构建移动网络课程教学平台过程中Sencha Touch的调用机制，并通过实例打包生成Android系统的移动网络课程教学平台，验证了该框架在平台构建上的可行性。

移动教学平台 Sencha Touch 网络课程 调用机制

基于移动网络的教学是目前最流行也是最具发展潜力的教育教学方式，网络化教学具有学习资源多样性、内容更新及时、学习方法综合等特点。基于各种移动平台操作系统的网络课程，更能体现出移动网络教育的特色和优势，利用这些学习平台来构筑网络课程能提供给教师和学生更多便利，提高学生自主学习的积极性和师生间交互的效率。

网络教学平台在全世界应用非常广泛，尤其在普通大学和高等专业学校已经普遍应用，甚至一些中小学也都引入了该应用。目前国内外的这些平台主要是各大公司参与开发为主，比如国外微软、Trivantis等平台，国内如开放教育、远程教育的Elearning平台等，其中一些网络教学平台还拥有移动教学端，移动教学端更提升了该平台的实用性。本文从移动网络课程建设实际出发，在已构建的LMS网络课程平台基础上进行移动平台网络课程教学系统的设计与架构，针对系统的框架原理与实现方法进行构建分析，以提升网络课程的交互性，改善网络课程的功能局限，美化网络课程的界面，丰富网络课程的资源，提高目前网络课程的利用率[1]。

1 Sencha Touch简介

Sencha Touch是世界上第一个基于HTML5的高性能移动应用框架。它是将现有的JavaScript编写的Ajax框架ExtJS整合了JQTouch和RaphaËl库，设计出了前沿Touch Web的Sencha Touch框架，通过MVC的编程，Sencha Touch的Hybrid应用程序可以让Web App看起来和Native App没有区别。它拥有各种友好的用户界面组件和众多功能强大的数据管理功能，这些功能都是基于最新的HTML5和CSS3 WEB标准， Sencha Touch支持Android、iOS、Windows mobile、Microsoft的Surface Pro和Surface RT，以及BlackBerry的移动设备[2]。

2 Sencha Touch框架的架设

由于基于最新的HTML5和CSS3 WEB标准，Sencha Touch的运行环境为Chrome，Safari，Firefox或Internet Explorer 10这些支持HTML5标准的浏览器。在移动设备上，大多数的浏览器是基于开源的WebKit浏览器引擎，像 Google 的Android手机、Apple 的 iPhone、iPad以及 Nokia的S60等使用的浏览器的内核引擎都基于 WebKit，WebKit就支持最新HTML5和CSS3的标准。所以，基于HTML5的Sencha Touch能够很好地部署到各种移动设备平台[3]。

Sencha Touch的环境配置在其官网(http://www.sencha.com/)有提供，这里根据平台开发项目的实践情况进行细化分析：

2.1 首先安装Java

由于Sencha Cmd是Java编写的，需要Java JRE环境来运行，官方推荐用Java1.7版本。JAVA下载地址为：http://www.oracle.com/technetwork/java/javase/downloads/index.html

安装到C:SenchaJavajdk1.7.0_17，随后配置计算机环境变量：

变量：JAVA_HOME 值：C:SenchaJavajdk1.7.0_17

变量：Path 增加值：%JAVA_HOME%in;%JAVA_ HOME%jrein

变量： CLASSPAT增加值：%JAVA_HOME%libdt.jar; %JAVA_HOME%lib ools.jar

增加值需要在原有值之后加上“；”号，配置成功后在cmd环境中输入javac，会提示javac用法，表示Java安装成功。

2.2 安装Sencha Touch 2.3.1压缩包

在http://www.sencha.com/products/touch/download/中下载压缩包，直接解压缩到C:Sencha ouch-2.3.1目录。

2.3 安装Sencha Cmd

它是一个命令行的工具，用来创建、生成、部署Sencha Touch。下载地址为：http://www.sencha.com/products/sencha- cmd/download/sencha-cmd-4.0.2/windows

安装下载的SenchaCmd-4.0.2.67-windows.exe安装程序，安装位置在C:SenchaCmd目录下。安装成功后，在cmd环境中输入sencha可以显示出当前的版本号Sencha Cmd v4.0.2.67和一些帮助文本，这些信息表明Sencha Cmd安装成功，需要更新Sencha Cmd时，可通过sencha upgrade命令来更新。如果需要生成与部署还要安装Ruby，可以在http://rubyinstaller.org/downloads下载ruby-1.9.3.exe，选择1.8或1.9版本（不能选择2.0版本）。运行下载的Ruby安装程序，安装在C:SenchaRuby193目录下，特别需要注意的是安装向导中有三个选项，必须选择第二个选项Add Ruby executables to your PATH，否则没有系统环境变量，无法加载。安装了Ruby后，Sencha Cmd就能具备生成和部署功能。

2.4 安装Sencha Architect

它是个可视化的开发环境，构建在该公司的HTML5布局工具Ext Designer之上，可拖拽各种可视化组件来创建用户界面，方便通过数据组件连接到客户和服务器的各种数据源，支持模型—视图—控制器MVC的开发模式，还能一键打包iOS与Android程序的功能。

同样在官网http://www.sencha.com/products/architect/ download/下载SenchaArchitect-3.0.3.exe，安装在C:Sencha SenchaArchitect3目录下，打开Sencha Architect需要注册Sencha账号试用30天，可以通过更换不同账号来实现多次试用。不过在Sencha Architect下创建的代码不能灵活地修改它，有一点的约束不够灵活，不过创建程序界面是很高效的工具，可以先用Sencha Architect生成出界面部分，随后的代码部分选择其他编辑器来完成。

2.5 配置WEB服务器

可以使用Apache、IIS等各种WEB服务器，或者使用Sencha Cmd 自带的WEB服务器，可以使用sencha fs web -port 8000 start -map 命令来打开Sencha Cmd web server，通过地址http://localhost:8000/ /来浏览页面。因为FjrtvuOnlineLMS网络课程模板LMS平台系统的服务器平台是基于IIS的，所以这里本项目也选用IIS7作为WEB服务器，使用IIS需要为IIS配置JSON，在IIS7中加上MIME类型名称为“.json”、类型为“text/json”，在Sencha Touch项目目录的权限中加上user的读取权限，重启IIS7就能正常使用。如果不想配置WEB服务器，可以使用Chrome浏览器加上--disable-web-security参数，直接打开Sencha Touch项目的Index.html页面进行浏览[4]。

以上的环境软件在安装时注意两点，一是不要安装在中文目录下，二是不要安装在带空格的目录下，否则会造成一些不知名的错误。这些配置为网络课程教学平台的开发搭建了基础环境。

3 网络课程教学平台的运行调用过程

Sencha Touch是一个支持MVC模式的框架，通过框架中Model（模型）、View（视图）、Controller（控制器）来完成MVC模式的程序开发。利用Sencha Touch构建的网络课程教学平台能实现开发过程高效、运行稳定，以及平台移植性好等特点。下面着重分析一下网络课程教学平台的调用过程。对于Sencha Touch程序来说，它们基本上都是一个单页面的程序，这个单页面就是Index.html，所有程序的视图显示、功能切换都是在这个Index.html里通过脚本来实现的。

（1）在Index.html里只有一条语句加载了脚本文件，样式和Sencha Touch的框架都没有加载，语句是。在语句中加载了development.js。

（2）在development.js脚本中通过调用XMLHttpRequest对象的open方法获取了app.json。在获取文件完成后，通过eval方法返回app.json脚本对象赋值给options，接着把scripts指向options.js，styleSheets指向options.css，也就是把js和css分别给了scripts和styleSheets变量，利用2个循环来加载标签的css样式和