Google Gears (Local Server) to boost ExtJS [Archive]

wregen

18 Aug 2008, 11:30 AM

I wonder if anyone has tried to use Google Gears to store ExtJS application resources (js, css, images)?

The last Wordpress (2.6) is using Gears (more precisely Local Server) to cache or keep a copy of commonly-used Javascript and CSS files locally, which speed up the loading of admin pages. The results are pretty cool.

Thus, I have made a little experiment and copied the idea. Here is what I did:

I put the samples_gears_manifest.js (from attachment) into /ext-2.2/examples/ directory
I added the following code at the end of /ext-2.2/examples/samples.html

<script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript"></script>
<script type="text/javascript">
var localServer = google.gears.factory.create('beta.localserver');
var store = localServer.createManagedStore('ext-js-store');
store.manifestUrl = 'samples_gears_manifest.js';
store.checkForUpdate();
</script>

(Google Gear has to be installed of course.)

At the first time of loading /ext-2.2/examples/samples.html Local Store has been created with 5MB of data: complete ext + csses + images and all files from examples. (I am aware that samples_gears_manifest.js contains plenty of unnecessary files; someone has to clean it up.)

I must admit that it really boost ExtJS examples . Works much better then internal browser cache, moreover, developer can control what is stored and update store by altering manifest file.

Perhaps someone can write a plugin that uses the feature: something like "turbo option for ExtJS applications"?

devnull

18 Aug 2008, 12:40 PM

Its an interesting idea, but I have a hard time thinking of good real world applications.
First, it would depend on the users having gears installed, which many do not. In situations where the user's environment is controlled (such as an intranet) load times and bandwidth are not likely to be issues, negating the benefits.
For internet apps, properly configured caching should have the same benefit, without requiring users to install third party applications.

wregen

15 Sep 2008, 1:17 PM

I'm not trying to defend the idea of ExtJs + Google Gears LocalServer, but I'm still thinking the idea is worth considering.

This is what I found here http://code.google.com/apis/gears/gears_faq.html#bestPracticeStartGears :

A common question is how this [using LocalServer] is different than standard HTTP caching. Standard HTTP caching can only version individual resources, and must do validity checks on every resource at regular intervals which can affect page load time. The Gears LocalServer instead versions an entire bundle, efficiently checking that resources have changed only if the version on the bundle itself has changed. Another major difference is that Gears always serves the resources first, then revalidates the bundle. In traditional HTTP caching, you have to either choose between choosing some date far in the future to revalidate at, or revalidating before serving.

Just to let you know.

rohu

21 Oct 2008, 3:53 AM

Want to insert database value into grid using grid..
please help me out
here is my code

datagrid.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Array Grid Example</title>

<link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />

<script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-2.2/ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="../../ext-2.2/examples/grid/grid-examples.css" />

<link rel="stylesheet" type="text/css" href="../../ext-2.2/examples/shared/examples.css" />
<script type="text/javascript" src="datagrid.js"></script>


</head>
<body>
<script type="text/javascript" src="../../ext-2.2/examples/shared/examples.js"></script>
<script type="text/javascript" src="gears_init.js"></script>

<form onsubmit="handleSubmit(); return false;">

<b>Enter a phrase to store in the database:</b> <br>
<table>
<tr>

<td valign="middle"><input type="submit" value="OK" id="submitValue"></td>
</tr>
</table>
</form>

<script type="text/javascript">
var db;
init();
function init() {
var success = false;

if (window.google && google.gears) {
try {
db = google.gears.factory.create('beta.database');

if (db) {
db.open('griddata');
db.execute('create table if not exists grid' +
' (Company varchar(20),Price float(10),Change float(10),Pctchange float(10))');
success = true;
displayRecentPhrases();
}

} catch (ex) {
setError('Could not create database: ' + ex.message);
}
}

var inputs = document.forms[0].elements;
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 company = array("Apple","Ext","Google","Microsoft","Yahoo");
var price = array("29.56","45.23","89.12","78.23","98.34");
var change = array("0.24","0.28","0.02","0.05","0.41");
var pctchange = array("0.21","0.04","52.51","0.01","1.47");
var currTime = new Date().getTime();

db.execute('insert into grid values (?, ?, ?, ?)', [company[0], price[0], change[0],pctchange[0]]);
db.execute('insert into grid values (?, ?, ?, ?)', [company[1], price[1], change[1],pctchange[1]]);
db.execute('insert into grid values (?, ?, ?, ?)', [company[2], price[2], change[2],pctchange[2]]);
db.execute('insert into grid values (?, ?, ?, ?)', [company[3], price[3], change[3],pctchange[3]]);
db.execute('insert into grid values (?, ?, ?, ?)', [company[4], price[4], change[4],pctchange[4]]);
*/

db.execute('insert into grid values (?, ?, ?, ?)', ['Apple', 29.56, 0.24, 0.21]);
db.execute('insert into grid values (?, ?, ?, ?)', ['Ext',45.23 ,0.28 ,0.04]);
db.execute('insert into grid values (?, ?, ?, ?)', ['Google',89.12 ,0.02 ,52.51]);
db.execute('insert into grid values (?, ?, ?, ?)', ['Microsoft',78.23 ,0.05 ,0.01]);
db.execute('insert into grid values (?, ?, ?, ?)', ['Yahoo',98.34 ,0.41 ,1.47]);

displayRecentPhrases();
}

function displayRecentPhrases() {
//var recentPhrases = array();

var rs = db.execute('select * from grid');

var com = document.getElementById("Company");
var pri = document.getElementById("Price");
var chg = document.getElementById("Change");
var pct = document.getElementById("Pctchange");

while (rs.isValidRow()) {

/* $('Company').innerHTML = rs.field(0);
$('Price').innerHTML = rs.field(1);
$('Change').innerHTML = rs.field(2);
$('Pctchange').innerHTML = rs.field(3);*/

com = rs.field(0);
pri = rs.field(1);
chg = rs.field(2);
pct = rs.field(3);

rs.next();
}
rs.close();

/* var status = getElementById('status');
status.innerHTML = '';
for (var i = 0; i < recentPhrases.length; ++i) {
var id = 'phrase' + i;
status.innerHTML += '<span id="' + id + '"></span><br>';
var bullet = '(' + (i + 1) + ') ';
setTextContent(getElementById(id), bullet + recentPhrases[i]);
}*/
}

</script>

<div id="grid-example"></div>
</body>
</html>

wregen

22 Oct 2008, 12:10 PM

@rohu
It is a bit off topic. Anyway, I understand you want example of Ext grid working with gears database. If this is your request, here is a little demo. (quick & dirty)

gears-grid.html

<html>
<head>
<title>Gears Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// init database
var db = google.gears.factory.create('beta.database');
db.open('gearstest');
db.execute('create table if not exists data (id INTEGER PRIMARY KEY NOT NULL, phrase text, timestamp text)');
//db.execute('delete from data;');

function putData(phrase, timestamp) {
db.execute('insert into data (phrase, timestamp) values (?, ?)', [phrase, timestamp]);
}
function getData() {
var rs = db.execute('select id, phrase, timestamp from data order by id desc');
var myData = []
while (rs.isValidRow()) {
myData.push([rs.field(0), rs.field(1), rs.field(2)])
rs.next();
}
rs.close();
return myData;
}
function delData(id) {
db.execute('delete from data where id=?', [id]);
}
// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'id', type: 'int'},
{name: 'phrase', type: 'string'},
{name: 'timestamp', type: 'string'}
]
});
store.loadData(getData());

var form = new Ext.form.FormPanel({
title:'Form',
region:'north',
frame:true,
border:true,
margins:{bottom:5},
bodyStyle:'padding:10px;',
height:130,
defaults:{
width:180,
allowBlank:false
},
items: [{
xtype:'textfield',
fieldLabel:'Phrase',
name:'phrase'
},{
xtype:'datefield',
fieldLabel:'Timestamp',
name:'timestamp'
}],
buttons:[{
text:'Put to grid',
handler: function() {
if (form.form.isValid()) {
var v = form.form.getValues();
putData(v.phrase, v.timestamp);
store.loadData(getData());
form.form.reset();
}
}
}]
});

// create the Grid
var grid = new Ext.grid.GridPanel({
title:'Grid',
region:'center',
store: store,
frame:true,
columns: [
{id:"id", header: "ID", width: 70, sortable: true, dataIndex: 'id'},
{header: "Phrase", width: 175, sortable: true, dataIndex: 'phrase'},
{header: "Timestamp", width: 175, sortable: true, dataIndex: 'timestamp'}
],
stripeRows: true,
});
// dblclick to delete data
grid.on('rowdblclick', function (grid,index) {
selected = grid.getSelectionModel().getSelected();
delData(selected.data.id);
store.loadData(getData());
});
var holder = new Ext.Panel({
style:'margin:1em;',
renderTo:'example',
baseCls:'x-plain',
width:600,
height:400,
border:false,
frame:true,
layout:'border',
items:[
form,
grid
]
})
});
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>

put it in ext-2.2/examples/grid should work if gears are installed.

rohu

28 Oct 2008, 11:31 PM

i want data Syncronization in above example want to view the data feed by me from my local machine
can be viewed by on other machine to in gears

Can u please help me..

please

wregen

29 Oct 2008, 12:26 AM

This is nice idea but I don't think it can be done without using server side.

The database runs "within" your browser, but other clients gets their data from the server.
What you have to do is to put data from gears database to server somehow. Then other clients can get data from the server.

I can imagine that it could be useful to have communication between clients (pear-to-pear) connected to the same server, but I cannot imagine how it could be done with HTTP.

nelius

30 Oct 2008, 12:58 AM

Hi,

we are using the gears "manifest" in Tine 2.0 (http://www.tine20.org). It has a major advantage over 'normal' caching settings, as you can control the client side cache easily.

This is a major advantage if you do updates of your app!

Moreover it's the first step for providing an offline capable app, as all resources are downloaded.

The manifest is part of HTML5 specification and already implemented in FF3. unfotunally there is a bug in the FF implementation and as such we are still using the gears thing

rohu

31 Oct 2008, 2:39 AM

I want data synchronization (as it is done in google reader) in below example can any
body help me

I want data Synchronization in my example so that i can view the data feed by me when i am offline from my local machine
can be viewed on other machine

Data that feed by me when i am offline same data should be viewed on other machine's

I tried to explain my problem as much as i can

Please help me out

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Array Grid Example</title>

<link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />

<script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-2.2/ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="../../ext-2.2/examples/grid/grid-examples.css" />
<link rel="shortcut icon" href="../../../sugat/live/cm/img/extjs.ico">

<link rel="stylesheet" type="text/css" href="../../ext-2.2/examples/shared/examples.css" />
<script type="text/javascript" src="go_offline.js"></script>
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript" >

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
var db = google.gears.factory.create('beta.database');

db.open('griddata');
db.execute('create table if not exists geargd' +
' (id INTEGER PRIMARY KEY NOT NULL,Company text ,Price float(3),Change float(3),Pctchange float(4))');

function handleSubmit(company,price,change,pctchange) {
if (!google.gears.factory || !db) {
return;
}
db.execute('insert into geargd (Company,Price,Change,Pctchange) values (?, ?, ?, ?)', [company,price,change,pctchange]);
}

function displayRecentPhrases() {

var rs = db.execute('select id, Company, Price, Change, Pctchange from geargd order by id asc');
var fs = [];
while (rs.isValidRow()) {
fs.push([rs.field(0), rs.field(1), rs.field(2), rs.field(3), rs.field(4)]);
rs.next();
}
rs.close();
return fs;
}

var ds = new Ext.data.SimpleStore({
fields:[
{name: 'id', type: 'int'},
{name: 'company', type:'string'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctchange', type: 'float'}
]
});
ds.loadData(displayRecentPhrases());

var form = new Ext.form.FormPanel({
title:'Form',
region:'north',
frame:true,
border:true,
margins:{bottom:5},
bodyStyle:'padding:10px;',
height:110,
defaults:{
width:110,
allowBlank:false
},
defaultType:'numberfield',
items: [{
xtype:'textfield',
fieldLabel:'Company',
name:'company'
},{
fieldLabel:'Price',
name:'price'
},{
fieldLabel:'Change',
name:'change'
},{
fieldLabel:'PctChange',
name:'pctchange'
}],
buttons:[{
text:'Add TO GRID',
handler: function() {
if (form.form.isValid()) {
var v = form.form.getValues();
handleSubmit(v.company, v.price, v.change, v.pctchange);
ds.loadData(displayRecentPhrases());
form.form.reset();
}
}
}]
});

function displayFormWindow(){
gridwin.show();
}

var grid = new Ext.grid.GridPanel({
title: 'My First Grid',
ds:ds,
region:'center',
frame:true,
loadmask:true,
tbar: [{
text: 'Add a Value',
tooltip:'Great Tooltip',
iconCls:'add',
handler: displayFormWindow
}],
columns: [
{id:"id", header: "ID", width: 70, sortable: true, dataIndex: 'id'},
{id:"company", header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 90, sortable: true, dataIndex: 'pctchange'}
],
stripeRows: true,
viewConfig: {
forceFit: true,
enableRowBody:true,
showPreview:true

},

width: 500,
height:299,
});
grid.render('grid-example');

var gridwin= new Ext.Window({
id: 'win',
title: 'Add to grid',
closable:true,
width: 300,
height: 250,
plain:true,
layout: 'fit',
items: form
});
});
</script>
</head>
<body onload="init()">
<script type="text/javascript" src="../../ext-2.2/examples/shared/examples.js"></script>

<div>
<p class="style1">Status Message: <span id="textOut" class="style3"></span></p>
</div>
<a href="http://gears.google.com/">Install Gears</a>
<table border=0>
<tr>
<th>
<button onclick="createStore()" > Capture </button>
</th>
<th></th>
<th>
<button onclick="removeStore()" > Erase </button>
</th>
</tr>
</table>
<div id="grid-example"></div>
</body>
</html>

http://www.google.com/help/reader/images/offline_downloading.gif

Remy

31 Oct 2008, 4:21 AM

rohu, you should post this in a new topic as this is an open discussion on the merits of using google gears. You should also explain what you are trying to do and what the problem is.

Lastly, you should use CODE TAGS (http://extjs.com/forum/faq.php?faq=vb_read_and_post#faq_vb_special_codes) as this is more likely to generate a response if people can read your code properly.

wregen

31 Oct 2008, 7:32 AM

rohu, you should post this in a new topic as this is an open discussion on the merits of using google gears.
...

FULLY AGREE!

ZachKessin

24 May 2009, 4:46 AM

I have a large intranet app Using ExtJS and I use gears for quite a number of things, it makes things much faster. All static files are in the Managed Store (over 400 at last count), I use the DB for keeping Client State, and for storing some mostly static data. I also run some Ajax over the Worker Pool.

If you are trying to make a full scale large application having Gears can be a BIG help.

wregen

25 May 2009, 10:43 AM

...I also run some Ajax over the Worker Pool...

It could be very beneficial to the community if you could show a few code snippets from your work; especially the use of Worker Pool together with Ext seems to be very interesting.

Thank you in advance.

ZachKessin

25 May 2009, 10:32 PM

It could be very beneficial to the community if you could show a few code snippets from your work; especially the use of Worker Pool together with Ext seems to be very interesting.

Thank you in advance.

Its kind of a hack now, but I am working on making it less hack like as i have time. I'll post it soonish.

--Zach