Wenn die Englisch-, C++- und Qt-Kenntnisse ausreichen, macht der Qt Designer grafische Benutzeroberflächen (GUIs) per Mausklick möglich.

Anspruchsvolle Software mit grafischer Benutzeroberfläche erstellt heutzutage fast niemand mehr in Form von Programmen, die in pixelgenauer Kleinarbeit Linie für Linie und Punkt für Punkt “auf den Bildschirm malen”. Stattdessen kommen GUI-Bibliotheken zum Einsatz, die in der Art eines Werkzeugkastens vorgefertigte Elemente wie Fenster, Werkzeugleisten, Rollbalken, Knöpfe oder Menüs bereitstellen.

Eine der verbreitetsten (u.a. für KDE eingesetzten) GUI-Bibliotheken heißt Qt und stammt von der norwegischen Firma Trolltech. Ihr großer Vorteil besteht darin, nicht nur für Linux u.a. Unix-Betriebssysteme, sondern auch für Windows und (seit Version 3.0) für MacOS X erhältlich zu sein. Solange der Quellcode keine betriebssystemspezifischen Systemaufrufe enthält, lassen sich Qt-Programme auf allen unterstützten Plattformen ohne Änderung übersetzen.

Außer der Bibliothek selbst bringt das Qt-GUI-Toolkit eine Reihe Hilfsprogramme mit, die das Leben der Programmiererin durchaus erleichtern. Dazu zählt der GUI-Builder Qt Designer. Wie auch andere Programme seiner Art kann er fehlende Kenntnisse in den Programmiersprachen C und C++ zwar nicht kompensieren, aber er sorgt für rasche Erfolgserlebnisse beim Entwerfen grafischer Programmoberflächen. Die mit Qt 3.0.x gelieferten Versionen machen den Einstieg insofern einfacher, als dass sie zusätzlich zum interaktiven Erstellen der Programmfenster automatisch die main()-Routine der Qt-Applikation erzeugen können. So kommt man fast ohne C++-Kenntnisse (aber nicht ohne Qt-Kenntnisse und das Wissen um Klassen und Objekte) zu einem lauffähigen Programm, das allerdings hinter seiner schönen Fassade bestenfalls ein wenig Funktionalität birgt. Der Designer erzeugt XML-Beschreibungen von GUI-Elementen, die mithilfe des “User Interface Compilers” uic in C++-Klassen umgewandelt werden.

So schön die Qt-Welt sein mag – ohne Englischkenntnisse kommt man in ihr nicht weiter. Zwar sind auf Qt basierende Programme vergleichsweise leicht zu lokalisieren, doch geht Trolltech selbst nicht gerade mit gutem Beispiel voran: Weder der Designer oder sonstige mitgelieferte Tools, noch die Dokumentation sind in anderen Sprachen als Englisch erhältlich.

tar -xzvf qt-x11-free-3.0.1.tar.gz

ln -s /usr/local/qt-x11-free-3.0.1 /usr/local/qt

export QTDIR=/usr/local/qt

export QTDIR=/usr/local/qt
export PATH=$QTDIR/bin:$PATH
export MANPATH=$QTDIR/doc/man:$MANPATH
export LD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH

export QMAKEPATH=$QTDIR/mkspecs/linux-g++

Gestatten: Designer

Wenn die Suchpfade für Programme und Qt selbst stimmen (vgl. Kasten 1), lässt sich der Designer mit dem Befehl designer & aus einem X-Terminal heraus starten. Welche Fenster die Arbeitsfläche anzeigt, legen Sie im Menüpunkt Window / Views fest: Das “File Overview“-Window ermöglicht die Navigation innerhalb aller zu einem Projekt gehörigen Dateien. Object Overview gibt im -Tab einen Überblick darüber, aus welchen Objekten eine im Designer erzeugte GUI-Klasse besteht. Der Reiter Source wiederum enthält grob gesagt ein Abbild der Klassendeklaration. Die wichtige Aufgabe, die Eigenschaften von Widgets festzulegen, übernimmt der Property Editor. Sobald diese Fenster gefüllt sind, lohnt es sich, mit der rechten Maustaste auf einzelne Einträge zu drücken – oft kommt man so zu einem nützlichen Kontextmenü. Das Output Window gibt Aufschluss darüber, was der Designer tut, und kann manchmal bei der Fehlersuche recht nützlich sein.

Zieht man ein Fenster an der Doppellinie auf die leere Fläche, löst es sich aus dem Hauptfenster und lässt sich auf dem aktuellen virtuellen Desktop beliebig verschieben (Abbildung 1). Führt man ein solches herausgelöstes Fenster so an eine Fensterkante des Designers heran, dass der Cursor genau auf dem Rand zu liegen kommt, klinkt es sich wieder ein.

Abbildung 1: Platz schaffen durch Herauslösen von Unterfenstern aus dem Hauptfenster

Sollte der Platz weiterhin knapp werden, können (auf demselben Weg verschiebbare) Werkzeugleisten unter Window / Toolbars abgeschaltet werden. Alle diese Änderungen merkt sich das Programm in der Datei ~/.designerrctb2, die sich auch von Hand modifizieren oder löschen lässt, sofern man es beim Fensterjonglieren zu bunt getrieben hat.

Neue Projekte

Jedes Programmierprojekt beginnt im Designer damit, dass eine neue Projektdatei angelegt wird. Aus dieser einfachen ASCII-Datei (vgl. z.B. [4]) erzeugt qmake ein passendes Makefile, das per Hand zu erstellen recht anspruchsvoll ist. So wählt man zu Projektbeginn File / New… und im darauf erscheinenden Dialog (Abbildung 2) C++ Project.

Abbildung 2: Die Projektdatei wird per Mausklick erzeugt

Ein neuer Dialog namens Project Settings erwartet hinter Project File: den Namen der neuen Projektdatei; der rechts daneben stehende Button mit den drei Punkten führt zu einem File-Auswahl-Dialog. Um die Projektdokumentation nicht gleich zu Anfang zu vernachlässigen, bietet sich ein beschreibender Text im Description-Feld an.

File / New… /Main Window sorgt nun dafür, dass das neue Projekt mit Leben, in diesem Fall dem Hauptfenster der geplanten GUI-Applikation, gefüllt wird. Sofern man das Feld Insert into: im “New File“-Dialog (Abbildung 2 oben) nicht verändert, schlägt der Designer neu zu erzeugende Dialoge, Wizards, C++-Dateien und Hauptfenster dem aktuellen Projekt zu. Jedes über diesen Dialog erzeugte GUI-Fenster wird später zu einer C++-Klasse.

Ein Wizard sorgt nun dafür, dass das Main-Window-Widget sofort mit Actions, Benutzeraktionen wie “Datei speichern”, “Anwendung schließen”, “Kopiere markierten Text in den Zwischenspeicher” etc., ausgestattet wird. Solche Aktionen kann die Programmiererin als Menüeinträge, Tastaturbelegungen und Werkzeugleisteneinträge verwenden – der Wizard (Abbildung 3) fragt so zunächst nach, ob allgemeingebräuchliche Aktionen im Hauptmenü und/oder in der Toolbar angelegt werden sollen. Kreuzt man an, dass der Designer Slots und Verbindungen (“Connections”) für die Aktionen anlegen soll, erstellt er ein Code-Gerüst für die Implementation der entsprechenden Actions und sorgt dafür, dass die Auswahl eines entsprechenden Menüpunkts oder Toolbar-Icons bereits zur Ausführung dieses (meist noch zu schreibenden) Codes führt.

Abbildung 3: Gängige Benutzeraktionen legt der Main-Window-Wizard an

Ein Druck auf den Next>-Button führt zum nächsten Wizard-Dialog. Hier darf man aus den Kategorien, bei denen das Toolbar-Feld in Abbildung 3 angewählt war, die Werkzeugleiste gestalten. Um hier nichts zu übersehen, sollte man das Category-Popdown-Menü komplett durchsehen. Transportiert man den Eintrag <Separator> mit dem Pfeil-nach-rechts-Knopf in die Toolbar-Auswahl, wird an der entsprechenden (durch die Pfeile nach oben und unten veränderbaren) Position ein Trennstrich in Menü oder Toolbar eingefügt. Ein Finish im letzten Wizard-Fenster erlaubt es nun, mit der richtigen Arbeit am Hauptfenster-Widget zu beginnen (Abbildung 4).

Abbildung 4: Ein Hauptfenster ohne Werkzeugleiste

Eigenschaften und mehr

Zwei neue Fenster sind hinzugekommen: ein Formular, auf dem GUI-Elemente aus den Werkzeugleisten platziert werden, und der Action Editor. Je nachdem, welches Widget auf dem Formular markiert ist, ändert sich der Inhalt des Properties-Reiters.

Properties sind Eigenschaften einer Klasse, die sich mit set-Funktionen ändern lassen. Die Funktionstaste [F1] liefert eine Kurzbeschreibung. Ein Klick auf die Hyperlinks ruft das externe Hilfsprogramm assistant mit dem entsprechenden Ausschnitt der API-Dokumentation auf. Beim “Container-Fenster”, per Default als Form x bezeichnet, wird die Property name zum Klassennamen der gesamten Klasse; sonst legt man damit den Variablennamen des jeweiligen Objekts fest.

Betätigt man über einem markierten Formularbestandteil die [F1]-Taste, erscheint ebenfalls der Qt Assistant mit der passenden API-Dokumentation. Dessen Start kann auf etwas leistungsschwächeren Rechner einige Zeit dauern. Leider geschieht einfach nur nichts, wenn der Designer das assistant-Programm mangels passend gesetzter Pfadangabe o.a. nicht aufrufen kann.

Möchte ein Qt-GUI-Objekt signalisieren, dass jetzt etwas passieren soll, sendet es ein Signal aus. So setzt ein Pushbutton-Objekt das Signal clicked() in die Welt, sobald der Nutzer auf dieses GUI-Element klickt. Nun muss sich nur noch ein entsprechendes Objekt finden, das dieses Signal bearbeiten will, sonst verhallt es unerhört. Eine Klasse, deren Objekte auf bestimmte Signale reagieren sollen, enthält daher Funktionen (Slots), die mit den entsprechenden Signalen verbunden (“connected”) werden. Wie das genau aussieht, ist in [4] oder auch im Qt-Tutorial [5] genauer erklärt.

Mit dem Connection-Werkzeug, in der Werkzeugleiste über das Icon mit dem rot-blauen Balken aufzurufen, lassen sich zwei Widgets auf dem Formular “verbinden”. Der aufploppende Dialog (Abbildung 5) gibt die Möglichkeit, ein Signal des zuerst markierten Objekts mit einem Slot zu verknüpfen. Das etwas irreführend mit Slots bezeichnete Dropdown-Menü ermöglicht die Auswahl des Zielobjekts. Dessen Slots können nun markiert werden.

Abbildung 5: Signale und Slots per Auswahldialog verbinden

Unter Edit / Slots erhält man die Möglichkeit, Slots für die auf dem Formular entstehende GUI-Klasse zu definieren. Wer in C++ sicher ist, kann diese neuen Funktionen gleich mit dem beispielsweise über das Kontextmenü des Formulars unter Source… zu erreichenden Code-Editor implementieren. Leider lässt sich der nicht aus dem Hauptfenster lösen, sodass die Arbeit mit ihm etwas beschwerlich ist. Fügt man hier eine neue Funktion von Hand ein, wird diese als neuer Slot auch in den Source-Reiter eingetragen (Abbildung 6). Dort trägt man über das Kontextmenü übrigens auch Header-Dateien nach, die für die Implementation gebraucht werden. Während die GUI-Beschreibung der neuen Klasse beim Speichern (etwa mit File / Save All) in einer XML-Datei mit der Endung .ui landet, wird die Implementation in einem entsprechenden .ui.h-File abgelegt.

Abbildung 6: Der neu eingefügte makeIndex()-Funktionskopf erscheint sofort im Source-Tab

Layout-Management

Wenn schon die grafischen Elemente des neuen GUIs per Mausklick platzierbar sind, sollte sich der Designer auch ohne händische Friemelei um das harmonische Gesamtbild kümmern. Dafür ist die Layout-Management-Toolbar (Abbildung 7) zuständig. Wie bei allen anderen Icons auch erschließt sich deren Bedeutung über die Tool-Tipps, gelbe “Zettelchen”, die erscheinen, wenn die Maus ein wenig über dem Icon verweilt. Ins Formular eingefügte Federn sorgen für ausgewogenen Platz zwischen markierten Elementen, wenn man sie mit den entsprechenden Werkzeugen in ein Gitter bzw. ein horizonales oder vertikales “Layoutraster” einpasst. Bei Splitter-Layouts kann der Anwender des fertigen GUIs den Platz, den die betroffenen Widgets einnehmen, nach Gutdünken zwischen ihnen aufteilen.

Das Ergebnis der Bemühungen lässt sich über das Preview-Menü in verschiedenen Outfits von Windows bis Motif betrachten. Einzelelemente innerhalb eines layouteten “Containers” können sich übrigens nur dann in ihrer Größe verändern, wenn das Layout vorher aufgehoben (Break Layout) wurde.

Abbildung 7: Eistellung der Optimalgröße von Widgets u.a. Layout-Möglichkeiten

Auf dem Weg zum vollständigen Programm

Über den Dialog File / New lassen sich nicht nur weitere Dialoge und Wizards anlegen, sondern auch C++-Header- und Implementationsdateien ins Projekt einfügen. Während die Programmiererin bei “normalen” C++-Dateien auf die eigenen Programmierkenntnisse angewiesen bleibt, erzeugt das Template mit dem Namen C++ Main-File (main.cpp) (Abbildung 2) die Datei mit der main()-Hauptfunktion des Qt-Programms, das eines der im Projekt enthaltenen Widgets als Hauptfenster (Main-Form) benutzt (Abbildung 8).

Abbildung 8: Ein Objekt der Hexrechner-Klasse wird zum Hauptfenster der Applikation

Um das bislang erzeugte Programm-Gerüst zu kompilieren, erzeugt man zunächst im Projektverzeichnis das passende Makefile:

qmake -o Makefile projektdatei.pro

und kompiliert mit make. Doch nach diesem ersten Erfolgserlebnis gilt es meist noch, das neuerstellte GUI mit weiterer Funktionalität auszustatten. Spätestens dann heißt es, zum Texteditor der Wahl zu greifen.