www.evl.uic.edu

QT GUI Programming

CS340 – Software Design© 2009 – Jason Leigh

University of Illinois at Chicago

www.evl.uic.edu

• History of qt• Why qt• Basic qt software and components• And library capabilities – e.g. ogl, networking• Simple qt example• Dialog example to teach about slots/signals

www.evl.uic.edu

About Qt• First became available in 1995.• Developed by Haavard Nord (Trolltechh’s CEO) and Eirik Chambe-Eng. Both

graduates with MS in CS from Norwegian Institute of Technology in Trondheim.• 1991 started writing the classes that eventually became Qt• 1992 they came up with the notion of singals and slots• 1993 they produced Qt’s 1st graphics kernel and could implement their own

widgets• Their wives supported them for 2 years while they tried to form their company.• ‘Q’ doesn’t mean anything. It was chosen because it looked good in an emacs

font. • ‘T’ was added to mean toolkit.• May 20, 1995 Qt 0.9 was released on sunsite.unc.edu.• 2005 – Qt 4 was released with 500 classes, 9000 functions. Much more than

just a GUI toolkit now.

www.evl.uic.edu

Why Qt?• There are many other GUI toolkits- wxWidgets, fltk, Zinc for example.• See: www.geocities.com/SiliconValley/Vista/7184/guitool.html• For this class:

– QT is more than just a widget set.– It has libraries for graphics, sound, networking, threading, I/O.– It has an integrated IDE (QT Creator) as well as a GUI designer (QT Designer).– It does not use callbacks as the mechanism for responding to GUI events (such as in fltk) – which is

somewhat out dated.– It does not require inheriting classes just to create UI elements as in wxWidgets or Microsoft

Foundation Class- or whatever it’s called today. This tends to result in the creation of far too many classes- e.g. a class for every button you want to instantiate.

– It’s free.– It’s crossplatform.– I can make an application “go” in a few minutes.– It uses the notion of signals and slots- which are similar to Java Observer/Observables that help keep

code decoupled so that they communicate primarily by sending events.• One thing to keep in mind is that every toolkit has its day in the sun and then it will be

replaced by something else.• So don’t necessarily focus on learning the nitty gritty of each function of the toolkit. Instead

think about how the design of the toolkit helps or hinders development problems.

www.evl.uic.edu

Basic QT Software and Components

• Download it from:– https://qt.nokia.com

• Download the Qt SDK which will include QT libraries, QT Creator IDE and QT development tools.

• Homework needs to be turned in and work under Linux though you may develop on your platform of choice.

www.evl.uic.edu

Hello Qt#include <QApplication>#include <QLabel>

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

// Qapplication manages application-wide resourcesQApplication myapp( argc, argv );

// A label I want to showQLabel* mylabel = new QLabel( "Hello, world", 0 );mylabel->resize( 120, 30 );mylabel->show();

// Pass control of application to Qt- which enters its own event loopreturn myapp.exec();

}

www.evl.uic.edu

• To compile, you need to first:• qmake –project• Which creates a project file.• Then you type:• Qmake hello.pro• Which generates a makefile• Run your app and it looks like this:

www.evl.uic.edu

You can also do this within Qt Creator

Create a new Empty Qt4 Project.Then add a C++ source file to it and type in your code.

www.evl.uic.edu

By the way…

• F1 provides you with context sensitive help.• Also Qlabel lets you use HTML:• Qlabel *label = new Qlabel(“<h2><i>Hello</i>

<font color=red>Qt!</font></h2>”);

www.evl.uic.edu

Signals, Slots and Meta-Objects

• Signal is a method that is emitted rather than executed when called.

• You declare prototypes of signals that might be emitted. I.e. you declare them in the signals section of your class, but you do not implement them.

• Slot is a member function that can be invoked as a result of signal emission.

• You can connect any number of signals to any number of slots.

• When a signal is emitted all the slots that are connected to the signal are called- though the order is not defined.

www.evl.uic.edu

MyClass.h#ifndef MYCLASS_H#define MYCLASS_H#include <QObject>

class MyClass : public QObject // Inheriting from QObject{

Q_OBJECT // Marks that this class needs a Meta Objectpublic:

MyClass (int value, QObject *parent = 0); // Pass the parent is just something you

// always do.int getValue();

public slots: // The setter member function is often a good candidate for a slot.void setValue(int value);

signals: // This class emits the valueChanged signal whenever its value has been changed

void valueChanged(int);private:

int m_value;};#endif // MYCLASS_H

Meta-object is an object describing the object. In Qt meta-objects are instances of the class QMetaObject and contain info about the class such as name, super classes, signals, slots, etc.

www.evl.uic.edu

MyClass.cpp#include "MyClass.h"MyClass :: MyClass(int val, QObject *parent) : QObject(parent)

// We pass parent pointer to base class's constructor.{

m_value = val;}void MyClass :: setValue(int val){

// If the value has not changed then do nothing- this prevents a loop from// potentially happening…

if (m_value == val) return;

// If value changed then emit the valueChanged signal.m_value = val;emit valueChanged(m_value);

}

www.evl.uic.edu

main.cpp#include <QApplication>#include "MyClass.h”

int main(int,char**){

MyClass *val1 = new MyClass(1);MyClass *val2 = new MyClass(2);MyClass *val3 = new MyClass(3);QObject::connect(val1, SIGNAL (valueChanged(int)),

val2, SLOT(setValue(int)));QObject::connect(val2, SIGNAL (valueChanged(int)),

val3, SLOT(setValue(int)));QObject::connect(val3, SIGNAL (valueChanged(int)),

val1, SLOT(setValue(int)));val1->setValue(99); // You can set any val and eventually all vals will

// get updated.}

1 32

99 399

99 9999

99 9999

www.evl.uic.edu

• Meta-objects like Q_OBJECT, and macros like SLOT, SIGNAL, public slot, etc.. requires translation into proper C++ code.

• This is done by Qt’s Meta Object Compiler, moc.• As part of the compilation process, Qmake runs moc to

generate the necessary code.

moc

www.evl.uic.edu

Simple Interaction Example with Connections, Signals and Slots

Make a button called Quit

Using connect, when the button is pressed, a clicked() signal from the button is sent to the quit() slot of the application.

www.evl.uic.edu

Widget Layout Example

Change in spinBox signals the slider to adjust its value and vice versa.

Create a layout manager. In this case one that handles horizontal layouts.It will know to automatically layout widgets that are added to it.

www.evl.uic.edu

• Layout managers are useful for dealing with situations where the window may get resized.

• Depending on the rules you set, the layout will behave accordingly.

www.evl.uic.edu

Creating a Dialog Box

• Goal is to create something like this.• Want to create its own C++ class with its own

signals and slots.

www.evl.uic.edu

Dialog Layout

Widget Hierarchy

www.evl.uic.edu

Diagram showing signals and slots

(lets compare this to source code)

Received by findClicked()

Slot

Received by enableFindButton()

Slot

Find Button Close ButtonlineEdit box

Emits Clicked()signal

Emits findNext() Signal for something else to receive… presumably your Search routine.

EmitsfindPrevious()signal

Emits textChangedsignal

Received by close() Slot

Emits clicked()signal

Depending on state of search backward

checkbox