Thought Delimited

In my most recent web application project, my clients asked for the ability to change the color of certain HTML elements without having to actually write or change any HTML code. So I used ColdFusion and the jQuery JavaScript library to create a color grid similar to the one that pops up in Adobe Dreamweaver when you type a color-related HTML or CSS attribute, allowing them to choose a color simply by clicking on it.

After I finished the grid, it occurred to me how I could use a similar tool for my coding work: CFEclipse doesn't have a selectable color grid (most likely a limitation of Eclipse itself), and it's a pain to open up Dreamweaver or Fireworks just to get a color. So I decided to try and make my color grid into an AIR application.

The result is colorPicker, a widget-like AIR application that lets you either select a color from a grid of "web-safe" colors or design a color using sliders to change the red, green, and blue values of the color. Once you have the color you want, you can click on the corresponding "Save to Clipboard" button to copy the hex color code to the clipboard and then paste it into your HTML code in your IDE of choice. It also saves all of the colors you've copied to the clipboard during your session so you can repeat a color.

It actually uses very little of the AIR API: just the clipboard copy function and the description file needed to run it. Everything else is done with JavaScript, HTML, and CSS.

You can view screenshots of colorPicker and download it from RIAforge.org at:

http://colorpicker.riaforge.org

In case there's another poor soul out there who just needs to know how to work with the clipboard using JavaScript in AIR Beta 2, I'm posting this very simple example of how to get text from the clipboard, clear the clipboard, and send text to the clipboard.

Getting text from the clipboard:

 
var ctext= air.Clipboard.generalClipboard.getData("air:text","cloneOnly");
alert("ctext is: " + ctext); 

Clearing the clipboard:

air.Clipboard.generalClipboard.clear();

Sending text to the clipboard:

var myText= "Some text";
var clip= air.Clipboard.generalClipboard;
clip.setData("air:text",myText,false);

The functions involved are all covered in the JavaScript Language Reference for Adobe AIR, but I found the documentation less than clear, and all the examples I found in blog posts and in the Adobe forums were from earlier versions of AIR/Apollo. Even the PDF documentation that came with the AIR download was out-of-date (note to Adobe: that's not good).

This example only covers text, but it should provide enough of a guide so that, along with the language reference, you can work with other data types.

Update: the clipboard functions listed above also seem to work unchanged in AIR Beta 3

Saw this on Digg today: it's an article by several members of the Wharton School of Business at the University of Pennsylvania that talks about the emergence of technologies geared towards merging the Web and the desktop. They give an overview of the recent developments: Adobe AIR, Google Gears, Silverlight, Prism, etc.

If you're not familiar with this latest trend, the article is definitely a good read:

Software's Future: Melding the Web and the Desktop