使用 HTML5 创建移动设备上的离线 Web 应用程序（2）
|
- UID
- 1066743
|
使用 HTML5 创建移动设备上的离线 Web 应用程序（2）
示例应用程序本节概述示例应用程序 MyHomeStuff。它是一个简单的库存管理应用程序，可以用于追踪所拥有的物资。 图 2 显示的是 iPhone 上的应用程序。
图 2. iPhone 视图 为简单起见，此处省略服务器段的数据同步。图 3 显示的是 Palm Pre Web 浏览器上的 MyHomeStuff 库存管理应用程序。
图 3. Palm Pre 视图 屏幕上半段是所有输入项目（书籍、电脑等）的概览。
当用户在清单中选择某一项目，其明细（Id、Quantity、Name）在表单中部显示。使用 Update 按钮可改变所选项目的明细。使用 Delete 按钮还可从应用程序中删除所选项目。在表单中输入项目的数量和名称并选择 Create 按钮可创建新项目。
应用程序状态显示在屏幕下半段。
HTML 细节HTML 页面包含声明、原标记，这些用于移动优化显示、对外部文件（manifest、JavaScript、css）是引用、以及组成应用程序基本结构必需的 HTML 元素。清单 1 显示了其代码。
清单 1. HTML 代码1
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
30
| <!DOCTYPE HTML>
<html manifest="MyHomeStuff.manifest">
<head>
<meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>MyHomeStuff</title>
<script type="text/javascript" src="MyHomeStuff.js" ></script>
</head>
<body onload="onInit()">
<h3>Overview</h3>
<ul id="itemData" ></ul>
<h3>Details</h3>
<form name="itemForm">
<label for="id">Id: </label>
<input type="text" name="id" id="id" size=2 disabled="true"/>
<label for="amount">Amount: </label>
<input type="text" name="amount" id="amount" size = 3/>
<label for="name">Name: </label>
<input type="text" name="name" id="name" size=16 /> <br>
<br>
<input type="button" name="create" value="create"
onclick="onCreate()" />
<input type="button" name="update" value="update"
onclick="onUpdate()" />
<input type="button" name="delete" value="delete"
</form>
<h4>Status</h4>
<div id="status"></div>
</body>
</html>
|
HTML 元素的事件处理属性指定当页面初始加载（onload）及点击按钮元素（onclick）时执行哪些 JavaScript 函数。
离线 Web 应用程序的 HTML 页面以 <!DOCTYPE HTML> 标记开始。通过 <html manifest="MyHomeStuff.manifest"> 标记中的清单属性来引用清单。
如上所述，清单指定需要加载到缓存中的文件。本应用程序包含一个 HTML 文件和一个 JavaScript 文件。引用清单的 HTML 文件自动包含在应用程序缓存中。清单只包含以下部分：
清单 2. Manifest 文件1
2
3
| CACHE MANIFEST
MyHomeStuff.js
|
|
|
|
|
|
|
