基于Sencha Touch的移動(dòng)閱讀器設(shè)計(jì)與實(shí)現(xiàn)

●邵長(zhǎng)遠(yuǎn)，高春玲，李 睿

（1.大連外國(guó)語(yǔ)學(xué)院 圖書(shū)館，遼寧 大連 116044；2.遼寧師范大學(xué) 管理學(xué)院，遼寧 大連 116029）

1 引言

在3G時(shí)代，手機(jī)已成為人們上網(wǎng)獲取信息的重要工具。據(jù)CNNIC稱(chēng)，截至2011年12月底，我國(guó)手機(jī)網(wǎng)民已達(dá)3.56億。［1］根據(jù)易觀智庫(kù)《中國(guó)手機(jī)閱讀市場(chǎng)用戶(hù)研究報(bào)告2011》，手機(jī)閱讀已經(jīng)成為用戶(hù)使用頻次較高的移動(dòng)應(yīng)用，閱讀頻次每天3次以上與2～3次總占比達(dá)到59%。［2］面對(duì)用戶(hù)閱讀行為的轉(zhuǎn)變，即便圖書(shū)館擁有再豐富、再優(yōu)質(zhì)的資源，若不思索新的服務(wù)模式，也必然會(huì)離用戶(hù)越來(lái)越遠(yuǎn)。目前，特色館藏?cái)?shù)字化工作正在如火如荼的進(jìn)行著，而作為圖書(shū)館最寶貴的特色數(shù)字化資源又該如何實(shí)現(xiàn)移動(dòng)閱讀呢？鑒于此，筆者設(shè)計(jì)了一個(gè)針對(duì)館藏?cái)?shù)字資源的移動(dòng)閱讀器應(yīng)用系統(tǒng)，通過(guò)此系統(tǒng)，圖書(shū)館可以方便地發(fā)布各種格式的文檔，而用戶(hù)只需用手機(jī)上的瀏覽器打開(kāi)所要閱讀的文檔的地址就可實(shí)現(xiàn)對(duì)該文檔的閱讀。由于觸摸屏手機(jī)、平板電腦已經(jīng)成為現(xiàn)今移動(dòng)互聯(lián)領(lǐng)域主流產(chǎn)品，［3,4］本文所設(shè)計(jì)的移動(dòng)閱讀軟件主要面向具有觸摸屏的手持移動(dòng)終端，如iPhone、黑莓、安卓手機(jī)、iPad等，擁有觸摸屏功能的漢王等電子書(shū)閱讀器則不在本文討論范圍中。

2 Sencha Touch技術(shù)簡(jiǎn)介

Sencha Touch是世界上第一款基于Html5、CSS3與Javascript的應(yīng)用程序開(kāi)發(fā)框架，由Sencha公司以開(kāi)源的形式發(fā)布，在遵循開(kāi)源協(xié)議的前提下可以免費(fèi)使用。從2010年6月17日公開(kāi)發(fā)布第一個(gè)測(cè)試版本0.90開(kāi)始，到2011年3月24日最新發(fā)布的穩(wěn)定版本1.1.0，Sencha Touch已經(jīng)歷了15個(gè)版本的升級(jí)和完善。［5］最新的Sencha Touch框架經(jīng)過(guò)高度優(yōu)化，既可以開(kāi)發(fā)在線應(yīng)用，也可以訪問(wèn)本地存儲(chǔ)，用于離線開(kāi)發(fā)。Sencha Touch的技術(shù)特性主要有以下幾點(diǎn)。［6］

（1） 基于最新的WEB標(biāo)準(zhǔn)--HTML5、CSS3、JavaScript，整個(gè)庫(kù)在壓縮和gzip后大約80KB，通過(guò)禁用一些組件還會(huì)使它更小，有利于網(wǎng)絡(luò)傳輸，節(jié)省流量。

（2） 支持世界上最好的設(shè)備，1.1版兼容蘋(píng)果IOS 3+、Google Android 2.1+、BlackBerry 6+和其他安裝了基于WebKit內(nèi)核瀏覽器（Firefox除外） 的設(shè)備，基本涵蓋了主流手持移動(dòng)設(shè)備。

（3） 增強(qiáng)的觸摸事件，在touchstart、touchend等標(biāo)準(zhǔn)事件的基礎(chǔ)上，增加了一組自定義事件數(shù)據(jù)集成，如 tap（單擊）、double tap（雙擊）、swipe（劃屏）、tap and hold（拖放）、pinch（捻）、rotate（選擇），豐富的觸摸事件支持，為開(kāi)發(fā)較佳用戶(hù)體驗(yàn)的應(yīng)用程序提供了基礎(chǔ)。

（4）數(shù)據(jù)集成，提供了強(qiáng)大的數(shù)據(jù)包，通過(guò)A-jax、JSONp、YQL等方式綁定到組件模板，寫(xiě)入本地離線存儲(chǔ)。數(shù)據(jù)集成有利于實(shí)現(xiàn)表現(xiàn)層與數(shù)據(jù)層的邏輯分離，為同時(shí)支持線上操作與離線操作的網(wǎng)絡(luò)應(yīng)用程序開(kāi)發(fā)提供了便利。

3 基于Sencha Touch的移動(dòng)閱讀器設(shè)計(jì)思路

由于目前對(duì)屏幕觸控技術(shù)支持得比較好的手持移動(dòng)終端主要有蘋(píng)果的iPhone、iPad，黑莓和基于Andriod的品牌手機(jī)機(jī)型，筆者選擇以iPhone和iPad作為測(cè)試對(duì)象。本閱讀器從本質(zhì)上講是一個(gè)B/S應(yīng)用，其中Sencha Touch技術(shù)用于開(kāi)發(fā)前端表現(xiàn)層，采取Json格式傳輸每一頁(yè)文檔數(shù)據(jù)，頁(yè)數(shù)據(jù)量一般只有幾KB。后端則由 LAMP （Linux+Apache+Mysql+PHP）或WAMP（W表示windows系列操作系統(tǒng)） 提供支持。本閱讀器系統(tǒng)架構(gòu)圖見(jiàn)圖1。

圖1 基于Sencha Touch的移動(dòng)閱讀器系統(tǒng)架構(gòu)

3.1 后端設(shè)計(jì)

圖書(shū)館的數(shù)字資源格式不一，為了支持多種格式文檔的無(wú)差異閱讀，程序后端需要屏蔽文檔格式的復(fù)雜性，將各種格式的文檔自動(dòng)轉(zhuǎn)換成標(biāo)準(zhǔn)格式文檔，為前端用戶(hù)的交互操作提供數(shù)據(jù)支持及業(yè)務(wù)邏輯支持。后端設(shè)計(jì)核心主要包括三個(gè)模塊：數(shù)據(jù)庫(kù)模塊，文檔處理模塊和文件管理模塊。各模塊內(nèi)聚性較高，模塊間耦合性較低，便于后續(xù)開(kāi)發(fā)和升級(jí)。

3.1.1 數(shù)據(jù)庫(kù)模塊

因本文設(shè)計(jì)的閱讀器尚處于探索和實(shí)驗(yàn)階段，數(shù)據(jù)庫(kù)使用單表結(jié)構(gòu)。數(shù)據(jù)庫(kù)僅用于存儲(chǔ)文檔在服務(wù)器上的位置信息等，并未為優(yōu)化效率將前端所需閱讀數(shù)據(jù)存入數(shù)據(jù)庫(kù)，但已保留相應(yīng)擴(kuò)展字段。數(shù)據(jù)庫(kù)結(jié)構(gòu)如下。

（1） id：本表主鍵（primary key），用于唯一標(biāo)識(shí)表中的某一條記錄；字段類(lèi)型，Int 4。（2） Title：用于存儲(chǔ)文檔的題名信息；字段類(lèi)型，varchar（255）。（3）Desc：用于存儲(chǔ)文檔的摘要信息，做全文檢索處理；字段類(lèi)型，longtext。（4） FileURI：用于存儲(chǔ)文檔文件在服務(wù)器上的位置；字段類(lèi)型，varchar(500)。（5） ReadData：用于緩存系統(tǒng)已轉(zhuǎn)換過(guò)的數(shù)據(jù)，現(xiàn)階段程序中未啟用；字段類(lèi)型，longtext。（6） IsReady：用于標(biāo)識(shí)某文檔是否已經(jīng)轉(zhuǎn)換過(guò)，現(xiàn)階段程序中未啟用；字段類(lèi)型，Bool。

3.1.2 文檔處理模塊

此模塊主要用于文檔標(biāo)準(zhǔn)化，即將各類(lèi)文檔轉(zhuǎn)換為本閱讀器可直接使用的數(shù)據(jù)類(lèi)型。本程序選擇PDF作為統(tǒng)一的文檔格式，也就是說(shuō)，當(dāng)其他格式的文檔提交至服務(wù)器后，先經(jīng)由相應(yīng)步驟將其轉(zhuǎn)換為PDF文件。此步驟筆者借由PHP腳本驅(qū)動(dòng)Openoffice的文檔轉(zhuǎn)換模塊來(lái)完成，可支持較廣泛的文檔格式，腳本命名為All2Pdf.php。在文檔處理流程中，使用了大多數(shù)流行軟件都在采用的開(kāi)源PDF操作庫(kù)XPDF對(duì)其進(jìn)行解析。通過(guò)XPDF解析PDF文檔，獲取相應(yīng)的標(biāo)簽與數(shù)據(jù)流之后，再對(duì)照PDF官方標(biāo)簽描述手冊(cè)，將標(biāo)簽與數(shù)據(jù)流轉(zhuǎn)換為Web可渲染的布局標(biāo)簽及數(shù)據(jù)，并封裝為Sencha Touch支持的JSON格式。此步驟要求高效率且要能夠與XPDF庫(kù)無(wú)縫集成，故采用C語(yǔ)言編碼，合并XPDF庫(kù)的源碼后，將此模塊封裝為PHP擴(kuò)展庫(kù)以供Web服務(wù)器調(diào)用，此擴(kuò)展模塊命名為Pdf2Mobile。文檔處理流程圖見(jiàn)圖2。

圖2 文檔處理流程

3.1.3 文件管理模塊

本模塊主要用于管理員登錄認(rèn)證，管理員對(duì)服務(wù)器端的文件進(jìn)行添加、修改、更名、刪除，以及管理員對(duì)數(shù)據(jù)庫(kù)的備份和恢復(fù)等操作。

3.2 前端設(shè)計(jì)

前端包含管理員前端與文獻(xiàn)閱讀前端兩個(gè)部分。文獻(xiàn)閱讀前端使用Sencha Touch技術(shù)開(kāi)發(fā)，針對(duì)手持移動(dòng)互聯(lián)設(shè)備提供優(yōu)化UI。由于管理員前端不針對(duì)手持觸摸設(shè)備，管理員用戶(hù)通過(guò)普通PC瀏覽器進(jìn)行服務(wù)器端文件管理。因此，本小節(jié)中，筆者只討論基于Sencha Touch的文獻(xiàn)閱讀前端設(shè)計(jì)。

3.2.1 設(shè)計(jì)思路

為了獲得良好的用戶(hù)體驗(yàn)，文獻(xiàn)閱讀前端需根據(jù)手持設(shè)備的不同類(lèi)型提供不同布局的閱讀界面，且需要提供合適的觸摸事件和順暢簡(jiǎn)潔的切換效果。筆者嘗試通過(guò)Sencha Touch技術(shù)將web和客戶(hù)端閱讀方式的優(yōu)勢(shì)有機(jī)結(jié)合，力求為用戶(hù)提供一個(gè)支持多點(diǎn)觸控、多種文件格式文檔閱讀、自適應(yīng)布局、節(jié)省流量的移動(dòng)閱讀器。

3.2.2 設(shè)計(jì)界面

觸摸屏手機(jī)與平板電腦均具有豎屏式與橫屏式操作界面，支持重力感應(yīng)切換或手動(dòng)切換。因無(wú)法預(yù)測(cè)用戶(hù)閱讀時(shí)使用的界面，程序需具有設(shè)備偵測(cè)能力，能夠獲取用戶(hù)的閱讀環(huán)境，并針對(duì)不同閱讀環(huán)境提供不同的閱讀視圖。由于iPhone和iPad為目前對(duì)多點(diǎn)觸控技術(shù)支持得最好的兩種移動(dòng)設(shè)備，筆者以此二者為測(cè)試對(duì)象，設(shè)計(jì)了手機(jī)豎屏式視圖、手機(jī)橫屏式視圖、平板電腦橫屏式視圖等種類(lèi)的閱讀視圖，以方便用戶(hù)不同操作。

4 關(guān)鍵代碼

本程序的重點(diǎn)部分在于文獻(xiàn)閱讀前端的UI設(shè)計(jì)，該部分代碼利用Sencha Touch技術(shù)開(kāi)發(fā)完成。程序所用組件都是Sencha Touch框架的內(nèi)置組件，如頂部工具欄為Ext包中的Toolbar組件，設(shè)置其Dock屬性為T(mén)op。章節(jié)目錄面板為置于Panel容器內(nèi)的List組件。Sencha Touch提供了一個(gè)Ext.Application的類(lèi)，該類(lèi)有一個(gè)profiles屬性，支持多個(gè)預(yù)置profile事件綁定，可用來(lái)偵聽(tīng)用戶(hù)閱讀環(huán)境的改變，因此，只需再創(chuàng)建一個(gè)布局適配器，為不同的profile構(gòu)造不同的布局即可實(shí)現(xiàn)布局自動(dòng)切換。該功能實(shí)現(xiàn)關(guān)鍵代碼如下：

5 程序測(cè)試運(yùn)行

本程序在Iphone手機(jī)和ipad上進(jìn)行了實(shí)測(cè)。程序自動(dòng)隱藏了瀏覽器的地址欄，實(shí)現(xiàn)了用戶(hù)閱讀空間的最大化，并能夠響應(yīng)重力反應(yīng)，自動(dòng)更改控件布局，對(duì)觸摸操作反應(yīng)靈活，頁(yè)面加載速度尚可，基本達(dá)到既定設(shè)計(jì)目標(biāo)。本程序測(cè)試地址為∶http∶//lib.dlufl.edu.cn/bk1/。鑒于程序使用了較新的技術(shù)標(biāo)準(zhǔn)Html5與CSS3，故測(cè)試時(shí)最好使用相應(yīng)移動(dòng)終端設(shè)備，也可通過(guò)Chrome與safari瀏覽器進(jìn)行訪問(wèn)測(cè)試，否則頁(yè)面將無(wú)法準(zhǔn)確渲染。

6 結(jié)語(yǔ)

筆者基于Sencha Touch技術(shù)設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)移動(dòng)閱讀器系統(tǒng)，圖書(shū)館可利用此系統(tǒng)方便地開(kāi)展館藏?cái)?shù)字資源的移動(dòng)閱讀服務(wù)。作為探索性項(xiàng)目，此閱讀器在系統(tǒng)構(gòu)建方面仍有很多不足，如對(duì)終端設(shè)備要求高、支持文檔格式僅限于Openoffice可識(shí)別的文檔格式等，如何解決好這些問(wèn)題值得我們進(jìn)一步去思考和研究。

［1］CNNIC.第29次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告［EB/OL］.［2012-04-10］.http∶//www.cnnic.cn/research/bgxz/tjbg/201201/t20120116_23668.html

［2］易觀智庫(kù).中國(guó)手機(jī)閱讀市場(chǎng)用戶(hù)研究報(bào)告2011［EB/OL］. ［2011-11-05］.http∶//www.enfodesk.com/SMinisite/webinfo/.

［3］分析師預(yù)測(cè)iPhone明年銷(xiāo)量有望升至1.07億部［EB/OL］.［2011-11-05］.http∶//tech.163.com/11/1004/09/7FGRLGMT000915BE.html.

［4］ More Than 100Million Handsets with Touch Screens to Ship in 2008［EB/OL］.［2011-11-05］.http∶//www.abiresearch.com/press/942-More+Than+100+Million+Hand sets+with+Touch+Screens+to+Ship+in+2008.

［5］ Release Notes for Sencha Touch1.1.0［EB/OL］.［2011-11-05］.http∶//dev.sencha.com/deploy/touch/releasenotes.html.

［6］ Sencha Touch Mobile JavaScript Framework［EB/OL］.［2011-11-05］.http∶//www.sencha.com/products/touch/.