McArthur GFX

Ubiquity?

Mozilla is contantly making all these cool technologies for the web (Firefox , Bespin ), they've also released a new product call Ubiquity . If you haven't seen it yet, it's basically an interface that allows you to do common tasks involving various web-sites more easily.

Ubiquity is a Mozilla Labs experiment into connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks more quickly and easily.

An example they show in their video is typing an e-mail in GMail, and wanting to provide a map to a location. Instead of opening a new tab and going to Google Maps, searching for the address, taking a screenshot and publishing an image to attach, you use a simple line in ubiquity:

map 123 main street san clemente ca

So ubiquity allows these processes that usually take a few steps to only take 1 step.

php.net

I probably spend more time writing PHP than I do Javascript (I'd like to reverse that but oh well). Well, PHP has so many functions, I'm constantly going to something like http://php.net/substr_replace to simply remember how a function works. It's not a long process, but it involves opening a new tab (Control + T), selecting the address bar (Control + D), typing php.net/substr_replace, and then loading the page.

To learn the basics of a Ubiquity command, I made it so all I have to do is open Ubiquity (Control + Space) and then type:

php substr_replace

It gives me the description and usage in ajax fashion. I can also hit enter to go to the page and read the examples and so forth.

CmdUtils.CreateCommand

Writing it was pretty simple. When you go to your Ubiquity command editor, there's a button to insert a template. From there, you see what the properties are of a command. Also, for convenience, Ubiquity includes jQuery (wish for Mootools) which allows simple functions to be already declared.

var $ = jQuery;

CmdUtils.CreateCommand({
    name: "php",
    icon: "http://php.net/favicon.ico",
    description: "Searches php.net for a given function.  Usage: php strstr",
    author: { name: 'Sean McArthur', homepage: 'http://mcarthurgfx.com' },
    takes: {"Function name": noun_arb_text},
	_url: function(fName) {
		return 'http://php.net/' + fName;
	},
    preview: function(pBlock, input) {   
        if (!input.text) return;
        $(pBlock).html('Wait a second...');
        var url = this._url(input.text);       
        $.get(url, function(response){
            var content = $(response).find('p.refpurpose');
            if (!content[0]) {
                $(pBlock).html('Nada. None. Zilch.  Press enter for site-wide search.');
                return;
            }
            var para = '<p>' + content.html() + '</p>',
                codeEx = $(response).find('div.methodsynopsis');
            $(pBlock).html(para).append('<code>' + codeEx.html() + '</code>');
        });       
    },   
    execute: function(input) {   
        if (!input.text) return;
        Utils.openUrlInBrowser(this._url(input.text));      
    }   
}); 

Most are self-explanatory, so I'll just explain the two big guys. preview is the function that is called after the user stops typing. It will parse the first word as the command, and then the next words as input to the command. This function passes in the Element that will contain the preview, and an input object that contains properties:

  
inputObject.text  // a string of the input in plain text, without formatting
inputObject.html  // a string of the input in formatted html, including tags
inputObject.data  // for non-text input types, an arbitrary data object
inputObject.summary // for very long inputs, an abbreviated display string

So, I put in some text in the preview block telling the user to wait, and do an ajax request to php.net with the supplied input. Looking at the php.net site, I found the element's in the page I care about: p.refpurpose and div.methodsynopsis . So I search for those in the returned HTML, and display them in the preview box.

Pressing enter at this point calls the execute function, which simply sends me to the page in a new tab.