基于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樣式和