GoogleGear 一览

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

随意输入文字后，就可以将这个文字保存到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的查询语言如何，现在还不是很好下结论。