在软件开发领域中，有两个重要的趋势越来越重要：移动应用程序开发和基于标准的 HTML5 web 开发。任何类型开发的学习过程都是艰苦的。开发一个本地移动应用程序通常需要特定平台和技术知识，比如，用于 iPhone 的 Objective-C，用于 Android 的 Java™（这只是两个平台）。HTML5 开发近期日渐流行，因为它是基于标准的。虽然供应商正在迅速地融入并遵守这些早期的规范，但 HTML5 还不是很成熟。
近期发布的 Sencha Touch 1.0 融合了移动应用程序开发领域尖端技术和 web 开发，形成了一个简单的、易于理解的框架用于构建移动 web 应用程序。在本文中，您将学习开始使用 Sencha Touch 框架所需的一切。
学习构建移动应用程序 — 特别是从一个 web 开发人员的角度 — 可能比较麻烦。各种平台可供挑选，各种技术可供学习。HTML5 支持，尽管发展势头迅速上升，但仍然没有准备好用于复杂的 Web 应用程序，特别是业务线应用程序。
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> <!-- 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 选项，占用所有可用空间以及包含一个简单字符串。
到目前为止，您已经使用 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 组件。
您可以通过使用一些配置选项创建许多按钮样式。清单 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 框架的一个简单介绍。现在您已经掌握了基础知识，可以考虑通过以下 参考资料 进一步研究相关概念。
扫一扫
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
