TColorEdit

Les programmes doivent parfois stocker une valeur de couleur. Dans Delphi, une représentation hexadécimale du formulaire est utilisée pour enregistrer la couleur :

$AABBGGRRLangage du code : PHP (php)

• AA – transparence
• BB – composante bleue de la couleur
• GG – composante verte de la couleur
• RR – composante rouge de la couleur

Puisque My Visual Database ne dispose pas de composant pour afficher et éditer les couleurs, nous allons le créer nous-mêmes à l’aide du composant TdbEdit.

Conception

Au champ de saisie standard (1) nous ajouterons un panneau (TdbPanel) pour afficher la couleur (2), qui sera situé au dessus de notre composant de base, visuellement à droite à l’intérieur du champ de saisie. Nous avons également besoin d’un bouton (TdbButton) (2), en cliquant sur ce qui fera apparaître une boîte de dialogue Windows standard pour sélectionner une couleur.

Scripts

Nous aurons besoin de plusieurs scripts, mais un seul sera appelé explicitement, ce qui transformera un champ de saisie normal en un nouveau composant.

Note. Le code utilise des fonctions et des procédures auxiliaires dont la mise en œuvre et la description se trouvent dans le projet ClearApp.

ColorEdit_Create()

const
  CED_BUTTON_NAME = 'Palette'; // nom du bouton

procedure ColorEdit_Create(AEdit: TdbEdit);
// édite la couleur
// la couleur est stockée sous forme de texte : $00BBGGRR
var
  tmpForm : TAForm ;      // formulaire 
  tmpName : chaîne ; 	   // Nom 
  tmpButton : TdbButton ; // bouton de sélection de couleur
  tmpPanel : TdbPanel ;   // panneau pour afficher un échantillon de couleur
begin
  try
    CForm(AEdit, tmpForm);
    tmpName := T_BUTTON + CED_BUTTON_NAME + '_' + AEdit.Name;
    FindC(tmpForm, tmpName ,tmpButton,False);
    // la procédure est appelée une fois, mais si elle est appelée à nouveau
    // alors il n'y aura pas d'erreurs ni de doublons    
    if tmpButton = nil then
    begin
      AEdit.OnChange := 'ColorEdit_Edit_OnChange';
      AEdit.OnExit := 'ColorEdit_Edit_OnExit';
      AEdit.TextHint := '$AABBGGRR';
      tmpButton := TdbButton.Create( tmpForm );
      with tmpButton do 			// créer un bouton
      begin
        name := tmpName;
        parent := AEdit.Parent;
        Caption := '';
        imageAlignment := iaCenter;
        Top := AEdit.Top - 1;
        Height := AEdit.Height + 2;
        Width := Height + 2 ;
        Left := AEdit.Left + AEdit.Width - Width;
        onClick := 'ColorEdit_btnSelectColor_OnClick';
        AEdit.Width := AEdit.Width - Width;
      end;
      Images_SetButton(tmpButton);
      tmpPanel := TdbPanel.Create( tmpForm );
      with tmpPanel do   // panneau pour afficher un échantillon de couleur
      begin
        name := T_PANEL + CED_BUTTON_NAME + '_' + AEdit.Name;
        parent := AEdit.Parent;
        Caption := '';
        BevelWidth := 0;
        Color := AEdit.Color;
        Top := AEdit.Top + 1;
        Height := AEdit.Height - 2;
        Width := Height - 2 ;
        Left := AEdit.Left + AEdit.Width - Width - 1;
      end;
    end;
  except
    RaiseException('ColorEdit_Create() ' + ExceptionMessage);
  end;
end;
Langage du code : PHP (php)

• CForm – définit le formulaire sur lequel se trouve le composant
• FindC – находит компонент по имени
• Images_SetButton – place une image sur un bouton

Pour qu’une image apparaisse sur le bouton, vous devez placer deux images dans le dossier \images\buttons.

• palette.png – image normale
• palette_s.png – l’image qui apparaîtra lorsque vous survolerez le bouton

La logique de fonctionnement est fournie par des gestionnaires d’événements qui sont appelés lorsqu’un bouton est enfoncé, que le texte est modifié ou lorsque le focus d’entrée quitte le champ de saisie de données.

procedure ColorEdit_Edit_OnChange(Sender: TObject);
// vérifie et affiche la valeur sélectionnée
var
  tmpForm: TAForm;
  tmpName: string;
  tmpEdit: TdbEdit;
  tmpPanel: TdbPanel; // marqueur de couleur
begin
  try
    tmpEdit := TdbEdit(Sender);
    tmpForm := TAForm(TComponent(Sender).Owner);
    tmpName := T_PANEL + CED_BUTTON_NAME + '_' + tmpEdit.Name;
    FindC(tmpForm, tmpName, tmpPanel);
    tmpPanel.Color := StrToColor(tmpEdit.Text);
  except
    RaiseException('ColorEdit_Edit_OnChange ' + ExceptionMessage);
  end;
end;

procedure ColorEdit_Edit_OnExit(Sender: TObject);
// vérifie et affiche la valeur sélectionnée
var
  tmpForm: TAForm;
  tmpName: string;
  tmpEdit: TdbEdit;
  tmpPanel: TdbPanel; // marqueur de couleur
begin
  try
    tmpEdit := TdbEdit(Sender);
    tmpForm := TAForm(TComponent(Sender).Owner);
    tmpName := T_PANEL + CED_BUTTON_NAME + '_' + tmpEdit.Name;
    FindC(tmpForm, tmpName, tmpPanel);
    tmpPanel.Color := StrToColor(tmpEdit.Text);
    tmpEdit.Text := ColorToStr(tmpPanel.Color);
  except
    RaiseException('ColorEdit_Edit_OnChange ' + ExceptionMessage);
  end;
end;Langage du code : JavaScript (javascript)

Ces deux gestionnaires diffèrent sur une ligne et servent à garantir que le panneau indicateur se transforme en la couleur entrée ou sélectionnée par l’utilisateur. Si lors de la saisie manuelle, l’utilisateur a fait une erreur (a saisi un caractère incorrect ou une séquence invalide), alors après avoir perdu le focus, le champ d’édition est automatiquement défini sur $00000000 (couleur noire).

procedure ColorEdit_btnSelectColor_OnClick( Sender: TObject; var Cancel:boolean );
// ouvre une boîte de dialogue pour choisir une couleur
var
  tmpName: string;
  tmpForm: TAForm;
  tmpEdit: TdbEdit;
  d: TColorDialog;
begin
  try
    CForm(Sender, tmpForm);
    tmpName := DeletePrefix(TComponent(Sender).Name);
    FindC(tmpForm, tmpName, tmpEdit);
    d := TColorDialog.Create(tmpForm);
    try
      d.Color := StrToColor( tmpEdit.Text );
      if d.Execute then
      begin
        tmpEdit.Text := ColorToStr(d.Color);
      end;
    finally
      d.free;
    end;
  except
    RaiseException('ColorEdit_btnSelectColor_OnClick() ' + ExceptionMessage);
  end;
end;Langage du code : JavaScript (javascript)

Le gestionnaire de clic sur le bouton appelle la boîte de dialogue du sélecteur de couleurs et écrit la valeur sélectionnée sous forme de texte dans le champ de saisie.

Pour convertir la couleur en texte et vice versa, les fonctions StrToColor() et ColorToStr() sont utilisées. Si vous souhaitez utiliser un format différent pour la représentation textuelle de la couleur (comme celui utilisé par les web designers), il vous suffira alors de modifier ces deux fonctions.

function StrToColor( AText: string): TColor;
// convertit le code en couleur
var
  R: Byte;
  G: Byte;
  B: Byte;
begin
  try
    B := StrToInt( '$'+copy( AText, 4,2 ) );
    G := StrToInt( '$'+copy( AText, 6,2 ) );
    R := StrToInt( '$'+copy( AText, 8,2 ) );
    Result := RGB(R,G,B);
  except
    Result := 0;
  end;
end;

function ColorToStr( AColor:TColor ): string;
// convertit la couleur en chaîne
begin
  Result := '$00' + IntToHex(AColor, 6);
end;
Langage du code : PHP (php)

Puisque nous pouvons avoir besoin de données de couleur dans une vue tabulaire, la fonction Grid_ShowColor(), qui visualise la couleur, ne sera pas superflue. Il n’a que deux paramètres : un tableau (composant TdbStringGrid) et une colonne dans laquelle se trouvent les valeurs de couleur.

procedure Grid_ShowColor(Sender: TObject; ACol: integer);
// afficher la couleur dans la colonne
var
  i: integer;
  tmpGrid: TdbStringGridEx;
begin
  tmpGrid := TdbStringGridEx(Sender);
  for i:=0 to tmpGrid.RowCount - 1 do
  begin
    tmpGrid.cell[ACol,i].Color := StrToColor( tmpGrid.cells[ACol,i] );
    tmpGrid.cells[ACol,i] := '';
  end;
end;Langage du code : JavaScript (javascript)

Usage

Avant que le formulaire puisse être affiché, le composant d’édition des couleurs doit être initialisé. Vous devez également ajouter un gestionnaire d’événements OnChange, dans lequel appeler la procédure Grid_ShowColor().

ColorEdit_Create(efmSoundLetter.edtColor);
DTF_GetGrid('dtfSoundLetter').dbOnChange := 'dtfSoundLetter_OnChange';

...

procedure dtfSoundLetter_OnChange(Sender: TObject);
begin
  Grid_ShowColor( Sender, 2);
end;
Langage du code : JavaScript (javascript)

Traduction : Yann Yvnec