Aktuelles

Abb. 1.01 TImage

Die Komponente TImage findest du unter Additional dem zweiten Reiter von dem Hauptfenster von Lazarus und Free Pascal. Sie ist die vierte Komponente von Links. Du kannst die Komponente in dein Form1 einfügen indem du das TImage anklickst und dann in dein Form1 klickst. Die Komponente beinhaltet nun ein viereckiges Feld und hat an den Ecken und zwischen zwei Ecken Punkte. An diesen Punkten kannst du mit der Maus ziehen um die Komponente TImage zu positionieren. (mehr …)

Ich möchte nachfolgend noch einige wichtige Komponenten für die grafische Benutzeroberfläche vorstellen. Diese wist du auch in die Komponenten Bibliothek auf meinem Blog als Text und Video wiederfinden. Für unser kleines erstes Programm möchte ich diese nun auch hier vorstellen. Dies ist eine Kurzvorstellung die ausführliche Vorstellung der Eigenschaften und Ereignisse gibt es dann in der Komponenten Bibliothek.

Abb-1-00-Lazarus-TBitBtn

TBitBtn: Button mit Bild

Buttons mit schönen Bildern ausstatten, den sogenannten Icons macht jedes Programm ein wenig schicker! Die beiden Buttons in der Abbildung 1.00 sind beide Buttons vom Typ: TBitBtn. Ich habe hier ein kleines Icon eingefügt. Das Icon ist einfach ein Bild im .png Format und der Größe 16×16 Pixel. Du kannst auch größere Bilder einfügen. Du solltest aber darauf aufpassen, dass es für eine Navigation immer dieselbe Pixelgröße bei unterschiedlichen Icons ist. Dies ist natürlich nur ein optisches Argument, um dein Programm schicker zu gestalten.

1. Im Objektinspektor kannst du die Einstellungen für das Icon unter der Komponente BitBtn1: TBitBtn unter Eigenschaften -> Glyph auswählen. Die Eigenschaft Glyph ist vom Typ TBitmap und kann alle Standardformate in deinen Button einfügen.
2. Klickt hinter dem Text (TBitmap) den Button mit den drei Punkten (…) an.
3. Jetzt öffnet sich ein neues Fenster. Klicke auf den Button Laden und
4. Wähle im sich nun öffnenden Fenster dein Bild aus und klicke auf öffnen
5. Das Fenster schließt sich und du kannst auf OK Klicken um dein Bild einzufügen.

Einleitung:

In Lazarus kann man Frames vom Typ TFrame verwenden und diese als Komponente laden. In einem Frame kann man Programmteile auslagern. Wie man einen Frame in ein Form laden kann beschreibe ich in dem folgenden Artikel.

Den Beitrag als Video ansehen:

TFrame Beispiel Software

Teil 01: Die Software GUI

Ich das Form1 genommen und ein TMainMenu auf ihm platziert. Das Menu hat verschiedene Einträge. Wir benötigen hier zwei. In meinem Beispiel sind des die Buttons Ticket und Asset die ich verwendet habe.

Teil 02: Anlegen der Frames

Frame erstellen

In Lazarus unter Neu-> Frame können wir einen neuen Frame vom Typ TFrame anlegen. Speichern Sie den Frame dann ab. Ich habe die Frames ticket und asset genannt. In diesen Frames können wir nun zur Unterscheidung unterschiedliche Inhalte und Komponenten anlegen

Teil 03: Prozedur giveFrameFree erstellen

Als nächstes legen wir in unserer Software eine neue Prozedur diese trägt den Namen giveFrameFree und macht genau das die Frames die wir laden freigeben. Nachfolgend der Quelltext mit Erläuterungen.

procedure TForm1.giveFrameFree;
begin
TFrame1(FindComponent('FrmAsset')).Free;
TFrame2(FindComponent('FrmTicket')).Free;
end;

Der Kopf der Prozedur lautet: procedure TForm1.giveFrameFree; Das Wort procedure zeigt das es sich um eine Prozedur handelt. TForm1 ist das Formular indem sich die Prozedur befindet und giveFrameFree; ist der beschreibende und ausdruckstarke Name der Prozedure. Das Word begin leitet den Rumpf der Prozedur ein und das Wort end; schließt diesen wieder.

In Schritt 04 legen wir zwei OnClick Ereignisse an die wir laden möchten. In den Anweisungen die in der oben stehenden Prozedur stehen geben wir diese wieder frei. Der erste Frame vom Typ TFrame1 trägt den Namen ‚FrmAsset‘ . mit der Funktion FindComponent suchen wir die Komponenten und geben diese mit .Free wieder frei.

Teil 04: OnClick Ereignisse erstellen
Wir können einen Frame nutzen wie eine Komponente die zur Laufzeit eingebunden wird. Erstellen Sie unter dem Menüpunkt Asset und Ticket folgende OnClick Ereignisse. Gehen Sie dafür in das TMainmenu und Rufen Sie den richtigen Button mit einem Doppelklick auf. Die Prozeduren werden im Quelltext automatisch angelegt. Quellcode nachfolgend:

procedure TForm1.MenuItem1Click(Sender: TObject);
var
frmAsset : TFrame1;
begin
// Alle Frames freigeben
giveFrameFree;

frmAsset := TFrame1.Create(Self);
frmAsset.parent := Form1;
frmAsset.top := 0;
frmAsset.left := 0;
frmAsset.name := 'FrmAsset';
end;

procedure TForm1.MenuItem2Click(Sender: TObject);
var
frmTicket : TFrame2;
begin
// Alle Frames freigeben
giveFrameFree;
// Erstelle den Frame
frmTicket  := TFrame2.Create(Self);
frmTicket.parent := Form1;
frmTicket.top := 0;
frmTicket.left := 0;
frmTicket.name := 'FrmTicket';
end;

Beide Prozeduren sind gleich aufgebaut und können daher auch durch eine dynamische Prozedur ersetzt werden. Ich beschreibe nun nachfolgend den Quelltext der Prozedur MenuItem2Click. Wird auf den Button mit dem Namen Ticket geklickt erstellen wir eine Variable var vom Typ TFrame2 mit dem Namen frmTicket. In der Prozedur selber rufen wir als erstes unsere selbst erstellte Prozedur auf um alle Frames freizugeben. Danach erstellen wir unseren benötigten Frame mit frmTicket  := TFrame2.Create(Self);. Im zweiten Schritt sagen wir das das Eltern Element das Form1 sein soll. Wir könnten auf unserem Form1 auch ein neues Panel erstellen und hier die Daten laden. Das bleibt euch überlassen. In den nächsten beiden Zeilen legen wir den Abstand von Oben (Top) fest und den Abstand von links (Left) fest. In der letzten Anweisung legen wir den Namen des Frames fest. Wichtig den Namen kann es nur einmal geben. Wollt ihr dynamisch mehrere Frames desselben Typs laden könnt ihr z.B. über eine for Schleife den Namen mit einer fortlaufenden Nummer versehen. Dies könnte z.B. bei einem Ticketsystem das Dashboard sein. Hier könnte ich mir ein Frame WorkerTicket vorstellen. Dieser zeigt an welche Tickets welcher Mitarbeiter gerade bearbeitet. Das es mehrere Mitarbeiter in einem Team gibt die Frames alle gleich sein können, bleiben könntet ihr diese dynamisch über eine for Schleife laden und die Zustände in einer Datenbank speichern, damit diese bei jedem neuen Start geladen werden können.

Beispielsoftware herunterladen. Die Datei ist als Zip mit 7Zip gepackt. Die Software wurde unter Windows 10 64Bit Version 1909 erstellt und unter Linux Mint 20.1 Ulyssa getestet. Beide Versionen sind lauffähig.

Update: Ereignisse OnShow OnCreate bei einem Frame.

Um Bei einem Frame ein In Create oder OnShow Ereigniss nutzen zu können, kann man den Constructor Create überschreiben.

Bei den Funktionen ergänzt man unter public

constructor Create(AOwner: TComponent); override;
Der Code sorgt dafür das ihr mit der unten stehenden Funktion den Constructor überschreiben könnt.

Unter implementation fügt ihr folgende hinzu.

uses
startu1;
In meinem Programm (Update siehe unten) lesen wir Daten aus dem Form1 aus und setzen dann die Caption des PageSheet auf Geräte oder Assts.

Der Constructor selbst sieht dann z.B so aus.

constructor TFrame2.Create(AOwner: TComponent);
begin
inherited Create(AOwner);

if (Form1.CBMMLanguage.ItemIndex = 1) then
begin
TabSheet1.Caption := 'Geräte';
end;
if (Form1.CBMMLanguage.ItemIndex = 0) then
begin
TabSheet1.Caption := 'Assets';
end;
end;

Update: Beispiel Software Update:

Herunterladen der Beispiel Software

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/