Using Qt for GUI development Brad Whitlock March 2002

Outline GUI toolkits GUI toolkits What is Qt? What is Qt? Qt Features Qt Features Signals and slots Signals and slots Examples Examples –Creating a custom widget –Networking

What makes a good GUI Toolkit? Implementation language Implementation language Easy to program Easy to program –Consistent interface –Little code for large results Excellent documentation Excellent documentation Availability of tools for code generation Availability of tools for code generation Portability Portability Easy to extend Easy to extend

Some GUI Toolkits Qt Qt –Written in C++ –Qt programs are portable –Object oriented. Allows your window to be encapsulated into a real C++ class –Easy to hand code GTK GTK –Written in C –GTK programs are mostly limited to UNIX though GTK does exist on other platforms –Not object oriented Motif Motif –Written in C –Motif programs are limited to UNIX –Not object oriented –Difficult to hand code MFC MFC –MFC programs are limited to Windows

Qt Background Created and maintained by Trolltech since 1995 Created and maintained by Trolltech since 1995 Now on version Now on version Foundation of KDE a popular Linux desktop environment Foundation of KDE a popular Linux desktop environment

. It lets application developers target all major operating systems with a single application source code. Qt is a C++ toolkit for cross-platform GUI and application development. It lets application developers target all major operating systems with a single application source code. Supported platforms Supported platforms –UNIX –MS Windows 9x/NT/2000/XP –Mac OS X –Embedded (PDA’s) What is Qt?

Features Fully object-oriented Fully object-oriented Consistent interfaces Consistent interfaces Rich set of widgets (controls) Rich set of widgets (controls) –Have native look and feel –Drag and drop –Customizable appearance Utility classes Utility classes OpenGL support OpenGL support Network support Network support Database support Database support Plugin support Plugin support Unicode/Internationalization support Unicode/Internationalization support GUI builder GUI builder

Utility classes This is a sample of the dozens of utility classes provided by Qt. This is a sample of the dozens of utility classes provided by Qt.Containers –QString – String class –QList – Template List class –QMap – Template map class Program –QThread – Platform independent threads –QProcess – Launches processes and communicates with them XML –QXmlSimpleReader – Simple XML reader

Widgets A widget is a user interface component such as a button or a scroll-bar A widget is a user interface component such as a button or a scroll-bar Reusable! Reusable! Well defined interface Well defined interface Uses C++ inheritance Uses C++ inheritance All widgets derive from a common base All widgets derive from a common base Widgets may contain other widgets Widgets may contain other widgets Custom widgets can be created from existing widgets or they can be created from scratch Custom widgets can be created from existing widgets or they can be created from scratch

Qt Built-in Widgets

Qt Built-in dialogs File dialog File dialog Font dialog Font dialog Color dialog Color dialog Printer dialog Printer dialog

OpenGL Support QGLWidget QGLWidget Subclass of QWidget so it behaves like any other QWidget Subclass of QWidget so it behaves like any other QWidget Gives you access to the OpenGL context Gives you access to the OpenGL context Can make raw OpenGL function calls Can make raw OpenGL function calls

Network support Remote files accessed using the FTP and HTTP protocols Remote files accessed using the FTP and HTTP protocols New protocols can be implemented by subclassing QNetworkProtocol New protocols can be implemented by subclassing QNetworkProtocol Inter-process communication and socket- based TCP and UDP networking are also fully supported Inter-process communication and socket- based TCP and UDP networking are also fully supported QSocket and QServerSocket provide socket communication QSocket and QServerSocket provide socket communication

Database support Cross platform interface for accessing SQL databases Cross platform interface for accessing SQL databases Supported Databases Supported Databases –Oracle –Microsoft SQL Server –Sybase Adaptive Server –PostgreSQL –MySQL –ODBC Any Qt widget can be made data aware Any Qt widget can be made data aware SQL module fully integrated into Qt designer SQL module fully integrated into Qt designer

Plugin support Style plugins Style plugins Image readers/writers Image readers/writers Widget plugins Widget plugins Netscape plugins Netscape plugins

Unicode/Internationalization Programmer can freely mix any language supported by Unicode Programmer can freely mix any language supported by Unicode Includes tools to support application translation Includes tools to support application translation –Qt Linguist Can identify strings that need translation in the source code using tr() Can identify strings that need translation in the source code using tr() –Button->setText(tr(“Save”));

Qt Designer Written using Qt so it is available on all platforms where Qt is available Written using Qt so it is available on all platforms where Qt is available Used to speed design of Qt applications Used to speed design of Qt applications Supports all Qt widgets and can be used to incorporate custom widgets Supports all Qt widgets and can be used to incorporate custom widgets

Hello World! #include #include int main(int argc, char *argv[]) { // Create an application object // Create an application object QApplication *app = new QApplication(argc, argv); QApplication *app = new QApplication(argc, argv); // Create a label // Create a label QLabel *label = new QLabel(“Hello World!”, 0, “label”); QLabel *label = new QLabel(“Hello World!”, 0, “label”); app->setMainWidget(label); app->setMainWidget(label); // Show the label and enter the main loop // Show the label and enter the main loop label->show(); label->show(); int ret = app->exec(); int ret = app->exec(); // Clean up omitted // Clean up omitted return ret; return ret;}QApplication Manages widget style, colors, global preferences Manages widget style, colors, global preferences Operates main event loop and dispatches events to other objects Operates main event loop and dispatches events to other objects

Using Layouts Layouts should be used to manage widget position and resize behavior Layouts should be used to manage widget position and resize behavior Layout types Layout types –Horizontal –Vertical –Grid Layouts can be nested Layouts can be nested User can control layout spacing, stretch, and strut User can control layout spacing, stretch, and strut

Signals and Slots Facilitates inter-object communication Facilitates inter-object communication Replaces callback mechanism found in older toolkits Replaces callback mechanism found in older toolkits Type safe since arguments for signal must match arguments slot Type safe since arguments for signal must match arguments slot Objects don’t have to care about other objects. Objects don’t have to care about other objects. Can be overloaded or re-implemented in subclasses Can be overloaded or re-implemented in subclasses Signals can be connected to multiple slots or other signals Signals can be connected to multiple slots or other signals

Signals and Slots 2 An object emits a signal with a certain prototype An object emits a signal with a certain prototype Other objects may be connected to that object’s signal Other objects may be connected to that object’s signal –connect(button, SIGNAL(clicked()), qApp, SLOT(quit())); The slot functions for all the connected objects are called The slot functions for all the connected objects are called

Signals and Slots 3 Example class BankAccount : public QObject { Q_OBJECT Q_OBJECT Public: BankAccount() { curBalance = 0; } BankAccount() { curBalance = 0; } int balance() const { return curBalance; } int balance() const { return curBalance; } signals: void balanceChanged(int newBalance); void balanceChanged(int newBalance); public slots: void setBalance(int newBalance) { void setBalance(int newBalance) { if(curBalance != newBalance) { if(curBalance != newBalance) { curBalance = newBalance; curBalance = newBalance; emit balanceChanged(curBalance); emit balanceChanged(curBalance); } } private: int curBalance; int curBalance;};Usage // Create 2 accounts that have zero balance BankAccount x, y; // Connect account x to account y so that // whenever it gets money, account y gets // the same amount. connect(&x, SIGNAL(balanceChanged(int)), &y, SLOT(setBalance(int))); &y, SLOT(setBalance(int))); // Set the balance for account x x.setBalance(2450); // Account y also now has $2450

Building classes that have signals and slots Class definition must contain Q_OBJECT macro Class definition must contain Q_OBJECT macro Slots are defined with slots “keyword” Slots are defined with slots “keyword” –Can be declared public, protected, private Signals are declared with signals “keyword” Signals are declared with signals “keyword” –Qt provides the body for a signal function MOC preprocessor MOC preprocessor –Reads class header file and creates supplementary C++ code to support signals/slots –All header files for classes defining signals/slots need to use MOC –Easily incorporated into Make rules –Transparent to user

Creating a custom widget Derive from the base class Derive from the base class –Provide all relevant behavior by overriding or adding member functions Derive from an existing class Derive from an existing class –Customize behavior by overriding member functions

Simple custom widget #ifndef SIMPLE_H #define SIMPLE_H #include #include class Simple : public QWidget { Q_OBJECT Q_OBJECT public: Simple(QWidget *parent, const char *name) : QWidget(parent, name), shape(4) Simple(QWidget *parent, const char *name) : QWidget(parent, name), shape(4) { angle = 0.; angle = 0.; timer = new QTimer(this,"timer"); timer = new QTimer(this,"timer"); connect(timer, SIGNAL(timeout()), connect(timer, SIGNAL(timeout()), this, SLOT(rotateAngle())); this, SLOT(rotateAngle())); shape.setPoint(0, QPoint(-50, -50)); shape.setPoint(0, QPoint(-50, -50)); shape.setPoint(1, QPoint(50, -50)); shape.setPoint(1, QPoint(50, -50)); shape.setPoint(2, QPoint(50, 50)); shape.setPoint(2, QPoint(50, 50)); shape.setPoint(3, QPoint(-50, 50)); shape.setPoint(3, QPoint(-50, 50)); setMinimumSize(200,200); setMinimumSize(200,200); } virtual ~Simple() { timer->stop(); }; virtual ~Simple() { timer->stop(); }; virtual QSize sizeHint() { return QSize(200,200); }; virtual QSize sizeHint() { return QSize(200,200); }; public slots: virtual void show() { timer->start(50); QWidget::show(); } virtual void show() { timer->start(50); QWidget::show(); } virtual void hide() { timer->stop(); QWidget::hide(); } virtual void hide() { timer->stop(); QWidget::hide(); } protected: virtual void paintEvent(QPaintEvent *pe) { virtual void paintEvent(QPaintEvent *pe) { QPainter paint(this); QPainter paint(this); paint.setBrush(QColor(0,0,255)); paint.setBrush(QColor(0,0,255)); QWMatrix m1; m1.rotate(-angle); QWMatrix m1; m1.rotate(-angle); QWMatrix m2; m2.translate(width()/2,height()/2); QWMatrix m2; m2.translate(width()/2,height()/2); QWMatrix m3 = m1*m2; QWMatrix m3 = m1*m2; paint.setWorldMatrix(m3, TRUE); paint.setWorldMatrix(m3, TRUE); paint.drawPolygon(shape); paint.drawPolygon(shape); } private slots: void rotateAngle() { void rotateAngle() { angle += 3.; angle += 3.; if(angle >= 360.) angle -= 360.; if(angle >= 360.) angle -= 360.; update(); update(); } private: QTimer *timer; QTimer *timer; double angle; double angle; QPointArray shape; QPointArray shape;};#endif

Simple custom widget 2 #include #include int main(int argc, char *argv[]) { QApplication *app = new QApplication(argc, argv); QApplication *app = new QApplication(argc, argv); QVBox *top = new QVBox; QVBox *top = new QVBox; app->setMainWidget(top); app->setMainWidget(top); Simple *s = new Simple(top, "simple"); Simple *s = new Simple(top, "simple"); QPushButton *btn = new QPushButton("Quit", top, "btn"); QPushButton *btn = new QPushButton("Quit", top, "btn"); app->connect(btn, SIGNAL(clicked()), app->connect(btn, SIGNAL(clicked()), qApp, SLOT(quit())); qApp, SLOT(quit())); top->show(); top->show(); int ret = app->exec(); int ret = app->exec(); delete top; delete top; delete app; delete app; return ret; return ret;}

Simple networking example Class MessagePrinter : public QObject { Q_OBJECT Q_OBJECT Public: MessagePrinter(const QString &host, int port) : QObject() MessagePrinter(const QString &host, int port) : QObject() { // Create a new socket and connect to a port. // Create a new socket and connect to a port. S = new QSocket(this); S = new QSocket(this); connect(S, SIGNAL(readyRead()), connect(S, SIGNAL(readyRead()), this, SLOT(readMessage())); this, SLOT(readMessage())); S->connectToHost(host, port); S->connectToHost(host, port); } virtual ~MessagePrinter() { S->close(); }; virtual ~MessagePrinter() { S->close(); }; Private slots: void readMessage() void readMessage() { if(S->canReadLine()) if(S->canReadLine()) { qDebug(“MSG=%s”, S->readLine().latin1()); qDebug(“MSG=%s”, S->readLine().latin1()); S->close(); S->close(); } } Private: QSocket *S; QSocket *S;};

VisIt Developed here at LLNL Developed here at LLNL Uses Qt 2.3 or greater Uses Qt 2.3 or greater Hand coded windows Hand coded windows Custom widgets Custom widgets OpenGL OpenGL Uses some Qt networking code Uses some Qt networking code

Qt licensing Qt Free Edition Qt Free Edition –For UNIX/X11 –Version 2.2 and later –Open source license QPL and GPL –May be freely copied and distributed –Binaries may be redistributed Users creating closed source projects must purchase a development license from Trolltech Users creating closed source projects must purchase a development license from Trolltech

Where to find Qt On the Web On the Web – On LC computers On LC computers –/usr/gapps/visit/qt/current/ /