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

Aus RAD Studio
Wechseln zu: Navigation, Suche

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:

TClockLabel4.png

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

Aufrufen eines Komponenteneditors für eine benutzerdefinierte Komponente:

ComponentEdContextMenu.png

Beispiel-Komponenteneditor als Dialogfeld:

SampleCompEditorDialog.png

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:

PropEditorObjectInsp.png

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 im Kontextmenü Neues Projekt hinzufügen aus:
    SelectProjectGroup.png
  2. Wählen Sie Datei > Neu > Weitere > Delphi-Projekte.
    Wählen Sie anschließend im Dialogfeld Objektgalerie den Eintrag Package aus:
    PackageSelection.png
  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:
    ProjctOptionsDescr.png

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 dclClockLabelproject, um das Projekt zu aktivieren.
  2. Wählen Sie Datei > Neu > Weitere > Delphi-Dateien > Geräteübergreifendes Formular.
  3. Bestätigen Sie durch Auswahl von Ja, dass es sich bei diesem Formular um ein FireMonkey-Formular handelt:
    ConfirmMessage.png
  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 so, wie in der folgenden Abbildung gezeigt, aussieht:
    DesignerForClockLabel.png
    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 = Default
    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
7. 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;
8. Um dieses Package zu compilieren, müssen Sie dem Erfordert-Abschnitt die folgenden Packages hinzufügen:
  • fmx
  • ClockLabel
  • designide
AddReferencecontextmenu.png
9. Compilieren Sie das Package.

Schritt 3: Erstellen eines Komponenteneditors zum Aufrufen eines Dialogfeldes über das 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: 
uses
  DesignEditors, DesignIntf;
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 Benutzer im Designer einen von GetVerb bereitgestellten Befehl auswählt, 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;


procedureTClockLabelComponentEditor.ShowDesigner;
var
  DesignerForm: TClockLabelDlg;
begin
  DesignerForm := TClockLabelDlg.Create(nil);
  try
    // Set curent 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: 

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 über den 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 Unit designide mehrere andere nützliche Klassen definiert. Weil die Eigenschaft Format ein String-Wert ist, wird in diesem Beispiel die Klasse TStringProperty, die eine Unterklasse von TPropertyEditor ist, als Ausgangspunkt verwendet.

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 ihrer möglichen 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 curent value to 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;

Abschließend müssen Sie einen neuen Eigenschaftseditor registrieren (genauso wie zuvor das Registrieren eines neuen Komponenteneditors), indem Sie der Register-Prozedur einen Aufruf von RegisterPropertyEditor hinzufügen: 

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

Siehe auch

Abgerufen von „https://docwiki.embarcadero.com/RADStudio/Alexandria/d/index.php?title=Erstellen_eines_Komponenteneditors_und_eines_Eigenschaftseditors_für_FireMonkey-Komponenten&oldid=172990“