Question

I have just started learning Qt and I am trying to create a simple widget using this QUiLoader. But I am getting this error : “Designer: An error has occurred while reading the UI file at line 1, column 0: Premature end of document.”

#include <QtGui/QApplication>
#include <QtUiTools/QUiLoader>
#include <QFile>


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

    QUiLoader loader;
    QFile file(":/aks.ui");
    file.open(QFile::ReadOnly);

    QWidget *myWidget = loader.load(&file);
    if(myWidget){
        myWidget->show();
    }

    return a.exec();
}

I constructed the ui file using QtCreator 2.4.1 and I am on Qt 4.7.4. Check out the ui file too.

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>131</width>
    <height>129</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QGridLayout" name="gridLayout">
   <item row="0" column="0">
    <layout class="QVBoxLayout" name="verticalLayout">
     <item>
      <widget class="QCheckBox" name="checkBox">
       <property name="text">
        <string>A</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="checkBox_2">
       <property name="text">
        <string>B</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="checkBox_3">
       <property name="text">
        <string>C</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="checkBox_4">
       <property name="text">
        <string>D</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QCheckBox" name="checkBox_5">
       <property name="text">
        <string>E</string>
       </property>
      </widget>
     </item>
    </layout>
   </item>
   <item row="0" column="1">
    <widget class="QPushButton" name="pushButton">
     <property name="text">
      <string>PushButton</string>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

My project file:

#-------------------------------------------------
#
# Project created by QtCreator 2012-05-21T19:48:31
#
#-------------------------------------------------

QT       += core gui

TARGET = Example
TEMPLATE = app


SOURCES += main.cpp \
    sortdialog.cpp

HEADERS  += \
    sortdialog.h

FORMS    += \
    sortdialog.ui \
    aks.ui

CONFIG += uitools

Answer 1

You need to add your .ui file to the resources of your project. Resources are files which get “compiled inside” of your app and are then available to Qt classes by file paths starting with ":/".

In order to add resources to your project, you need to create a resource file listing the files you want to register as resources. This file will be another XML file and can be created and edited by QtCreator. In the project manager, add another file and select the type Qt -> Qt resource file from within the dialog.

In your .pro file then appears a section:

RESOURCES += \
    resources.qrc

In the resource file you need to add a prefix; just name it / (or leave it empty). Within this prefix you can add the file aks.ui so it will be named :/aks.ui.

Note that this type of UI creation takes place in runtime. That means, it is more flexible (maybe the ui file gets created only at runtime), but a little bit slower (since parsing and some more runtime processing takes place).

---

If you’re new to Qt, you probably don’t know that you can also let Qt create a class file for your ui file in the build process. This is already done when you list your ui file in the pro file in the FORMS += section.

To use the automatically built class, you should also have created a designer form class, which is another class where you put your own code inside. This class will load the automatically built class to setup your ui.

So there are two classes:
* The automatically generated class for your ui file, called Ui::Aks (in a namespace Ui), found in the file ui_aks.h in the build folder.
* Your own wrapper class; the acutal widget class, which uses the ui class.

If you want to create the second class manually, you can write (QtCreator actually does exactly this step when you add a designer form class instead of only a designer form):

aks.h:

#ifndef AKS_H
#define AKS_H

#include <QWidget>

namespace Ui {
    class Aks; // <-- this is the automatically created ui class which we need
}

class aks : public QWidget // <-- your own widget class using the designer UI
{
    Q_OBJECT

public:
    explicit Aks(QWidget *parent = 0);
    ~Aks();

private:
    Ui::Aks *ui; // <-- instance of the automatically created ui class
};

#endif // AKS_H

aks.cpp:

#include "aks.h"
#include "ui_aks.h" // <-- include the automatically generated ui class

Aks::Aks(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Aks)
{
    ui->setupUi(this); // <-- here, the widgets from the ui file get created
}

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