论坛首页 → Web前端技术论坛 →

GoogleGear 一览

浏览 4282 次
锁定老帖子 主题：GoogleGear 一览
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • hintcnuie
  • 等级: 一星会员
  • 性别:
  • 文章: 60
  • 积分: 137
  • 来自: 北京
   发表时间：2007-11-10  
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的查询语言如何，现在还不是很好下结论。
返回顶楼
         
  • halfmile
  • 等级: 一星会员
  • 性别:
  • 文章: 40
  • 积分: 110
   发表时间：2007-11-10  
不记得在哪了，好像是在 在aptana （http://www.aptana.com/）的更新日志里面看到有一个 js lib (ext ?)已经封装了 gear sql lite 和 adobe air sql lite的api. 那样的话开发可以省很多事情。

另外 gear 的 sql lite是同步的， air 的是异步的(至少在 beta1中)
返回顶楼
          回帖地址
0 请登录后投票
  • sp42
  • 等级: 三钻会员
  • 文章: 726
  • 积分: 1617
  • 来自: Canton
   发表时间：2007-11-10  
遗憾的是,GG win2k不支持
AIR BETA2已经支持了
返回顶楼
          回帖地址
0 请登录后投票
  • sp42
  • 等级: 三钻会员
  • 文章: 726
  • 积分: 1617
  • 来自: Canton
   发表时间：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写了一个
返回顶楼
          回帖地址
0 请登录后投票
  • hintcnuie
  • 等级: 一星会员
  • 性别:
  • 文章: 60
  • 积分: 137
  • 来自: 北京
   发表时间：2007-11-11  
不错，是Ext2，我也是在研究Ext2时发现这个东东的，不过现在还是beta版，只能用来研究
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics