Abb 1.01 Bild vom Image-List Editor
In der Abbildung 1.00 siehst du das kleine Programm was ich mit dir heute erstellen möchte. Als erstes öffnest du in Lazarus eine neue Anwendung und fügst zu deinem Programm die Komponente TTreeView 
hinzu. Diese findest du bei den Komponenten unter dem Reiter >>Common Controls<< und es ist die dritte Komponente von links. Ich habe den Namen der TreeView auf TVDatenbanken geändert.
Für die Beschriftung der Komponenten setzt du die Komponente vom Typ TLabel ein. Das Editfeld trägt den Namen: EdtEintragTxt und hat in der Eigenschaft Text keinen Inhalt. Die beiden Buttons tragen den Namen BtnAddChildNote und die Eigenschaft Caption >>Kind Knoten hinzufügen<< und beim zweiten Button lautet der Name BtnDeleteNode und die Eigenschaft Caption >>Knoten löschen<<. Für die Plus und Minus Icons benötigen wir für die TTreeView noch eine TImageList diese trägt den Namen ImageList1 und wird in den Eigenschaften der TreeView unter Images angegeben.
Die Komponente TImageList ist für das speichern und ablegen von Bildern dar. Die Komponente erstellt einem Index für die Bilder. Der Index kann durch einen Doppelklick auf die Komponente per Drag and Drop verwaltet werden siehe Abbildung 1.00 von TImageList.
Abb. 1.00 Bildeditor leer
Um Bilder und Grafiken zur TImageList hinzuzufügen können wir nun auf den Button hinzufügen klicken und Bilder, Icons oder andere Grafiken auswählen. In meinem Beispiel werde ich Icons auswählen und diese in einem TMainMenü verwenden. Ihr bekommt kostenlose Icons unter Flaticon.com. Ich habe dazu bereits einen Artikel geschrieben. Kostenpflichtige Icons gibt auf Stockfotoseiten wie fotolia.com und stockfoto.com für die kommerzielle Nutzung und bereits in verschiedenen schönen Farben.
Abb. 1.00 TSplitter
Die Komponente TSplitter findest du im Hauptmenü von Lazarus unter Addtional und sie ist die zehnte Komponente von Links und befindet sich direkt rechts neben der TLabeledEdit Komponente.
Bitte füge als erstes eine Komponente vom Typ TPanel ein. Diese findest du im Lazarus Hauptfenster unter Standard und ist die dritte Komponente von rechts. Du kannst die Komponente TPanel anklicken und dann in das Form1 klicken um sie zum Form1 hinzufügen. Jetzt gehst hin und vergrößerst die Komponente auf eine Breite von 246. In der Höhe nimmst du einen Abstand von 0 und zum Ende des Formulars ebenfalls von 0. Jetzt klickst du in den Objektinspektor und stellst die Eigenschaft Align auf alLeft. Der Panel nimmt nun auch bei einer Vergrößerung oder Verkleinerung des Form1 auf der linken Seite, oben und unten 100% sein.
Jetzt wähle im Hauptfenster von Lazarus die Komponente TSplitter aus und klicke es an und füge es an der rechten Seite des Panel1 an. Die beiden Komponenten sollten im Objektinspektor untereinander dargestellt werden und nicht hieratisch. Du kannst den Splitter nun positionieren und in an die linke Seite anheften lassen. Wenn du dein Programm jetzt startest kannst du deinen Panel1 nach links und nach rechts verschieben und den Panel1 sogar so verkleinern das es verschwindet.
Abb. 1.00 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
Abb. 1.00 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.
Nächste Seite »