Development/Tutorials/Using Qt Designer (de)

From KDE TechBase


Development/Tutorials/Using Qt Designer


Zusammenfassung

In dieser Anleitung wird erklärt, wie man die eigenen KDE Projekte mit Benutzerschnittschnellen (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 Schnittschnelle namens "MyDialog" mit dem Designer erzeugt und in der Datei mydialog.ui gespeichert. Um diese Schnittschnelle 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.

Using the UI in Your Code

The ui_mydialog.h file defines a class named "Ui_MyDialog", that contains all of the widgets you created in Designer as public members of the class. It also contains the public function "setupUi(QWidget *parent)", which instantiates all of the widgets, sets up their properties, and inserts them into layout managers, all according to what you specified in Designer.

Note that setupUi() takes a QWidget* argument. This argument represents the parent container widget, into which all of the widgets in your UI will be inserted. In other words, Ui_MyDialog is not itself derived from QWidget, and it does not contain a toplevel widget itself. You have to supply the toplevel widget when you call setupUi(). This is an important point.

One more important semantic detail: the Ui_MyDialog class also creates a Ui namespace, which simply creates an alias for the class. So you can use Ui::MyDialog to refer to the same class.

Now, on to actually using the generated UI in your code. The Qt documentation shows three ways of how to use ui-files; here only the direct approach is discussed. The goal is to create a KDialog which embeds the UI from the ui-file. First, we have to subclass MyDialog from KDialog and add a member variable of type Ui::MyDialog. The header file of "mydialog.h" looks like the following:

  1. ifndef MYDIALOG_H
  2. define MYDIALOG_H
  1. include <KDialog>

// include the automatically generated header file for the ui-file

  1. include "ui_mydialog.h"

class MyDialog : public KDialog { 

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

   private slots:
       void slotButtonClicked();

   private:
       // accessor to the ui. we can access all gui elements
       // specified in Designer. If mydialog.ui contains a
       // button "myButton", we will be able to access it
       // with ui.myButton in the cpp file.
       Ui::MyDialog ui;

};

  1. endif

Now we are going to look at the implementation of MyDialog, which is in the file "mydialog.cpp".

  1. include <KLocale>
  2. include <KMessageBox>

// include the header file of the dialog

  1. include "mydialog.h"

MyDialog::MyDialog( QWidget *parent )

KDialog( parent )

{ 

   QWidget *widget = new QWidget( this );

   // create the user interface, the parent widget is "widget"
   ui.setupUi(widget); // this is the important part

   // set the widget with all its gui elements as the dialog's
   // main widget
   setMainWidget( widget );

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

   // Example Signal/Slot connection using widgets in your UI.
   // Note that you have to prepend "ui." when referring
   // to your UI elements.
   connect( ui.myButton, SIGNAL( clicked() ),
            this, SLOT( slotButtonClicked() ) );

}

MyDialog::~MyDialog() { }

void MyDialog::slotButtonClicked() { 

   KMessageBox::information( this, 
                             i18n("You pressed the button!" ),
                             i18n( "Hooray!" ) );

}

  1. include "mydialog.moc"

So, basically, we create a new Ui::MyDialog and then call ui.setupUi(widget) in the constructor of MyDialog. This places the UI elements into the given widget. Then we set the parent-widget as the KDialog's main widget. We can then interact with all of the UI elements by prepending "ui." to their names, just like it is often done with the prefix "m_".

Final Thoughts

The cascade of files and classes in this tutorial may seem daunting at first, but the naming scheme layed out here has one nice intuitive feature: the source code files that you will be editing directly (either as text or with Designer) are all named with the same scheme:

  • mydialog.ui: the user interface, created with Designer
  • ui_mydialog.h: auto-generated by uic, Qt's user interface compiler
  • mydialog.h/cpp: the dialog implementation

The steps in short are

  1. create mydialog.ui
  2. create mydialog.h/cpp
  3. add variable Ui::MyDialog ui; in mydialog.h
  4. call ui.setupUi(widget);
  5. access the ui elements with ui.

Qt Documentation

The Qt documentation contains a good article about Using a Component in Your Application.

Retrieved from "https://techbase.kde.org/index.php?title=Development/Tutorials/Using_Qt_Designer_(de)&oldid=17034"