使用 Sencha Touch 开发超炫的跨平台移动 Web 应用（1）

look_w

随着智能移动设备的普及和 3G 通讯技术的发展，将会有越来越多的传统应用部署为移动 Web 应用，而良好兼容性和操控性是 Web 应用成功的关键。本文将分为以下四个部分介绍 Sencha Touch 的独特之处，并结合示例为相关移动应用的开发人员编写良好兼容性和操控性的 Web 程序提供借鉴。

• 功能与特性
• 界面组件
• 动画效果
• 应用开发环境的搭建及相关 JavaScript API 用法

与众不同的 Sencha Touch：功能和特性Sencha Touch 是世界上第一个支持 HTML5 和 CSS3 标准的移动应用框架，你可以使用 HTML5 来编写音频和视频组件，还可以使用 LocalStorage Proxy 来存储离线数据，同时，大量 CSS3 样式表为你提供了创建健壮样式层的可能。该框架在提供丰富功能的基础上对 JavaScript 库文件进行合理优化，使得经过 gzipped 压缩后的库文件在 120kb 以下，最大限度地提升了 Web 应用在浏览器中的加载速度，增强了用户体验。
除了对最新标准的支持，该框架最大的特色正如其名，增强了对手持移动设备触控操作的支持，除了支持浏览器标准的触摸事件，还额外添加了如 tap, double tap, swipe, tap-hold, pinch 和 rotate 等富有吸引力的操作事件，使用户体验到与原生程序一样的效果。
Sencha Touch 另一大优势在于其跨平台性，由于 Apple iOS 和 Andriod 设备有其独立的开发、测试和运行环境，针对某一平台开发的应用在另一平台是不兼容的，这大大增加了移动应用的开发成本。而基于 Sencha Touch 开发的 Web 应用具有与原生应用相同的用户体验，同时兼容 Apple iOS、Andriod 和黑莓 RIM 6 设备，可以满足大部分的市场需求。
此外，借助 Ext JS 多年来对 Ajax 数据集成的经验，该框架提供了丰富的数据处理功能。开发人员能够方便地处理各种格式的数据如 XML、JSON，并能灵活地绑定到可视化组件加以展示。
个性鲜明的 UI 组件表单是用户与应用程序交互的基本媒介，如用户信息注册、应用程序配置、个人评论的发表这些常见的 Web 应用场景都需要表单组件的支持。Sencha Touch 为我们提供了形式多样、操作简单的  。 中第一个界面所展示的是基本表单元素，包括多种类型的输入框，如纯文本、密码、邮件、URL 地址等类型，并能根据用户输入的文本进行有效性验证，以减少开发者对用户输入格式的验证代码，同时，基本表单还支持单选、多选、日历选择、多行文本输入等控件类型。 第二个界面展示了触控屏手持设备所特有的滑动条组件，适合调整一些连续性的数值和作为切换的开关按钮。 中第三个界面展示了建立在工具条上的表单控件，非常适用于搜索和文本过滤的应用场景。
图 1 表单组件列表是移动 Web 应用展示信息最为常见的组件，其中比较有特色的是分组列表（Grouped List）（如  中第一个界面），它可以根据所列项目的首字母进行排序分组，当用户触摸屏幕右侧字母索引时，屏幕可快速滚动并定位至对应分组，非常适合于列表信息较多的情况，如联系人列表，歌曲列表等。 中第二个界面所示的嵌套列表（Nested List）则非常适合于展示信息有层级关系的情况，如浏览论坛时的“讨论区 -> 主题帖 -> 原帖及回复内容”这样的层次关系。
图 2 列表组件精致形象的图标和布置合理的工具栏是 Apple iOS 原生应用引以为傲的部分，而 Sencha Touch 也可以做到这一点。 中第一个界面所示的是框架内置的图标样式，已可以满足大部分应用的需要，开发人员还可以通过自定义图标样式来扩展出更多更丰富的图标。如  中第二个界面所示，图标所在的工具栏布置方式也灵活多样，即可在屏幕顶部或者底部，也可以多个层叠，并可以在工具栏上布置形状各异的按钮。 中第三个界面所展示的是根据底部 Tab 标签页而进行切换的面板，不同的面板中可以包含不同的主题内容。
图 3 图标、工具栏和标签页如果你以为 Sencha Touch 只能做到以上这些小儿科，那就错了，下面展示了一些高级的 UI 功能。 中第一个界面类似于 Apple iOS 设备上的 SpringBoard 操作，可以通过手指的左右或者上下滑动，来旋转切换界面窗口； 中第二个界面显示了一个窗口重叠的效果，当上层弹出窗口激活时，下层窗口的操作是被屏蔽的，在提醒用户执行一些重要操作的场景中（如删除或者保存），这样的 UI 组件是非常好用的。
图 4 旋转切换与窗口的重叠效果