Aktuelles

Abb. 1.01 TPanel

Die Komponente TPanel dient dazu ein Form in Bereiche aufzuteilen. Die Komponente TPanel findest du unter Standard im Hauptfenster von Lazarus und ist die dritte Komponente von rechts. Klicke diese bitte an um sie auszuwählen und dann in dein Form um diese in dein Form einzufügen.

Für das Beispiel das ich dir gleich zeigen werde benötigst du zwei TPanel. Bitte positioniere ein Panel auf der linken Seite und ein Panel auf der rechten Seite. Mein Form1 hat im gezeigten Beispiel eine weite (width) von 629 Pixel und eine Höhe (height) von 400 Pixel. Das linke Panel ist Panel1 und das rechte Panel ist Panel2.

Klicke nun den linken Panel an und stelle die weite (width) auf 180 Pixel. Danach klickst du auf die Eigenschaft Align und wählst alLeft an. Der Panel füllt nun die gesamte linke Seite aus. Nun gehe zum linken Panel2 und lege in an dem linken Panel an und ziehe ihn bis ganz rechts. Lasse den Panel2 zusätzlich von oben 0 Pixel Platz (Eigenschaft Top = 0). Und ziehe mit der Maus dem Panel bis an das untere Ende.

Dann gehst du in den Objektinspektor und klickst auch hier die Eigenschaft Align an. Stelle jetzt den Panel 2 auf alClient. Zur Farblichen Unterscheidung kannst du bei beiden Panel eine unterschiedliche Farbe auswählen. Die Farbe der Panel kann man mit den Standard Farben unter Color ändern.

Bereits jetzt solltest du sehen können das beim Vergrößern und verkleinern des Form1 mit der Maus Panel 1 nach links, oben und unten die gesamte linke Seite ausfüllt. Beim Panel2 wirst du bei vergrößern und verkleinern sehen das sich das Panel nach rechts ausbreitet beim vergrößern und beim verkleinern verkleinert es sich. Auf diese Art lassen sich für eure Programme dynamische Benutzeroberflächen gestalten.

Anbei kannst du dir das kleine Programm als Demo herunterladen.

Zum herunterladen
Anwendung awtpanelgui.7z

Einleitung

Mit einem TRadioButton trifft man bei einem Programm als Anwender eine Auswahl. Im Internet bei Webseiten kennt man einen TRadioButton bei einer Umfrage für eine Auswahl. Bei Lazarus und Freepascal lassen sich die Buttons vom Typ TRadioButton durch eine Oberflächen Komponente oder einem Gruppen Komponente automatisch gruppieren.

Video Anleitung (Alle 3 Teile)

Dies Video kann in Ihrem Browser nicht wiedergegeben werden.
Eine Download-Version steht unter Link-Addresse zum Abruf bereit.

Teil 01: Die Beispiel Software TRadioButton

In der Beispiel Software sind im oberen Teil die TRadioButton RadioButton1 und RadioButton2 auf einem TPanel gruppiert.

Im Button1 ist die Funktion zur Auswertung welcher Button aktiv ist. Im Editfeld wird das Ergebnis angezeigt.

Im unteren Teil habe ich ein Gruppenelement vom Typ TGroupBox verwendet um die TRadioButton – RadioButton3, RadioButton4, RadioButton5, RadioButton6 zu gruppieren.

Im Button2 ist die Funktion zur Auswertung welcher der Buttons aktiv ist und im Editfeld wird dies nach Klick auf den Button angezeigt.

Teil 02: Button1Click Quellcode

procedure TForm1.Button1Click(Sender: TObject);
begin
If RadioButton1.Checked = true then
Begin
RB1Aktiv.Text := 'RB1';
end;
If RadioButton2.Checked = true then
Begin
RB1Aktiv.Text := 'RB2';
end;
end;

Mit dem Wort Procedure wird die Procedure eingeleitet. Die Procedure befindet sich auf dem Form1 das vom Typ TForm1 ist. Die Procedure trägt den Namen Button1Click und es muss ein TObjekt übergeben werden. Das ist der Klick des Anwenders auf dem Button. Mit dem Word begin wird die Procedure Rumpf begonnen in dem die Anweisungen geschrieben werden. Mit der If Abfrage frage ich ab ob der RadioButton1 Ausgewählt wurde. Gelesen wird das folgendermaßen: „Wenn der RadioButton1 ausgewählt wurde dann mache folgendes. Das Editfeld RB1Aktiv soll als Text anzeigen das der RadioButton1 abgekürzt RB1 ausgewählt wurde. In der zweiten If Anweisung wird dies mit dem RadioButton2 wiederholt.

Teil 03: Button2Click Quellcode

procedure TForm1.Button2Click(Sender: TObject);
begin
If RadioButton3.Checked = true then
Begin
RB2Aktiv.Text := 'RB3';
end;
If RadioButton4.Checked = true then
Begin
RB2Aktiv.Text := 'RB4';
end;
If RadioButton5.Checked = true then
Begin
RB2Aktiv.Text := 'RB5';
end;
If RadioButton6.Checked = true then
Begin
RB2Aktiv.Text := 'RB6';
end;
end;

Die folgende Procedure ist der unter Punkt zwei ähnlich. Diese wertet die Radiobutton 3 – 6 aus und zeigt diese in dem Editfeld RB2Aktiv in der Eigenschaft Text an.

Teil 04: Beispiel Software herunterladen

Du kannst dir die Software wie immer herunterladen und ansehen. Durch Datenkompression habe ich die Software mit der Software 7Zip gepackt und die kompilierte EXE-Datei entfernt.
LINK zum Herunterladen (ca. 139kb groß):  Herunterladen

Teil 05: Weiterführende Links in das deutsche Freepascal Wiki

Link zum deutschsprachigen Freepascal Wiki: https://wiki.freepascal.org/

Abb. 1.01 TMemo

Das TMemofeld findest du in der Rubrik Standard und ist die sechste Komponente von Links. Das Memo1 ist von Typ TMemo. Die Komponente kann durch das Anklicken ausgewählt werden und dann mit einem weiteren Klick in das Form1 eingefügt werden. Nachdem das Memofeld eingefügt wurde, kann es per Drag and Drop, also durch das Anklicken und ziehen verkleinert und vergrößert werden. Weitere Möglichkeiten es In der Höhe und Breite zu definieren hast du über den Objektinspektor. Die Eigenschaft width ist hier die Breite und Height die Höhe. Mit der Eigenschaft left kann man das Memofeld von Links und Top mit der Eigenschaft Top von oben positionieren. Daten hinzufügen kannst du bei der Eigenschaft Lines und dann den Button mit den drei Punkten auswählen. Die Daten in dem sich öffnenden Fenster eintragen und mit dem OK Button bestätigen.

TMemo – Jetzt kommt Farbe dazu

Abb. 1.02 TMemo Farbe

Die Farben des Hintergrundes des TMemofeldes können durch die Eigenschaft Color geändert werden. Die Schriftfarbe kann unter der Eigenschaft Fonts -> Color geändert werden. Die Einstellung der Farben ist über den Objektinspektor möglich. Die Schriftgröße kann unter Size geändert werden.

TMemo – Daten mit Quelltext hinzufügen und löschen

Alle Eigenschaften des TMemofeldes können auch während der Laufzeit angesprochen werden.
Als erstes möchte ich dir kurz den Aufbau der GUI für die Bedienung erklären. Das Memofeld trägt den Namen Memo1. Der Button mit der Caption Clear trägt den Namen BtnMemo1Clear. Das Editfeld daneben trägt den Namen EdtMemoDaten. Der Button mit der Caption „Daten einfügen“ trägt den Namen EdtMemo1AddData. Kommen wir nun zum Quelltext für das Löschen des Inhaltes vom TMemo1.
Quellcode:

01: procedure TForm1.BtnMemo1ClearClick(Sender: TObject);
02: begin
03: Memo1.Lines.clear;
04: end;

Zeile 01 zeigt uns das der Name der Prozedure BtnMemo1ClearClick() heißt. Dies ist damit eine Prozedure des BtnMemo1Clear Buttons. Zeile 02 leitet den Anweisungsblock der Prozedure ein. In Zeile 03 wird von der Komponente Memo1, also unserem Memofeld die Eigenschaft Lines angesprochen und diese durch die Eigenschaft clear gelöscht.

Die zweite Prozedure fügt nun die im Editfeld mit dem Namen EdtMemoDaten einzelnen Zeilen hier Lines (Linien) hinzu.
Quellcode:
01: procedure TForm1.BtnMemo1AddDataClick(Sender: TObject);
02: begin
03: Memo1.Lines.Add(EdtMemoDaten.Text);
04: end;

Zeile 01 zeigt uns hier, dass die Prozedure sich im Quelltext des Form1 (TForm1) befindet und eine OnClick Eigenschaft des Buttons BtnMemo1Add ist. In Zeile 02 wird der Anweisungsblock eingeleitet. In Zeile 03 fügen wir dem Memo1 und der Eigenschaft Lines durch die Methode Add die Daten des EdtMemoDaten.Text hinzu. Die Daten des Edtifeldes werden beim Klick auf den Button BtnMemo1AddData als eine Zeile hinzugefügt.

Abb. 1.03 TMemo Farbe Quellcode

Die dritte Prozedure fügt Farbe bei der Darstellung des Form1 hinzu, siehe Abbildung 1.03.

Quellcode:
01: procedure TForm1.FormShow(Sender: TObject)
02: begin
03: Memo1.Font.color := clGreen;
04: Memo1.color := clYellow;
05: end;

In Zeile 01 sehen wir hier das die Prozedure von der Komponente Form1 ist und vom typ OnShow (FormShow). In Zeile 02 wird mit dem begin wieder der Anweisungsblock eingeleitet. In Zeile 03 wird von Memo1 die Eigenschaft Font und davon die Eigenschaft color auf clGreen (Standard Grün von Lazarus) gesetzt. Dies ist die Schriftfarbe für das Memo1 Feld. In Zeile 04 wird vom TMemo die Eigenschaft color auf clYellow (Standard Geld von Lazarus) gesetzt. Dies ist die Hintergrundfarbe des TMemo1 Feldes.

Einleitung

Die Beispiel Software zum Thema TToogleBox könnt ihr euch hier herunterladen. Eine TToggleBox ist ein Einschalter und Ausschalter der beim einmaligen Klick auf dem Stand stehen bleibt. Ähnlich wie bei einem Stromschalter für das Wohnzimmer, dass beim einmaligen einschalten an bleibt, bleibt auch unsere TToggleBox beim Schalten auf den Einschaltzustand oder Ausschaltzustand stehen.

Video Tutorial TToggleBox

Dies Video kann in Ihrem Browser nicht wiedergegeben werden.
Eine Download-Version steht unter Link-Addresse zum Abruf bereit.

Teil 01: TToggleBox – Beispiel 01 Teil 01

In Beispiel 01 beschreibe ich wie man ein TEditfeld mit zwei TToggleBox Button beeinflussen kann. Ich gehe hier auch zwei unterschiedliche Eigenschaften ein. Für jeden der beiden TToggleBox Button gibt es eine Funktion.

Quellcode:

Abb. 1.01 Quellcode TToggleBox Beispiel 1 Teil 01

Mit der IF Abfrage fragen wir den Zustand der TToggleBox TTBSichtbar.checked ab.
Ist dieser wahr (true), dann setze die Beschriftung (Caption) der TToggleBox auf >>unsichtbar<< und die Eigenschaft visible des Editfeldes TEdtEdit1 auf false.
Ist das unwahr dann setze die Beschriftung (Caption) der TToggleBox auf >>sichtbar<< und die Eigenschaft visible des Editfeldes TEdtEdit1 auf true.

Quellcode Prozedur 2:

Abb. 1.02 Quellcode TToggleBox Beispiel 1 Teil 02

Im zweiten Teil unseres ersten Beispiels läuft es genau gleich ab wie im ersten Teil. Wir fragen wieder den Zustand checked ab und aktivieren oder deaktivieren das Editfeld.

Teil 02: TToogleBox – Beispiel 01 Teil 02

In Beispiel zwei gibt es ein Anwendungsbeispiel. Hier könnt ihr z.B. die IP Adresse oder den Hostnamen von einem IT System anzeigen lassen. In diesem Beispiel ist es die IP Adresse und der Hostname meines mobilen Computers.

Abb. 1.03 Quellcode TToggleBox Beispiel 2

Die eigentliche Abfrage ist wieder wie in unserem ersten Beispiel. Nur das wir die Eigenschaft Text des Editfeldes beeinflussen.

Teil 03: Quellcode Im Überblick:

procedure TForm1.TTBSichtbarClick(Sender: TObject);
begin
// Beispiel 01 Teil 01
if TTBSichtbar.Checked = true then
begin
TTBSichtbar.Caption := 'unsichtbar';
TEdtEdit1.visible := false;
end
else
begin
TTBSichtbar.Caption := 'sichtbar';
TEdtEdit1.visible := true;
end;
end;

procedure TForm1.TTBAktivClick(Sender: TObject);
begin
// Beispiel 01 Teil 02
if TTBAktiv.Checked = true then
begin
TTBAktiv.Caption := 'Aktiv';
TEdtEdit1.enabled := false;
end
else
begin
TTBAktiv.Caption := 'inAktiv';
TEdtEdit1.enabled := true;
end;
end;

procedure TForm1.TTBHostOrIPClick(Sender: TObject);
begin
// Beispiel 02 Teil 01
if TTBHostOrIP.Checked = false then
begin
TTBHostOrIP.Caption := 'Hostname';
TEdtHostOrIP.text := 'AndreMobil';
end
else
begin
TTBHostOrIP.caption := 'IP Adresse';
TEdtHostOrIP.text := '192.168.178.55';
end;
end;

Abb. 1.01 TEditfeld

TEditfeld zum Form1 hinzufügen und ausrichten
Das TEdit findest du unter dem Reiter Standard und ist die fünfte Komponente von links. Du Kannst die TEdit Komponente anklicken und mit einem weiteren Klick in das Form1 in dein Form ziehen. Hier lässt sich die TEdit Komponente per Drag and Drop positionieren und ausrichten.

Eine weitere Möglichkeit die TEdit Komponente auszurichten ist über den Objektinspektor zu gehen und die Eigenschaften height und width zu ändern.

TEditfeld Name festlegen
Unter der Eigenschaft Name kann der Name der Komponente geändert werden. Der Name ist dazu da, um die Komponente identifizieren zu können und im Quelltext ansprechen zu können.

TEditfeld Text eingeben und festlegen
Der Text im Editfeld ist auch die Eigenschaft Text nicht wie beim Label oder beim Button die Caption. Die Hintergrundfarbe des Editfeldes kann unter Color geändert werden.

TEditfeld Textfarbe, Schriftfarbe und die Schriftgröße
Die Textfarbe, Schriftart und die Schriftgröße kann unter Fonts und dann einen Klick auf den Button mit den drei Punkten geändert werden. Zusätzlich kann die Textfarbe unter der Eigenschaft Font->Color geändert werden. Der Text der Komponente TEdit kann im Quellcode durch den Quellcode: Edit1.Text angesprochen werden und ist zu diesem Zeitpunkt vom Typ String. Möchte man zahlen oder einen Integer Werte darstellen, muss dieser vorher durch die Funktion IntToStr() in einen String umgewandelt werden.

TEditfeld als Passwortfeld

Das TEditfeld kann auch als Passwortfeld genutzt werden. Bei der Passworteingabe soll also kein Text dargestellt werden, sondern stattdessen für jedes Zeichen ein Stern oder ein Plus Zeichen. Dies kann man unter der Eigenschaft PasswortChar im Objektinspektor darstellen. Durch das Zeichen #0 wird der normale Text der Eingegeben wird dargestellt. Durch das Eintragen einen Plus + Zeichen oder durch ein Stern * Zeichen wird die Ansicht des eingegebenen Textes verhindert.

TEditfeld: Bild, Beispiel und Quellcode
In der Abbildung 1.00 siehst du verschiedene Editfelder die farblich gestaltet sind, bei denen der Text Hallo Welt in einer anderen Schriftart, größer geschrieben und Fett gedruckt ist und unterschiedliche Sonderzeichen für das Editfeld als Passwort Eingabefeld nutzen. Das TEdit Feld unter dem Labeltext Eingabe hat ein Ereignis vom Typ OnChange(). Das bedeutet sobald in dem TEdit Feld etwas eingegeben wurde wird durch die OnChange Prozedure der Text in das darunterliegende TEdit Feld kopiert.

Quelltext:

procedure TForm1.EdtEingabeChange(Sender: TObject);
begin
EdtKopie.Text := EdtEingabe.Text;
end;

Anhang:

Anwendung – Komponenten Bibliothek – TEdit zum herunterladen