Aktuelles

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

Abb. 1.01 TLabel Ansicht im ObjektInspektor

Das TLabel findest du im Hauptmenü unter Standard und ist die vierte Komponente von Links und wird durch ABC dargestellt. Bitte speichere deine Anwendung, wenn du schon etwas in Lazarus angelegt hast. Um die Label auszuprobieren erstelle eine neue Anwendung bei Lazarus Projekt->Neues Projekt->Anwendung. Ziehe danach drei Label in dein Form1. Dies kannst du durch das Anklicken der Komponente im Hauptfenster machen und dann klickst du in das Form1. Durch Drag and Drop kannst du das Label auf dem Form1 verschieben und positionieren. Im Objektinspektor unter Caption (Beschreibung) lässt sich der Text der dargestellt wird ändern. Unter Name änderst du den Namen des TLabels. Mit dem Namen kannst du die Komponente im Quelltexteditor nutzen. Möchtest du eine Eigenschaft im Quelltext ändern kannst du die Komponenten Eigenschaften als Punkt hinter dem Namen schreiben und dies durch eine Zuweisung ändern.

Beispiel:
Label1.caption := ‘Hallo Welt‘;

Jetzt kommt Farbe ins Spiel TLabel formatieren

Hintergrundfarbe
Die Hintergrundfarbe kannst du im Objektinspektor ändern unter Color
Quelltext:
Label1.color := clRed;

Abb. 1.02 TLabel Ansicht ObjektInspektor

Schriftfarbe, Schriftart und Schriftgröße

Im Objektinspektor kannst du die Schriftfarbe, Schriftart und Schriftgröße vom TLabel unter Font in den Unterordnern Color, bzw. durch das anklicken des Buttons mit den drei Punkten ändern.
Quelltext:
Label1.Font.color := clRed; // Schriftfarbe Rot
Label2.Font.color := TColor($ff0000); // Schriftarbe Rot als Hexadezimalzahl #FF0000 (Rot)
Label3.Font.color := RGBToColor(255, 0, 0); // Schriftarbe Rot als RGB
Label1.Font.style:=[fsbold]; // Fett gedruckt
Label1.Font.Name := 'Arial'; // Schriftart
Label1.Font.Size := 18; // Schriftartgröße

Dies könnte als Beispiel als Ereignis des Form1 während der Erstellung mit dem Ereignis OnCreate() oder als während der darstellung OnShow().
Quelltext:
procedure TForm1.FormCreate(Sender: TObject);
begin
Label1.Font.color := clRed; // Schriftfarbe Rot … usw.
end;

Abb. 1.03 TLabel Farbgebung

Um euer TLabel in einer speziellen Farbe darstellen zu können könnt ihr ein Bildbearbeitungsprogramm wie Paint (Windows), Gimp (Systemübergreifend und kostenlos), oder Photoshop (Windows und Mac) nutzen. In diesen Programmen werden die Farbpaletten in Hexadezimal und auch als RGB dargestellt.

Abb. 1.01 TButton

TButton in der Lazarus IDE

Die Komponente TButton findest du im Hauptfenster von der Lazarus IDE unter der Rubrik Standard. Sie ist von Links die dritte Komponente. Um diese in dein Form1 zu bekommen klickst du Sie an und klickst dann in dein Form1. Die Komponente fügt sich damit zum Form1 hinzu. Dies siehst du an einem zusätzlichen Eintrag im Objektinspektor.

TButton Größe anpassen.

Die Größe des Buttons kann per Drag and Drop vorgenommen werden. Eine weitere Möglichkeit ist die Einstellung über den Objektinspektor die Eigenschaften festzulegen. Die dritte Möglichkeit ist die Komponente im Quellcode zur Erstellung mit den Eigenschaften anzulegen. Hierzu könnte man zur Laufzeit und bei der Erstellung des Form1 auch die Eigenschaften der Komponente TButton festlegen. Die in Zeile 03 und 04 angegebenen Zahlen für die Höhe und Weite sind die Anzahl der Pixel auf dem jeweiligen Wiedergabegerät.
(mehr …)