Demonstration des Schaltflächen-Klick-Ereignisses

In diesem Abschnitt fügen wir den Schaltflächen Ereignisse hinzu: Ein Mausklick auf eine Schaltfläche führt Code aus und erledigt verschiedene Aufgaben. Wir zeigen zwei praktische Beispiele: Beim Klick den Text der Schaltfläche ändern, mit einer zweiten Schaltfläche das Fenster schließen.

Neues GUI-Projekt erstellen

Klicken Sie auf das obere Hauptmenü: Project (Projekt) → New Project (Neues Projekt) → Application (Anwendung) (alternativ über File (Datei) → New → Project → Application) – es wird ein brandneues grafisches Programm erstellt.

Oder

Nach der Erstellung erscheinen mehrere Fenster: Hauptmenüleiste oben, links der Objektinspektor (Object Inspector) und der große Codeeditor (Source Editor) im Hauptbereich.

Zwei Schaltflächen auf das Formular platzieren

Unter der oberen Menüleiste befindet sich die Registerleiste für Steuerelementkategorien

Der rote umrandete Bereich ist die Steuerelement-Kategorieleiste, aufgeteilt in Registerkarten: Die erste heißt Standard (Standard-Steuerelemente), die zweite Additional…

Falls der Reiter „Standard (Standard-Steuerelemente)“ nicht aktiv ist, klicken Sie ihn an;

Klicken Sie das Schaltflächensymbol (Rechteck mit OK) an, danach klicken Sie auf die linke Seite des Form1-Fensters – es entsteht eine Schaltfläche mit dem Namen Button1;

Klicken Sie erneut das Schaltflächensymbol in der Standard-Leiste an und klicken Sie auf die rechte Seite des Formulars, um die zweite Schaltfläche Button2 zu erzeugen.

Wenn Sie die Schritte nicht kennen, schauen Sie sich das Video der vorherigen Lektion an.

Folgen Sie diesen Schritten, um zwei Schaltflächen hinzuzufügen

Text von Button1 einstellen und Klick-Ereignis schreiben

Klicken Sie Button1 aus, der linke Objektinspektor zeigt alle seine Eigenschaften an:

Falls das Einstellfenster ausgeblendet ist, klicken Sie den Pfeil-Button in der Steuerelementleiste, um es einzublenden (oder nutzen Sie F12 zum Umschalten zwischen Formular und Code).

Nach Auswahl der ersten Schaltfläche zeigt die linke Leiste oben den ausgewählten Button1 an, unten gibt es zwei Reiter: Eigenschaften und Ereignisse.

Der Reiter Eigenschaften dient zur Einstellung von Aussehen, Stil, Größe und weiteren visuellen Merkmalen der Schaltfläche.

Der Reiter Ereignisse dient zum Binden von Aktionen wie Mausklick, Hovern, Verlassen des Elements.

• Suchen Sie die oberste Eigenschaft Caption (Überschrift), ersetzen Sie den Standardwert Button1 durch Press, drücken Sie Enter oder klicken Sie auf eine leere Stelle – der Text der Schaltfläche aktualisiert sich sofort;
• Wechseln Sie zum Reiter „Events (Ereignisse)“ im Objektinspektor: Hier sind alle auslösbaren Ereignisse der Schaltfläche aufgelistet (Klick, Hovern, Verlassen…);
• Suchen Sie OnClick (Klick-Ereignis), klicken Sie auf den Button mit drei Punkten ... rechts daneben: Der Editor wechselt automatisch zur Code-Seite und erstellt eine leere Klick-Funktion:

Klicken Sie auf eine leere Stelle zur Bestätigung, der Text auf der Schaltfläche ändert sich.

Lassen Sie die Schaltfläche ausgewählt und wechseln Sie zum Reiter Events (Ereignisse)

Dieser Reiter zeigt alle integrierten Ereignisse der Schaltfläche an, Sie können beliebige Aktionen binden. Nehmen wir OnClick: Wenn der Nutzer mit der linken Maustaste auf die Schaltfläche klickt, wird die gebundene Ereignismethode ausgeführt.

Wählen Sie OnClick aus und klicken Sie auf den ...-Button rechts, um eine leere Ereignisfunktion zu erstellen.

Fügen Sie zwischen begin und end eine Code-Zeile ein, um den Text der Schaltfläche bei Klick zu ändern.

procedure TForm1.Button1Click(Sender: TObject);
begin
  Button1.Caption := 'Press again'; // diesen Code einfügen
end;   Code-Sprache: JavaScript (javascript)

Beim Ausführen des Programms wird der Code im markierten Bereich ausgeführt, wir gelangen in den Pascal-Codebereich und können beliebige Logik umsetzen. Die meisten GUI-Programme arbeiten nach diesem ereignisgesteuerten Prinzip.

Tastenkürzel F12 zum schnellen Zurückwechseln zum Formulareditor.

Text von Button2 einstellen und Schließ-Ereignis erstellen

Wählen Sie Button2 aus, ändern Sie im Objektinspektor die Eigenschaft Caption auf Exit;

Gehen Sie ebenfalls zum OnClick-Ereignis, klicken Sie auf ... zum Code-Sprung und schreiben Sie den Schließbefehl:

procedure TForm1.Button2Click(Sender: TObject);
begin
  Close; // Fenster schließen, Programm beenden
end;Code-Sprache: JavaScript (javascript)

Projekt speichern (speichern Sie regelmäßig!)

Oben im Menü: Project → Save Project As (Projekt speichern unter), speichern Sie zuerst die Formular-Unit-Datei (Dateiendung .pas) ;

Anschließend öffnet sich ein Dialog zum Speichern der Projektkonfigurationsdatei (Endung .lpi).

Hinweis: Unit-Dateiname und Projektname dürfen nicht identisch sein, sonst erscheint beim Kompilieren der Fehler „doppelter Bezeichner“

Kompilieren und Programm ausführen

Zwei Ausführungswege:

• Menüpfad: Run (Ausführen) → Run ;
• Tastenkürzel: direkt F9 drücken. Die IDE kompiliert und linkt den Code automatisch, bei fehlerfreier Syntax startet das fertige Programm sofort.

Beim Start öffnet sich das fertige Fenster (ohne das Entwurfsraster), dies ist das Hauptfenster der Software:

• Klicken Sie auf Press: Der Text der Schaltfläche wechselt zu Press again ;
• Klicken Sie auf Exit: Das Fenster schließt sich, das Programm endet, Sie kehren automatisch zum Formulareditor mit Raster zurück, um weiteren Code zu bearbeiten.