Friday, January 6, 2012

A Simple Qt Application Example using Qt Creator

Well, you are programming with C++ and you want to expand your programs with GUI components, Windows, Sockets, Threads, Timers and Processes. Since the standard C++ library does not include classes for those stuff, any C++ program needs external packages to cope with real world problems.

It is almost always a problem to find external libraries that provide platform independency. Java solves this problem with its standard API library which includes classes for threading, file operations, GUI stuff and networking. Qt does nearly the same thing. So, if you want to develop a program using a single framework, Qt is a good choice.

Although programming with Qt make people feel like programming in Java or any other "comfortable" language, do not forget that it is still C++. That means, you can be more relax in memory management but you are still face to face with the machine with your compiled code.

Qt is similar to Java as it is platform independent, that is, you will compile your source code in Windows, Linux and Mac and you will see the same running beautiful program.

If you are familiar with the Qt and you are seeking a framework to use in your C++ project, do not think any more and use it! And stop to read the remaining part of this text. If you don't know how to use it, follow the simplest Qt example in the world... Then have a Qt book and read it. You will feel comfortable with it after a month or two if you have ever programmed with Java or C++.

Yes, let's create a project. Download the Qt Creator from http://qt.nokia.com/products/ and install it. I suppose that you know how to install programs in your operating system. After a big installation progress, run the Qt Creator. You will see a window similar to this:


Then follow the menu "File >> New File or Project" and click it. A new window will be opened:


Select "Qt Widget Project >> Qt Gui Application" using the window then press "Choose".


Give a name for your project.



Select "Desktop" and click next.


Leave the class information as is and click next. When you learn how to program with Qt, you will need more than more window elements but a single one enough for our simple example.


Finally, we have a project which is ready to run. Unfortunately, it does nothing except showing an empty window. See your running empty form by typing CTRL + R key combination or click the menu "Build >> Run".


The panel on the left side shows our project configuration, .h (header), .cpp (C++ source) and gui (forms) files. You can simply activate by clicking on them. Lets click the "Forms >> mainwindow.ui" on the left side panel. 

Now, it seems our empty form is ready for designing. The left side panel now shows other GUI components which can be dragged and dropped on the empty form. Now find the Line Edit component under the "Input Widgets" group and drag & drop to the empty form. You can change its dimensions, name and other properties using the right side panels. But, leave it as is and find the push button component and create one on the form. 

We have now a filled form with a single textbox and a button. Since there is no action defined, when you run your program with the CTRL + R combination, you will see your form but push button does nothing when you click on it. Lets write something on the "text edit" when the push button is clicked. For those, we will add a code to mainwindow.h file. Select the mainwindow.h file and edit it like the following screenshot.


We added the code 

private slots:
    void pushbutton1_click();



in file mainwindow.h so we are able to define an action for the click event of the push button. Not that pushbutton1_click() is a function name which can be also selected as anything else. In Qt, we are controlling the user actions using a signaling mechanism. Every signal sender in Qt, defines SIGNAL 's. A signal catcher must define a SLOT for this. We want our code to catch the "clicking" signals from the push putton, so we defined a slot.

Now, select the mainwindow.cpp, which is the source code of our project and implement the function "pushbutton1_click()" which is defined in the corresponding header file.



void MainWindow::pushbutton1_click(){
    this->ui->lineEdit->setText("Qt Signals are easy");
}

We implemented the pushbutton1_click() in cpp file, which are defined in header file before. Now, we are quite ready because our program will put a "Qt Signals are easy" message on the this->ui->lineEdit object. Note that, lineEdit is the default name for this object and it is changeable by the user. Finally, we have to "link" the button's click action to MainWindow::pushbutton1_click() method. For that, edit the 



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

to 

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->connect(this->ui->pushButton, SIGNAL(clicked()), this, SLOT(pushbutton1_click()));
}

So we have just connected the pushbutton's "clicked" signal to our pushbutton1_click() slot. That's all. Run the program.



After the compiling and running progress, click the push button and see the message on the text box.


SIGNAL  and SLOT mechanism is the most important thing in the Qt world to learn! Follow these steps to learn much:


  • Put a progress bar on the form. When we clicked to pushbutton, let the progressbar to show value of 50%
  • Create another pushbutton. When somebody clicks to pushbutton, show a message box containing a "Hello world!" text
  • Create a timer. Set the interval of timer to 1000 milliseconds (1 second). In each time the timer activated, show how many times the timer activated on the text box.
Read more books and tutorials and code something is not really meaningful. Qt is really easy to learn, especially, if you learned the SIGNAL & SLOT mechanism.

Good luck in your Qt life!




15 comments:

  1. thank you i found this very helpful!

    ReplyDelete
  2. thank u. That was what i need.

    ReplyDelete
  3. very nice ,step by step guidelines are very useful to understand.

    thank u!

    ReplyDelete
  4. Thank u very much :)
    This is my first stepping stone :)

    ReplyDelete
  5. hi..
    its very useful..
    thanq..

    ReplyDelete
  6. hey :) need some help here ! how i create a message box ?

    ReplyDelete
  7. qtcreator_ctrlc_stub.exe has stpped working error :(....any help...plzzz

    ReplyDelete

Thanks