Qt3 C++ Example

First, you have to install the following packages by the following command
apt­get install qt3­designer qt3­assistant qt3­dev­tools qt3­doc libqt3­compat­headers g++ gcc 
make makedev

Note: If you install more than one qmake & uic then run the two commands given below for 
choosing correct one.

#update­alternatives ­­config qmake
#update­alternatives ­­config uic

In Ubuntu 8.04, it lies under Programming.

QT Designer will come up. It looks like this.

Promathesh Mandal Page 1

In the New/Open dialog box, click on Dialog, and hit OK.

Promathesh Mandal Page 2

QT Designer will create a new dialog canvas for you and call it Form1.

Promathesh Mandal Page 3

In the toolbar on the left, select the LineEdit tool and create an edit box on the
canvas. Its name will be lineEdit1. This is how we will take input from the user.

Promathesh Mandal Page 4

Now, select the ListBox tool in the toolbar on the left and create a list box on the
canvas. Its name will be listBox1. This is where we will store the input that the user
typed in.

Promathesh Mandal Page 5

Notice that there is already an item in the box. We don't need it. Let's get rid of it.
Double-click on your list box on the canvas. A dialog will pop up showing the
contents of the list box. Hit Delete Item to get rid of the item. Then click OK.

Promathesh Mandal Page 6

Now, select the PushButtontool in the toolbar on the left and create a button on the
canvas. Its name will be pushButton1.

Double-click on the button on the canvas. A dialog will come up where you can
change the text displayed on the button. Let's rename it to Clear. Then click OK.

Promathesh Mandal Page 7

Now, let's make the button do something. In QT terminology, our button will send a
signal which will be received by a slot. (Think of a slot as a method of an object that
will get called in response to an event, like user clicking the button.) Remember that
we want to clear the list box when the user clicks the button. There are already
built-in methods for this, so we'll take advantage of them. To connect a signal to a
slot we use the connect tool which is the red arrow on the green rectange in the top
toolbar on the right. It looks like this:

Here's the tricky part. After selecting the tool, click on your Clear button on the
canvas, and drag the mouse (without releasing) to your listbox on the canvas. Once
you are over the listbox (it will be highlighted), you will see a line from the button to
the listbox, and you can release the mouse. Another dialog box will pop up where
you can specify exactly which signal and slot you want to connect. Select
pushButton1 as the sender, clicked() as the signal, listBox1 as the receiver and
clear() as the slot. Then click OK. (The meaning of this is that we want to delete all
contents of the box when the user clicks the button.)

Promathesh Mandal Page 8

In the previous step, we used a built-in slot to accomplish something. Now, let's
create our own slot, which will take input from the edit box and add it to the list box
when the user presses enter after typing something. To create a new slot
(remember, it's just a method), select Slots from the Edit menu.

A dialog listing custom slots will show up. Initially, it will be empty. Let's add a new
slot by clicking New Function. Let's call this function AddEntry() (don't forget the
parentheses when typing in the new name) because it will add a new item to the list
box. Don't change any other settings and just click OK. (We'll write the code for this
method later on.)

Promathesh Mandal Page 9

Now that we have a slot, we can connect something to it. Recall that we want to
add an item to the list when the user types something in the edit box and presses
Enter. Select our good friend the connect tool and now connect the line edit to the
list box. The connection dialog will pop up again. This time select lineEdit1 as the
sender, returnPressed() as the signal, Form1 as the receiver, and our own
AddEntry() as the slot.

Promathesh Mandal Page 10

Finally, we are ready to write some code. We need to implement our AddEntry()
method. In the Project Overview window in the top right-hand corner, double-click
on the form1.ui.h file. (The second one, under your main file.) A window will pop up
showing the text of this file. This file is where you implement all your custom slots,
which will then be included during the compilation process. Notice that QT designer
already put in a header for our AddEntry() function... except that it's in C++! Don't
worry about that, however, we can still write Python code here right between the
braces, and it will work just fine. (Python UI compiler is smart enough to understand
the headers generated by QT designer.) The only problem is that QT designer wants
to auto-indent your code, but it expects semi-colons at the end of line, so naturally
Python confuses it and the indentation gets all screwed up. So alternatively, you
can just use your favorite editor (read: vi) to edit this file. (Or figure out how to turn
off auto-indent.)

Promathesh Mandal Page 11

void Form1::init()
{
}
void Form1::AddEntry()
{
listBox1->insertItem(tr(lineEdit1->text()));
lineEdit1->setText( tr( "" ) );
}

Almost done! Last thing we need to do is to turn off the autoDefault setting for our
delete button. (Setting a button as default means that it will get 'clicked' if the user
presses Enter on the dialog. For us it would not make sense to add text to the list
box on Enter, and then have the delete button automatically triggered, clearing our
list box.) The autoDefault property is True by default, so we need to set it to False in
the Property Editor window for the button. Click on the button to see the Property
window for it in the lower right-hand corner.

Promathesh Mandal Page 12

Finally we are done with QT designer. Save all your work.

Now write down a “main.cpp” file in your working directory.

#include <qapplication.h>
#include "form1.h"

int main( int argc, char ** argv )

{
QApplication a( argc, argv );
Form1 *w = new Form1;
w->show();
a.connect( &a, SIGNAL( lastWindowClosed() ), w, SLOT( quit() ) );
return a.exec();
}

Now open up a shell. We want to make a project file. Enter the following command
to make a project file.

#qmake –project

To create a make file run the following command

#qmake form1.pro

To compile the project just run the following command

#make.

Promathesh Mandal Page 13

It should look something like this:

If you type something into the line edit box and press Enter, it should get added to
the list box. If you hit the Clear button, the list box should be cleared. If it doesn't
behave as it should, go back and re-read the steps, you probably missed something.
:)

Promathesh Mandal Page 14