Google Gears 体验(1):本机数据库

GoogleGears 是一个开源的浏览器扩展,用于创建可离线使用的 web 应用程序,目前尚在 beta 阶段。

其主页地址在:http://code.google.com/apis/gears/
网上论坛:http://groups.google.com/group/google-gears/
Blog: http://gearsblog.blogspot.com/ (好像暂时不能访问了。。。)

GoogleGears 主要包含3个模块:

1. 本地 web 服务器(用于提供 HTML, JavaScript, 图片等的访问请求)
2. 数据库
3. WorkerPool
  通过异步的方式在后台进行资源访问的操作(比如同步本地用户数据到服务器),
  使浏览器程序保持快速响应。

首先,需要安装 GoogleGears:
http://code.google.com/apis/gears/install.html

那么如何在自己的应用程序上线后,检查客户电脑上是否安装了 GoogleGears 呢?
首先必须在页面里面包含这一段 js:
http://code.google.com/apis/gears/tools/gears_init.js
然后,可以通过相关对象来判断并提示用户安装。
示例代码如下:

<script src="gears_init.js"></script>
<script>
  
if (!window.google || !google.gears) {
    location.href 
= "http://gears.google.com/?action=install&message=<your welcome message>" +
                    
"&return=<your website url>";
  }
</script>

我们看到其中提示用户安装的地址允许定制两个自定义信息:

  message: 用户提示信息,不超过150个字。
  return:  安装完毕后返回的地址,也就是我们自己的 web 程序页面。

看一下 gears_init.js 会发现,对 Windows 而言,实际上 GoogleGears 在客户端安装了一个 ActiveX 对象:

factory = new ActiveXObject('Gears.Factory');

GoogleGears 的所有功能调用都是通过操纵该对象来完成的。


下面来学习几个例子。

1. 数据库 Demo
http://code.google.com/apis/gears/samples/hello_world_database.html

这个例子允许用户输入一些信息,并显示出最近输入的3条。在用户下次访问时仍然存在。
其界面如下:
gears1.JPG

首先在 HTML 页面里面包含如下代码,用于 gears 的安装探测,这个是每个页面必须的:

<script type="text/javascript"  src="gears_init.js"></script>

下面执行一些初始化工作,并打开数据库:

// 数据库连接对象
var db;
init();

// 打开本页面对应的本地数据库.
function init() {
  
if (!window.google || !google.gears) {
    
return;
  }
  
try {
    db 
= google.gears.factory.create('beta.database', '1.0');
  } 
catch (ex) {
    setError('Could not create database: ' 
+ ex.message);
  }
  
if (db) {
    db.open('database
-demo'); // 打开数据库
    // 创建表的语法
    db.execute('create table if not exists Demo' +
               ' (Phrase varchar(
255), Timestamp int)');

    
// 
  }
  
// 
}

获取最新的3条记录,并删除其他老的记录的实现代码:

var recentPhrases = ['', '', ''];
try {
 
// 这里返回的实际上是一个记录集的游标(cursor),和 ASP 的经典写法很类似。
 var rs = db.execute('select * from Demo order by Timestamp desc');
 
var index = 0;
 
while (rs.isValidRow()) {
  
if (index < 3) {
   recentPhrases[index] 
= rs.field(0);
  } 
else {
   
// 这里可以看到 Tempstamp(时间戳)被当作主键使用了。
   db.execute('delete from Demo where Timestamp=?', [rs.field(1)]);
  }
  
++index;
  rs.next();
 }
 rs.close();
catch (e) {
 
throw new Error(e.message);
}

用户输入数据提交时,用如下逻辑实现插入数据的功能:

function handleSubmit() {
  
if (!google.gears.factory || !db) {
    
return;
  }

  
var elm = document.getElementById('submitValue');
  
var phrase = elm.value;
  
// 注意 getTime() 方法返回的是日期对象相当于某个基准时间的毫秒数,是一个大整数
  var currTime = new Date().getTime();

  
// 插入新记录
  // Gears 数据库能自动转义/反转义插入的值。
  // (The Gears database automatically escapes/unescapes inserted values.)
  db.execute('insert into Demo values (??)', [phrase, currTime]);

  
// Update the UI.
  elm.value = '';
  displayRecentPhrases();
}

关闭浏览器后,重新打开看这个页面,果然数据还在。可以将 Google 的这个 demo 页面代码复制到本地,
打开 html 离线执行,其功能是一样的。

 

posted on 2007-06-08 12:50 NeilChen 阅读(...) 评论(...) 编辑 收藏

公告

导航