`

GoogleGear 一览

阅读更多
GoogleGear是Google发布的离线数据管理解决方案,也就是位于客户端浏览器中的DB,下面我们来看一看GoogleGear是如何使用的。
   还是来看一看效果吧。
 GoogleGear Sample

随意输入文字后,就可以将这个文字保存到GoogleGear的DB中。
怎么实现的呢?
看源代码:

 
  1. <form onsubmit="handleSubmit(); return false;">  
  2.   <b>Enter a phrase to store in the database:</b>&nbsp;<br>  
  3.   <table>  
  4.     <tr>  
  5.       <td valign="middle"><input type="text" id="submitValue"  
  6.         style="width:20em;"></td>  
  7.       <td valign="middle"><input type="submit" value="OK"></td>  
  8.     </tr>  
  9.   </table>  
  10. </form>  
 提交给handleSummit函数,那么这个函数怎么样呢?看下面的代码:
 
  1. <script type="text/javascript"  src="gears_init.js"></script>  
  2. <script type="text/javascript" src="sample.js"></script>  
  3. <script>  
  4.   
  5. var db;  
  6. init();  
  7.   
  8. // Open this page's local database.  
  9. function init() {  
  10.   var success = false;  
  11.   
  12.   if (window.google && google.gears) {  
  13.     try {  
  14.       db = google.gears.factory.create('beta.database', '1.0');  
  15.   
  16.       if (db) {  
  17.         db.open('database-demo');  
  18.         db.execute('create table if not exists Demo' +  
  19.                    ' (Phrase varchar(255), Timestamp int)');  
  20.   
  21.         success = true;  
  22.         // Initialize the UI at startup.  
  23.         displayRecentPhrases();  
  24.       }  
  25.   
  26.     } catch (ex) {  
  27.       setError('Could not create database: ' + ex.message);  
  28.     }  
  29.   }  
  30.   
  31.   // Enable or disable UI elements  
  32.   
  33.   var inputs = document.getElementsByTagName('input');  
  34.   for (var i = 0, el; el = inputs[i]; i++) {  
  35.     el.disabled = !success;  
  36.   }  
  37.   
  38. }  
  39.   
  40. function handleSubmit() {  
  41.   if (!google.gears.factory || !db) {  
  42.     return;  
  43.   }  
  44.   
  45.   var elm = document.getElementById('submitValue');  
  46.   var phrase = elm.value;  
  47.   var currTime = new Date().getTime();  
  48.   
  49.   // Insert the new item.  
  50.   // The Gears database automatically escapes/unescapes inserted values.  
  51.   db.execute('insert into Demo values (?, ?)', [phrase, currTime]);  
  52.   
  53.   // Update the UI.  
  54.   elm.value = '';  
  55.   displayRecentPhrases();  
  56. }  
  57.   
  58.   
  59. function displayRecentPhrases() {  
  60.   var recentPhrases = ['', '', ''];  
  61.   
  62.   // We re-throw Gears exceptions to make them play nice with certain tools.  
  63.   // This will be unnecessary in a future version of Gears.  
  64.   try {  
  65.   
  66.     // Get the 3 most recent entries. Delete any others.  
  67.     var rs = db.execute('select * from Demo order by Timestamp desc');  
  68.     var index = 0;  
  69.     while (rs.isValidRow()) {  
  70.       if (index < 3) {  
  71.         recentPhrases[index] = rs.field(0);  
  72.       } else {  
  73.         db.execute('delete from Demo where Timestamp=?', [rs.field(1)]);  
  74.       }  
  75.       ++index;  
  76.       rs.next();  
  77.     }  
  78.     rs.close();  
  79.   
  80.   } catch (e) {  
  81.     throw new Error(e.message);  
  82.   }  
  83.   
  84.   var status = document.getElementById('status');  
  85.   status.innerHTML = '';  
  86.   for (var i = 0; i < recentPhrases.length; ++i) {  
  87.     var bullet = '(' + (i + 1) + ') ';  
  88.     status.appendChild(document.createTextNode(bullet + recentPhrases[i]));  
  89.     status.appendChild(document.createElement('br'));  
  90.   }  
  91. }  
  92.   
  93. </script>  

首先是init.js:
 
  1. // Sets up google.gears.*, which is *the only* supported way to access Gears.  
  2. //  
  3. // Circumvent this file at your own risk!  
  4. //  
  5. // In the future, Gears may automatically define google.gears.* without this  
  6. // file. Gears may use these objects to transparently fix bugs and compatibility  
  7. // issues. Applications that use the code below will continue to work seamlessly  
  8. // when that happens.  
  9.   
  10. (function() {  
  11.   // We are already defined. Hooray!  
  12.   if (window.google && google.gears) {  
  13.     return;  
  14.   }  
  15.   
  16.   var factory = null;  
  17.   
  18.   // Firefox  
  19.   if (typeof GearsFactory != 'undefined') {  
  20.     factory = new GearsFactory();  
  21.   } else {  
  22.     // IE  
  23.     try {  
  24.       factory = new ActiveXObject('Gears.Factory');  
  25.     } catch (e) {  
  26.       // Safari  
  27.       if (navigator.mimeTypes["application/x-googlegears"]) {  
  28.         factory = document.createElement("object");  
  29.         factory.style.display = "none";  
  30.         factory.width = 0;  
  31.         factory.height = 0;  
  32.         factory.type = "application/x-googlegears";  
  33.         document.documentElement.appendChild(factory);  
  34.       }  
  35.     }  
  36.   }  
  37.   
  38.   // *Do not* define any objects if Gears is not installed. This mimics the  
  39.   // behavior of Gears defining the objects in the future.  
  40.   if (!factory) {  
  41.     return;  
  42.   }  
  43.   
  44.   // Now set up the objects, being careful not to overwrite anything.  
  45.   if (!window.google) {  
  46.     window.google = {};  
  47.   }  
  48.   
  49.   if (!google.gears) {  
  50.     google.gears = {factory: factory};  
  51.   }  
  52. })();  

 
正如注释所讲,这段代码只有一个函数,作用就是建立一个跨浏览器的GoogleFactory对象,我们后来用到的DB应该都是建立在这个对象之上的。
再看Sample.js:

 
  1. function setupSample() {  
  2.   // Make sure we have Gears. If not, tell the user.  
  3.   if (!window.google || !google.gears) {  
  4.     if (confirm("This demo requires Gears to be installed. Install now?")) {  
  5.       var spliceStart = location.href.indexOf("/samples");  
  6.       location.href =  
  7.         location.href.substring(0, spliceStart) + "/install.html";  
  8.       return;  
  9.     }  
  10.   }  
  11.   
  12.   var viewSourceElem = document.getElementById("view-source");  
  13.   if (!viewSourceElem) {  
  14.     return;  
  15.   }  
  16.   var elm;  
  17.   if (navigator.product == "Gecko") {  
  18.     // If we're gecko, we can show the source of the application with the  
  19.     // view-source protocol.  
  20.     elm = document.createElement("a");  
  21.     elm.href = "view-source:" + location.href;  
  22.     elm.innerHTML = "View Demo Source";  
  23.   } else {  
  24.     // Otherwise, just tell users how to do it manually.  
  25.     elm = document.createElement("em");  
  26.     elm.innerHTML = "To see how this works, use the <strong>view "+  
  27.       "source</strong> feature of your browser";  
  28.   }  
  29.   viewSourceElem.appendChild(elm);  
  30. }  
  31.   
  32. function checkProtocol() {  
  33.   if (location.protocol.indexOf('http') != 0) {  
  34.     setError('This sample must be hosted on an HTTP server');  
  35.     return false;  
  36.   } else {  
  37.     return true;  
  38.   }  
  39. }  
  40.   
  41. function addStatus(s, opt_class) {  
  42.   var elm = document.getElementById('status');  
  43.   if (!elm) return;  
  44.   var node = document.createTextNode(s);  
  45.   if (opt_class) {  
  46.     var span = document.createElement('span');  
  47.     span.className = opt_class;  
  48.     span.appendChild(node);  
  49.     node = span;  
  50.   }  
  51.   elm.appendChild(node);  
  52.   elm.appendChild(document.createElement('br'));  
  53. }  
  54.   
  55. function clearStatus() {  
  56.   var elm = document.getElementById('status');  
  57.   while (elm && elm.firstChild) {  
  58.     elm.removeChild(elm.firstChild);  
  59.   }  
  60. }  
  61.   
  62. function setError(s) {  
  63.   clearStatus();  
  64.   addStatus(s, 'error');  
  65. }  
  66.   
  67. setupSample();  
这段代码的主要功能是提示用户如何查看源代码以及显示消息的,因此不必理会。
看完这两段,整体上就比较清楚了,首先是建立一个db对象,然后执行init方法,在init方法内部添加一个table,然后显示这个表中的记录。因为刚开始没有数据,所以会不显示什么,当再次登录这个页面的时候,就可以显示了,整个添加的代码非常类似JDBC的操作,对于Java程序员来说没有gap。
当用户提交输入时,触发添加操作。
因此整个例子展示了googleGear的添加、删除、查询功能,从这个例子里也可以看出,GoogleGear的理念是客户端的db,至于这个db的查询语言如何,现在还不是很好下结论。
分享到:
评论
4 楼 hintcnuie 2007-11-11  
不错,是Ext2,我也是在研究Ext2时发现这个东东的,不过现在还是beta版,只能用来研究
3 楼 sp42 2007-11-10  
halfmile 写道
不记得在哪了,好像是在 在aptana (http://www.aptana.com/)的更新日志里面看到有一个 js lib (ext ?)已经封装了 gear sql lite 和 adobe air sql lite的api. 那样的话开发可以省很多事情。

另外 gear 的 sql lite是同步的, air 的是异步的(至少在 beta1中)

是的 好像是Jack写了一个
2 楼 sp42 2007-11-10  
遗憾的是,GG win2k不支持
AIR BETA2已经支持了
1 楼 halfmile 2007-11-10  
不记得在哪了,好像是在 在aptana (http://www.aptana.com/)的更新日志里面看到有一个 js lib (ext ?)已经封装了 gear sql lite 和 adobe air sql lite的api. 那样的话开发可以省很多事情。

另外 gear 的 sql lite是同步的, air 的是异步的(至少在 beta1中)

相关推荐

    FANUC数控参数一览表

    FANUC数控参数一览表FANUC数控参数一览表FANUC数控参数一览表FANUC数控参数一览表FANUC数控参数一览表FANUC数控参数一览表

    附录三湖北工业大学2017年大学生学科竞赛一览表.docx

    附录三湖北工业大学2017年大学生学科竞赛一览表.docx附录三湖北工业大学2017年大学生学科竞赛一览表.docx附录三湖北工业大学2017年大学生学科竞赛一览表.docx附录三湖北工业大学2017年大学生学科竞赛一览表.docx附录...

    “双师型”教师岗位资格证书对应一览表.pdf

    "双师型”教师岗位资格证书对应一览表" 通过对“双师型”教师岗位资格证书对应一览表的分析,我们可以总结出以下几个关键知识点: 1. "双师型"教师岗位资格证书的分类:根据表格,我们可以看到“双师型”教师岗位...

    合格供方一览表.pdf

    从提供的文件信息中,我们可以提炼出与“合格供方一览表”相关的知识点。下面将详细说明标题、描述、标签以及部分可识别内容中涉及的知识点。 首先,“合格供方一览表”是一个文档名称,通常用于企业管理领域,特别...

    Modbus功能码一览表(最全版)_Modbus功能码一览表_

    本文将深入探讨Modbus功能码一览表,帮助理解Modbus通信过程中的核心概念。 Modbus协议的核心在于其功能码,每个功能码对应一种特定的通信操作。功能码是Modbus消息帧中的一部分,它告诉接收方需要执行的操作。以下...

    实验室操作的生物因子及其危害程度分级一览表(金坛区疾控中心).docx

    实验室操作的生物因子及其危害程度分级一览表(金坛区疾控中心) 生物因子是指实验室操作中可能涉及到的生物agents,包括细菌、病毒、真菌等。这些生物因子可能会对实验室工作人员和周围环境造成危害。因此,正确地...

    hypermesh面板命令一览表(中英文).doc

    Hypermesh 命令一览表 Hypermesh 是一款功能强大、功能多样化的有限元分析软件,它提供了丰富的命令集来帮助用户高效、准确地进行有限元分析和模型建立。为了帮助用户更好地使用 Hypermesh,我们编制了 Hypermesh ...

    个人岗位廉政风险点及防控措施一览表.pdf

    个人岗位廉政风险点及防控措施一览表.pdf

    重点施加影响相关方一览表(表格模板、XLS格式).xls

    重点施加影响相关方一览表(表格模板、XLS格式).xls

    企业法人基本账户信息一览表.doc

    此外,企业法人基本账户信息一览表还能够作为企业财务管理和风险管理的依据,帮助企业更好地管理财务风险,避免财务风险的发生。 在信息化时代,企业法人基本账户信息一览表的电子化管理变得越来越重要。通过电子化...

    检测检验用仪器设备计量器具一览表.docx

    检测检验用仪器设备计量器具一览表 本资源摘要信息涵盖了检测检验用仪器设备计量器具一览表的标题、描述、标签和部分内容。根据提供的文件信息,我们可以生成以下知识点: 一、检测检验用仪器设备计量器具一览表的...

    G代码一览表

    G代码一览表 G代码是一种广泛应用于计算机数控系统(CNC)中的编程语言,用于控制机床的运动和加工过程。G代码是一种标准化的语言,能够在不同的CNC系统中通用。在本文中,我们将对G代码的基本概念、G代码的分类、M...

    安川机器人命令一览所有指令介绍.pdf

    安川机器人命令一览所有指令介绍.pdf

    常用塑胶材料特性及成型工艺一览表

    常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶...

    最新规范检验批容量一览表(新).pdf

    在建筑工程领域,规范检验批容量一览表是确保工程质量的重要依据,它详细规定了不同施工环节的质量检查标准和抽样数量。这份"最新规范检验批容量一览表(新)"涵盖了从土方工程到装饰细部构造等多个关键环节,旨在提供...

    (完整版)ISO14001环境法律法规要求及合规性评价一览表.pdf

    (完整版)ISO14001环境法律法规要求及合规性评价一览表.pdf(完整版)ISO14001环境法律法规要求及合规性评价一览表.pdf(完整版)ISO14001环境法律法规要求及合规性评价一览表.pdf(完整版)ISO14001环境法律法规要求及合规...

    环境因素评价、相关方的需求和期望评审一览表、风险和机遇的应对措施及评价、知识一览表、风险评估四个表.pdf

    环境因素评价、相关方的需求和期望评审一览表、风险和机遇的应对措施及评价、知识一览表、风险评估四个表.pdf

    电缆线规格型号一览表.pdf

    电缆线是电力传输和通信系统中的重要组成部分,其规格型号的选择直接影响到系统的安全性和效率。以下是对电缆线规格型号的详细...在实际操作中,应参照电缆线规格型号一览表进行选择,确保满足特定环境和应用的需求。

    部门决策权一览表.doc

    部门决策权一览表 部门决策权一览表是企业中一个重要的决策参考资料,旨在明确不同部门之间的决策权责、决策流程和决策者职责。该表格通常由企业高层管理人员或部门负责人填写和维护。 在该表格中,列出了不同的...

Global site tag (gtag.js) - Google Analytics