Computer Course – Qt

Step 1: Ensure your Desktop can use the Qt Library

To use the Qt library at any CSIS servers, you need to add the following to ".bashrc".

export QTDIR=/usr/local/qt-3.0.5-gcc-3.2
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:${QTDIR}/lib

Step 2: “Hello World” program

  1. Download the course materials at
  2. Extract the files and go the directory “helloworld”.

// main.cpp
#include "mywidget.h"
#include <qapplication.h>
// There has to be exactly one QApplication object in every application that uses Qt.
#include <qvbox.h>
#include <qpushbutton.h>
int main(int argc, char** argv)
{
QApplication app(argc, argv);
QVBox box;
box.resize(100, 80);
// setting the size of “box”. In this case, the box is set to 100 pixels wide, 80 pixels // high (plus the window system frame)
box.setMaximumSize(100, 80);
MyWidget text(&box);
//Make an object of type MyWidget with its parent is widget box
QPushButton button("Display", &box);
// QPushButton is a classical GUI push button that the user can press and release It // has 2 parameters. Here, we already have created a button by just one line!
text.resize(100, 50);
text.setMinimumSize(100, 50);
button.resize(100, 30);
button.setMinimumSize(100, 30);
QObject::connect(&button, SIGNAL(clicked()), &text, SLOT(displayText()));
app.setMainWidget(&box);
box.show();
// A widget is never visible when you create it. You must call show() to make it visible.
return app.exec();
// This is where the main() passes the control to Qt. exec() will return when the // application exits. In exec(), Qt handle the user and system event and pass these to // the corresponding widget.
}
// mywidget.cpp
#include "mywidget.h"
MyWidget::MyWidget(QWidget* parent, const char* name)
:QWidget(parent, name)
{
displayed = false;
}
void MyWidget::displayText()
{
if (displayed == true)
{
erase(); // to clear what is on the MyWidget
displayed = false;
}
else
{
drawText(16, 20, "Hello World!");
// Draws the string “Hello World” at position (16, 20).
// The coordinate 20 is the base line position of the text. The text is drawn using the // default font and the default foreground color.
displayed = true;
}
}

Structure of our program:

  1. Main Program
    QVBox box is the main widget of Qapplication app, which QpushButton button and MyWidget text (inherit from QWidget).
  2. MyWidget

QObject::connect(&button, SIGNAL(clicked()), &text, SLOT(displaytText());

The above statement demonstrates an important concept of Qt – signal and slot. The clicking of the button is connected with function MyWidget::display().

Remarks: bool displayed shows whether the label “Hello World!” is shown.

Explanation:

  1. setMaximumSize() and setMinimumSize()

These two functions are used to control the minimum and maximum size of this box. If you don’t want people to change the size of the box, you can set the two parameters in setMaximumSize() and setMinimumSize() the same as those in box.resize(100,80), ie box.setMaximumSize(100,80) and box.setMinimumSize(100,80)

  1. QPushButton button(“Display”, &box)

This is used to create a button.

The 1st parameter is for the words to be displayed on the” button”. In this case is the word “Display”. You can add “&” in any position inside the string “Display”,

for example, “D&isplay”, in this way, a hotkey for this button is created!!!

The hotkey is ”Alt+i”.

The 2nd parameter is for specify the parent window which the button belongs to.

In this case the parent window is box. If there is no parent window, you can just use 0 instead of &box.

  1. Compilation:

make
./helloworld

Remarks:

In fact, to compile a C++ application you need to create a Makefile. The easiest way to create a makefile for Qt is to use the qmake command supplied with Qt. If you've saved main.cpp in its own directory, all you have to do is:

qmake -project
qmake

The first command tells qmake to create a .pro (project) file. The second command tells it to create a (platform-specific) makefile based on the project file. You should now be able to type make (or nmake if you're using Visual Studio) and then run your first Qt application!

Step 3: Painter

  1. Have a look at the final program
    Enter the directory “draw_final”which contain the final program.

make
./painter

  1. Add “Rectangle” button
  2. Add a QPushButton rect with the following code:

// DrawWindow::DrawWindow()
line = new QPushButton("Line", this);
st_line = new QPushButton("ST Line", this);
rect = new QPushButton("Rectangle", this);
……………
h_layout->addWidget(line);
h_layout->addWidget(st_line);
h_layout->addWidget(rect);
  1. Compile the program. A new button is added but does not function when you click it.
  1. Connect the mouse click action to the function
  2. In order to detect the action of clicking this new button, we need to connect this signal QpushButton::click() to the appropriate function. In this case we would connect it to the member function ChangeToRect() , in which you can add your own actions.
    HINT: connect( button_pointer, SIGNAL(action), this , SLOT(ChangeToRect()))
  3. Add the code below to test the button.

QMessageBox::information( this, "Painter", "Rectangle function.\n");
  1. Compile and test the program. Now the “Rectangle” button is functioning. Remove the code above and change the curr_mode to the appropriate state.
  1. Draw rectangle
  2. In order to make drawing possible, we need to modify two functions mouseReleaseEvent() and mouseMoveEvent().
    Remarks:
    As their name implies, mouseMoveEvent() is called when we move the mouse while mouseReleaseEvent() is called when we release the mouse button.
  3. In these two functions, we need to add the case when the curr_mode is equal to “RECTANGLE”, a rectangle need to be drawn. Since in the function mousePressEvent(), we have already recorded the position of the mouse in the variable “last” when the mouse is pressed.

// void DrawWindow::mouseReleaseEvent(QMouseEvent* event)
if (curr_mode == ST_LINE)
{
painter.drawLine(last, currentPos); // draw in the drawing area
bufferPainter.drawLine(last, currentPos); // draw in the buffer
}
else if (curr_mode == RECTANGLE)
{
painter.drawRect(QRect(topLeft, bottomRight));
bufferPainter.drawRect(QRect(topLeft, bottomRight));
}
// void DrawWindow::mouseMoveEvent(QMouseEvent* event)
if (curr_mode == ST_LINE)
painter.drawLine(last, currentPos);
else if (curr_mode == RECTANGLE)
painter.drawRect(QRect(topLeft, bottomRight));
  1. PRACTICE: Add the function of ellipse with the function
    void QPainter::DrawEllipse( const QRectr )
  1. Add the “Color” button and color dialog
  2. Adding dialogs like file, color or font dialog is easy since they are already built in. In this program, we would like to obtain a QColor value from the user and change the variable DrawWindow::pColor. This is done with the class QColorDialog.

Void DrawWindow::changeColor()
{
QColor temp = QColorDialog::getColor();
if (temp.isValid()) pColor = temp;
painter.setPen(pColor);
painter.setBrush(pColor);
bufferPainter.setPen(pColor);
bufferPainter.setBrush(pColor);
}

Remarks:

  1. QBrush class defines the fill pattern of shapes drawn by a Qpainter.
  2. QBrush class defines the fill pattern of shapes drawn by a Qpainter.

Reference:
Programming with Qt (2nd Edition) by Matthias Kalle Dalheimer
QT 2 Programming for Linux and Windows 2000 by Patrick Ward

Electronic Source: