Development/Tutorials/Using Qt Designer (de)

Zusammenfassung

In dieser Anleitung wird erklärt, wie man die eigenen KDE Projekte mit BenutzerSchnittstellen (UIs) ausstattet, indem man den Qt Designer benutzt.

Das UI entwerfen

Qt Designer ist ein graphischer Editor, der es einem auf einfache Art und Weise ermöglicht, Benutzerschnittstellen per "drag and drop" zu entwerfen. Der Designer hat seine eigene Benutzeranleitung. Es könnte sinnvoll sein, ein kurzes Anwendungsbeispiel in diesem Kapitel zu zeigen, zur Zeit verweisen wir jedoch auf die o.g. Benutzeranleitung.

Die UI Datei zum eigenen KDE Projekt hinzufügen

Der für unsere Zwecke wichtigste Teil an der Benutzung des Designer ist die *.ui Datei, die erzeugt wird. Das ist eine einfache XML Datei die die Benutzerschnittstelle sowohl maschinen- als auch menschenlesbar codiert.

Stellen wir uns vor, Sie hättet eine Schnittstelle namens "MyDialog" mit dem Designer erzeugt und in der Datei mydialog.ui gespeichert. Um diese Schnittstelle in das eigenen KDE Projekt einzufügen, muss einfach einen zusätzliche Zeile in die CMakeLIsts.txt Datei eingefügt werden:

kde4_add_ui_files(myapp_SRCS mydialog.ui)

Ersetzen Sie "myapp_SRCS" mit dem Namen des Hauptteils Ihrer CMakeLists.txt Datei, die die entsprechenden Quellcodedateien definiert. Das ist normalerweise der Name der Applikation mit dem Zusatz "_SRCS".

Wenn Sie das machen, wird das Buildsystem das Qt-Programm uic mit der Datei mydialog.ui ausführen, um automatisch eine C++ Header Datei zu erzeugen, die die Benutzerschnittstelle beschreibt. Die erzeugte Datei wird ui_mydialog.h heißen.

Das Benutzerinterface im eigenen Code benutzen

Die Datei ui_mydialog.h definiert eine neue Klasse mit dem Namen "Ui_MyDialog", die alle Widgets enthält, die Sie im Designer erzeugt haben und zwar als öffentliche members der Klasse. Weiterhin gibt es eine öffentliche Funktion "setupUi(QWidget *parent)", die alle Widgets aufsetzt, ihre Eigenschaften setzt und sie in den Layoutmanager eingefügt und alles genau so, wie Sie es im Designer festgelegt haben.

Beachten Sie, dass setupUi() als Parameter ein QWidget* benötigt. Dieser Parameter bezeichnet das übergeordnete Containerwidget, in welches alle Widgets Ihres Benutzerinterfaces eingefügt werden. In anderen Worten, Ui_MyDialog ist kein Abkömmling von QWidget und enthält selber kein übergeordnetes Widget. Sie müssen ein übergeordnetes Widget zur Verfügung stellen, wenn Sie setupUi() aufrufen. Das ist ein wichtiger Punkt.

Ein weiteres wichtiges semantisches Detail: Die Ui_MyDialog Klasse erzeugt auch einen Ui Namensraum, welcher einfach einen Alias für die Klasse erzeugt. Sie können also Ui::MyDialog benutzen, um auf die selbe Klasse zuzugreifen.

Kommen wir jetzt zur Anwendung des erzeugten Benutzerinterfaces in Ihrem Code. Die Qt Dokumentation zeigt drei Wege, wie man ui-Dateien verwendet (auf englisch), hier wird nur der direkte Ansatz besprochen. Ziel ist es, einen KDialog zu erzeugen, welcher das Benutzerinterface aus der ui-Datei aufnimmt. Zuerst müssen wir eine Unterklasse MyDialog von KDialog ableten und eine Member-Variable des Typs Ui::MyDialog hinzufügen. Der Header "mydialog.h" dafür sieht folgendermaßen aus:

#ifndef MYDIALOG_H
#define MYDIALOG_H

#include <KDialog>

// Die automatisch generierte Header Datei für die ui-Datei einfügen
#include "ui_mydialog.h"

class MyDialog : public KDialog
{
    Q_OBJECT
    public:
        MyDialog( QWidget *parent=0 );
        ~MyDialog();

    private slots:
        void slotButtonClicked();

    private:
        // Zugriff auf das Benutzerinterface. Wir können auf alle 
        // gui Elemente zugreifen, die im Designer festleget wurden. 
        // Enthält mydialog.ui einen Schalter namens "myButton", können wir 
        // darauf in der cpp-Datei über ui.myButton zugreifen.
        Ui::MyDialog ui;
};

#endif

Sehen wir uns jetzt die Implementation von MyDialog an, welche in einer Datei namens "mydialog.cpp" steht.

#include <KLocale>
#include <KMessageBox>

// Den Header unseres Dialog einfügen
#include "mydialog.h"

MyDialog::MyDialog( QWidget *parent )
: KDialog( parent )
{
    QWidget *widget = new QWidget( this );

    // Erzeuge das Benutzerinterface, das übergeordnete Widget ist "widget"
    ui.setupUi(widget); // Das ist ein wichtige Teil

    // Das Widget mit allen seinen Gui-Elementen als Hauptwidget des
    // Dialoges setzen
    setMainWidget( widget );

    // Andere KDialog Optionen
    setCaption( i18n("This is my Dialog window!") );
    setButtons( KDialog::Close );

    // Beispielhafte Signal/Slot Verbindung, die Widgets Ihres Benutzer-
    // interfaces benutzen. 
    // Beachten Sie, dass sie "ui." voranstellen müssen, wenn Sie 
    // aich auf Ihre UI-Elemente beziehen
    connect( ui.myButton, SIGNAL( clicked() ),
             this, SLOT( slotButtonClicked() ) );
}

MyDialog::~MyDialog()
{
}

void MyDialog::slotButtonClicked() 
{
    KMessageBox::information( this, 
                              i18n("You pressed the button!" ),
                              i18n( "Hooray!" ) );
}

#include "mydialog.moc"

Zusammenfassend erzeugen wie einen neuen Ui::MyDialog and und rufen dann ui.setupUi(widget) im Konstruktor von MyDialog auf. Das platziert die UI-Elemente in das übergebene Widget. Danach setzen wir das übergeordnete Widget als das Hauptwidget von KDialog. Interaktionen mit allen UI Elementen erfolgt, indem wir "ui." vor ihre Namen stellen, so wie es oft mit dem Präfix "m_" geschieht.

Abschließende Gedanken

Die Kaskade an Dateien und Klassen dieser Anleitung mag auf dem ersten Blick erschlagend sein, doch das hier gezeigte Namensschema hat ein nettes intuitives Merkmal: Die Quelldatei, die Sie direkt (entweder als Text oder mit dem Designer) bearbeiten, werden alle nach dem gleichen Schema benannt:

• mydialog.ui: Das Benutzerinterface, erzeugt durch den Designer
• ui_mydialog.h: automatisch erzeugt durch uic, Qt's Benutzerinterface Compiler
• mydialog.h/cpp: Die Implementation des Dialogs

Zusammenfassend sind die Schritte

1. erzeugen Sie eine mydialog.ui Datei
2. erzeugen Sie eine mydialog.h/cpp Datei
3. Fügen Sie die Variable Ui::MyDialog ui; in mydialog.h ein
4. Rufen Sie ui.setupUi(widget); auf
5. Greifen Sie auf die Ui-Elemente über ui. zu

Qt Dokumentation

Die Qt Dokumentation enthält einen guten Artikel Using a Designer .ui File in Your Application (in englisch).