Monday, June 09, 2008

Gears and Flash

Tonight I launched up Firefox 3, and it informed there was an update to Gears ready to install. I went for it, and sure enough Gears was now working with Firefox 3! I didn't find any official announcement about this, but I didn't let that stop me from finishing an idea I had last week: getting Gears and Flash to work together.

This was not too hard. It is just a matter of using ExternalInterface to create a bridge between the two worlds. I wrote a quick POC, using a simple DB table for storing name/value pairs. I think it would be fun to re-implement the package that is normally only available in AIR apps...

Here is the JavaScript code:
function dbCall(sql, args){

var db = google.gears.factory.create('beta.database');
var rs = null;
db.execute('create table if not exists little_table (key varchar(20), value varchar(100))');
rs = args ? db.execute(sql, args) : db.execute(sql);
data = [];
while (rs.isValidRow()){

row = {};
for (var i=0;i<rs.fieldCount();i++){

var name = rs.fieldName(i);
row[name] = rs.field(i);

return data;
} finally {


Here is the ActionScript code:
import flash.external.ExternalInterface;

private var rs:Array = [];

private function load():void{

rs ='dbCall', 'select * from little_table');

private function save():void{
var key:String = keyIn.text;
var value:String = valueIn.text;'dbCall', 'insert into little_table values(?,?)', [key, value]);
keyIn.text = "";
valueIn.text = "";

private function clearData():void{'dbCall', 'delete from little_table');


And here is the MXML I used to test it out:
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="" layout="absolute" initialize="load()">
<mx:DataGrid x="202" y="59" id="grid" dataProvider="{rs}">

<mx:DataGridColumn headerText="Key" dataField="key"/>
<mx:DataGridColumn headerText="Value" dataField="value"/>

<mx:Label x="10" y="251" text="Key"/>

<mx:TextInput x="74" y="249" id="keyIn"/>
<mx:Label x="242" y="251" text="Value"/>

<mx:TextInput x="285" y="249" id="valueIn"/>
<mx:Button x="460" y="249" label="Save" click="save()"/>

<mx:Button x="243" y="298" label="Clear" click="clearData()"/>


No comments: