Création d'un éditeur de composants et d'un éditeur de propriétés pour les composants FireMonkey

Remonter à Guide des composants FireMonkey

Dans ce tutoriel, vous allez créer un éditeur de propriétés et un éditeur de composants pour un composant FireMonkey. Le composant parent de ces éditeurs est TClockLabel, le composant que vous créez dans le tutoriel associé Création d'un composant FireMonkey stylé par extension d'un composant existant. Ce tutoriel suppose que vous avez déjà créé TClockLabel comme point de départ.

Composant TClockLabel :

Un éditeur de composants est une fonctionnalité de l'EDI que vous pouvez invoquer en double-cliquant sur un composant, ou en cliquant avec le bouton droit sur un composant et en sélectionnant Afficher l'éditeur sur le menu contextuel.

Invocation d'un éditeur de composants depuis un composant personnalisé :

Editeur de composants exemple présenté sous la forme d'un dialogue :

Un éditeur de propriétés est une fonctionnalité de l'EDI que vous pouvez fournir comme moyen d'éditer une propriété (ou un ensemble de propriétés) dans un dialogue distinct invoqué depuis l'inspecteur d'objets. Pour invoquer un éditeur de propriétés depuis l'inspecteur d'objets, cliquez sur les points de suspension [...] dans la colonne Valeur d'une propriété donnée.

Invocation d'un éditeur de propriétés depuis l'inspecteur d'objets :

Dans ce tutoriel, l'éditeur de composants et l'éditeur de propriétés affichent la même boîte de dialogue pour éditer la propriété Format du composant TClockLabel.

Etape 1 : Créer un package de conception

Pour créer un éditeur de propriétés ou un éditeur de composants, vous devez disposer d'un package de conception pour contenir ces éditeurs.

1. Cliquez avec le bouton droit sur ClockLabelProjectGroup dans le Gestionnaire de projets, et sélectionnez Ajouter un nouveau projet dans le menu contextuel :

   

2. Sélectionnez Fichier > Nouveau > Autre > Projets Delphi.

   Sélectionnez ensuite Package dans la boîte de dialogue Nouveaux éléments.

   

3. Enregistrez ce package sous dclClockLabel.
4. Sélectionnez Projet > Options > Description pour dclClockLabel.

   Vous pouvez sélectionner ici le type du package à créer. Sélectionnez Seulement en conception comme option d'utilisation :

   

Etape 2 : Ajouter une fiche FireMonkey HD pour éditer les propriétés

Pour éditer une propriété du composant TClockLabel dans une boîte de dialogue, vous devez maintenant ajouter une fiche pouvant éditer la propriété.

1. Assurez-vous que le projet dclClockLabel est actif. Si ce n'est pas le cas, double-cliquez sur le projet dclClockLabel pour le rendre actif.
2. Sélectionnez Fichier > Nouveau > Autre > Fichiers Delphi > Fiche FireMonkey HD.
3. Confirmez que cette fiche est pour FireMonkey en sélectionnant Oui :

   

4. Enregistrez la nouvelle fiche sous ClockLabelDialog.
5. Dans l'inspecteur d'objets, définissez la propriété Name de la fiche sur ClockLabelDlg.
6. Ajoutez et configurez plusieurs contrôles FireMonkey, et mettez à jour l'apparence de ce dialogue afin d'obtenir l'image suivante :

   

   Ajoutez les contrôles suivants :

   • ClockLabel1: TClockLabel
   • EditFormat: TEdit
   • Label1: TLabel
   • btnOK: TButton
   • btnCancel: TButton
   • btnPreview: TButton

   La section interface de cette classe dialogue doit ressembler à ceci :

 
 type
   TClockLabelDlg = class(TForm)
     ClockLabel1: TClockLabel;
     EditFormat: TEdit;
     Label1: TLabel;
     btnOK: TButton;
     btnCancel: TButton;
     btnPreview: TButton;
   private
     { Private declarations }
   public
     { Public declarations }
   end;

7. Si vous cliquez avec le bouton droit sur la fiche et sélectionnez Voir comme texte dans le menu contextuel, le code du fichier .FMX doit ressembler à ceci :

 
 object ClockLabelDlg: TClockLabelDlg
   Left = 0
   Top = 0
   Caption = 'Designer for Clock Label'
   ClientHeight = 136
   ClientWidth = 383
   Visible = False
   StyleLookup = 'backgroundstyle'
   object ClockLabel1: TClockLabel
     Position.Point = '(104,96)'
     Width = 257.000000000000000000
     Height = 15.000000000000000000
     TabOrder = 0
     Text = '5/8/2012 1:50:42 PM'
     Format = 'c'
   end
   object EditFormat: TEdit
     Position.Point = '(16,52)'
     Width = 233.000000000000000000
     Height = 22.000000000000000000
     TabOrder = 1
     KeyboardType = vktDefault
     Password = False
   end
   object Label1: TLabel
   Position.Point = '(16,32)'
     Width = 177.000000000000000000
     Height = 15.000000000000000000
     TabOrder = 2
     Text = 'DateTime Format for ClockLabel:'
   end
   object btnOK: TButton
     Position.Point = '(280,24)'
     Width = 80.000000000000000000
     Height = 22.000000000000000000
     TabOrder = 3
     ModalResult = 1
     Text = 'OK'
     Default = True
   end
   object btnCancel: TButton
     Position.Point = '(280,56)'
     Width = 80.000000000000000000
     Height = 22.000000000000000000
     TabOrder = 4
     ModalResult = 2
     Text = 'Cancel'
     Cancel = True
   end
   object btnPreview: TButton
     Position.Point = '(16,92)'
     Width = 80.000000000000000000
     Height = 22.000000000000000000
     TabOrder = 5
     Text = 'Preview'
   end
 end

8. Sélectionnez la zone d'édition (EditFormat) et créez un gestionnaire d'événements OnChange pour cette zone (EditFormatChange) :

 
 
 procedure TClockLabelDlg.EditFormatChange(Sender: TObject);
 begin
   ClockLabel1.Format := EditFormat.Text;
 end;

9. Pour compiler ce package, vous devez ajouter les packages suivants à la section Requiert :

• fmx
• ClockLabel
• designide

10. Compilez le package.

Etape 3 : Créer un éditeur de composants pour invoquer une boîte de dialogue depuis le menu contextuel

Un éditeur de composants est une classe héritée de TComponentEditor.

Créez une nouvelle unité et une classe dedans comme suit :

1. Créez une nouvelle unité et enregistrez-la sous ClockLabelEditors.pas.
2. Ajoutez une référence aux deux unités suivantes dans la clause uses :

 
 uses
   DesignEditors, DesignIntf, ClockLabelDialog, SysUtils, ClockLabel, System.UITypes;

3. Créez une nouvelle classe en tant que sous-classe du TComponentEditor.

 
 type
   TClockLabelComponentEditor = class(TComponentEditor)
   end;

Ajouter un menu contextuel

Comme traité plus tôt, un éditeur de composants peut afficher un menu contextuel pour le composant cible. Quand l'utilisateur clique avec le bouton droit sur le composant, les méthodes GetVerbCount et GetVerb de l'éditeur de composants sont appelées pour construire le menu contextuel.

Vous pouvez redéfinir ces méthodes pour ajouter des commandes (verbes) au menu contextuel comme suit :

 
 
 type
   TClockLabelComponentEditor = class(TComponentEditor)
   public
     function GetVerbCount: Integer; override;
     function GetVerb(Index: Integer): string; override;
   end;
 
 function TClockLabelComponentEditor.GetVerbCount: Integer;
 begin
   Result := 1;
 end;
 
 function TClockLabelComponentEditor.GetVerb(Index: Integer): string;
 begin
   case Index of
     0: Result := 'Show Editor';
   else
     raise ENotImplemented.Create('TClockLabelEditor has only one verb (index = 0) supported.');
   end;
 end;

Implémenter une commande

Quand la commande fournie par GetVerb est sélectionnée dans le Concepteur, la méthode ExecuteVerb est appelée. Pour chaque commande que vous fournissez dans la méthode GetVerb, vous devez implémenter une action dans la méthode ExecuteVerb. Vous pouvez accéder au composant en cours d'édition à l'aide de la propriété Component de l'éditeur. Pour ouvrir un dialogue défini auparavant, vous devez maintenant ajouter une référence à l'unité ClockLabelDIalog.

 
 
 type
   TClockLabelComponentEditor = class(TComponentEditor)
   private
     procedure ShowDesigner;
   public
     procedure ExecuteVerb(Index: Integer); override;
   end;
 
 
 
 procedure TClockLabelComponentEditor.ShowDesigner;
 var
   DesignerForm: TClockLabelDlg;
 begin
   DesignerForm := TClockLabelDlg.Create(nil);
   try
     // Set current value to designer form
     DesignerForm.ClockLabel1.Format := (Component as TClockLabel).Format;
     DesignerForm.EditFormat.Text    := (Component as TClockLabel).Format;
 
     // Show ModalForm, and then take result
     if DesignerForm.ShowModal = mrOK then
       (Component as TClockLabel).Format := DesignerForm.ClockLabel1.Format;
 
     Designer.Modified;
   finally
     DesignerForm.Free;
   end;
 end;
 
 procedure TClockLabelComponentEditor.ExecuteVerb(Index: Integer);
 begin
   case Index of
     0: ShowDesigner;
   else
     raise ENotImplemented.Create('TClockLabelEditor has only one verb (index = 0) supported.');
   end;
 end;

Recenser l'éditeur de composants dans l'EDI

Pour recenser un éditeur de composants dans l'EDI, appelez la routine RegisterComponentEditor depuis une procédure Register, comme suit :

 
 interface
 
 procedure Register;
 
 implementation
 
 procedure Register;
 begin
   RegisterComponentEditor(TClockLabel, TClockLabelComponentEditor);
 end;

Après la construction et l'installation du package, votre nouvel éditeur de composants est prêt à l'emploi.

Revenez à TestClockLabelUnit et invoquez le menu contextuel sur TClockLabel. Vous devriez maintenant voir la commande Afficher l'éditeur.

Etape 4 : Créer un éditeur de propriétés pour invoquer une boîte de dialogue depuis l'inspecteur d'objets

Les étapes de création d'un éditeur de propriétés sont presque identiques aux étapes de création d'un éditeur de composants.

Un éditeur de propriétés est une sous-classe de TPropertyEditor. En plus de la classe TPropertyEditor standard, l'unité désignée définit plusieurs autres classes utiles. Puisque la propriété Format est une valeur chaîne, cet exemple utilise comme point de départ TStringProperty, qui est une sous-classe de TPropertyEditor.

Définir les attributs de l'éditeur de propriétés

L'éditeur de propriétés doit fournir les informations que l'inspecteur d'objets utilise pour déterminer les outils à afficher. Par exemple, l'inspecteur d'objets a besoin de savoir si la propriété a des sous-propriétés ou peut afficher une liste de valeurs possibles.

Pour spécifier les attributs de l'éditeur, vous devez redéfinir la méthode GetAttributes de l'éditeur de propriétés. GetAttributes est une méthode qui renvoie un ensemble de valeurs de type TPropertyAttributes. Dans ce tutoriel, GetAttributes renvoie [paDialog] afin que l'EDI sache qu'une boîte de dialogue est disponible (voir la liste des valeurs disponibles dans Spécification des attributs de l'éditeur).

Pour afficher une boîte de dialogue, l'EDI appelle la méthode Edit de l'éditeur de propriétés. Le code doit donc ressembler à ceci :

 
 TClockLabelPropertyEditor = class(TStringProperty)
 private
   procedure ShowDesigner;
 public
   function GetAttributes: TPropertyAttributes; override;
   procedure Edit; override;
 end;
 
 { TClockLabelPropertyEditor }
 
 function TClockLabelPropertyEditor.GetAttributes: TPropertyAttributes;
 begin
   Result := [paDialog];
 end;
 
 procedure TClockLabelPropertyEditor.Edit;
 begin
   ShowDesigner;
 end;
 
 procedure TClockLabelPropertyEditor.ShowDesigner;
 var
   DesignerForm: TClockLabelDlg;
 begin
   DesignerForm := TClockLabelDlg.Create(nil);
   try
     // Set the curent value to the designer form
     DesignerForm.ClockLabel1.Format := GetStrValue;
     DesignerForm.EditFormat.Text    := GetStrValue;
 
     // Show MordalForm, and then take result
     if DesignerForm.ShowModal = mrOK then
       SetStrValue(DesignerForm.ClockLabel1.Format);
   finally
     DesignerForm.Free;
   end;
 end;

Recenser l'éditeur de propriétés dans l'EDI

Pour recenser un éditeur de propriétés dans l'EDI, vous devez appeler la routine RegisterPropertyEditor depuis une procédure Register, comme suit :

 
 procedure Register;
 begin
   RegisterComponentEditor(TClockLabel, TClockLabelComponentEditor);  // added in step 3
   RegisterPropertyEditor(TypeInfo(String), TClockLabel, 'Format', TClockLabelPropertyEditor);
 end;

Après la construction et l'installation du package, votre nouvel éditeur de propriétés est prêt à l'emploi.

Voir aussi

• Création d'un composant FireMonkey stylé par extension d'un composant existant
• Ajout d'éditeurs de composants
• Ajout d'éditeurs de propriétés
• Spécification des attributs de l'éditeur