Si vous avez la curiosité de fouiner dans le sous-dossier ExtendScript Toolkit CS4/SDK/Samples/ de l'installation des Adobe Utilities, vous y dénicherez d'excellents squelettes de scripts pour une utilisation avancée. Un bon exemple est le script nommé ColorPicker.jsx. Il affiche dans une palette flottante un éditeur de couleurs RVB assorti de trois glissières (une pour chaque canal) :

Le script “Color Picker” fourni dans ESTK SDK Samples

Ce script est un modèle idéal pour une application plus créative. Au départ, je me suis contenté de customiser la classe RGBPickerComponent de façon à la faire travailler avec des valeurs hexadécimales. J'ai alors ajouté une case à cocher « strict mode » qui permet de réduire l'intervalle [#00-#FF] aux couleurs Web strictes (#00, #33, #66, #99, #FF, #FF pour chaque canal). Tout cela est implémenté au sein de la classe TWebColorSlider.

Le script “WebColorPicker” en action

Aspects JavaScript

La classe principale, TWebColorPicker, contrôle les trois instances de TWebColorSlider et reflète la couleur spécifiée dans le bouton rgbSwatch. J'utilise ici la technique mise en œuvre dans le script original d'Adobe : « L'échantillon RVB (RGB swatch) est implémenté comme un Group [au sens ScriptUI] dont l'espace est totalement occupé par un simple bouton (Button). Nous utilisons un Group parce que sa propriété graphics.backgroundColor peut être définie : nous lui affectons la couleur RVB sélectionnée. Nous plaçons un bouton à l'intérieur de ce Group pour rendre l'échantillon actif et illustrer un procédé [ingénieux!] grâce auquel le bouton restera essentiellement transparent : on définit pour cela la méthode onDraw de façon à ce qu'elle ne redessine pas le fond (background) du bouton, mais uniquement ses bordures... »

Dans mon script WebColorPicker.js, j'ai préféré privatiser de nombreuses propriétés et méthodes qu'il ne me semblait pas pertinent d'exposer dans l'interface des classes TWebColorSlider et TWebColorPicker. C'est pourquoi le code s'éloigne quand même beaucoup de celui fourni par Adobe. En JavaScript, les membres dits privés sont simulés par de simples variables (données ou fonctions) déclarées à l'intérieur du constructeur de la classe. Lorsque le besoin s'en fait sentir, on peut alors entr'ouvrir l'accès à ces membres privés via des méthodes publiques (de la forme this.maMethode) qui sont définies elles aussi à l'intérieur du constructeur. Elles peuvent ainsi manipuler les variables internes. Il s'agit là en quelque sorte d'une passerelle sécurisée (elle ne pourrait pas être construite de l'extérieur, ni même au niveau des déclarations prototype).

À noter en passant une petite méthode utilitaire greffée sur l'objet Number et retournant la représentation hexadécimale (String) du nombre considéré :

/*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