用 Sencha Touch 构建移动 web 应用程序

Sencha Touch 是一个使用 HTML5、CSS3 和 JavaScript 语言构建的移动 web 应用程序框架，在本文中，学习如何应用您当前的 web 开发技能进行移动 web 开发。下载和建立 Sencha Touch，通过一个样例应用程序探究基本原理。学习开始使用 Sencha Touch 框架所需的一切

2012 年 3 月 19 日

内容

概述

在软件开发领域中，有两个重要的趋势越来越重要：移动应用程序开发和基于标准的 HTML5 web 开发。任何类型开发的学习过程都是艰苦的。开发一个本地移动应用程序通常需要特定平台和技术知识，比如，用于 iPhone 的 Objective-C，用于 Android 的 Java™（这只是两个平台）。HTML5 开发近期日渐流行，因为它是基于标准的。虽然供应商正在迅速地融入并遵守这些早期的规范，但 HTML5 还不是很成熟。

近期发布的 Sencha Touch 1.0 融合了移动应用程序开发领域尖端技术和 web 开发，形成了一个简单的、易于理解的框架用于构建移动 web 应用程序。在本文中，您将学习开始使用 Sencha Touch 框架所需的一切。

回页首

Sencha Touch

学习构建移动应用程序 — 特别是从一个 web 开发人员的角度 — 可能比较麻烦。各种平台可供挑选，各种技术可供学习。HTML5 支持，尽管发展势头迅速上升，但仍然没有准备好用于复杂的 Web 应用程序，特别是业务线应用程序。

常见缩略词

Ajax：异步 JavaScript 和 XML
API：应用程序编程接口
CSS：层叠样式表
HTML：超文本标记语言
JSON：JavaScript 对象符号
SDK：软件开发工具包
UI：用户界面

Sencha Touch 将丰富的 HTML5 平台和移动 web 应用程序开发结合形成一个折中方案。这个框架是开发人员友好的，类似于使用 Ext JS JavaScript 框架。如果您拥有中高级 JavaScript 水平，那么掌握 Sencha Touch 是可能的。如果您已拥有作为 JavaScript 和 CSS 开发人员的技能，那么 Sencha Touch 会立即将您变成一个移动应用程序开发人员。

Sencha 是一家拥有核心商业产品的公司，但是也支持开源软件。 Sencha Touch 1.0 对个人和商业用途都是免费的。

平台支持

Sencha Touch 目前支持 WebKit 浏览器，包括流行的 Apple iOS 和 Google Androidis 平台。有些人可能会认为这种支持不够 — 所有平台必须重视对 Sencha Touch 的支持。在移动 web 开发领域中选择一个框架时，明智的做法是注重两点：平台的丰富性和特性的丰富性。需要这样一种框架：能够以对开发人员友好的方式从 HTML5/CSS3 提取最多内容且具有广泛的影响力。在这方面，Sencha 比较精明，支持两种最流行的平台并使用它们的资源来为开发人员提供丰富的、易于使用的特性。

您需要知道的事

要开始使用 Sencha Touch，您需要了解 JavaScript 语言和 CSS 的工作原理。如前所述，此框架提取许多特性和样式，否则您通常需要从头开始组装。

如果您想更进一步研究，或者想要构建属于自己的自定义组件，或者修改您自己的品牌样式，则需要更高级的 HTML5 和 CSS3 技能。更多信息，见参考资料部分。

准备开始

开始使用 Sencha Touch：

从 Sencha 下载框架。（见参考资料。）
将内容解压到开发网站的根目录下。
为解压文件夹重命名一个通用名称，比如，sencha-touch，这样对于将来的新版框架，您也可以使用相同的文件夹名，而不需要更新引用框架的其他文件。
使用一个 WebKit 浏览器，比如 Google Chrome，打开示例页 http://localhost/sencha-touch/examples/。虽然您的环境可能略有不同，但您也应该可以看到类似图 1 的界面。

图 1. Sencha Touch 示例

通过构建一个 Sencha Touch 应用程序研究框架特性。

使用清单 1 中的源代码，在您网站的根目录下创建一个新 HTML 文件 index.html。

清单 1. 样例 HTML5 文档
```
<!DOCTYPE HTML>

<html>

<head>

<title>Touch Test</title>

</head>

<body>

</body>

</html>
```
一旦您创建了那个文件，您就正式成为一名 HTML 开发人员了。顶部的 <!DOCTYPE HTML> 文档类型申明是关键，它确保文档被解析为 HTML5。
修改清单 1 中的代码，如清单 2 所示。

清单 2. 安装 Sencha Touch 脚本和样式
```
<!DOCTYPE HTML>

<html>

<head>

<title>Touch Test</title>



<link rel="stylesheet" type="text/css"

           href="sencha-touch/resources/css/sencha-touch-debug.css" />



<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

</head>

<body>

</body>

</html>
```
上述代码为 Sencha Touch 框架添加了 CSS 和 JavaScript 文件。您挂钩的是这些文件的调试版本，这推荐作为开发使用，因为它们会生成更好的错误消息。要部署，只需换成缩小本的调试版本。您也可以添加您的自定义 CSS 文件和 JavaScript 文件来构建您的应用程序。

要保持示例的简洁性，请包含一些嵌入的 JavaScript 代码。从修改您的代码开始，类似清单 3。

清单 3. 最简单的 Sencha Touch 应用程序

<!DOCTYPE HTML>

<html>

<head>

<title>Touch Test</title>

<!-- sencha touch css -->

<link rel="stylesheet" type="text/css"

           href="sencha-touch/resources/css/sencha-touch-debug.css" />

<!-- sencha touch javascript -->

<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- application script -->

<script type="text/javascript">

    Ext.setup( {

        onReady: function() {

            // create the root panel

            new Ext.Panel({

                fullscreen: true,

                html: "Sencha Touch is ready!"

            });

        }

    });

</script>

</head>

<body>

</body>

</html>

在 Google Chrome 运行页面，您应该可以看到类似图 2 的界面。

图 2. 最简单的 Sencha Touch 应用程序

Ext.setup

其他几个有用的 Ext.setup 配置选项函数也可以使用；参阅 API 文档获取更多详情，在您的 Sencha Touch 安装目录的 docs 文件夹中可以找到。

清单 3 中的代码介绍了一个 JavaScript 代码块，您可用于整篇文章来探索框架特性。如果您使用了 Ext JS，这个代码可能是熟悉的。Ext.setup 函数是您的 Sencha Touch 应用程序的起点。它接受一个对象以及一些配置选项。示例使用 onReady 选项，当文档准备好时，它将运行一个函数来。onReady 函数创建应用程序的根面板。根面板分别使用 fullscreen 和 html 选项，占用所有可用空间以及包含一个简单字符串。

在 Android 模拟器中运行应用程序

到目前为止，您已经使用 Google Chrome 浏览器完成了开发。这是一个很好的方法，特别是在处理 JavaScript 和 CSS bug 时。使用一个设备模拟器来启动应用程序测试。本小节展示如何安装一个 Android 模拟器。

为您的操作系统平台下载最新 Android SDK，然后将其解压到磁盘。

SDK 包括获取和运行一个模拟器所需要的所有工具，但是还有一些步骤也是必要的。
Android 模拟器需要您创建一个 Android Virtual Device (AVD)，这是实际建模一个 Android 驱动设备的基础配置选项。要创建一个 AVD，在 Android SDK 的工具文件夹下运行 android 实用函数。
Android SDK 和 AVD Manager 应该打开，类似图 3。

图 3. Android SDK 和 AVD Manager

在这里，如果您想要创建一个新虚拟设备，使用 New… 按钮，注意一下一个标记为 Target 的字段，这是禁用的，在您创建一个新虚拟设备之前，下载附属包到 SDK。

从左边菜单栏选择 Available Packages。
扩展您的网站 https://dl-ssl.google.com/android/repository/repository.xml 来检索可供安装的工具包列表。
选择最新 SDK 平台，如图 4 所示，然后单击 Install Selected。

图 4. 可供 Android SDK 使用的数据包
在下一个窗口单击 Install 按钮，接受安装。
下载和完成后，单击 Close。

您刚刚为您想创建的 AVD 安装了一个潜在目标，这个目标是一个运行在版本 2.2 上的 Android 设备，下一步是创建 AVD。

从 AVD Manager 左边的按钮选择 Virtual Devices，单后单击 New…。
输入 sencha-avd 作为 Name，然后选择您刚刚安装的 Android 2.2 目标作为 Target。其他全部保持默认设置。
单击 Create AVD。
在确认窗口单击 OK，然后关闭 AVD Manager。

现在您所需要的是在您本地开发环境中运行一个模拟器。要运行模拟器：打开一个终端窗口，将路径修改为 Android SDK 的安装根目录，然后输入清单 4 中的命令。

清单 4. 调用 Android 模拟器

tools/emulator -avd sencha-avd

您可以在 Android 模拟器中使用 web 浏览器来浏览您在 http://localhost/ 下的测试应用程序，但是您将得到一个很大的 404 错误，这是因为在模拟器中应用 localhost 或 127.0.0.1 实际上是在模拟器本身环境中。为了引用您的部署环境，使用地址 10.0.2.2，生成图 5 所示界面。

图 5. 在 Android 模拟器中运行的示例

Sencha Touch UI 组件概览

现在您对基本原理有所了解，这部分通览了一些 Sencha Touch UI 组件。

按钮

您可以通过使用一些配置选项创建许多按钮样式。清单 5 中的代码创建了一系列垂直排列的所有可用按钮。示例应用程序延伸出一组添加到根面板的条目 — 在本例中，是一个面板和一个系列垂直排列的按钮。

按钮根据 ui 配置选项进行样式化。支持的按钮类型是 normal、back、round、action 和 forward。

清单 5. 按钮

<script type="text/javascript">

  Ext.setup( {

    onReady: function() {

      // create the root panel

      new Ext.Panel({

        fullscreen: true,

        items: [

          // add a panel to the root panel

          // this will contain a vertical layout of buttons

          {

            xtype: "panel",

            layout: "vbox",

            items: [

              {

                xtype: "button",

                ui: "normal",

                text: "Normal"

              },

              {

                xtype: "button",

                ui: "back",

                text: "Back"

              },

              {

                xtype: "button",

                ui: "round",

                text: "Round"

              },

              {

                xtype: "button",

                ui: "action",

                text: "Action"

              },

              {

                xtype: "button",

                ui: "forward",

                text: "Forward"

              }

            ]

          }

        ]

      });

    }

  });

</script>

图 6 显示了生成结果

图 6. Sencha Touch 中提供的按钮样式

表单

表单套件包含所有常见功能和其他功能。很明显，表单套件处理和整合了 HTML5 特有函数。支持 HTML5 中的字段类型（比如，电子邮件、web 地址和时间选择器）和属性（比如，占位符文本）；Sencha Touch 只不过让它们更容易使用。清单 6 显示了一些特性。

清单 6. 表单控件样例

<script type="text/javascript">

  Ext.setup( {

    onReady: function() {

      // create the root panel

      new Ext.Panel({

        fullscreen: true,

        items: [

          // add a panel to the root panel

          {

            xtype: "form",

            items: [

              {

                xtype: "textfield",

                name: "name",

                label: "Name",

                placeHolder: "your name here"

              },

              {

                xtype: "emailfield",

                name: "email",

                label: "Email",

                placeHolder: "you@example.com"

              },

              {

                xtype: "urlfield",

                name: "url",

                label: "Url",

                placeHolder: "http://www.example.com"

              },

              {

                xtype: "datepickerfield",

                name: "date",

                label: "Date",

                picker: { yearFrom: 2010 }

              }

            ]

          }

        ]

      });

    }

  });

</script>

运行清单 6 中的表单可以生成类似图 7 的界面。 Date 字段获得焦点，底部显示时间选择器。

图 7. 可用表单字段样例

列表

开发移动 web 应用程序时，您可以使用有限的基本面板。对基于列表的 UI 组件的支持变得很重要。Sencha Touch 配备有各种列表的支持，包括简单的、组合的和嵌套的。图 8 是框架下载中的 Kitchen Sink 演示的一个屏幕截图，展示了一个组合列表。列表右边垂直排列的字符公开了一个有用的方法，可以直接跳到列表特定部分。

图 8. Kitchen Sink 演示中的一个组合列表

图标和工具栏

Sencha Touch 附带一个令人震撼的内置图标库，立即可用。您所需要做的只是指定一个字符串代表一个您想要的图标的 CSS 类。清单 7 显示如何构建两个工具栏：一个位于根面板顶部，一个位于底部。每个工具栏配置了一个小的开箱即用的图标样例。

此框架还提供更多可用图标，查看 API 文档和示例获取更多信息。

清单 7. 工具栏中的图标

<script type="text/javascript">

  Ext.setup( {

    onReady: function() {

      // create the root panel

      new Ext.Panel({

        fullscreen: true,

        dockedItems: [

          {

            xtype: "toolbar",

            dock: "top",

            items: [

              {

                iconMask: true,

                ui: "plain",

                iconCls: "add"

              },

              {

                iconMask: true,

                ui: "plain",

                iconCls: "delete"

              },

              {

                iconMask: true,

                ui: "plain",

                iconCls: "star"

              },

              {

                iconMask: true,

                ui: "plain",

                iconCls: "home"

              }

            ]

          },

          {

            xtype: "toolbar",

            dock: "bottom",

            items: [

              {

                iconMask: true,

                iconCls: "download"

              },

              {

                iconMask: true,

                iconCls: "favorites"

              },

              {

                iconMask: true,

                iconCls: "search"

              },

              {

                iconMask: true,

                iconCls: "user"

              }

            ]

          }

        ]

      });

    }

  });

</script>

运行清单 7 中的代码之后，您可以看到类似图 9 的界面。

图 9. 图标和样式样例

幻灯效果和选项卡

幻灯效果和选项卡易于实现，通过使用探讨过的编码模式。清单 8 显示了一个有标签的界面和一个 carousel.

清单 8. 构造幻灯效果和选项卡

<script type="text/javascript">

  Ext.setup( {

    onReady: function() {

      // create the root panel

      new Ext.TabPanel({

        fullscreen: true,

        items: [

          {

            title: "Tab 1",

            html: "First tab"

          },

          {

            title: "Tab 2",

            html: "Second tab"

          },

          {

            title: "Tab 3",

            html: "Third tab"

          }

        ]

      });

    }

  });

</script>

<script type="text/javascript">

  Ext.setup( {

    onReady: function() {

      // create the root panel

      new Ext.Carousel({

        fullscreen: true,

        items: [

          {

            html: "First item"

          },

          {

            html: "Second item"

          },

          {

            html: "Third item"

          }

        ]

      });

    }

  });

</script>

幻灯效果和选项卡类似于代码和函数。幻灯效果在卡之间移动，可以通过一个滑动动作从一边滑到另一边，也可以单击一个位于底部的环形图标。默认情况下，这两个控件都可以使用一个滑动动画在卡之间切换。

图 10 显示了选项卡界面。

图 10. 样例选项卡界面

图 11 显示了 carousel 界面。

图 11. 样例幻灯效果界面

覆盖

您可以使用几个覆盖控件。您的选择包括标准提示、确认和提示控件，以及普通模态控件。

地图

在移动 web 开发中，最重要的一个组件就是地图。Sencha Touch 使得在您的应用程序中包含一个地图变得很容易，使用 Ext.Map 组件即可。清单 9 显示了如何在样例应用程序中包含一个地图，记住包含 Google Maps API 的 JavaScript 文件，可使该样例运行。

清单 9. 使用地图

<!DOCTYPE HTML>

<html>

<head>

<title>Touch Test</title>

<!-- sencha touch css -->

<link rel="stylesheet" type="text/css"

         href="sencha-touch/resources/css/sencha-touch-debug.css" />

<!-- Google Maps API -->

<script type="text/javascript"

              src="http://maps.google.com/maps/api/js?sensor=true"></script>

<!-- sencha touch javascript -->

<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- application script -->

<script type="text/javascript">

  Ext.setup( {

    onReady: function() {

      // create the root panel

      new Ext.Panel({

        fullscreen: true,

        items: [

          {

            xtype: "map"

          }

        ]

      });

    }

  });

</script>

</head>

<body>

</body>

</html>

生成的地图窗口如图 12 所示。

图 12. 地图控件示例

事件和数据访问

Sencha Touch 支持几个您在移动应用程序中期望的关键事件，比如触摸开始/结束（touch start/end）、滚动开始/结束（scroll start/end）、敲击（tap）、双击（double tap）、滑指（swipe）和按压（pinch）。数据访问看起来像过去 Ext JS 所做的。

Sencha Touch 框架支持 JSON with padding (JSONP)、Yahoo! 查询语言和 Ajax 请求。与 Sencha Touch 数据包集合，它们提供一个灵活的机制来将数据绑定到您的 UI 组件上。

样式和设计

创建您自己的主题可能是一个相对比较难的任务。Sencha Touch 框架拥有关键特性，使得修改默认样式和设计变得更为容易。

框架使用 Syntactically Awesome Stylesheets (Sass)，这是 CSS3 的一个扩展，允许您使用变量和选择遗传性向主题开发添加更多的威力。更改单个变量可能会影响整个主题 — 就这么简单。

创建一个新主题不在本文范围之内。参考资料有几个链接可帮助您开始。

结束语

本文提供了 Sencha Touch 的一个简介，它是一个使用 HTML5、CSS3 和 JavaScript 构建的移动 web 应用程序框架。您学习了如何创建一个简单 Sencha Touch 应用程序，以及如何使用一个设备虚拟器进行测试。您还探索了一些 UI 组件。

本文只是对 Sencha Touch 框架的一个简单介绍。现在您已经掌握了基础知识，可以考虑通过以下参考资料进一步研究相关概念。

参考资料

学习

全面了解 Sencha：阅读 API 文档，查阅博客，访问论坛，下载演示，等等。
阅读 “Dive into HTML5”，作者 Mark Pilgrim，获取开始 HTML5 开发的帮助。
了解更多 Android。Android Dev Guide 中有常见任务的参考信息和分步指导。
developerWorks developerWorks 中国网站 Web 开发专区专门提供关于各种 Web 解决方案的文章。

获得产品和技术

下载 Sencha Touch。
下载最新版 Google Chrome 浏览器。
获取最新 Android SDK。
下载和学习更多 Sass。
以最适合您的方式 IBM 产品评估试用版软件：下载产品试用版，在线试用产品，在云环境下试用产品，或者在 IBM SOA 人员沙箱中花费几个小时来学习如何高效实现面向服务架构。

讨论

找到对 web 开发感兴趣的其他 developerWorks 成员。
分享您的知识：加入一个关注 web 主题的 developerWorks 小组。
快速找到答案：访问 Web 2.0 Apps 论坛。
快速找到答案：访问 Ajax 论坛。