Development/Tutorials/Using Qt Designer (de): Difference between revisions

From KDE TechBase
(Page created)
 
No edit summary
 
(11 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Using Qt Designer}}


== Qt Designer User Interfaces in KDE ==


In this tutorial, we will explore how to programatically insert user interfaces
== Zusammenfassung ==
(UIs) created with Qt Designer, into your KDE project.
In dieser Anleitung wird erklärt, wie man die eigenen KDE Projekte mit BenutzerSchnittstellen (UIs) ausstattet, indem man den Qt Designer benutzt.  


== Designing the UI ==
== Das UI entwerfen ==


[http://www.trolltech.com/products/qt/features/designer Qt Designer] is a
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 [http://qt.nokia.com/doc/latest/designer-manual.html Benutzeranleitung].   
graphical program which allows you to easily build user interfaces, using an
Es könnte sinnvoll sein, ein kurzes Anwendungsbeispiel in diesem Kapitel zu zeigen, zur Zeit verweisen wir jedoch auf die o.g. Benutzeranleitung.
intuitive "drag n drop" interface. Designer has its own excellent
[http://doc.trolltech.com/4.3/designer-manual.html user documentation].   
It might make sense to provide a brief example of using Designer here, but
for now this article will leave most of that to the Designer manual itself.


== Adding the UI File to Your KDE Project ==
== Die UI Datei zum eigenen KDE Projekt hinzufügen ==
Der für unsere Zwecke wichtigste Teil an der Benutzung des Designer ist die <tt>*.ui</tt> Datei, die erzeugt wird. Das ist eine einfache XML Datei die die Benutzerschnittstelle sowohl maschinen- als auch menschenlesbar codiert.


For our purposes, the most important part of using Designer is the
Stellen wir uns vor, Sie hättet eine Schnittstelle namens "MyDialog" mit dem Designer erzeugt und in der Datei <tt>mydialog.ui</tt> 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:
<tt>*.ui</tt> file that it creates. This is simply an XML file that
encodes the user interface in a machine-readable (and human-readable!) way.


Let's imagine that you've created a UI named "MyDialog" with Designer, and
<syntaxhighlight lang="text">
saved it as the file <tt>mydialog.ui</tt>.  To add this UI to your KDE
project, simply add a command like the following to your CMakeLists.txt file:
 
<code>
kde4_add_ui_files(myapp_SRCS mydialog.ui)
kde4_add_ui_files(myapp_SRCS mydialog.ui)
</code>
</syntaxhighlight>


Replace "<tt>myapp_SRCS</tt>" with the name of the main block in
Ersetzen Sie "<tt>myapp_SRCS</tt>" mit dem Namen des Hauptteils Ihrer CMakeLists.txt Datei, die die entsprechenden Quellcodedateien definiert. Das ist normalerweise der Name der Applikation mit dem Zusatz "<tt>_SRCS</tt>".
your CMakeLists.txt file, defining all of the source code files. It is usually the
name of your application, with "<tt>_SRCS</tt>" appended.


When you do this, the build system will run the Qt program <tt>uic</tt>  
Wenn Sie das machen, wird das Buildsystem das Qt-Programm <tt>uic</tt> mit der Datei <tt>mydialog.ui</tt> ausführen, um automatisch eine C++ Header Datei zu erzeugen, die die Benutzerschnittstelle beschreibt. Die erzeugte Datei wird <tt>ui_mydialog.h</tt> heißen.
on <tt>mydialog.ui</tt>, to auto-generate a C++ header file that
defines the UI. The generated file will be named <tt>ui_mydialog.h</tt>.


== Using the UI in Your Code ==
== Das Benutzerinterface im eigenen Code benutzen ==


The <tt>ui_mydialog.h</tt> file defines a class named
Die Datei <tt>ui_mydialog.h</tt> definiert eine neue Klasse mit dem Namen "<tt>Ui_MyDialog</tt>", die alle Widgets enthält, die Sie im Designer erzeugt haben und zwar als öffentliche members der Klasse. Weiterhin gibt es eine öffentliche Funktion "<tt>setupUi(QWidget *parent)</tt>", die alle Widgets
"<tt>Ui_MyDialog</tt>", that contains all of the widgets you created in
aufsetzt, ihre Eigenschaften setzt und sie in den Layoutmanager eingefügt und alles genau so, wie Sie es im Designer festgelegt haben.  
Designer as public members of the class. It also contains the public function
"<tt>setupUi(QWidget *parent)</tt>", 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 <tt>setupUi()</tt> takes a <tt>QWidget*</tt>  
Beachten Sie, dass <tt>setupUi()</tt> als Parameter ein <tt>QWidget*</tt>  
argument. This argument represents the parent container widget, into which
benötigt. Dieser Parameter bezeichnet das übergeordnete Containerwidget, in welches alle Widgets Ihres Benutzerinterfaces eingefügt werden. In anderen Worten, '''<tt>Ui_MyDialog</tt> ist kein Abkömmling von QWidget und
all of the widgets in your UI will be inserted. In other words,  
'''enthält selber kein übergeordnetes Widget'''.  Sie müssen ein übergeordnetes Widget zur Verfügung stellen, wenn Sie <tt>setupUi()</tt> aufrufenDas ist ein wichtiger Punkt.
'''<tt>Ui_MyDialog</tt> 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 <tt>setupUi()</tt>.  This is an important point.


One more important semantic detail: the <tt>Ui_MyDialog</tt> class
Ein weiteres wichtiges semantisches Detail: Die <tt>Ui_MyDialog</tt> Klasse erzeugt auch einen <tt>Ui</tt> Namensraum, welcher einfach einen Alias für die Klasse erzeugt. Sie können also <tt>Ui::MyDialog</tt> benutzen, um auf die selbe Klasse zuzugreifen.
also creates a <tt>Ui</tt> namespace, which simply creates an alias
for the class. So you can use <tt>Ui::MyDialog</tt> to refer to the
same class.


Now, on to actually using the generated UI in your code. The Qt documentation
Kommen wir jetzt zur Anwendung des erzeugten Benutzerinterfaces in Ihrem Code. Die Qt Dokumentation zeigt drei Wege,  [http://qt.nokia.com/doc/latest/designer-using-a-ui-file.html 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 "<tt>mydialog.h</tt>" dafür sieht folgendermaßen aus:
shows three ways of [http://doc.trolltech.com/latest/designer-using-a-component.html 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 pointer to Ui::MyDialog. The header file of
"<tt>mydialog.h</tt>" looks like the following:


<code cppqt>
<syntaxhighlight lang="cpp-qt">
#ifndef MYDIALOG_H
#ifndef MYDIALOG_H
#define MYDIALOG_H
#define MYDIALOG_H
Line 71: Line 41:
#include <KDialog>
#include <KDialog>


// include the automatically generated header file for the ui-file
// Die automatisch generierte Header Datei für die ui-Datei einfügen
#include "ui_mydialog.h"
#include "ui_mydialog.h"


Line 85: Line 55:


     private:
     private:
         // pointer to the ui. we can access all gui elements
         // Zugriff auf das Benutzerinterface. Wir können auf alle
         // specified in Designer. If mydialog.ui contains a
         // gui Elemente zugreifen, die im Designer festleget wurden.  
         // button "myButton", we will be able to access it
         // Enthält mydialog.ui einen Schalter namens "myButton", können wir
         // with ui.myButton in the cpp file.
         // darauf in der cpp-Datei über ui.myButton zugreifen.
         Ui::MyDialog ui;
         Ui::MyDialog ui;
};
};


#endif
#endif
</code>
</syntaxhighlight>
Sehen wir uns jetzt die Implementation von MyDialog an, welche in einer Datei namens "<tt>mydialog.cpp</tt>" steht.


Now we are going to look at the implementation of MyDialog, which is in the file
<syntaxhighlight lang="cpp-qt">
"<tt>mydialog.cpp</tt>".
 
<code cppqt>
#include <KLocale>
#include <KLocale>
#include <KMessageBox>
#include <KMessageBox>


// include the header file of the dialog
// Den Header unseres Dialog einfügen
#include "mydialog.h"
#include "mydialog.h"


Line 110: Line 78:
     QWidget *widget = new QWidget( this );
     QWidget *widget = new QWidget( this );


     // create the user interface, the parent widget is "widget"
     // Erzeuge das Benutzerinterface, das übergeordnete Widget ist "widget"
     ui.setupUi(widget); // this is the important part
     ui.setupUi(widget); // Das ist ein wichtige Teil


     // set the widget with all its gui elements as the dialog's
     // Das Widget mit allen seinen Gui-Elementen als Hauptwidget des
     // main widget
     // Dialoges setzen
     setMainWidget( widget );
     setMainWidget( widget );


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


     // Example Signal/Slot connection using widgets in your UI.
     // Beispielhafte Signal/Slot Verbindung, die Widgets Ihres Benutzer-
     // Note that you have to prepend "ui." when referring
    // interfaces benutzen.  
     // to your UI elements.
     // Beachten Sie, dass sie "ui." voranstellen müssen, wenn Sie
     // aich auf Ihre UI-Elemente beziehen
     connect( ui.myButton, SIGNAL( clicked() ),
     connect( ui.myButton, SIGNAL( clicked() ),
             this, SLOT( slotButtonClicked() ) );
             this, SLOT( slotButtonClicked() ) );
Line 140: Line 109:


#include "mydialog.moc"
#include "mydialog.moc"
</code>
</syntaxhighlight>
 
So, basically, we create a new Ui::MyDialog and then call
<tt>ui.setupUi(widget)</tt> in the constructor of <tt>MyDialog</tt>. 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 "<tt>ui.</tt>" to their names, just like it is often done
with the prefix "<tt>m_</tt>".


== Final Thoughts ==
Zusammenfassend erzeugen wie einen neuen Ui::MyDialog and und rufen dann <tt>ui.setupUi(widget)</tt> im Konstruktor von <tt>MyDialog</tt> 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 "<tt>ui.</tt>" vor ihre Namen stellen, so wie es oft mit dem Präfix "<tt>m_</tt>" geschieht.


The cascade of files and classes in this tutorial may seem daunting at
== Abschließende Gedanken ==
first, but the naming scheme layed out here has one nice intuitive
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:
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
# create <tt>mydialog.ui</tt>
# create <tt>mydialog.h/cpp</tt>
# add variable Ui::MyDialog ui; in <tt>mydialog.h</tt>
# call ui.setupUi(widget);</tt>
# access the ui elements with <tt>ui.</tt>


== Qt Documentation ==
* '''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
# erzeugen Sie eine <tt>mydialog.ui</tt> Datei
# erzeugen Sie eine <tt>mydialog.h/cpp</tt> Datei
# Fügen Sie die Variable Ui::MyDialog ui; in <tt>mydialog.h</tt> ein
# Rufen Sie ui.setupUi(widget);</tt> auf
# Greifen Sie auf die Ui-Elemente über <tt>ui.</tt> zu


The Qt documentation contains a good article about
== Qt Dokumentation ==
[http://doc.trolltech.com/latest/designer-using-a-component.html Using a Component in Your Application].
Die Qt Dokumentation enthält einen guten Artikel [http://qt.nokia.com/doc/latest/designer-using-a-ui-file.html Using a Designer .ui File in Your Application (in englisch)].
[[Category:C++]]
[[Category:C++]]
[[Category:KDE4]]
[[Category:KDE4]]

Latest revision as of 14:39, 14 July 2012


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).