Porting .ui Files to Qt 4

uic Output

In Qt 3, uic generated a header file and an implementation for a class, which inherited from one of Qt's widgets. To use the form, the programmer included the generated sources into the application and created an instance of the class.

In Qt 4, uic creates a header file containing a POD class. The name of this class is the object name of the main container, qualified with the Ui namespace (e.g., Ui::MyForm). The class is implemented using inline functions, removing the need of a separate .cpp file. Just as in Qt 3, this class contains pointers to all the widgets inside the form as public members. In addition, the generated class provides the public method setupUi().

The class generated by uic is not a QWidget; in fact, it's not even a QObject. Instead, it is a class which knows how to populate an instance of a main container with the contents of the form. The programmer creates the main container himself, then passes it to setupUi().

For example, here's the uic output for a simple helloworld.ui form (some details were removed for simplicity):

    namespace Ui {

    class HelloWorld
    {
    public:
        QVBoxLayout *vboxLayout;
        QPushButton *pushButton;

        void setupUi(QWidget *HelloWorld)
        {
            HelloWorld->setObjectName(QString::fromUtf8("HelloWorld"));

            vboxLayout = new QVBoxLayout(HelloWorld);
            vboxLayout->setObjectName(QString::fromUtf8("vboxLayout"));

            pushButton = new QPushButton(HelloWorld);
            pushButton->setObjectName(QString::fromUtf8("pushButton"));

            vboxLayout->addWidget(pushButton);

            retranslateUi(HelloWorld);
        }
    };

    }

In this case, the main container was specified to be a QWidget (or any subclass of QWidget). Had we started with a QMainWindow template in Qt Designer, setupUi()'s parameter would be of type QMainWindow.

There are two ways to create an instance of our form. One approach is to create an instance of the Ui::HelloWorld class, an instance of the main container (a plain QWidget), and call setupUi():

    #include <QApplication>
    #include <QWidget>

    #include "ui_helloworld.h"   // defines Ui::HelloWorld

    int main(int argc, char *argv[])
    {
        QApplication app(argc, argv);

        QWidget w;
        Ui::HelloWorld ui;
        ui.setupUi(&w);

        w.show();
        return app.exec();
    }

The second approach is to inherit from both the Ui::HelloWorld class and the main container, and to call setupUi() in the constructor of the subclass:

    #include <QApplication>
    #include <QWidget>

    #include "ui_helloworld.h"   // defines Ui::HelloWorld

    class HelloWorldWidget : public QWidget, public Ui::HelloWorld
    {
    public:
        HelloWorldWidget(QWidget *parent = 0)
            : QWidget(parent)
        { setupUi(this); }
    };

    int main(int argc, char *argv[])
    {
        QApplication app(argc, argv);

        HelloWorldWidget w;
        w.show();

        return app.exec();
    }

This second method is useful when porting Qt 3 forms to Qt 4. HelloWorldWidget is a class whose instance is the actual form and which contains public pointers to all the widgets in it. It therefore has an interface identical to that of a class generated by uic in Qt 3.

Creating POD classes from .ui files is more flexible and generic than the old approach of creating widgets. Qt Designer doesn't need to know anything about the main container apart from the base widget class it inherits. Indeed, Ui::HelloWorld can be used to populate any container that inherits QWidget. Conversely, all non-GUI aspects of the main container may be implemented by the programmer in the application's sources without reference to the form.

    uic3 myform.ui > myform.h
    uic3 -impl myform.h > myform.cpp

    uic3 -convert myform3.ui > myform4.ui

    class HelloWorldWidget : public QWidget, public Ui::HelloWorld
    {
        Q_OBJECT

    public:
        HelloWorldWidget(QWidget *parent = 0);

    public slots:
        void mySlot();
    };

    HelloWorldWidget::HelloWorldWidget(QWidget *parent)
        : QWidget(parent)
    {
        setupUi(this);

        QObject::connect(pushButton, SIGNAL(clicked()),
                         this, SLOT(mySlot()));
    }

    void HelloWorldWidget::mySlot()
    {
        ...
    }

    class HelloWorldWidget : public QWidget, public Ui::HelloWorld
    {
        Q_OBJECT

    public:
        HelloWorldWidget(QWidget *parent = 0);

    public slots:
        void on_pushButton_clicked();
    };

    HelloWorldWidget::HelloWorldWidget(QWidget *parent)
        : QWidget(parent)
    {
        setupUi(this);
    }

    void HelloWorldWidget::on_pushButton_clicked()
    {
        ...
    }

    <RCC version="1.0">
        <qresource prefix="/icons">
            <file>yes.png</file>
            <file>no.png</file>
        </qresource>
    </RCC>

    RESOURCES += icons.qrc

    QFile file(":/icons/yes.png");
    QIcon icon(":/icons/no.png");
    QPixmap pixmap(":/icons/no.png");