Erstellen eines Komponenteneditors und eines Eigenschaftseditors für FireMonkey-Komponenten

Nach oben zu FireMonkey-Komponentenhandbuch

In diesem Tutorial wird für eine FireMonkey-Komponente ein Eigenschaftseditor und ein Komponenteneditor erstellt. Die übergeordnete Komponente dieser Editoren ist TClockLabel, die Komponente, die im Tutorial Erstellen einer mit Stilen versehenen FireMonkey-Komponente durch Erweitern einer vorhandenen Komponente erstellt wurde. Für dieses Tutorial wird vorausgesetzt, dass Sie die Komponente TClockLabel bereits erstellt haben.

TClockLabel-Komponente:

Ein Komponenteneditor ist ein IDE-Feature, das Sie durch Doppelklicken auf eine Komponente oder durch Rechtsklicken auf eine Komponente und Auswahl von Editor anzeigen aus dem Kontextmenü aufrufen können.

Aufrufen eines Komponenteneditors für eine benutzerdefinierte Komponente:

Beispiel-Komponenteneditor als Dialogfeld:

Ein Eigenschaftseditor ist ein IDE-Feature, das Sie als Hilfsmittel zur Bearbeitung einer Eigenschaft (oder mehrerer Eigenschaften) in einem eigenen, aus dem Objektinspektor aufgerufenen Dialogfeld vorsehen können. Klicken Sie in der Spalte Werte einer Eigenschaft auf die Ellipse [...], um einen Eigenschaftseditor aus dem Objektinspektor aufzurufen.

Aufrufen eines Eigenschaftseditors aus dem Objektinspektor:

In diesem Tutorial zeigen der Komponenteneditor und der Eigenschaftseditor dasselbe Dialogfeld zum Bearbeiten der Eigenschaft Format der TClockLabel-Komponente an.

Schritt 1: Erstellen eines Entwurfszeit-Package

Zum Erstellen eines Eigenschaftseditors oder eines Komponenteneditors müssen Sie ein Entwurfszeit-Package anlegen, in das diese Eigenschaftseditoren aufgenommen werden.

1. Klicken Sie in der Projektverwaltung mit der rechten Maustaste auf ClockLabelProjectGroup, und wählen Sie aus dem Kontextmenü Neues Projekt hinzufügen:

   

2. Wählen Sie Datei > Neu > Weitere > Delphi-Projekte.

   Wählen Sie anschließend im Dialogfeld Objektgalerie den Eintrag Package aus:

   

3. Speichern Sie dieses Package unter dclClockLabel.
4. Wählen Sie für dclClockLabel Projekt > Optionen > Beschreibung aus.

   Hier können Sie den Typ des zu erstellenden Package auswählen. Aktivieren Sie als Verwendungsoption Entwurf:

   

Schritt 2: Hinzufügen eines FireMonkey-HD-Formulars zur Bearbeitung von Eigenschaften

Zum Bearbeiten einer Eigenschaft der TClockLabel-Komponente in einem Dialogfeld müssen Sie nun ein Formular hinzufügen, in dem die Bearbeitung erfolgen soll.

1. Stellen Sie sicher, dass das Projekt dclClockLabel aktiv ist. Ist dies nicht der Fall, doppelklicken Sie auf das Projekt dclClockLabel, um es zu aktivieren.
2. Wählen Sie Datei > Neu > Weitere > Delphi-Projekte > FireMonkey-HD-Anwendung.
3. Bestätigen Sie durch Auswahl von Ja, dass es sich bei diesem Formular um ein FireMonkey-Formular handelt:

   

4. Speichern Sie das neue Formular unter ClockLabelDialog.
5. Ändern Sie im Objektinspektor den Namen des Formulars in ClockLabelDlg.
6. Fügen Sie FireMonkey-Steuerelemente hinzu, konfigurieren Sie diese, und aktualisieren Sie das Erscheinungsbild dieses Dialogfeldes, sodass es wie in der folgenden Abbildung gezeigt aussieht:

   

   Fügen Sie folgenden Steuerelemente hinzu:

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

   Der Interface-Abschnitt dieser Dialogklasse sollte wie folgt lauten:

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

7. Wenn Sie mit der rechten Maustaste auf das Formular klicken und im Kontextmenü Ansicht als Text auswählen, sollte der folgende Code aus der FMX-Datei angezeigt werden:

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. Wählen Sie das Eingabefeld (EditFormat) aus, und erstellen Sie dafür eine OnChange-Ereignisbehandlungsroutine als EditFormatChange:

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

9. Um dieses Package zu compilieren, müssen Sie dem Erfordert-Abschnitt die folgenden Packages hinzufügen:

• fmx
• ClockLabel
• designide

10. Compilieren Sie das Package.

Schritt 3: Erstellen eines Komponenteneditors zum Aufrufen eines Dialogfeldes aus dem Kontextmenü

Ein Komponenteneditor ist eine Klasse, die von TComponentEditor abgeleitet ist.

Erstellen Sie folgendermaßen eine neue Unit und eine Klasse:

1. Erstellen Sie eine neue Unit, und speichern Sie sie unter ClockLabelEditors.pas.
2. Fügen Sie in die uses-Klausel eine Referenz auf die folgenden Units ein:
3.  :

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

3. Erstellen Sie eine neue Klasse als Unterklasse von TComponentEditor.

type
   TClockLabelComponentEditor = class(TComponentEditor)
   end;

Hinzufügen eines Kontextmenüs

Wie weiter oben erwähnt, kann ein Komponenteneditor ein Kontextmenü für die Zielkomponente anzeigen. Wenn der Benutzer mit der rechten Maustaste auf die Komponente klickt, werden die Methoden GetVerbCount und GetVerb des Komponenteneditors aufgerufen, um das Kontextmenü zu erstellen.

Sie können diese Methoden wie folgt überschreiben, um dem Kontextmenü Befehle (Verben) hinzuzufügen:

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;

Implementieren eines Befehls

Wenn der von GetVerb bereitgestellte Befehl im Designer ausgewählt wird, wird die Methode ExecuteVerb aufgerufen. Sie sollten für jeden in der Methode GetVerb bereitgestellten Befehl eine Aktion in der Methode ExecuteVerb implementieren. Auf die zu bearbeitende Komponente können Sie über die Editoreigenschaft Component zugreifen. Um das zuvor definierte Dialogfeld zu öffnen, müssen Sie nun eine Referenz auf die Unit ClockLabelDIalog hinzufügen.

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;

Registrieren des Komponenteneditors in der IDE

Rufen Sie zum Registrieren eines Komponenteneditors in der IDE die Routine RegisterComponentEditor aus einer Register-Prozedur wie folgt auf:

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

Nach dem Erzeugen und Installieren des Package kann der neue Komponenteneditor eingesetzt werden.

Kehren Sie zur Unit TestClockLabelUnit zurück, und rufen Sie das Kontextmenü für TClockLabel auf. Der Befehl Editor anzeigen sollte nun angezeigt werden.

Schritt 4: Erstellen eines Eigenschaftseditors zum Aufrufen eines Dialogfeldes aus dem Objektinspektor

Die Schritte zum Erstellen eines Eigenschaftseditors sind fast identisch mit den Schritten zum Erstellen eines Komponenteneditors.

Ein Eigenschaftseditor ist eine Unterklasse von TPropertyEditor. Zusätzlich zu der Standard-TPropertyEditor-Klasse werden in der entworfenen Klasse mehrere andere nützliche Klassen definiert. Weil die Eigenschaft Format ein String-Wert ist, wird in diesem Beispiel die Klasse TStringProperty als Ausgangspunkt verwendet, die eine Unterklasse von TPropertyEditor ist.

Festlegen der Attribute des Eigenschaftseditors

Der Eigenschaftseditor muss Informationen bereitstellen, die dem Objektinspektor mitteilen, welche Tools angezeigt werden sollen. So muss dem Objektinspektor bekannt sein, ob eine Eigenschaft Untereigenschaften hat oder eine Liste möglicher Werte anzeigen kann.

Zum Festlegen von Editorattributen müssen Sie die Methode GetAttributes des Eigenschaftseditors überschreiben. Die Methode GetAttributes gibt eine Wertemenge vom Typ TPropertyAttributes zurück. GetAttributes gibt in diesem Tutorial [paDialog] zurück, damit der IDE bekannt ist, dass ein Dialogfeld verfügbar ist (siehe die Liste der verfügbaren Werte unter Die Editorattribute festlegen).

Zum Anzeigen eines Dialogfeldes ruft die IDE die Methode Edit des Eigenschaftseditors auf. Der Code sollte nun wie folgt lauten:

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;

Sie müssen schließlich einen neuen Eigenschaftseditor registrieren (ähnlich zum früheren Registrieren eines neuen Komponenteneditors), indem Sie der Register-Prozedur einen Aufruf von RegisterPropertyEditor hinzufügen:

  RegisterPropertyEditor(TypeInfo(string), TClockLabel, 'Format', TClockLabelPropertyEditor);

Siehe auch

• Erstellen einer mit Stilen versehenen FireMonkey-Komponente durch Erweitern einer vorhandenen Komponente
• Komponenteneditoren hinzufügen
• Eigenschaftseditoren hinzufügen
• Die Editorattribute festlegen