Moderne Benutzeroberfläche mit Lazarus entwickeln

Lazarus und Freepascal moderne Benutzeroberfläche entwickeln und gestalten. Mit der Benutzeroberfläche ist die GUI das General User Interface gemeint. Bei modernen Anwendungen auf Windows und Linux Systemen gibt es meistens ein Darkmode (Dunkelmodus), Lightmode (Lichtmodus) und Colormode (Farbenmodus / Benuzerdefiniert). Unter Windows könnt ihr dies einstellen unter Rechtsklick auf euren Desktop -> Anpassen -> Farben -> Auswählen (Dunkel, Hell, Benutzerdefiniert).

In Microsoft Office kann man dies in den einzelnen Apps (Word, Excel, PowerPoint usw.) unter Datei -> Konto -> Office Design einstellen.

Firefox Anwendungs Menü offnen (Burger Menü) -> Einstellungen -> Allgemein -> Sprache und Erscheinungsbild -> (Hell, Dunkel, Automatisch).

Ich denke mal ihr versteht was ich meine. Alle diese Design haben eins gemeinsam. Das Standard Form1 der Lazarus IDE kann diese modernen Benutzeroberflächen nicht darstellen.
In diesem kleinen Kurs möchte ich euch zeigen, wie man mit Lazarus eine solche Benutzeroberfläche nachbauen kann.

Teil 1: Neue modere Benutzeroberfläche entwickeln – Anwendung öffnen und speichern

Als erstes nimmst du ein neues Form1 und beginnst mit einer neuen Anwendung und startest ein neues Projekt. Beim speichern benennst du die Dateien startprogram.lpi und startprogramu1.pas. Das Form1 stellst du bei den Einstellungen im Objektinspektor wie folgt ein.

Einstellungen:

BorderStyle: bsNone
height: 780
width: 980
Name: MainForm

Die Einstellung BorderStyle: bsNone besagen das es keine Boder und kein Header mehr gibt. Das Formular hat nun auch keinen Kopf mehr indem man ein Icon oder eine Caption sehen kann. Die Buttons schließen, vergrößern und minimieren sind ebenfalls nicht mehr zu sehen. Die große ist erst einmal für unser Basis Programm eingestellt height (höhe): 780 und width (weite): 980. Der Name des Hauptformulars nenne ich immer Mainform.

Nun platzierst du zwei Panel auf diesem Formular. Der Erste wird oben plaziert mit einer weite (width) von 100%. Hierfür ziehst du mit dem Curser den Panel1 auf 100% und stellt im Objektinspektor bei Anchors die rechte Verankerung durch anklicken an. Bei der Vergrößerung oder Verkleinerung des Formulars wird nun der Panel1 mit vergrößert bzw. verkleinert. Die Farbe (Color): stellst du in den Farben Rot, Gelb, Grün jeweils auf 51. Die Farbe fügst du hinzu und wählst sie für den Panel aus. Die Farbe wird bei Lazarus mit dem Wert $00333333 dargestellt. Hexadezimal entspricht das dem Wert #333333. Die Höhe des Panels wird auf 64 eingestellt. Zwischen Panel1 und Panel2 lässt du einen Pixel frei und stellt diesen über den Rest des Formulars ein. Die Verankerung stellt du rechts und unten zusätzlich zur vorhandenen Verankerung links und oben ein. Die Farbe ist wie bei Panel1 und bekommt nun direkt den Wert $00333333. Die Caption beider Panels wird entfernt.

Bei Panel1 erstellst du nun im Objektinspektor drei Funktionen erstens OnMouseDown, zweitens OnMouseMove und drittens OnMouseUp. Im Quellcode legen wir unter var boolMausdruecken als Boolean an, intVerschiebeny und intVerschiebenx als integer an.

Der Quellcode: Neuen modernen Formular Header entwickeln

Der Quellcode um eine moderne Benutzeroberfläche entwickeln zu können. Dieser bewirkt das wir über den Panel1 das ganze Fenster verschieben können.

var
MainForm: TMainForm;
boolMausdruecken: boolean;
intVerschiebey, intVerschiebex : integer;

implementation

{$R *.lfm}

{ TMainForm }

procedure TMainForm.Panel1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
{ Form1.Left:=Mouse.CursorPos.X-10;
Form1.Top:=Mouse.CursorPos.Y-10; }
boolMausdruecken:=true;
intVerschiebey := y;
intVerschiebex :=x;
end;

procedure TMainForm.Panel1MouseMove(Sender: TObject; Shift: TShiftState; X,
Y: Integer);
begin
if boolMausdruecken=True then
begin
MainForm.Left:=Mouse.CursorPos.X - intVerschiebex;
MainForm.Top:=Mouse.CursorPos.Y - intVerschiebey;
end;
end;

procedure TMainForm.Panel1MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
boolMausdruecken:=False;
end;

Was macht der Quellcode?

folgt.

Anhang

Das fertige Programm könnt ihr als 7Zip Datei herunterladen. Mit 7Zip kann man Software packen. Die Software ist OpenSource, kostenlos und kann problemlos verwendet werde. Hier geht zu der Webseite von 7Zip. Um die Software zu öffnen einfach einem doppelklick auf die 7Zip Datei. Die Dateiendung lautet .7z.

Hier bekommt ihr die fertige Software. (folgt)