View posts for Tag: "gui"

Qt4.4 for beginners

Quite some time ago I have worked with Qt3 and C++ to do some Linux projects. I had taken a look on GTK and wxWidgets too, but I felt most comfortable with Qt.

Now I had to build small program that was able to play a list of audio files and to give the user an option to rate these files. It’s a quite simple little program which for some reasons is needed to be written in C++.

So I installed Qt4.4 and started Qt’s Designer. I spent half an hour searching the source code editor in Designer. After five minutes with Google I found out that one “feature” of Qt4 was the complete separation of GUI code and logic code, so I had to work a slightly different way from what I was familiar with. Though I never used Qt’s Designer that way (usually I coded the whole GUI stuff by hand or used Designer’s built-in source code editor), I started “designing” my GUI. After I was finished I saved the file as “MainWindow.ui” (I know it’s not a smart name but I don’t care). So, what now? There were no other files and the Designer wasn’t able to produce any other files. The answer: qmake! qmake is some kind of Qt’s own make, which is not intended to replace make, but to give you a smart ability to handle *.ui and other Qt related files. One just needs to create a file named and add something like the following code to it:

HEADERS += MainWindow.h #as my ui file is MainWindow.ui
FORMS += MainWindow.ui # my ui file created by Qt Designer
SOURCES  += main.cpp MainWindow.cpp

This should be enough for a valid and working .pro file. Now there are three new file mentioned in the .pro file which are not existing yet. So where do we get these files from? We just create them ourselves. Let’s start with the main.cpp. It’s intended to be – guess what… So, what does it look like:

#include "MainWindow.h" // to integrate my MainWindow class from created by the Designer.
int main(int argc, char *argv[])
  QApplication app(argc, argv);
  MainWindow *window = new MainWindow;  //create an instance of our window
  window->show();                       // show our window
  return app.exec();

Curious about what the MainWindow.h file is needed and used for?

#include "ui_MainWindow.h"
class MainWindow : public QMainWindow, private Ui::MainWindow
  MainWindow(QWidget *parent = 0);

First of all one has to understand where the “ui_mainWindow.h” comes from. It’s automatically generated by qmake when you call it. qmake simply generates C++ code out of the XML-ui file. Your can call qmake right now it should generate an “ui_MainWindow.h” file and a Makefile which will be called later. Another alternative to generating “ui_MainWindow.h” is to call the command

uic -o ui_MainWindow.h MainWindow.ui

qmake itself calls uic to get the “ui_MainWindow.h”. Now if you take a look at the “ui_MainWindow.h” you’ll see that it contains pure C++ code calling the different Qt classes to draw the GUI. With “class MainWindow : public QMainWindow, private Ui::MainWindow” in MainWindow.h we inherit the Ui::MainWindow class produced by uic and are able to define our methods, attributes an so on… Now it’s time to create our MainWindow.cpp. This file is also pretty simple but important.

#include "MainWindow.h"
MainWindow::MainWindow(QWidget *parent) {

By calling setupUi in the constructor, the GUI elements, which were added to the interface with the Designer, are painted the first time. You can comment the setupUi line out and see what’s happening. After all of these steps we’re finally finished… or let’s say nearly finished. If you have followed all these steps carefully you should call


to process the Makefile previously created by qmake. Note: If you use Qt/Aqua on MacOS X, the qmake will produce a something.xcodeproj file/directory instead of a Makefile. To build your you’ll need to call xcodebuild instead of make.

If you get some errors while building your app, you’re on your own. I’m done for now ;-). If you need more information on Qt then take a look at . But you’re also free to comment or ask to me ;-).

1 Comment