The subfolder ExtendScript Toolkit CS4/SDK/Samples/ of the Adobe Utilities installation gives some really good snippets for advanced scripting. You'll find here a script named ColorPicker.jsx, which simply displays a Color Picker floating palette with three RGB sliders linked to three text fields:

“Color Picker” demo from ESTK SDK samples

This script provides a perfect pattern for a more creative implementation. Basically, I customized the RGBPickerComponent for it to work with hexadecimal entries. I also added a strict mode checkbox, which limits the range [#00-#FF] to the strict web colors (#00, #33, #66, #99, #FF, #FF for each channel). All this is implemented in the TWebColorSlider class.

The script “WebColorPicker”

JavaScript Pieces

The master class, TWebColorPicker, controls the three TWebColorSlider instances and reflects the specified color in the rgbSwatch button. Here I use the technique demonstrated in the Adobe original script: “The RGB swatch is implemented as a Group element with a Button that completely fills it. We use a Group because a Group's graphics.backgroundColor can be set, so we set it to the currently selected RGB color. We put a Button inside this Group to demonstrate making the swatch ‘active’, and to show a technique for making the Button be essentially transparent, by defining an onDraw handler for it that does not draw the background of the button, but only its borders...”

In the script WebColorPicker.js, many properties and methods are emulated as private, because there was no reason to leave those features in the interface of TWebColorSlider and TWebColorPicker. This is the reason why the code is so different from the one from Adobe. With JavaScript, it is possible to simulate private members with variables (data or functions) declared inside the constructor. When you need to set some access for a private member, you only need to define a public method —in the form this.myMethod— inside the constructor. This way, myMethod can handle the internal variables, like a bridge.

Another interesting (small) piece of code is the toHexa method added to the Number prototype. It returns the hexadecimal representation (String) of the considered number:

/*str*/Number.prototype.toHexa = function(/*int*/digits)
//--------------------------------------
// Outputs this number as an hexadecimal string
// containing at least <digits> digits (zero-filled)
{
var r = this.toString(16).toUpperCase();
while (r.length < digits) r = '0'+r;
return(r);
}
 

WebColorPicker Demo

“WebColorPicker” Demo