You Want XUL, You Got XUL

I've written a lot of articles for IBM over the last couple of years. I've covered a lot of topics. It was interesting for me to see which articles have been viewed the most. Last year I did a tutorial on XUL for beginners. To be honest, I really thought XUL was a very niche topic. If you are going to write a Firefox extension, you have to learn XUL. There are lots of resources out there about that. I did not want to write about that kind of XUL development. So instead I wrote about creating a XUL desktop application that used a lot of web development skills. Hey if Adobe can market AIR as a way for web developers to create desktop apps, then why shouldn't Mozilla do the same thing with XUL? It was a fun article to write, but I didn't expect it to be especially popular. Boy was I wrong!

That tutorial has been one of the most popular things I have written for IBM. So it made sense to update it this year. The tutorial used Firefox 3 as a XUL runtime. When I wrote it, Firefox 3 was in alpha stage. Obviously it has been released since then and is in wide use. So the opportunity for web developers to use XUL to create desktop applications is greater than ever. This week IBM published the updated tutorial, so go check it out.

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 flash.data 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;
    try{

        db.open('database-test');
        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);
            }

            data.push(row);
            rs.next();
        }
        return data;
    } finally {

        rs.close();
    }
}

Here is the ActionScript code:

import flash.external.ExternalInterface;
 

[Bindable]
private var rs:Array = [];
 
private function load():void{

    rs = ExternalInterface.call('dbCall', 'select * from little_table');

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

}
private function clearData():void{
    ExternalInterface.call('dbCall', 'delete from little_table');
    load();

}

And here is the MXML I used to test it out:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="load()">
    <mx:DataGrid x="202" y="59" id="grid" dataProvider="{rs}">

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

        </mx:columns>
    </mx:DataGrid>
    <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()"/>

</mx:Application>

JsonViewer Updated

Some folks pointed out that the JsonViewer installer was complaining about being on the wrong version of AIR. That was because I wrote it before AIR went 1.0. So I thought "no problem, just re-compile it." Well sort of.

I updated Flex Builder 3 to the GA version and updated AIR to 1.0. I imported the old project. It picked up my Subversion settings and what not, very nice. I did a new "export release version" and it worked just fine. I tried to execute the .air file and it bombed. It told me that my AIR file was damaged.

WTF!? I tried to run the app directly from Flex Builder. It did nothing. No errors, just nothing. So I tried debugging. Then I finally got an error message about using the wrong version of AIR. I opened up the JsonView-app.xml. There was no "setting" in here for AIR version, but then I saw this

<application xmlns="http://ns.adobe.com/air/application/1.0.M6">

Yep the .M6 was killing me. I removed it from the XML namespace declaration, and voila! Everything worked perfectly. Show your appreciation for my pain by downloading JsonViewer.

New Version of JsonViewer: Now Open Source!

I updated the JsonView AIR app I wrote a couple of months ago. It has wound up being pretty useful for some of the folks I work with, hence there have been some bug fixes new features requested. I have also had some folks email me about the source code. So as a result of these two things, not only did I update the app, but I released it as open source via Google Code.

So you can get the latest version here, or you can check out the source code for yourself. I was almost embarrassed to show the source because it so trivial!

New IBM Tutorial on XUL

I wrote a tutorial on XUL for IBM. It's a very introductory look at XUL. You can do some seriously crazy programming in XUL. The focus of the tutorial is on how web skills can be leveraged in XUL. Adobe AIR is getting a lot of press right now (and deservedly so) for letting web developers bust out some desktop apps. XUL lets you do the same thing. It's definitely a little more complicated than AIR, but also much more powerful. XUL gives you access to a lot more desktop resources than AIR does. Plus, if there's something that it doesn't already give you, then you can just write some native code and expose it via XPCOM. I think a lot of AIR developers are already begging for this kind of extensibility.

eBay Desktop

I generally don't blog about my employer too much. But eBay officially released a very cool piece of software today, eBay Desktop. This is the beta product formerly known as San Dimas. It is an Adobe AIR product allowing you to do pretty much all things eBay related from a snazzy desktop application. Read all about it on eBay evangelist Alan Lewis's blog.