福建廣播電視大學(xué)電子信息與計(jì)算機(jī)系 黃林昊

?

基于Sencha Touch框架的網(wǎng)絡(luò)課程教學(xué)平臺(tái)構(gòu)建分析*

福建廣播電視大學(xué)電子信息與計(jì)算機(jī)系 黃林昊

該文介紹Sencha Touch框架的概念與環(huán)境配置，在移動(dòng)網(wǎng)絡(luò)課程教學(xué)平臺(tái)建設(shè)中引入該框架，對該框架的調(diào)用過程原理和實(shí)施方案進(jìn)行分析，詳細(xì)介紹了在構(gòu)建移動(dòng)網(wǎng)絡(luò)課程教學(xué)平臺(tái)過程中Sencha Touch的調(diào)用機(jī)制，并通過實(shí)例打包生成Android系統(tǒng)的移動(dòng)網(wǎng)絡(luò)課程教學(xué)平臺(tái)，驗(yàn)證了該框架在平臺(tái)構(gòu)建上的可行性。

移動(dòng)教學(xué)平臺(tái) Sencha Touch 網(wǎng)絡(luò)課程 調(diào)用機(jī)制

基于移動(dòng)網(wǎng)絡(luò)的教學(xué)是目前最流行也是最具發(fā)展?jié)摿Φ慕逃虒W(xué)方式，網(wǎng)絡(luò)化教學(xué)具有學(xué)習(xí)資源多樣性、內(nèi)容更新及時(shí)、學(xué)習(xí)方法綜合等特點(diǎn)。基于各種移動(dòng)平臺(tái)操作系統(tǒng)的網(wǎng)絡(luò)課程，更能體現(xiàn)出移動(dòng)網(wǎng)絡(luò)教育的特色和優(yōu)勢，利用這些學(xué)習(xí)平臺(tái)來構(gòu)筑網(wǎng)絡(luò)課程能提供給教師和學(xué)生更多便利，提高學(xué)生自主學(xué)習(xí)的積極性和師生間交互的效率。

網(wǎng)絡(luò)教學(xué)平臺(tái)在全世界應(yīng)用非常廣泛，尤其在普通大學(xué)和高等專業(yè)學(xué)校已經(jīng)普遍應(yīng)用，甚至一些中小學(xué)也都引入了該應(yīng)用。目前國內(nèi)外的這些平臺(tái)主要是各大公司參與開發(fā)為主，比如國外微軟、Trivantis等平臺(tái)，國內(nèi)如開放教育、遠(yuǎn)程教育的Elearning平臺(tái)等，其中一些網(wǎng)絡(luò)教學(xué)平臺(tái)還擁有移動(dòng)教學(xué)端，移動(dòng)教學(xué)端更提升了該平臺(tái)的實(shí)用性。本文從移動(dòng)網(wǎng)絡(luò)課程建設(shè)實(shí)際出發(fā)，在已構(gòu)建的LMS網(wǎng)絡(luò)課程平臺(tái)基礎(chǔ)上進(jìn)行移動(dòng)平臺(tái)網(wǎng)絡(luò)課程教學(xué)系統(tǒng)的設(shè)計(jì)與架構(gòu)，針對系統(tǒng)的框架原理與實(shí)現(xiàn)方法進(jìn)行構(gòu)建分析，以提升網(wǎng)絡(luò)課程的交互性，改善網(wǎng)絡(luò)課程的功能局限，美化網(wǎng)絡(luò)課程的界面，豐富網(wǎng)絡(luò)課程的資源，提高目前網(wǎng)絡(luò)課程的利用率[1]。

1 Sencha Touch簡介

Sencha Touch是世界上第一個(gè)基于HTML5的高性能移動(dòng)應(yīng)用框架。它是將現(xiàn)有的JavaScript編寫的Ajax框架ExtJS整合了JQTouch和Rapha?l庫，設(shè)計(jì)出了前沿Touch Web的Sencha Touch框架，通過MVC的編程，Sencha Touch的Hybrid應(yīng)用程序可以讓W(xué)eb App看起來和Native App沒有區(qū)別。它擁有各種友好的用戶界面組件和眾多功能強(qiáng)大的數(shù)據(jù)管理功能，這些功能都是基于最新的HTML5和CSS3 WEB標(biāo)準(zhǔn)， Sencha Touch支持Android、iOS、Windows mobile、Microsoft的Surface Pro和Surface RT，以及BlackBerry的移動(dòng)設(shè)備[2]。

2 Sencha Touch框架的架設(shè)

由于基于最新的HTML5和CSS3 WEB標(biāo)準(zhǔn)，Sencha Touch的運(yùn)行環(huán)境為Chrome，Safari，F(xiàn)irefox或Internet Explorer 10這些支持HTML5標(biāo)準(zhǔn)的瀏覽器。在移動(dòng)設(shè)備上，大多數(shù)的瀏覽器是基于開源的WebKit瀏覽器引擎，像 Google 的Android手機(jī)、Apple 的 iPhone、iPad以及 Nokia的S60等使用的瀏覽器的內(nèi)核引擎都基于 WebKit，WebKit就支持最新HTML5和CSS3的標(biāo)準(zhǔn)。所以，基于HTML5的Sencha Touch能夠很好地部署到各種移動(dòng)設(shè)備平臺(tái)[3]。

Sencha Touch的環(huán)境配置在其官網(wǎng)(http://www.sencha.com/)有提供，這里根據(jù)平臺(tái)開發(fā)項(xiàng)目的實(shí)踐情況進(jìn)行細(xì)化分析：

2.1 首先安裝Java

由于Sencha Cmd是Java編寫的，需要Java JRE環(huán)境來運(yùn)行，官方推薦用Java1.7版本。JAVA下載地址為：http://www.oracle.com/technetwork/java/javase/downloads/index.html

安裝到C:SenchaJavajdk1.7.0_17，隨后配置計(jì)算機(jī)環(huán)境變量：

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

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

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

增加值需要在原有值之后加上“；”號(hào)，配置成功后在cmd環(huán)境中輸入javac，會(huì)提示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

它是一個(gè)命令行的工具，用來創(chuàng)建、生成、部署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環(huán)境中輸入sencha可以顯示出當(dāng)前的版本號(hào)Sencha Cmd v4.0.2.67和一些幫助文本，這些信息表明Sencha Cmd安裝成功，需要更新Sencha Cmd時(shí)，可通過sencha upgrade命令來更新。如果需要生成與部署還要安裝Ruby，可以在http://rubyinstaller.org/downloads下載ruby-1.9.3.exe，選擇1.8或1.9版本（不能選擇2.0版本）。運(yùn)行下載的Ruby安裝程序，安裝在C:SenchaRuby193目錄下，特別需要注意的是安裝向?qū)е杏腥齻€(gè)選項(xiàng)，必須選擇第二個(gè)選項(xiàng)Add Ruby executables to your PATH，否則沒有系統(tǒng)環(huán)境變量，無法加載。安裝了Ruby后，Sencha Cmd就能具備生成和部署功能。

2.4 安裝Sencha Architect

它是個(gè)可視化的開發(fā)環(huán)境，構(gòu)建在該公司的HTML5布局工具Ext Designer之上，可拖拽各種可視化組件來創(chuàng)建用戶界面，方便通過數(shù)據(jù)組件連接到客戶和服務(wù)器的各種數(shù)據(jù)源，支持模型—視圖—控制器MVC的開發(fā)模式，還能一鍵打包iOS與Android程序的功能。

同樣在官網(wǎng)http://www.sencha.com/products/architect/ download/下載SenchaArchitect-3.0.3.exe，安裝在C:Sencha SenchaArchitect3目錄下，打開Sencha Architect需要注冊Sencha賬號(hào)試用30天，可以通過更換不同賬號(hào)來實(shí)現(xiàn)多次試用。不過在Sencha Architect下創(chuàng)建的代碼不能靈活地修改它，有一點(diǎn)的約束不夠靈活，不過創(chuàng)建程序界面是很高效的工具，可以先用Sencha Architect生成出界面部分，隨后的代碼部分選擇其他編輯器來完成。

2.5 配置WEB服務(wù)器

可以使用Apache、IIS等各種WEB服務(wù)器，或者使用Sencha Cmd 自帶的WEB服務(wù)器，可以使用sencha fs web -port 8000 start -map 命令來打開Sencha Cmd web server，通過地址http://localhost:8000/ /來瀏覽頁面。因?yàn)镕jrtvuOnlineLMS網(wǎng)絡(luò)課程模板LMS平臺(tái)系統(tǒng)的服務(wù)器平臺(tái)是基于IIS的，所以這里本項(xiàng)目也選用IIS7作為WEB服務(wù)器，使用IIS需要為IIS配置JSON，在IIS7中加上MIME類型名稱為“.json”、類型為“text/json”，在Sencha Touch項(xiàng)目目錄的權(quán)限中加上user的讀取權(quán)限，重啟IIS7就能正常使用。如果不想配置WEB服務(wù)器，可以使用Chrome瀏覽器加上--disable-web-security參數(shù)，直接打開Sencha Touch項(xiàng)目的Index.html頁面進(jìn)行瀏覽[4]。

以上的環(huán)境軟件在安裝時(shí)注意兩點(diǎn)，一是不要安裝在中文目錄下，二是不要安裝在帶空格的目錄下，否則會(huì)造成一些不知名的錯(cuò)誤。這些配置為網(wǎng)絡(luò)課程教學(xué)平臺(tái)的開發(fā)搭建了基礎(chǔ)環(huán)境。

3 網(wǎng)絡(luò)課程教學(xué)平臺(tái)的運(yùn)行調(diào)用過程

Sencha Touch是一個(gè)支持MVC模式的框架，通過框架中Model（模型）、View（視圖）、Controller（控制器）來完成MVC模式的程序開發(fā)。利用Sencha Touch構(gòu)建的網(wǎng)絡(luò)課程教學(xué)平臺(tái)能實(shí)現(xiàn)開發(fā)過程高效、運(yùn)行穩(wěn)定，以及平臺(tái)移植性好等特點(diǎn)。下面著重分析一下網(wǎng)絡(luò)課程教學(xué)平臺(tái)的調(diào)用過程。對于Sencha Touch程序來說，它們基本上都是一個(gè)單頁面的程序，這個(gè)單頁面就是Index.html，所有程序的視圖顯示、功能切換都是在這個(gè)Index.html里通過腳本來實(shí)現(xiàn)的。

（1）在Index.html里只有一條語句加載了腳本文件，樣式和Sencha Touch的框架都沒有加載，語句是。在語句中加載了development.js。

（2）在development.js腳本中通過調(diào)用XMLHttpRequest對象的open方法獲取了app.json。在獲取文件完成后，通過eval方法返回app.json腳本對象賦值給options，接著把scripts指向options.js，styleSheets指向options.css，也就是把js和css分別給了scripts和styleSheets變量，利用2個(gè)循環(huán)來加載標(biāo)簽的css樣式和