基于Sencha Touch的移动阅读器设计与实现

●邵长远，高春玲，李 睿

（1.大连外国语学院 图书馆，辽宁 大连 116044；2.辽宁师范大学 管理学院，辽宁 大连 116029）

1 引言

在3G时代，手机已成为人们上网获取信息的重要工具。据CNNIC称，截至2011年12月底，我国手机网民已达3.56亿。［1］根据易观智库《中国手机阅读市场用户研究报告2011》，手机阅读已经成为用户使用频次较高的移动应用，阅读频次每天3次以上与2～3次总占比达到59%。［2］面对用户阅读行为的转变，即便图书馆拥有再丰富、再优质的资源，若不思索新的服务模式，也必然会离用户越来越远。目前，特色馆藏数字化工作正在如火如荼的进行着，而作为图书馆最宝贵的特色数字化资源又该如何实现移动阅读呢？鉴于此，笔者设计了一个针对馆藏数字资源的移动阅读器应用系统，通过此系统，图书馆可以方便地发布各种格式的文档，而用户只需用手机上的浏览器打开所要阅读的文档的地址就可实现对该文档的阅读。由于触摸屏手机、平板电脑已经成为现今移动互联领域主流产品，［3,4］本文所设计的移动阅读软件主要面向具有触摸屏的手持移动终端，如iPhone、黑莓、安卓手机、iPad等，拥有触摸屏功能的汉王等电子书阅读器则不在本文讨论范围中。

2 Sencha Touch技术简介

Sencha Touch是世界上第一款基于Html5、CSS3与Javascript的应用程序开发框架，由Sencha公司以开源的形式发布，在遵循开源协议的前提下可以免费使用。从2010年6月17日公开发布第一个测试版本0.90开始，到2011年3月24日最新发布的稳定版本1.1.0，Sencha Touch已经历了15个版本的升级和完善。［5］最新的Sencha Touch框架经过高度优化，既可以开发在线应用，也可以访问本地存储，用于离线开发。Sencha Touch的技术特性主要有以下几点。［6］

（1） 基于最新的WEB标准--HTML5、CSS3、JavaScript，整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小，有利于网络传输，节省流量。

（2） 支持世界上最好的设备，1.1版兼容苹果IOS 3+、Google Android 2.1+、BlackBerry 6+和其他安装了基于WebKit内核浏览器（Firefox除外） 的设备，基本涵盖了主流手持移动设备。

（3） 增强的触摸事件，在touchstart、touchend等标准事件的基础上，增加了一组自定义事件数据集成，如 tap（单击）、double tap（双击）、swipe（划屏）、tap and hold（拖放）、pinch（捻）、rotate（选择），丰富的触摸事件支持，为开发较佳用户体验的应用程序提供了基础。

（4）数据集成，提供了强大的数据包，通过A-jax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。数据集成有利于实现表现层与数据层的逻辑分离，为同时支持线上操作与离线操作的网络应用程序开发提供了便利。

3 基于Sencha Touch的移动阅读器设计思路

由于目前对屏幕触控技术支持得比较好的手持移动终端主要有苹果的iPhone、iPad，黑莓和基于Andriod的品牌手机机型，笔者选择以iPhone和iPad作为测试对象。本阅读器从本质上讲是一个B/S应用，其中Sencha Touch技术用于开发前端表现层，采取Json格式传输每一页文档数据，页数据量一般只有几KB。后端则由 LAMP （Linux+Apache+Mysql+PHP）或WAMP（W表示windows系列操作系统） 提供支持。本阅读器系统架构图见图1。

图1 基于Sencha Touch的移动阅读器系统架构

3.1 后端设计

图书馆的数字资源格式不一，为了支持多种格式文档的无差异阅读，程序后端需要屏蔽文档格式的复杂性，将各种格式的文档自动转换成标准格式文档，为前端用户的交互操作提供数据支持及业务逻辑支持。后端设计核心主要包括三个模块：数据库模块，文档处理模块和文件管理模块。各模块内聚性较高，模块间耦合性较低，便于后续开发和升级。

3.1.1 数据库模块

因本文设计的阅读器尚处于探索和实验阶段，数据库使用单表结构。数据库仅用于存储文档在服务器上的位置信息等，并未为优化效率将前端所需阅读数据存入数据库，但已保留相应扩展字段。数据库结构如下。

（1） id：本表主键（primary key），用于唯一标识表中的某一条记录；字段类型，Int 4。（2） Title：用于存储文档的题名信息；字段类型，varchar（255）。（3）Desc：用于存储文档的摘要信息，做全文检索处理；字段类型，longtext。（4） FileURI：用于存储文档文件在服务器上的位置；字段类型，varchar(500)。（5） ReadData：用于缓存系统已转换过的数据，现阶段程序中未启用；字段类型，longtext。（6） IsReady：用于标识某文档是否已经转换过，现阶段程序中未启用；字段类型，Bool。

3.1.2 文档处理模块

此模块主要用于文档标准化，即将各类文档转换为本阅读器可直接使用的数据类型。本程序选择PDF作为统一的文档格式，也就是说，当其他格式的文档提交至服务器后，先经由相应步骤将其转换为PDF文件。此步骤笔者借由PHP脚本驱动Openoffice的文档转换模块来完成，可支持较广泛的文档格式，脚本命名为All2Pdf.php。在文档处理流程中，使用了大多数流行软件都在采用的开源PDF操作库XPDF对其进行解析。通过XPDF解析PDF文档，获取相应的标签与数据流之后，再对照PDF官方标签描述手册，将标签与数据流转换为Web可渲染的布局标签及数据，并封装为Sencha Touch支持的JSON格式。此步骤要求高效率且要能够与XPDF库无缝集成，故采用C语言编码，合并XPDF库的源码后，将此模块封装为PHP扩展库以供Web服务器调用，此扩展模块命名为Pdf2Mobile。文档处理流程图见图2。

图2 文档处理流程

3.1.3 文件管理模块

本模块主要用于管理员登录认证，管理员对服务器端的文件进行添加、修改、更名、删除，以及管理员对数据库的备份和恢复等操作。

3.2 前端设计

前端包含管理员前端与文献阅读前端两个部分。文献阅读前端使用Sencha Touch技术开发，针对手持移动互联设备提供优化UI。由于管理员前端不针对手持触摸设备，管理员用户通过普通PC浏览器进行服务器端文件管理。因此，本小节中，笔者只讨论基于Sencha Touch的文献阅读前端设计。

3.2.1 设计思路

为了获得良好的用户体验，文献阅读前端需根据手持设备的不同类型提供不同布局的阅读界面，且需要提供合适的触摸事件和顺畅简洁的切换效果。笔者尝试通过Sencha Touch技术将web和客户端阅读方式的优势有机结合，力求为用户提供一个支持多点触控、多种文件格式文档阅读、自适应布局、节省流量的移动阅读器。

3.2.2 设计界面

触摸屏手机与平板电脑均具有竖屏式与横屏式操作界面，支持重力感应切换或手动切换。因无法预测用户阅读时使用的界面，程序需具有设备侦测能力，能够获取用户的阅读环境，并针对不同阅读环境提供不同的阅读视图。由于iPhone和iPad为目前对多点触控技术支持得最好的两种移动设备，笔者以此二者为测试对象，设计了手机竖屏式视图、手机横屏式视图、平板电脑横屏式视图等种类的阅读视图，以方便用户不同操作。

4 关键代码

本程序的重点部分在于文献阅读前端的UI设计，该部分代码利用Sencha Touch技术开发完成。程序所用组件都是Sencha Touch框架的内置组件，如顶部工具栏为Ext包中的Toolbar组件，设置其Dock属性为Top。章节目录面板为置于Panel容器内的List组件。Sencha Touch提供了一个Ext.Application的类，该类有一个profiles属性，支持多个预置profile事件绑定，可用来侦听用户阅读环境的改变，因此，只需再创建一个布局适配器，为不同的profile构造不同的布局即可实现布局自动切换。该功能实现关键代码如下：

5 程序测试运行

本程序在Iphone手机和ipad上进行了实测。程序自动隐藏了浏览器的地址栏，实现了用户阅读空间的最大化，并能够响应重力反应，自动更改控件布局，对触摸操作反应灵活，页面加载速度尚可，基本达到既定设计目标。本程序测试地址为∶http∶//lib.dlufl.edu.cn/bk1/。鉴于程序使用了较新的技术标准Html5与CSS3，故测试时最好使用相应移动终端设备，也可通过Chrome与safari浏览器进行访问测试，否则页面将无法准确渲染。

6 结语

笔者基于Sencha Touch技术设计并实现了一个移动阅读器系统，图书馆可利用此系统方便地开展馆藏数字资源的移动阅读服务。作为探索性项目，此阅读器在系统构建方面仍有很多不足，如对终端设备要求高、支持文档格式仅限于Openoffice可识别的文档格式等，如何解决好这些问题值得我们进一步去思考和研究。

［1］CNNIC.第29次中国互联网络发展状况统计报告［EB/OL］.［2012-04-10］.http∶//www.cnnic.cn/research/bgxz/tjbg/201201/t20120116_23668.html

［2］易观智库.中国手机阅读市场用户研究报告2011［EB/OL］. ［2011-11-05］.http∶//www.enfodesk.com/SMinisite/webinfo/.

［3］分析师预测iPhone明年销量有望升至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/.