Using a Designer UI File in Your Application

Using a Member Variable

In this approach, we subclass a Qt widget and set up the user interface from within the constructor. Components used in this way expose the widgets and layouts used in the form to the Qt widget subclass, and provide a standard system for making signal and slot connections between the user interface and other objects in your application. The generated Ui::CalculatorForm structure is a member of the class.

This approach is used in the Calculator Form example.

To ensure that we can use the user interface, we need to include the header file that uic generates before referring to Ui::CalculatorForm:

 #include "ui_calculatorform.h"

This means that the .pro file must be updated to include calculatorform.h:

 HEADERS     = calculatorform.h

The subclass is defined in the following way:

 class CalculatorForm : public QWidget
 {
     Q_OBJECT

 public:
     CalculatorForm(QWidget *parent = 0);

 private slots:
     void on_inputSpinBox1_valueChanged(int value);
     void on_inputSpinBox2_valueChanged(int value);

 private:
     Ui::CalculatorForm ui;
 };

The important feature of the class is the private ui object which provides the code for setting up and managing the user interface.

The constructor for the subclass constructs and configures all the widgets and layouts for the dialog just by calling the ui object's setupUi() function. Once this has been done, it is possible to modify the user interface as needed.

 CalculatorForm::CalculatorForm(QWidget *parent)
     : QWidget(parent)
 {
     ui.setupUi(this);
 }

We can connect signals and slots in user interface widgets in the usual way, taking care to prefix the ui object to each widget used.

The advantages of this approach are its simple use of inheritance to provide a QWidget-based interface, and its encapsulation of the user interface widget variables within the ui data member. We can use this method to define a number of user interfaces within the same widget, each of which is contained within its own namespace, and overlay (or compose) them. This approach can be used to create individual tabs from existing forms, for example.

 namespace Ui {
     class CalculatorForm;
 }

 class CalculatorForm : public QWidget
 ...
 virtual ~CalculatorForm();
 ...
 private:
     Ui::CalculatorForm *ui;
 ...

 #include "ui_calculatorform.h"

 CalculatorForm::CalculatorForm(QWidget *parent) :
     QWidget(parent), ui(new Ui::CalculatorForm)
 {
     ui->setupUi(this);
 }

 CalculatorForm::~CalculatorForm()
 {
     delete ui;
 }

 #include "ui_calculatorform.h"

 class CalculatorForm : public QWidget, private Ui::CalculatorForm
 {
     Q_OBJECT

 public:
     CalculatorForm(QWidget *parent = 0);

 private slots:
     void on_inputSpinBox1_valueChanged(int value);
     void on_inputSpinBox2_valueChanged(int value);
 };

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

 void CalculatorForm::changeEvent(QEvent *e)
 {
     QWidget::changeEvent(e);
     switch (e->type()) {
     case QEvent::LanguageChange:
         ui->retranslateUi(this);
         break;
     default:
         break;
    }
 }

 CONFIG += uitools

 #include <QtUiTools>

 QWidget* TextFinder::loadUiFile()
 {
     QUiLoader loader;

     QFile file(":/forms/textfinder.ui");
     file.open(QFile::ReadOnly);

     QWidget *formWidget = loader.load(&file, this);
     file.close();

     return formWidget;
 }

     ui_findButton = qFindChild<QPushButton*>(this, "findButton");
     ui_textEdit = qFindChild<QTextEdit*>(this, "textEdit");
     ui_lineEdit = qFindChild<QLineEdit*>(this, "lineEdit");

 class ImageDialog : public QDialog, private Ui::ImageDialog
 {
     Q_OBJECT

 public:
     ImageDialog(QWidget *parent = 0);

 private slots:
     void checkValues();
 };

 ImageDialog::ImageDialog(QWidget *parent)
     : QDialog(parent)
 {
     setupUi(this);
     okButton->setAutoDefault(false);
     cancelButton->setAutoDefault(false);
     ...
     connect(okButton, SIGNAL(clicked()), this, SLOT(checkValues()));
 }

 void ImageDialog::checkValues()
 {
     if (nameLineEdit->text().isEmpty())
         (void) QMessageBox::information(this, tr("No Image Name"),
             tr("Please supply a name for the image."), QMessageBox::Cancel);
     else
         accept();
 }

 void on_<object name>_<signal name>(<signal parameters>);

 class ImageDialog : public QDialog, private Ui::ImageDialog
 {
     Q_OBJECT

 public:
     ImageDialog(QWidget *parent = 0);

 private slots:
     void on_okButton_clicked();
 };

     QMetaObject::connectSlotsByName(this);

 void TextFinder::on_findButton_clicked()
 {
     QString searchString = ui_lineEdit->text();
     QTextDocument *document = ui_textEdit->document();

     bool found = false;

     if (isFirstTime == false)
         document->undo();

     if (searchString.isEmpty()) {
         QMessageBox::information(this, tr("Empty Search Field"),
                 "The search field is empty. Please enter a word and click Find.");
     } else {

         QTextCursor highlightCursor(document);
         QTextCursor cursor(document);

         cursor.beginEditBlock();
     ...
         cursor.endEditBlock();
         isFirstTime = false;

         if (found == false) {
             QMessageBox::information(this, tr("Word Not Found"),
                 "Sorry, the word cannot be found.");
         }
     }
 }