GoogleGear是Google发布的离线数据管理解决方案,也就是位于客户端浏览器中的DB,下面我们来看一看GoogleGear是如何使用的。
还是来看一看效果吧。
随意输入文字后,就可以将这个文字保存到GoogleGear的DB中。
怎么实现的呢?
看源代码:
- <form onsubmit="handleSubmit(); return false;">
- <b>Enter a phrase to store in the database:</b> <br>
- <table>
- <tr>
- <td valign="middle"><input type="text" id="submitValue"
- style="width:20em;"></td>
- <td valign="middle"><input type="submit" value="OK"></td>
- </tr>
- </table>
- </form>
提交给handleSummit函数,那么这个函数怎么样呢?看下面的代码:
- <script type="text/javascript" src="gears_init.js"></script>
- <script type="text/javascript" src="sample.js"></script>
- <script>
-
- var db;
- init();
-
- // Open this page's local database.
- function init() {
- var success = false;
-
- if (window.google && google.gears) {
- try {
- db = google.gears.factory.create('beta.database', '1.0');
-
- if (db) {
- db.open('database-demo');
- db.execute('create table if not exists Demo' +
- ' (Phrase varchar(255), Timestamp int)');
-
- success = true;
- // Initialize the UI at startup.
- displayRecentPhrases();
- }
-
- } catch (ex) {
- setError('Could not create database: ' + ex.message);
- }
- }
-
- // Enable or disable UI elements
-
- var inputs = document.getElementsByTagName('input');
- for (var i = 0, el; el = inputs[i]; i++) {
- el.disabled = !success;
- }
-
- }
-
- function handleSubmit() {
- if (!google.gears.factory || !db) {
- return;
- }
-
- var elm = document.getElementById('submitValue');
- var phrase = elm.value;
- var currTime = new Date().getTime();
-
- // Insert the new item.
- // The Gears database automatically escapes/unescapes inserted values.
- db.execute('insert into Demo values (?, ?)', [phrase, currTime]);
-
- // Update the UI.
- elm.value = '';
- displayRecentPhrases();
- }
-
-
- function displayRecentPhrases() {
- var recentPhrases = ['', '', ''];
-
- // We re-throw Gears exceptions to make them play nice with certain tools.
- // This will be unnecessary in a future version of Gears.
- try {
-
- // Get the 3 most recent entries. Delete any others.
- 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 {
- db.execute('delete from Demo where Timestamp=?', [rs.field(1)]);
- }
- ++index;
- rs.next();
- }
- rs.close();
-
- } catch (e) {
- throw new Error(e.message);
- }
-
- var status = document.getElementById('status');
- status.innerHTML = '';
- for (var i = 0; i < recentPhrases.length; ++i) {
- var bullet = '(' + (i + 1) + ') ';
- status.appendChild(document.createTextNode(bullet + recentPhrases[i]));
- status.appendChild(document.createElement('br'));
- }
- }
-
- </script>
首先是init.js:
-
-
-
-
-
-
-
-
-
- (function() {
-
- if (window.google && google.gears) {
- return;
- }
-
- var factory = null;
-
-
- if (typeof GearsFactory != 'undefined') {
- factory = new GearsFactory();
- } else {
-
- try {
- factory = new ActiveXObject('Gears.Factory');
- } catch (e) {
-
- if (navigator.mimeTypes["application/x-googlegears"]) {
- factory = document.createElement("object");
- factory.style.display = "none";
- factory.width = 0;
- factory.height = 0;
- factory.type = "application/x-googlegears";
- document.documentElement.appendChild(factory);
- }
- }
- }
-
-
-
- if (!factory) {
- return;
- }
-
-
- if (!window.google) {
- window.google = {};
- }
-
- if (!google.gears) {
- google.gears = {factory: factory};
- }
- })();
正如注释所讲,这段代码只有一个函数,作用就是建立一个跨浏览器的GoogleFactory对象,我们后来用到的DB应该都是建立在这个对象之上的。
再看Sample.js:
- function setupSample() {
-
- if (!window.google || !google.gears) {
- if (confirm("This demo requires Gears to be installed. Install now?")) {
- var spliceStart = location.href.indexOf("/samples");
- location.href =
- location.href.substring(0, spliceStart) + "/install.html";
- return;
- }
- }
-
- var viewSourceElem = document.getElementById("view-source");
- if (!viewSourceElem) {
- return;
- }
- var elm;
- if (navigator.product == "Gecko") {
-
-
- elm = document.createElement("a");
- elm.href = "view-source:" + location.href;
- elm.innerHTML = "View Demo Source";
- } else {
-
- elm = document.createElement("em");
- elm.innerHTML = "To see how this works, use the <strong>view "+
- "source</strong> feature of your browser";
- }
- viewSourceElem.appendChild(elm);
- }
-
- function checkProtocol() {
- if (location.protocol.indexOf('http') != 0) {
- setError('This sample must be hosted on an HTTP server');
- return false;
- } else {
- return true;
- }
- }
-
- function addStatus(s, opt_class) {
- var elm = document.getElementById('status');
- if (!elm) return;
- var node = document.createTextNode(s);
- if (opt_class) {
- var span = document.createElement('span');
- span.className = opt_class;
- span.appendChild(node);
- node = span;
- }
- elm.appendChild(node);
- elm.appendChild(document.createElement('br'));
- }
-
- function clearStatus() {
- var elm = document.getElementById('status');
- while (elm && elm.firstChild) {
- elm.removeChild(elm.firstChild);
- }
- }
-
- function setError(s) {
- clearStatus();
- addStatus(s, 'error');
- }
-
- setupSample();
这段代码的主要功能是提示用户如何查看源代码以及显示消息的,因此不必理会。
看完这两段,整体上就比较清楚了,首先是建立一个db对象,然后执行init方法,在init方法内部添加一个table,然后显示这个表中的记录。因为刚开始没有数据,所以会不显示什么,当再次登录这个页面的时候,就可以显示了,整个添加的代码非常类似JDBC的操作,对于Java程序员来说没有gap。
当用户提交输入时,触发添加操作。
因此整个例子展示了googleGear的添加、删除、查询功能,从这个例子里也可以看出,GoogleGear的理念是客户端的db,至于这个db的查询语言如何,现在还不是很好下结论。
分享到:
相关推荐
FANUC数控参数一览表FANUC数控参数一览表FANUC数控参数一览表FANUC数控参数一览表FANUC数控参数一览表FANUC数控参数一览表
附录三湖北工业大学2017年大学生学科竞赛一览表.docx附录三湖北工业大学2017年大学生学科竞赛一览表.docx附录三湖北工业大学2017年大学生学科竞赛一览表.docx附录三湖北工业大学2017年大学生学科竞赛一览表.docx附录...
"双师型”教师岗位资格证书对应一览表" 通过对“双师型”教师岗位资格证书对应一览表的分析,我们可以总结出以下几个关键知识点: 1. "双师型"教师岗位资格证书的分类:根据表格,我们可以看到“双师型”教师岗位...
从提供的文件信息中,我们可以提炼出与“合格供方一览表”相关的知识点。下面将详细说明标题、描述、标签以及部分可识别内容中涉及的知识点。 首先,“合格供方一览表”是一个文档名称,通常用于企业管理领域,特别...
本文将深入探讨Modbus功能码一览表,帮助理解Modbus通信过程中的核心概念。 Modbus协议的核心在于其功能码,每个功能码对应一种特定的通信操作。功能码是Modbus消息帧中的一部分,它告诉接收方需要执行的操作。以下...
实验室操作的生物因子及其危害程度分级一览表(金坛区疾控中心) 生物因子是指实验室操作中可能涉及到的生物agents,包括细菌、病毒、真菌等。这些生物因子可能会对实验室工作人员和周围环境造成危害。因此,正确地...
Hypermesh 命令一览表 Hypermesh 是一款功能强大、功能多样化的有限元分析软件,它提供了丰富的命令集来帮助用户高效、准确地进行有限元分析和模型建立。为了帮助用户更好地使用 Hypermesh,我们编制了 Hypermesh ...
个人岗位廉政风险点及防控措施一览表.pdf
重点施加影响相关方一览表(表格模板、XLS格式).xls
此外,企业法人基本账户信息一览表还能够作为企业财务管理和风险管理的依据,帮助企业更好地管理财务风险,避免财务风险的发生。 在信息化时代,企业法人基本账户信息一览表的电子化管理变得越来越重要。通过电子化...
检测检验用仪器设备计量器具一览表 本资源摘要信息涵盖了检测检验用仪器设备计量器具一览表的标题、描述、标签和部分内容。根据提供的文件信息,我们可以生成以下知识点: 一、检测检验用仪器设备计量器具一览表的...
G代码一览表 G代码是一种广泛应用于计算机数控系统(CNC)中的编程语言,用于控制机床的运动和加工过程。G代码是一种标准化的语言,能够在不同的CNC系统中通用。在本文中,我们将对G代码的基本概念、G代码的分类、M...
安川机器人命令一览所有指令介绍.pdf
常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶材料特性及成型工艺一览表常用塑胶...
在建筑工程领域,规范检验批容量一览表是确保工程质量的重要依据,它详细规定了不同施工环节的质量检查标准和抽样数量。这份"最新规范检验批容量一览表(新)"涵盖了从土方工程到装饰细部构造等多个关键环节,旨在提供...
(完整版)ISO14001环境法律法规要求及合规性评价一览表.pdf(完整版)ISO14001环境法律法规要求及合规性评价一览表.pdf(完整版)ISO14001环境法律法规要求及合规性评价一览表.pdf(完整版)ISO14001环境法律法规要求及合规...
环境因素评价、相关方的需求和期望评审一览表、风险和机遇的应对措施及评价、知识一览表、风险评估四个表.pdf
电缆线是电力传输和通信系统中的重要组成部分,其规格型号的选择直接影响到系统的安全性和效率。以下是对电缆线规格型号的详细...在实际操作中,应参照电缆线规格型号一览表进行选择,确保满足特定环境和应用的需求。
部门决策权一览表 部门决策权一览表是企业中一个重要的决策参考资料,旨在明确不同部门之间的决策权责、决策流程和决策者职责。该表格通常由企业高层管理人员或部门负责人填写和维护。 在该表格中,列出了不同的...