概述
在软件开发领域中，有两个重要的趋势愈来愈重要：移动应用程序开发和基于标准的 HTML5 web 开发。任何类型开发的学习过程都是艰苦的。开发一个本地移动应用程序一般须要特定平台和技术知识，好比，用于 iPhone 的 Objective-C，用于 Android 的 Java™（这只是两个平台）。HTML5 开发近期日渐流行，由于它是基于标准的。虽然供应商正在迅速地融入并遵照这些早期的规范，但 HTML5 还不是很成熟。html
近期发布的 Sencha Touch 1.0 融合了移动应用程序开发领域尖端技术和 web 开发，造成了一个简单的、易于理解的框架用于构建移动 web 应用程序。在本文中，您将学习开始使用 Sencha Touch 框架所需的一切。html5
回页首java
Sencha Touch
学习构建移动应用程序 — 特别是从一个 web 开发人员的角度 — 可能比较麻烦。各类平台可供挑选，各类技术可供学习。HTML5 支持，尽管发展势头迅速上升，但仍然没有准备好用于复杂的 Web 应用程序，特别是业务线应用程序。 android
Sencha Touch 将丰富的 HTML5 平台和移动 web 应用程序开发结合造成一个折中方案。这个框架是开发人员友好的，相似于使用 Ext JS JavaScript 框架。若是您拥有中高级 JavaScript 水平，那么掌握 Sencha Touch 是可能的。若是您已拥有做为 JavaScript 和 CSS 开发人员的技能，那么 Sencha Touch 会当即将您变成一个移动应用程序开发人员。chrome
Sencha 是一家拥有核心商业产品的公司，可是也支持开源软件。 Sencha Touch 1.0 对我的和商业用途都是免费的。编程
平台支持
Sencha Touch 目前支持 WebKit 浏览器，包括流行的 Apple iOS 和 Google Androidis 平台。有些人可能会认为这种支持不够 — 全部平台必须重视对 Sencha Touch 的支持。在移动 web 开发领域中选择一个框架时，明智的作法是注重两点：平台的丰富性和特性的丰富性。须要这样一种框架：可以以对开发人员友好的方式从 HTML5/CSS3 提取最多内容且具备普遍的影响力。在这方面，Sencha 比较精明，支持两种最流行的平台并使用它们的资源来为开发人员提供丰富的、易于使用的特性。 api
您须要知道的事
要开始使用 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> <!-- 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> </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 应用程序
清单 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 的一个简介，它是一个使用 HTML五、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 论坛。