Programmieren in alten Zeiten war reine Eingabe von Text in einem Editor. Moderne Entwicklungssysteme wie Kylix erlauben Ihnen eine visuelle Programmierung. Listenfelder und Buttons kombinieren Sie hier mittels Drag & Drop.

Die Entwicklungsumgebung Kylix stellt dem Anwender zahlreiche Hilfsmittel für die Programmierung zur Verfügung. Mit Hilfe von Dialogen und Paletten lässt sich leicht eine grafische Oberfläche konstruieren und mit dem eigentlichen Software-Gerüst verbinden.

Wer die Techniken jedoch umfassend einsetzen möchte, der sollte einen Einblick in die Prinzipien der objektorientierten Programmierung haben. Daher behandelt dieser Artikel nicht nur den richtigen Umgang mit der Kylix-IDE, sondern hilft auch bei den Grundlagen der Programmierung.

Grafisch programmieren

Der wohl größte Vorteil der visuellen Programmierung liegt in der Möglichkeit, mit der Maus aus einem Pool aus vorgefertigten Code-Schablonen wesentliche Teile eines Programms zusammenzuklicken. Das gilt vor allem für die grafische Oberfläche (GUI) einer Software. Auf diese Möglichkeit beschränkt sich im Wesentlichen die Open Edition von Kylix, aber auch viele andere kostenlose IDEs.

Neben der GUI stellen Sie mit einer solchen IDE Hintergrundprozesse wie Datenbankzugriffe oder Zeitgeber über nicht-visuelle Komponenten in den Grundvorgängen mit der Maus zusammen. Nicht-visuelle Komponenten äußern sich nach dem Hinzufügen auf einem Formular zur Design-Zeit als Symbol, das zur Laufzeit nicht sichtbar ist. Kylix bietet diese Funktion allerdings nur in der kommerziellen Version.

Abbildung 1: Eine visuelle Komponente (der Button) und eine nicht-visuelle Komponente (der Timer) zur Designzeit

Die Eigenschaften von nicht-visuellen Komponenten legen Sie im im Objektinspektor fest. Diesen rufen Sie bei markierten Objekten über das Kontextmenü auf oder über die Taste [F11]. Darüber hinaus bieten einige nicht-visuelle Komponenten spezifische Editoren an, über die Sie die Elemente mit Inhalt füllen und konfigurieren können. Diese Editoren erreichen Sie ebenfalls über das Kontextmenü der Komponente.

Für die sogenannten Container-Komponenten gilt das Gleiche: Sie editieren und Konfigurieren die Elemente die über Inspektoren oder eigene Editoren.

Grundlage dieser ganzen Aktionen bildet in Kylix die Cross Plattform Library CLX. Die Idee der CLX basiert auf Techniken der Visual Component Library VCL aus Delphi – also einer Windows-Technik. Die VCL von Delphi schottet Programmierer von dem komplizierten direkten Kontakt mit den Windows-API-Funktionen ab. Statt diese direkt nutzen zu müssen, kann man in Delphi die einfacher zu nutzenden VCL-Funktionen aufrufen.

Die CLX überträgt diese Technik in die Linux-Welt. Darüber hinaus gibt es in der Windows-Welt mittlerweile ein weitgehend gleich zu verwendendes CLX-Gegenstück, das in neuen Versionen von Delphi die ursprüngliche VCL ablöst. Die Portierung von Linux-Quellcode nach Windows und umgekehrt ist also relativ einfach möglich, wenn Sie sowohl in Delphi als auch Kylix auf der CLX aufsetzen.

Die CLX selbst basiert auf den – in C/C++ geschriebenen – Qt-Bibliothek der Firma Trolltech, die an vielen Stellen in der Linux-Programmierung die Grundlagen darstellt. Die Programmierung mit CLX beruht auf den grundlegenden Konzepten der objektorientierten Programmierung (OOP). Obwohl hier nicht der Raum ist, die Konzepte der OOP umfassend zu erläutern, müssen Sie – auch wenn Sie noch nie objektorientiert programmiert haben – auf den Einsatz der CLX und den Hauptnutzen von Kylix nicht verzichten.

Es gibt die theoretische Seite der Arbeit mit der CLX und eine praktische Seite. Sie können über die Kylix-IDE visuell via Komponentenpalette sowie Objektinspektor und mit wenigen Code-Strukturen im Editor die OOP-Techniken so nutzen, dass Kylix Ihnen die meisten Vorgänge abnimmt.

Es ist glücklicherweise so, dass Kylix schlicht und einfach die Programmierung erheblich vereinfacht und leicht zu nutzen ist. Mit anderen Worten – Sie programmieren mit Kylix objektorientiert, ohne überhaupt zu wissen, was das ist oder es richtig zur Kenntnis zu nehmen. Und das, obwohl Ihrer Software eine nicht ganz einfache, aber mächtige Technik zu Grunde liegt.

Trotz der niedrigen Anfangshürden durch die Technik von Kylix kommen Sie für anspruchsvollere Applikationen nicht umhin, sich mit der objektorientierten Programmierung genauer zu beschäftigen. Denn obwohl die visuelle Zusammenstellung einer Programmoberfläche oder gar eines ganzen Programms mit einer IDE in weiten Bereichen nahezu trivial erscheint, können Sie die Hintergründe dieser Aktionen nur dann richtig einschätzen und nutzen, wenn Sie mit der OOP halbwegs vertraut sind.

Nur unter diesen Voraussetzungen nutzen Sie die Vorgaben der IDE effektiv und bauen Ihren Quellcode zu einem richtigen Programm aus. Um den einstieg zu erleichtern, erklärt Kasten 1 in einem knappen Exkurs die wesentlichen Begriffe und Ideen der objektorientierten Programmierung.

Der knappe Exkurs zu den Grundlagen der OOP genügt nicht, um mit Object Pascal richtig objektorientiert zu programmieren. Das ist aber am Anfang auch nicht notwendig. Hier hilft Ihnen die IDE: Die meisten notwendigen Aktionen vollziehen Sie auf Grund von visuellen Schritten innerhalb der Entwicklungsumgebung.

Am einfachsten verstehen Sie die Handhabung der Standardkomponenten der CLX und der zugehörigen Beispiele in der Praxis.

Die Standard-Komponenten der CLX

Wir behandeln die Komponenten derjenigen Register, die Sie in der Open Edition von Kylix finden und wenden ausgewählte Komponenten in Beispielen an. Insbesondere das erste CLX-Register mit dem Namen Standard sehen wir uns genauer an. Weiteren Register betrachten wir im Überblick.

Abbildung 2: Die Komponenten der ersten Registerkarte beinhalten wichtige Steuerelemente von grafischen Oberflächen

Mit dem Auswahlpfeil deselektieren Sie ausgewählte Komponenten und stellen einen normalen Maus-Cursor zur Verfügung, mit dem Sie keine neue Objekte erzeugen können. Er zeigt Ihnen in der Grundeinstellung eine Kurzinfo mit dem Namen der Komponente unter dem Zeiger an. Fahren Sie dazu mit dem Zeiger über die Komponentenpalette. Dieser Auswahlpfeil steht in allen Registern zur Verfügung.

Mit der Komponente Frames teilen Sie einen Anzeigebereichs in verschiedene einzelne Segmente, die unabhängig gestaltet werden können. Neue Frames legen Sie über das Datei-Menü an.

Die Komponente MainMenu erlaubt Ihnen das Anlegen von einem Menü für ein Formular. Es handelt sich um eine Komponente, die im Formular nur als Symbol dargestellt wird. Um das Menü zu erstellen, müssen Sie einen Doppelklick auf dem Symbol im Formular ausführen. Damit öffnen Sie den Menü-Designer.

Anschließend tragen Sie einfach an der gewünschten Stelle den Eintrag ein, der im Menü auftauchen soll. Mit dem Zeichen & definieren Sie einen Hotkey (siehe Abbildung 3). Tragen Sie zum Test einfach &Datei ein. Der Editor zeigt jeweils einen leeren Eintrag nach unten und nach rechts an, der im Menü nicht auftaucht, wenn er nicht gefüllt wird.

Erzeugen Sie unter dem Eintrag Datei einen Menüeintrag und benennen Sie dessen Caption-Eigenschaft mit &Ende. Klicken Sie nun auf einen Eintrag im Menü-Designer doppelt, erhalten Sie die Möglichkeit, die zugehörige Ereignis-Methode zu füllen.

Abbildung 3: Der Menü-Designer von Kylix

Für den Ende-Eintrag notieren Sie Application.Terminate. Beachten Sie, dass Ihnen die Kylix-IDE hilft, wenn Sie Application und dann einen Punkt eingeben. Ein Popup-Fenster zeigt Ihnen alle Möglichkeiten an, die Ihnen das Objekt bietet. Damit haben Sie ein Menü zur Verfügung, über das Sie das laufende Programm beenden können.

Abbildung 4: Klick auf Ende im Menü-Designer

Im Kontextmenü für jeden Menüeintrag finden Sie die Möglichkeit, ein Untermemü zu erstellen. Das funktioniert vollkommen analog zu einem Menüeintrag in der ersten Ebene.

Abbildung 5: Erstellen eines Untermenüs mit dem Kontextmenü des Menü-Designers

Über die PopupMenu-Komponente können Sie ein Popup oder ein Kontext-Menü im Formular zu erzeugen. Dieses wird angezeigt, wenn der Benutzer mit der rechten Maustaste auf die Fläche einer Komponente oder des Formulars selbst klickt, das Sie dem Menü zuordnen. Es handelt sich wie beim Menü um eine Komponente, die im Formular nur als Symbol dargestellt wird.

Um ein Popup-Menü zu erstellen, klicken Sie auf das Symbol im Formular doppelt und öffnen so wie beim Hauptmenü den Menü-Designer. Menüeinträge erstellen Sie analog. Zusätzlich ordnen Sie über die jeweilige PopupMenu-Eigenschaft einer Komponenten zu.

Ein Label verwenden Sie als einfache Textkomponente zur Beschriftung von Steuerelementen oder zur Darstellung von Text auf dem Formular. Ihm ordnen Sie fast nie direkt eine Aktion zu. Dafür sind die Eigenschaften umfangreich aber weitgehend selbsterklärend.

Es handelt sich im Kern um Ausrichtungs- und Layout-Angaben sowie Spezifizierungen des dargestellten Textes. Von besonderer Bedeutung ist der Schriftarten-Editor, der ebenfalls im Zusammenhang mit der Edit-, Memo- und der Button-Komponente auftaucht.

Mit einer Edit-Komponente kreieren Sie eine Texteingabekomponente, über die ein Anwender einzeiligen Text eingibt oder bearbeitet. Dieser steht Ihnen dann über die Eigenschaft Text zur Verfügung. Wir sehen sie gleich in Verbindung mit dem Button und Label in einem Beispiel.

Eine der Edit-Komponente verwandte Texteingabekomponente ist Memo. Darüber lassen Sie den Anwender mehrzeiligen Text eingeben und bearbeiten. Dieser steht Ihnen ebenfalls über die Eigenschaft Text zur Laufzeit in Ihrem Quelltext zur Verfügung.

Im Objektinspektor finden Sie diese Eigenschaft dagegen nicht. Da es sich um ein mehrzeiliges Textfeld handelt. Sie greifen dort über die Eigenschaft Lines auf die Inhalte zu. Einer Schaltfläche mit drei Punkten visualisiert die Schaltfläche, über die Sie bei einem Klick ein Dialogfenster öffnen, den sogenannten String-List-Editor. Hier geben Sie mehrzeiligen Text zur Designzeit ein.

Abbildung 6: Die Edit-Komponente mit der Lines-Eigenschaft und dem String-List-Editor

Die Button-Komponente erlaubt Ihnen die Erstellung einer einfachen Schaltfläche. Dessen übliche Aufgabe ist jedem Anwender bekannt – ein Klick löst eine Aktion aus. Über die Eigenschaft Caption setzen Sie die Beschriftung.

Über eine CheckBox-Komponente wählt der Anwender eine Funktion an oder ab. Die Komponente liefert intern einen Wert zurück, der auf true (wahr) oder false (falsch) steht. Mehrere dieser Kontrollfelder bilden eine Gruppe und schließen sich nicht gegenseitig aus. Der Benutzer darf mehrere Kontrollfelder einer Gruppe zusammen aktivieren oder alle deselektieren.

Mit einer exklusiven RadioButton-Komponente erzwingen Sie vom Anwender eine Entscheidung: Ist die eine gewählt, setzt die Software alle anderen in der Gruppe auf nicht gewählt. Selektion steht für true und Deselektion für false. Wichtig ist die Eigenschaft Checked, über die Sie steuern, welche der Möglichkeiten beim Programmstart ausgewählt ist.

Ein ListBox-Komponente stellt ebenfalls eine Liste mit Auswahlmöglichkeiten bereit und ordnet diese selektierbar untereinander an. Die Eigenschaften dieser Komponente erlauben Ihnen dabei eine vielfältige Gestaltung, die vielfach – bereits rein aus Anwendersicht – offensichtlich ist.

Zentrale Stelle der Eigenschaften zur Designzeit ist Items, denn darüber füllen Sie die Liste mit Hilfe des String-List-Editor wie in Abbildung 6 dargestellt. Zur Laufzeit ist für Sie die wichtigste Information ItemIndex, denn darüber können Sie den vom User ausgewählten Eintrag komfortabel auswerten.

Eine ComboBox-Komponente bietet Ihnen das bekannte einzeilige Listenfeld mit Auswahlmöglichkeiten. Es handelt sich um eine Liste mit einem Eingabefeld, an dessen rechter Seite eine Schaltfläche mit einem Listenpfeil notiert ist.

Solange der Listenpfeil nicht angeklickt wird, ist nur das Eingabefeld sichtbar. Klickt der Anwender auf den Listenpfeil, klappt eine Liste nach unten und zeigt alle Einträge der Auswahlliste (eventuell scrollbar) an. Der Anwender kann im Eingabefeld Daten eingeben oder einen Eintrag aus der Liste wählen. Wichtigste Eigenschaft zur Designzeit ist für Sie auch hier Items zum Füllen der Liste.

Wollen Sie eine Bildlaufleiste in Ihr Programm integrieren, dann sind Sie mit einer ScrollBar-Komponente gut beraten. Mit ihr verschiebt der Anwender den angezeigten Bereich einer Liste, eines Formulars oder eines Bereichs. Die Komponente kommt sowohl für horizontale und vertikale Bewegungen zum Einsatz. Sie konfigurieren Sie entsprechend über die Eigenschaft Kind.

Da Sie die Scrollbar-Schieber manuell auswerten müssen, ist Sie mit Vorsicht zu genießen. Zudem bringen fast alle Komponenten, für die eine Scrollbar in Frage kommt, eine eigene ScrollBar-Eigenschaft mit.

Die drei verwandten Komponenten GroupBox, RadioGroup und Panel sind Containerkomponenten, welche andere Komponenten aufnehmen. Deren genaue Behandlung sprengt jedoch etwas unseren Rahmen.

Ebenso die abschließende ActionList-Komponente – eine nicht-visuelle Komponente, die zur zentralen Steuerung der Reaktion einer Anwendung auf Benutzeraktionen gedacht ist. Um mit der Komponente Aktionen zu verbinden, klicken Sie auf das Symbol im Formular doppelt. Es öffnet sich ein Aktionslisten-Editor, in dem Sie Aktionen hinzufügen.

Das Register Zusätzlich

Abbildung 7: Das Register Addition

Das Registerblatt Zusätzlich enthält – von links nach rechts – mit BitBtn und SpeedButton ergänzenden Schaltflächen mit erweiterter Funktionalität, MaskEdit zur Eingabe vorformatierter Benutzereingaben und StringGrid und DrawGrid zur Darstellung von Tabellen.

Die folgende Image-Komponente dient zur Anzeige von Bildern. Deren wichtigste Eigenschaft ist Picture, worüber Sie an einen Bild-Editor gelangen, mit dem Sie die darzustellende Grafik auswählen.

Die Komponenten Shape und Bevel ermöglichen die Darstellung geometrischer Formen. ScrollBox ist dagegen eine Container-Komponente, in die andere Komponenten aufnimmt und die sich in der Größe anpasst. Mit der CheckListBox-Komponente generieren Sie einer Auswahlliste, die Splitter-Komponente teilt einen Anzeigebereich und eine ControlBar-Komponente nimmt als Container für Symbolleisten-Komponenten auf.

Ein visuelles Highlight setzen Sie mit LCDNumber: diese Textfeld-Komponente stellt Zahlen oder Buchstaben wie in einer digitalen oder LCD-Anzeige dar.

Die nicht-visuelle Timer-Komponente dient als Zeitgeber und löst in bestimmten Abständen – über die Eigenschaft Interval festgelegt – ein Ereignis aus, das als Signal für zeitabhängige Operationen steuert. Die passende Ereignisbehandlungsroutine ist OnTimer.

Die rechteckige PaintBox-Komponente stellt einen Zeichenbereich in einem Formular bereit, in dem beliebige Grafikausgaben vorgenommen werden können. Zum Zeichnen nutzen Sie normalerweise die Canvas-Eigenschaft und die OnPaint-Event-Methode.

Fügen Sie einfach eine PaintBox einem Formular hinzu und setzten Sie deren Color-Eigenschaft auf clAqua. Dann suchen Sie im Objektinspektor deren OnPaint-Event und notieren in die generierte Methode Folgendes:

PaintBox1.Canvas.Ellipse(10,10,50,50);
PaintBox1.Canvas.Rectangle(70,40,140,70);
PaintBox1.Canvas.RoundRect(10,150,220,60,15,5);

Common Controls und Dialoge

Abbildung 8: Das Register Common Controls

Über das Register Common Controls stehen Ihnen Komponenten zur Verfügung, die andere grafische Komponenten oder Informationen aufnehmen und kapseln. Diese verwaltet Kylix über den Container.

Das folgende Beispiel simuliert die Ziehung der Lottozahlen. Erstellen Sie ein Projekt und fügen Sie nebeneinander 7 LCDNumber-Komponenten, einen Button und zwei Timer hinzu. Das steht im Interface-Teil der Unit:

Form1: TForm1;
zahl:Integer;
gzz:Integer;
anzeige:Array [1..7] of Boolean;

Führen Sie einen Doppelklick auf Timer1 aus und notieren Sie Folgendes in generierten Methode:

if gzz=1 then
  begin
        LCDNumber1.Value:=InttoStr(zahl);
        anzeige[1]:=False;
  end
else if gzz=2 then
  begin
        LCDNumber2.Value:=InttoStr(zahl);
        anzeige[2]:=False;
  end
…  // analog 3 bis 7
gzz:=gzz+1;

Damit belegen Sie die LCD-Anzeigen mit Werten. Da Sie den Timer verwenden, zeigt das Programm nicht alle Zahlen gleichzeitig an. Führen Sie einen Doppelklick auf Timer2 aus und notieren Sie Folgendes in der generierten Methode:

if anzeige[1] then LCDNumber1.Value:=InttoStr(zahl);
… // analog 2 bis 7
if (zahl <49) then zahl:=zahl + 1
else zahl:=1;

Hier greifen Sie auf das Array zu und weisen je nach Eintrag einer LCD-Anzeige ein Wert zu. Wenn die Variable zahl 49 überschreitet, setzt die Routine sie auf 1 zurück. Der Timer unterbricht diesen Prozess und wertet die gerade aktuelle Zahl aus. Klicken Sie die Form per Doppelklick an. In die Create-Methode notieren Sie Folgendes:

zahl:=1;
gzz:=1;
for i:=1 to 7 do anzeige[i]:=true;
Randomize;
Timer1.Interval:=Random(3000);

Der Button startet das Spiel. Das machen folgende Zeilen:

Timer1.Enabled:=True;
Timer2.Enabled:=True;

Abbildung 9: Das Register Dialogs

Heutzutage vereinfachen zudem standardisierte Dialoge Vorgänge wie das Speichern von Dateien oder die Auswahl von Farben in Programmierumgebungen. Hierfür bietet die IDE ebenfalls entsprechende Komponenten. Diese sind in Form von Dialogfenstern realisiert, so dass solche Operationen konsistent ablaufen.