在移动应用程序中使用 web 开发的趋势逐渐增强。然而,间歇性网络可用性对于使用 Web 技术作为云基础架构一部分是一个巨大障碍。传统的 Web 应用程序没有网络就无法工作。解决方案之一是使用 html5 标准的两个特性(查看 参考资料):
用户可在移动设备上使用云功能,使用部署在本地数据库上的应用程序来工作,当再次上线时与云的其他部分共享数据。
在本文中,将学习典型使用场景的技术细节。将用一个简单的库存管理应用程序原型来演示 HTML5 技术。
在下面的下载表中 下载 本文示例应用程序源代码。
图 1 是示例应用程序架构主要部件概览。
值得注意的是,本应用程序包含一个单独的 HTML 页面,无需通过请求-响应循环加载更多 HTML 页面。所有动作都在一个页面上。
对于移动设备,有各种 JavaScript/CSS 库和框架来发布与 Web 应用程序接近的用户体验(例如,用于 iPhone 的 iUi)。请查看 参考资料 获取更多信息。尽管需要增加用户接受度,但本方法有着平台依赖性的劣势。
本节概述示例应用程序 MyHomeStuff。它是一个简单的库存管理应用程序,可以用于追踪所拥有的物资。 图 2 显示的是 iPhone 上的应用程序。
为简单起见,此处省略服务器段的数据同步。图 3 显示的是 Palm Pre Web 浏览器上的 MyHomeStuff 库存管理应用程序。
屏幕上半段是所有输入项目(书籍、电脑等)的概览。
当用户在清单中选择某一项目,其明细(Id、Quantity、Name)在表单中部显示。使用 Update 按钮可改变所选项目的明细。使用 Delete 按钮还可从应用程序中删除所选项目。在表单中输入项目的数量和名称并选择 Create 按钮可创建新项目。
应用程序状态显示在屏幕下半段。
HTML 页面包含声明、原标记,这些用于移动优化显示、对外部文件(manifest、JavaScript、css)是引用、以及组成应用程序基本结构必需的 HTML 元素。清单 1 显示了其代码。
<!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 文件自动包含在应用程序缓存中。清单只包含以下部分:
CACHE MANIFEST
MyHomeStuff.js
JavaScript 代码包含三个主要部分:
第一段包含初始化应用程序的事件处理函数(onload
) 和数据库初始化,如清单 3 所示。
function onInit(){
try {
if (!window.openDatabase) {
updateStatus("Error: DB not supported");
}
else {
initDB();
createTables();
queryAndUpdateOverview();
}
}
catch (e) {
if (e == 2) {
updateStatus("Error: Invalid database version.");
}
else {
updateStatus("Error: Unknown error " + e + ".");
}
return;
}
}
function initDB(){
var shortName = 'stuffDB';
var version = '1.0';
var displayName = 'MyStuffDB';
var maxSize = 65536; // in bytes
localDB = window.openDatabase(shortName, version, displayName, maxSize);
}
以上代码中:
onInit
函数首先检查是否存在强制 openDatabase
函数,如果没有,则说明浏览器不支持本地数据库。
initDB
函数打开 HTML5 浏览器的数据库。
第二段 JavaScript 中每个函数都有一部分用于 DB 访问和显示逻辑。这种逻辑合并是 Model 1 架构的一个特征(查看 参考资料),这是开发简单 Web 应用程序最轻松的方法。对于真实场景,对 Model View Controller (MVC) 部分进行清晰分离的架构要相对合适一点。
要构造示例概要清单,从事件处理函数中调用 queryAndUpdate
函数。清单 4 显示了代码。
function queryAndUpdateOverview(){
//remove old table rows
var dataRows = document.getElementById("itemData").getElementsByClassName("data");
while (dataRows.length > 0) {
row = dataRows[0];
document.getElementById("itemData").removeChild(row);
};
//read db data and create new table rows
var query = "SELECT * FROM items;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [], function(transaction, results){
for (var i = 0; i <
results.rows.length
; i++) {
var
row
=
results
.rows.item(i);
var
li
=
document
.createElement("li");
li.setAttribute("id", row['id']);
li.setAttribute("class", "data");
li.setAttribute("onclick", "onSelect(this)");
var
liText
=
document
.createTextNode(row['amount'] + " x "+ row['name']);
li.appendChild(liText);
document.getElementById("itemData").appendChild(li);
}
}, function(transaction, error){
updateStatus("Error: " + error.code + "<br>Message: " + error.message);
});
});
}
catch (e) {
updateStatus("Error: Unable to select data from the db " + e + ".");
}
}
以上代码中:
onSelect
,添加到每个列表元素以在点击时响应。
这一段函数还包含用于按钮条和 onUpdate
、onDelete
、onCreate
和 onSelect
列表的事件处理函数。清单 5 显示了 onUpdate
代码。(onCreate
和 onDelete
具有相同的结构,此处不再显示;可以从下面的表中 下载 示例应用程序的所有源代码。)
function onUpdate(){
var id = document.itemForm.id.value;
var amount = document.itemForm.amount.value;
var name = document.itemForm.name.value;
if (amount == "" || name == "") {
updateStatus("'Amount' and 'Name' are required fields!");
}
else {
var query = "update items set amount=?, name=? where id=?;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [amount, name, id],
function(transaction, results){
if (!results.rowsAffected) {
updateStatus("Error: No rows affected");
}
else {
updateForm("", "", "");
updateStatus("Updated rows:"
+ results.rowsAffected);
queryAndUpdateOverview();
}
}, errorHandler);
});
}
catch (e) {
updateStatus("Error: Unable to perform an UPDATE " + e + ".");
}
}
}
以上代码中:
当用户选取列表元素后执行 onSelect
函数。将用该元素的数据填充明细表单,代码如清单 6。
function onSelect(htmlLIElement){
var id = htmlLIElement.getAttribute("id");
query = "SELECT * FROM items where id=?;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [id], function(transaction, results){
var row = results.rows.item(0);
updateForm(row['id'], row['amount'], row['name']);
}, function(transaction, error){
updateStatus("Error: " + error.code + "<
br
>Message: " + error.message);
});
});
}
catch (e) {
updateStatus("Error: Unable to select data from the db " + e + ".");
}
}
以上代码中:
最后的工具函数的 JavaScript 部分开始是数据处理函数,它们只作为查询的参数。
errorHandler = function(transaction, error){
updateStatus("Error: " + error.message);
return true;
}
nullDataHandler = function(transaction, results){
}
为避免冗余,工具函数将填充细节表单(updateForm
)的字段和状态消息(updateStatus
),如下所示。
function updateForm(id, amount, name){
document.itemForm.id.value = id;
document.itemForm.amount.value = amount;
document.itemForm.name.value = name;
}
function updateStatus(status){
document.getElementById('status').innerHTML = status;
}
iPhone 3GS 和 Palm Pre 用于在真实的 HTML5 移动设备上运行本例。目前的 Safari 浏览器也能正常运行。
可以从下面的下载表格中将应用程序文件 下载 并部署到 HTTP 服务器中。服务器中必须以 text/cache-manifest
Mime 类型提供清单文件。在 iPhone 中打开应用程序后,保存书签并转换到离线操作模式。当选择书签后,程序将打开并可以在没有联网的情况下工作。
本文的重点是从技术角度了解离线 Web 应用程序。用一个简单的库存管理应用程序原型演示了 HTML5 技术,其中还包含本地部署的应用程序和本地数据库。
百度搜索“就爱阅读”,专业资料,生活学习,尽在就爱阅读网92to.com,您的在线图书馆!
来源: http://www.92to.com/bangong/2017/08-09/26642691.html