黃 立

(武漢理工大學 計算機科學與技術學院，湖北 武漢430070)

隨著用戶對應用軟件界面的要求不斷提高，客戶體驗要求也越來越高，亟待尋找到一種不僅能夠簡單實現(xiàn)炫麗的外表，同時又不需要對后臺的實現(xiàn)進行過多修改的技術［1］，Ext JS 因此走進了程序開發(fā)者的視野，Ext JS 是一個非常優(yōu)秀的Ajax［2］(asynchronous javascript and XML)框架，它不但擁有Ajax 支持局部刷新的功能，而且使得整個前端的開發(fā)簡單化。Ext JS 為那些沒有美術功底的程序員解決了一大難題，同時，有很多用其他技術無法或者極難實現(xiàn)，卻能用Ext JS 輕易實現(xiàn)的功能。筆者以旅游信息管理系統(tǒng)為實例，探索Ajax 框架Ext JS 在旅游信息管理系統(tǒng)中的運用。

1 基于Ext JS 的富客戶端架構設計

整個系統(tǒng)的框架設計中，S2SH(struts2 -spring-hibernate)集成框架依舊是以MVC 設計模式為基礎的，Struts2 框架作為整個系統(tǒng)的基礎，主要負責對MVC 模型中的各層進行分離，系統(tǒng)持久層采用Hibernate 實現(xiàn)，解決對象與數(shù)據(jù)庫之間的“阻抗”匹配問題，同時中間業(yè)務邏輯層由Spring 進行統(tǒng)一管理［3］。S2SH 在與Ext JS 框架進行集成時并不需要進行過多改動，其整體邏輯結構并未改變。主要需要進行的修改集中在Struts 配置文件中，需要對Struts 繼承的包進行修改，不再是先前使用的defaults 包，而是改成繼承以JSON 格式傳遞參數(shù)的JSON-defaults 包，這樣前端頁面與后臺業(yè)務邏輯層之間直接傳遞JSON格式的數(shù)據(jù)，不再需要另外封裝。Ext JS 框架所體現(xiàn)的功能主要還是在客戶端瀏覽器中進行實現(xiàn)。從MVC 設計角度出發(fā)，瀏覽器端框架主要實現(xiàn)了用戶交互界面，即表示層［4］。作為一個Ajax的主流框架，Ext JS 較好地支持了Ajax 的異步發(fā)送請求，即在不需要程序開發(fā)者自己處理XMLhttpRequest 的前提下實現(xiàn)了無刷新動態(tài)更新頁面。并且Ext JS 作為純JavaScript 框架采用了軟件工程中面向?qū)ο蟮脑O計思想，改善了傳統(tǒng)Ajax 技術的代碼分離和編寫復雜的問題，這樣不僅讓不具備前端美術功底的程序開發(fā)者也能結合先前所學的面向?qū)ο蟮幕舅枷雭黹_發(fā)前臺的應用，而且還不需要將過多的精力花費在頁面美工設計上，Ext JS-S2SH 整合框架結構如圖1 所示。

2 旅游信息系統(tǒng)分析與設計

結合實際生活中旅游信息管理系統(tǒng)的需求［5］，分析其具體的功能模塊，將旅游信息系統(tǒng)分為用戶管理、行程管理、景點管理、旅行團管理和媒體文件管理這5 大模塊，通過進一步分析各個模塊的分工，可以得到如圖2 所示的系統(tǒng)整體功能模塊圖。

3 系統(tǒng)功能實現(xiàn)

結合系統(tǒng)整體功能模塊的需求，選擇Ext JS作為前臺頁面展示框架［6］。Ext JS 作為一套全面的前端界面庫，不僅對JavaScript 前端開發(fā)進行了簡化，而且還提供了豐富的用戶界面組件，在系統(tǒng)中使用Ext JS，只需要在下載好的Ext JS 包的相應文件中添加到項目下即可。在該系統(tǒng)中采用的是Ext JS 3.4.0 穩(wěn)定版，并將其中的ext -all. js、ext-lang-zh_CN.js 和ext.js 添加到項目中。

圖1 Ext JS-S2SH 框架結構圖

圖2 系統(tǒng)整體功能模塊圖

3.1 Ext JS 與后臺交互實現(xiàn)動態(tài)樹

系統(tǒng)主界面的設計采用Ext JS 中的TreePanel 實現(xiàn)左側功能菜單，TreePanel 作為Ext JS 的核心控件，使用過程中主要注意的兩個問題是：①從相應的業(yè)務邏輯層action 獲得需要加載的數(shù)據(jù)，并且傳遞給相應的節(jié)點;②對樹節(jié)點進行動態(tài)編輯，即實現(xiàn)樹節(jié)點的動態(tài)增加、刪除和修改。創(chuàng)建菜單樹的主要代碼如下：

Store：treeStore， //指定該樹所作用的TreeStore，即樹節(jié)點加載數(shù)據(jù)源

Ext JS 獲得數(shù)據(jù)大多是以JSON 格式進行傳遞的［7］，要獲得后臺的數(shù)據(jù)就必須先將數(shù)據(jù)格式轉換成JSON。結合S2SH 框架，就需要將struts.xml 文件中相應的action 返回值類型定義為JSON類型，并且將相應業(yè)務邏輯層action 中各變量名與前臺頁面中要獲得參數(shù)值的名稱設置一致，這樣在頁面上就可直接獲得并使用接收到的數(shù)據(jù)。

TreePanel 實現(xiàn)功能菜單中的數(shù)據(jù)實際上是從數(shù)據(jù)庫中相應的表中讀取出來的，要對樹節(jié)點進行動態(tài)編輯，實現(xiàn)上就是通過TreePanel 響應事件對該表中的數(shù)據(jù)進行相應的編輯［8］。筆者在實現(xiàn)系統(tǒng)中，通過TreePanel 響應單擊事件來獲得相應的TreeNode，然后通過調(diào)用相應的業(yè)務邏輯層action 來對TreeNode 中的id，name 等屬性進行相應的修改，并將數(shù)據(jù)持久化到數(shù)據(jù)庫中以實現(xiàn)對樹節(jié)點的修改。其效果圖如圖3 所示。

圖3 樹形菜單實現(xiàn)效果圖

3.2 Ext JS 實現(xiàn)谷歌地圖加點與加線功能

為了能夠既形象又直觀地展示景區(qū)的景點和線路，在系統(tǒng)中引入了谷歌地圖來展示［9］。在Ext JS 中將谷歌地圖集成在GMapPanel 控件中，只需要申請一個谷歌地圖的鑰匙，就可以通過該控件載入谷歌地圖，同時結合Google Map API 所提供的信息，還可以在地圖上添加一系列響應的事件來豐富谷歌地圖應用，這比直接使用HTML/CSS 和JavaScript 來載入谷歌地圖更方便有效。

(1)基礎數(shù)據(jù)的準備。要在地圖上展示景點信息與線路，就必須先要準備基礎數(shù)據(jù)(包括景點的經(jīng)度和緯度信息)，保存入數(shù)據(jù)庫，這樣才能夠為在地圖上展示景點與線路提供數(shù)據(jù)支持。

(2)引入相應的js 文件。要想在頁面中使用GMapPanel 控件，就必須先引入所需要的. js 文件，在這里引入了以下文件：

其中第一個引入的文件通過申請到谷歌鑰匙來獲取到谷歌地圖，并且設置了支持語言為大陸中文。第二個文件是Ext JS 包已經(jīng)設計好的GmapPanel 控件的引用，這樣就可以直接定義使用GmapPanel 而不需要自己再單獨來編寫相應的設計控件代碼。

(3)定義GMapPanel 和相應的響應事件。GMapPanel 控件在Ext JS 中已經(jīng)被封裝好，引入.js文件后直接定義即可。為了使載入的谷歌地圖能響應單擊實現(xiàn)添加景點，單擊實現(xiàn)雙擊添加線路的功能，需要在其中添加以下響應事件：

事件主體中主要通過鼠標點擊調(diào)用谷歌地圖提供的API 來獲得每個點的經(jīng)度和緯點以及用戶輸入的景點相關信息，然后通過“添加景點”和“添加線路”按鈕來觸發(fā)相應的業(yè)務邏輯層action進行業(yè)務處理，最終把數(shù)據(jù)提交持久化到后臺數(shù)據(jù)庫中。其景點與線路展示效果如圖4 所示。

3.3 Ext JS 日歷控件實現(xiàn)行程安排

為了能夠?qū)β眯袌F中每個行程進行合理安排，并提高用戶體驗，在系統(tǒng)中選擇了使用日歷控件來實現(xiàn)安排行程的功能［10］。Ext JS 中提供的日歷控件集成度很高，且能夠很清晰地分別針對Day、Week、Month 來對時間進行合理的安排。其操作與谷歌日歷形式類似，因此不僅操作簡單而且能夠較好地滿足用戶的需要。

(1)引入日歷控件所必須的.js 文件。使用日歷控件時，要引入的. js 文件比較多，就不一一贅述，主要是要將下載的Ext JS3.4.0 包中example 內(nèi)的Calendar 文件夾中的所有js 文件引入到所需要的頁面中，避免因為缺少.js 文件導致頁面問題。

(2)添加日歷控件的響應事件。點擊日歷時，需要在日歷的某一天或幾天編輯行程，即時間、地點、人物以及要游覽哪些景點，并且將用戶輸入的信息持久化到數(shù)據(jù)庫相應的表中，這就需要添加日歷控件相應的響應事件，并對引入的EventEditForm. js、EventEditWindow. js 和EventRecord.js 文件進行相應的修改，將EventEdit-Form.js 中點擊某個時間彈出的窗體中的屬性修改為行程安排中需要管理的屬性，并將要調(diào)用的業(yè)務邏輯層action 修改成已經(jīng)編寫并配置好的action，這樣就可以得到所需的行程安排日歷。在EventEditWindow.js 中將添加某個時間的事件所觸發(fā)的業(yè)務邏輯層action 修改成所對應的action，這樣就可以將添加的日歷事件持久化到相應的數(shù)據(jù)庫表中，使得再次進入該頁面時仍然可以看到先前行程安排的內(nèi)容，其行程安排實現(xiàn)的效果圖如圖5 所示。

圖4 景點與線路展示效果圖

圖5 行程安排效果圖

4 頁面性能的優(yōu)化

Ext JS 框架之所以能夠簡單方便地開發(fā)前端是因為Ext JS 是一個專業(yè)JavaScript 和UI 組件庫的RIA 框架，這也就意味著Ext JS 是一個重量級的前端框架，為了不影響用戶體驗，需要提升頁面的加載速度［11］。當然，Ext JS 本身也通過對源代碼進行壓縮和混淆以提升加載速度，但這還不能很好地滿足用戶對友好系統(tǒng)的需求。目前主要實現(xiàn)提升加載速度的方法有3 種：①對JavaScript 文件進行壓縮混淆;②使用客戶端緩存;③使用GZIP 等方法進行壓縮。

在旅游信息管理系統(tǒng)中，主要是通過GZIP對使用到的JavaScript 進行壓縮，因為目前市場上主流的瀏覽器都能很好地支持對GZIP 格式的文件進行處理，與此同時，GZIP 的壓縮率可以達到原文件的1/4。

主要實現(xiàn)的方法是通過編寫相應的程序來實現(xiàn)將.js 后綴的文件壓縮成.js.gz 后綴的文件［12］，然后通過編寫過濾器程序來實現(xiàn)對.js.gz 結尾的文件識別，同時在自動請求中添加“Content -Encoding”，“gzip”的頭文件，通過這樣的操作，瀏覽器就知道如何處理以. js. gz 結尾的文件內(nèi)容了。與此同時，為了使該過濾器程序能夠起作用，還需要對web.xml 文件進行修改，在其中添加過濾器，代碼如下：

經(jīng)過這樣的配置后，當瀏覽器調(diào)用.js 后綴名的文件時，服務器會先將經(jīng)過GZIP 壓縮過的文件傳輸給瀏覽器，瀏覽器接收到這些文件后，會自動將其進行解壓縮成原來的形式，然后再進行加載，這樣就實現(xiàn)了頁面性能的優(yōu)化。

5 結論

筆者采用Ext JS 作為旅游信息管理系統(tǒng)客戶端架構，并在此基礎上結合S2SH 框架實現(xiàn)了一個具有良好用戶體驗的旅游信息管理系統(tǒng)，其中主要針對通過動態(tài)樹實現(xiàn)功能菜單，借助谷歌地圖來實現(xiàn)景區(qū)內(nèi)景點和線路的展示，以及結合日歷控件來對旅游行程進行安排管理，同時對于頁面性能提升的方法進行了一定的研究，最終選擇通過GZIP 壓縮實現(xiàn)對頁面加載速度的優(yōu)化。

［1］徐會生，康愛媛.深入淺出Ext JS［M］.北京：人民郵電出版社，2010：25 -30.

［2］CRANE D，PASCARELLO E.Ajax in action［M］.［S.l.］：Manning Publishing，2005：125-135.

［3］劉中兵.開發(fā)者突擊：Java Web 主流框架整合開發(fā)(J2EE+ Struts + Hibernate + Spring)［M］. 北京：電子工業(yè)出版社，2008：256 -268.

［4］徐黎明，李志蜀，宋飛. 基于SSH 和Ext JS 的Web應用框架的設計與實現(xiàn)［J］.數(shù)字技術與應用，2010(4)：123 -128.

［5］王昱.基于Ext JS 的JSON 數(shù)據(jù)交換格式研究［J］.現(xiàn)代計算機：專業(yè)版，2013(2)：25 -30.

［6］朱立明，黃衛(wèi)忠，倪雄軍.Ext JS 框架下樹形組件改進及應用［J］.計算機應用，2010(2)：242 -244.

［7］ORCHARD L M，PEHIVANIAN A，KOON S，et al.Prodesional Java script frameworks［M］. ［S. l.］：Wrox，2009：124 -136.

［8］張鑫，黃燈橋.Ext JS3 詳解與實踐［M］.北京：清華大學出版社，2010：25 -39.

［9］赫爾德爾.Ajax 權威指南［M］.陳宗斌，譯.北京：機械工業(yè)出版社，2009：255 -289.

［10］衛(wèi)軍，夏慧軍.Ext js Web 應用程序開發(fā)指南［M］.北京：機械工業(yè)出版社，2011：156 -178.

［11］李剛.瘋狂Ajax 講義：Query/Ext JS/Prototype/DWR企業(yè)應用前端開發(fā)實戰(zhàn)［M］.北京：電子工業(yè)出版社，2013：152-169.

［12］葉健毅.精通Java EE -Eclipse、Struts2、Hibernate、Spring 整合應用案例［M］.北京：人民郵電出版社，2009：255 -289.