使用Sencha Touch 开发跨平台移动 Web 应用.docx

使用Sencha Touch 开发跨平台移动 Web 应用.docx

《使用Sencha Touch 开发跨平台移动 Web 应用.docx》由会员分享，可在线阅读，更多相关《使用Sencha Touch 开发跨平台移动 Web 应用.docx（18页珍藏版）》请在冰豆网上搜索。

使用SenchaTouch开发跨平台移动Web应用

SenchaTouch是由Sencha公司开发的移动Web应用开发框架，用以提升主流移动设备在浏览器上的触碰操作，增强用户体验。

该框架以久负盛名的ExtJS富客户端框架为基础，并支持最新的HTML5及CSS3标准，与流行的AppleiOS和Andriod设备兼容。

一方面，它以Webkit浏览器引擎为基础，提供了出色的性能和用户体验；另一方面，它提供了基于GPLV3许可的开源版本和详尽的API文档，体现了良好的开放性和易用性。

因此，该框架可帮助移动应用开发人员提升开发效率，从而创造出更多富有创意的移动应用。

随着智能移动设备的普及和3G通讯技术的发展，将会有越来越多的传统应用部署为移动Web应用，而良好兼容性和操控性是Web应用成功的关键。

本文将分为以下四个部分介绍SenchaTouch的独特之处，并结合示例为相关移动应用的开发人员编写良好兼容性和操控性的Web程序提供借鉴。

功能与特性

界面组件

动画效果

应用开发环境的搭建及相关JavaScriptAPI用法

与众不同的SenchaTouch：

功能和特性

SenchaTouch是世界上第一个支持HTML5和CSS3标准的移动应用框架，你可以使用HTML5来编写音频和视频组件，还可以使用LocalStorageProxy来存储离线数据，同时，大量CSS3样式表为你提供了创建健壮样式层的可能。

该框架在提供丰富功能的基础上对JavaScript库文件进行合理优化，使得经过gzipped压缩后的库文件在120kb以下，最大限度地提升了Web应用在浏览器中的加载速度，增强了用户体验。

除了对最新标准的支持，该框架最大的特色正如其名，增强了对手持移动设备触控操作的支持，除了支持浏览器标准的触摸事件，还额外添加了如tap,doubletap,swipe,tap-hold,pinch和rotate等富有吸引力的操作事件，使用户体验到与原生程序一样的效果。

SenchaTouch另一大优势在于其跨平台性，由于AppleiOS和Andriod设备有其独立的开发、测试和运行环境，针对某一平台开发的应用在另一平台是不兼容的，这大大增加了移动应用的开发成本。

而基于SenchaTouch开发的Web应用具有与原生应用相同的用户体验，同时兼容AppleiOS、Andriod和黑莓RIM6设备，可以满足大部分的市场需求。

此外，借助ExtJS多年来对Ajax数据集成的经验，该框架提供了丰富的数据处理功能。

开发人员能够方便地处理各种格式的数据如XML、JSON，并能灵活地绑定到可视化组件加以展示。

个性鲜明的UI组件

表单是用户与应用程序交互的基本媒介，如用户信息注册、应用程序配置、个人评论的发表这些常见的Web应用场景都需要表单组件的支持。

SenchaTouch为我们提供了形式多样、操作简单的表单组件。

图1中第一个界面所展示的是基本表单元素，包括多种类型的输入框，如纯文本、密码、邮件、URL地址等类型，并能根据用户输入的文本进行有效性验证，以减少开发者对用户输入格式的验证代码，同时，基本表单还支持单选、多选、日历选择、多行文本输入等控件类型。

图1第二个界面展示了触控屏手持设备所特有的滑动条组件，适合调整一些连续性的数值和作为切换的开关按钮。

图1中第三个界面展示了建立在工具条上的表单控件，非常适用于搜索和文本过滤的应用场景。

图1表单组件

列表是移动Web应用展示信息最为常见的组件，其中比较有特色的是分组列表（GroupedList）（如图2中第一个界面），它可以根据所列项目的首字母进行排序分组，当用户触摸屏幕右侧字母索引时，屏幕可快速滚动并定位至对应分组，非常适合于列表信息较多的情况，如联系人列表，歌曲列表等。

图2 中第二个界面所示的嵌套列表（NestedList）则非常适合于展示信息有层级关系的情况，如浏览论坛时的“讨论区->主题帖->原帖及回复内容”这样的层次关系。

图2列表组件

精致形象的图标和布置合理的工具栏是AppleiOS原生应用引以为傲的部分，而SenchaTouch也可以做到这一点。

图3中第一个界面所示的是框架内置的图标样式，已可以满足大部分应用的需要，开发人员还可以通过自定义图标样式来扩展出更多更丰富的图标。

如图3中第二个界面所示，图标所在的工具栏布置方式也灵活多样，即可在屏幕顶部或者底部，也可以多个层叠，并可以在工具栏上布置形状各异的按钮。

图3中第三个界面所展示的是根据底部Tab标签页而进行切换的面板，不同的面板中可以包含不同的主题内容。

图3图标、工具栏和标签页

如果你以为SenchaTouch只能做到以上这些小儿科，那就错了，下面展示了一些高级的UI功能。

图4中第一个界面类似于AppleiOS设备上的SpringBoard操作，可以通过手指的左右或者上下滑动，来旋转切换界面窗口；图4中第二个界面显示了一个窗口重叠的效果，当上层弹出窗口激活时，下层窗口的操作是被屏蔽的，在提醒用户执行一些重要操作的场景中（如删除或者保存），这样的UI组件是非常好用的。

图4旋转切换与窗口的重叠效果

酷炫的动画效果

一直以来，基于浏览器的Web程序动画效果常被人诟病，尤其是基于JavaScript的动画效果库相对于原生的应用程序来说，还是存在一定的差距，而刚发布的SenchaTouch1.1.0版本就支持多达六种动画效果，分别是cube、fade、flip、pop、slide和wipe。

以最为酷炫的3D旋转Cube动画为例，它将当前显示的界面面板（称之为Card）想象为立方体的一个面，而即将展示的Card作为相邻的另外一个面，以左上方的顶点作为旋转基点进行旋转，从而得到Card之间切换的动画效果。

大家一定很好奇它是如何做到这一点的，我们通过查看该动画效果的源代码即可找到答案。

图5Cube动画效果示例

在文件sencha-touch-1.1.0\src\core\Anim.more.js中，可以看到以下代码片段

清单1

this.from={

'-webkit-transform':

'rotate'+rotateProp+'（'+fromRotate+'deg）'+

（showTranslateZ?

'translateZ（'+fromZ+'px）':

''）+fromTranslate,

'-webkit-transform-origin':

origin

};

this.to={

'-webkit-transform':

'rotate'+rotateProp+'（'+toRotate+'deg）

translateZ（'+toZ+'px）'+toTranslate,

'-webkit-transform-origin':

origin

};

由于SenchaTouch的动画组件是基于Webkit核心的浏览器，所以其动画效果实际上是基于Webkit的3D转换引擎，代码中this.from指的是当前Card如何旋转消失的属性，而this.to指的是要目标的Card如何旋转得以呈现，具体CSS属性的含义可参考 官方文档 。

基于Web的博客浏览示例：

应用开发环境的搭建、代码结构及测试

随时随地获取自己想要关注的信息是移动计算环境最直接的用途。

本文将以一个简单的博客订阅与浏览程序为例，展示基于SenchaTouch进行移动Web应用开发的流程，帮助开发人员更快的熟悉该编程框架。

博客订阅与浏览应用的主要功能是订阅自己关注的博客RSS源，浏览对应博客的主题列表，查看博文内容。

为了实现以上需求，开发人员需要完成以下几个步骤的工作。

搭建开发环境

第一，下载 SenchaTouch库文件 ，并将其解压到本地目录%sencha-touch-home%；第二，进入EclipseJavaEEIDE，创建一个名为myblog动态Web工程；第三，在本地安装ApacheTomcat6.0.x，在eclipse中将其配置为Webserver并将myblog工程部署其中以备测试；第四，安装AndriodVirtulMachine环境，用以启动一个虚拟设备来测试Web应用的效果。

需要说明的是，对于静态的SenchaTouch工程，Tomcat并不是必须的，可使用任意HTTPServer来部署应用，但由于本例中使用了Servlet解析RSS源来降低客户端负载，因此采用了Servlet容器Tomcat。

创建代码结构

一个典型的SenchaTouch工程主要由几个部分组成：

sencha-touch库文件，JavaScript文件，CSS文件，图标文件以及静态HTML文件。

sencha-touch库文件至少要包含默认的CSS文件sencha-touch.css和默认的JavaScript文件sencha-touch.js，值得一提的是，为了便于在开发调试阶段更准确地定位和解决问题，开发包中还包含了CSS和JavaScript对应的debug版本，开发人员可在开发阶段使用该版本，而在产品部署阶段再替换为对应的正式版。

图6工程目录结构

创建HTML和JavaScript文件

创建SenchaTouch应用的第一步就是创建一个HTML首页文件用于链接SenchaTouch库的CSS和JavaScript文件。

我们博客浏览示例的HTML文件是index.html，其内容如下：

清单2

type="text/css">

当创建好HTML文件之后，接下来就需要创建应用程序的JavaScript文件index.js，由于该示例是以浏览为主，因此选用NestedList组件作为UI界面的主体，相关代码如下：

清单3

Ext.setup（{

icon:

'img/icon.png',

tabletStartupScreen:

'img/tablet_startup.png',

phoneStartupScreen:

'img/phone_startup.png',

glossOnIcon:

false,

onReady:

function（）{

.......

varnestedList=newExt.NestedList（{

fullscreen:

true,

title:

'我的订阅博客',

displayField:

'text',

dockedItems:

[topbar,bottombar],

store:

store,

getDetailCard:

function（record,parentRecord）{

returnnewExt.ux.DescBox（{

value:

'Loading...',

scroll:

{

direction:

'both',

eventTarget:

'parent'

}

}）;

}

}）;

......

}）;

}

}）;

可以看到，index.js的第一行代码调用了Ext.setup（）方法，用以建立一个触控设备的Web页面，该方法可以为你的应用设置不同的启动属性和行为，例如示例代码中的：

icon，设置该应用默认的图标；

tabletStartupScreen，该属性设置在平板电脑上的启动图标；

phoneStartupScreen，该属性设置在智能手机上的启动图标；

glossOnIcon，该属性设置是否在默认图标上呈现光环效果；

onReady，该方法会在页面加载完毕，浏览器中的DOM模型已经建立完成时被调用。

由于为了保证程序在运行时所依赖的JavaScript文件都已经加载完毕，我们一般将应用启动的逻辑置于该方法内，类似于Java程序的main方法。

在定义NestedList组件时，有四点值得我们注意：

1.界面布局：

通过dockedItems属性，指明了NestedList顶部和底部分别放置了工具栏topbar和bottombar，topbar主要用来便于用户登录和设置偏好信息，bottombar主要是用来提供浏览博客时的一些常用操作，如订阅新的RSS源，删除选择的博客，刷新博客列表，给好的博文加星推荐以及回复功能。

为了生成工具栏，需要生成一个Ext.Toolbar对象的实例，以bottombar为例，其代码如下：

清单4

varbottombar=newExt.Toolbar（{

dock:

'bottom',

defaults:

{

ui:

'plain',

iconMask:

true

},

scroll:

'horizontal',

sortable:

true,

layout:

{

pack:

'center'

},

items:

[{

iconCls:

'add',

handler:

function（btn,event）{

addform.setCentered（true）;

addform.show（）;

}

},{

iconCls:

'trash'

},{

iconCls:

'refresh'

},{

iconCls:

'favorites'

},{

iconCls:

'action'

}]

}）;

该对象中主要定义了以下属性：

dock，工具栏的放置位置，可选值有top和bottom；

defaults，默认图标的UI效果，其中ui指背景颜色的样式，可选值有dark，light和plain；

scroll，滚动方向，可选值有horizon，vertical和both；

layout，表示工具栏图标的布局方式，示例中表示的是居中排列。

值得注意的是该属性应该由一个Object对象来指定而不是string；

items，该属性用于指定一个数组，来表示工具栏中的图标元素的集合，每个图标对象至少需要有一个iconCls属性来指定其样式，而handler属性则用于指定处理图标点击事件的方法，该方法回调时会传入两个参数function（btn,event），第一个指当前被触发事件的对象，第二个指被触发的事件类型，本例中通过该方法弹出一个表单窗口用于提供给用户输入感兴趣的博客RSS订阅源。

图7RSS订阅源添加表单

2.获取数据：

从后台通过相关API获取数据并展示在UI组件上，是实现Web应用的核心问题，SenchaTouch组件一般都是通过指定store数据源对象来实现的。

例如在本例中，采用Ext.data.TreeStore对象来定义在NestedList中层次化数据的获取，其相关代码如下：

清单5

Ext.regModel（'ListItem',{

idProperty:

'text',

fields:

[{

name:

'text',

type:

'string'

},{

name:

'link',

type:

'string'

},{

name:

'description',

type:

'string'

}]

}）;

varstore=newExt.data.TreeStore（{

model:

'ListItem',

proxy:

{

type:

'ajax',

url:

'/myblog/list',

reader:

{

type:

'tree',

root:

'items'

}

}

}）;

首先，通过model属性来指明返回数据的模型，该模型是通过Ext.regModel（）方法来建立的，主要是为了告诉程序返回数据是什么结构；其次，通过proxy属性来指明返回数据的获取方式，该框架中主要有两种Proxy，Clientproxy和Serverproxy，ClientProxy主要用于存储本地数据，其子类有三个：

LocalStorageProxy，在浏览器支持的情况下将数据保存至localStorage；

SessionStorageProxy，在浏览器支持的情况下将数据保存至sessionStorage；

MemoryProxy，将数据保存在内存中，但是当页面刷新时，数据都将会丢失。

Serverproxy主要用于存储一些通过远程请求服务器而获取的数据，它包括：

AjaxProxy，发送一个HTTP请求到相同域的服务器；

ScriptTagProxy，使用JSON-P发送请求到不同域的服务器。

本例中采用的是最为常用的Ajax方式通过请求servletURL（/myblog/list）来获取JSON数据。

3.自定义组件：

使用NestedList时，开发者要注意的是我们需要自己实现getDetailCard（）方法，用于定义对叶子节点数据的查看UI组件。

非常幸运的是，SenchaTouch框架为我们提供了良好的扩展机制用于自定义组件，这为我们构建结构清晰、面向对象的JavaScript程序打下了基础，示例中展示了如何扩展出一个自定义组件，代码片段如下：

清单6

Ext.ux.DescBox=Ext.extend（Ext.Component,{

...

afterRender:

function（）{

Ext.ux.DescBox.superclass.afterRender.apply（this,arguments）;

this.description=this.getTargetEl（）.createChild（{

tag:

'pre',

html:

this.value

}）;

},

getValue:

function（）{

returnthis.value;

},

setValue:

function（description）{

this.value=description;

if（this.rendered）{

this.description.update（this.value）;

}

}

}）;

我们定义了一个博客内容描述信息展示组件Ext.ux.DescBox，它继承自Ext.Component组件，并且自定义了Get和Set方法，同时重写了父类的afterRender方法，其中第一行的代码Ext.ux.DescBox.superclass.afterRender.apply（this,arguments）;必须调用，指的是将子类的参数应用到父类的构造方法中，类似于Java程序中的super（）方法；第二行代码this.description=this.getTargetEl（）.createChild（...）指在Component组件中创建一个HTML标签pre,并将value的值放置于pre标签中。

4.事件处理：

人机交互和UI组件之间的切换，需要事件来驱动或触发，因此各UI组件都支持一系列特定的事件及其处理方法，可参阅 API文档 。

示例中需要依靠叶子节点触摸事件leafitemtap将显示界面切换为DetailCard，就需要在NestedList组件上注册处理方法，其代码为：

清单7

nestedList.on（'leafitemtap',function（subList,subIdx,el,e,

detailCard）{

vards=subList.getStore（）,r=ds.getAt（subIdx）;

detailCard.setValue（r.get（"description"））;

}）;

其回调函数的参数依次代表“触控条目（item）所在List组件”，“触控条目的ID”，“触控条目element对象”，“触控事件对象”和“接下来要显示的DetailCard组件对象”。

部署到ApacheTomcat6.x进行测试

编写好对应的HTML、JavaScript和后台处理的Servlet之后，可将动态Web工程打包成为标准的WAR包，部署至Tomcat的webapp文件夹，启动服务器；随后打开AndroidVirtualDevices，启动其中的浏览器程序，并在URL地址栏输入http:

//:

8080/myblog/，便可以对该应用进行测试了，运行的画面如 图8 所示。

由于SenchaTouch应用的跨平台性，使用其他任意一款基于Webkit内核的浏览器，如iPhone4的Safari，也能得到相关的测试结果，而不仅限于文中示例的Android设备浏览器。

图8应用运行及测试画面

总结

开发与原生程序一样酷炫界