使用 Sencha Touch 开发超炫的跨平台移动 Web 应用（3）
|
- UID
- 1066743
|
使用 Sencha Touch 开发超炫的跨平台移动 Web 应用（3）
基于 Web 的博客浏览示例：应用开发环境的搭建、代码结构及测试随时随地获取自己想要关注的信息是移动计算环境最直接的用途。本文将以一个简单的博客订阅与浏览程序为例，展示基于 Sencha Touch 进行移动 Web 应用开发的流程，帮助开发人员更快的熟悉该编程框架。博客订阅与浏览应用的主要功能是订阅自己关注的博客 RSS 源，浏览对应博客的主题列表，查看博文内容。为了实现以上需求，开发人员需要完成以下几个步骤的工作。
搭建开发环境第一，下载 ，并将其解压到本地目录 %sencha-touch-home%；第二，进入 Eclipse Java EE IDE，创建一个名为 myblog 动态 Web 工程；第三，在本地安装 Apache Tomcat 6.0.x ，在 eclipse 中将其配置为 Web server 并将 myblog 工程部署其中以备测试；第四，安装 Andriod Virtul Machine 环境，用以启动一个虚拟设备来测试 Web 应用的效果。需要说明的是，对于静态的 Sencha Touch 工程，Tomcat 并不是必须的，可使用任意 HTTP Server 来部署应用，但由于本例中使用了 Servlet 解析 RSS 源来降低客户端负载，因此采用了 Servlet 容器 Tomcat。
创建代码结构一个典型的 Sencha Touch 工程主要由几个部分组成：sencha-touch 库文件，JavaScript 文件，CSS 文件，图标文件以及静态 HTML 文件。sencha-touch 库文件至少要包含默认的 CSS 文件 sencha-touch.css 和默认的 JavaScript 文件 sencha-touch.js，值得一提的是，为了便于在开发调试阶段更准确地定位和解决问题，开发包中还包含了 CSS 和 JavaScript 对应的 debug 版本，开发人员可在开发阶段使用该版本，而在产品部署阶段再替换为对应的正式版。
图 6 工程目录结构 创建 HTML 和 JavaScript 文件创建 Sencha Touch 应用的第一步就是创建一个 HTML 首页文件用于链接 Sencha Touch 库的 CSS 和 JavaScript 文件。我们博客浏览示例的 HTML 文件是 index.html，其内容如下：
清单 21
2
3
4
5
6
7
8
9
10
11
12
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My BLOG</title>
<link rel="stylesheet" href="sencha-touch/resources/css/sencha-touch.css"
type="text/css">
<link rel="stylesheet" href="css/index.css" type="text/css">
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body></body>
</html>
|
当创建好 HTML 文件之后，接下来就需要创建应用程序的 JavaScript 文件 index.js，由于该示例是以浏览为主，因此选用 NestedList 组件作为 UI 界面的主体，相关代码如下：
清单 31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| Ext.setup({
icon : 'img/icon.png',
tabletStartupScreen : 'img/tablet_startup.png',
phoneStartupScreen : 'img/phone_startup.png',
glossOnIcon : false,
onReady : function() {
.......
var nestedList = new Ext.NestedList({
fullscreen : true,
title : '我的订阅博客',
displayField : 'text',
dockedItems : [ topbar, bottombar ],
store : store,
getDetailCard : function(record, parentRecord) {
return new Ext.ux.DescBox({
value : 'Loading...',
scroll : {
direction : 'both',
eventTarget : 'parent'
}
});
}
});
......
});
}
});
|
可以看到，index.js 的第一行代码调用了 Ext.setup() 方法，用以建立一个触控设备的 Web 页面，该方法可以为你的应用设置不同的启动属性和行为，例如示例代码中的：
- icon，设置该应用默认的图标；
- tabletStartupScreen，该属性设置在平板电脑上的启动图标；
- phoneStartupScreen，该属性设置在智能手机上的启动图标；
- glossOnIcon，该属性设置是否在默认图标上呈现光环效果；
- onReady，该方法会在页面加载完毕，浏览器中的 DOM 模型已经建立完成时被调用。由于为了保证程序在运行时所依赖的 JavaScript 文件都已经加载完毕，我们一般将应用启动的逻辑置于该方法内，类似于 Java 程序的 main 方法。
|
|
|
|
|
|
