C++ Programming with Qt 3 - Eötvös Loránd...

21
C++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++ Programming with Qt 3 Introduction ........................................................................................................................................................3 Developing Applications using Qt Classes ...........................................................................................................3 “Hello Qt!” application ..................................................................................................................................3 Classes .....................................................................................................................................................3 Code .........................................................................................................................................................4 Compiling & Running ...............................................................................................................................4 “Quit” application (Event handling) ................................................................................................................5 Classes .....................................................................................................................................................5 Code .........................................................................................................................................................5 Compiling & Running ...............................................................................................................................6 “Numbers” application (Synchronization) .......................................................................................................6 Task .........................................................................................................................................................6 Arrangement .............................................................................................................................................6 Modularization..........................................................................................................................................7 Classes .....................................................................................................................................................7 Definition of the Form class.......................................................................................................................7 Implementation of the Form class ..............................................................................................................8 The application’s main program ................................................................................................................8 Creating custom slots ................................................................................................................................8 Definition of Custom Slot: sayAsWord(int)................................................................................................9 Implementation of Custom Slot: sayAsWord(int) ..................................................................................... 10 The application’s project file ................................................................................................................... 10 Compiling & Running ............................................................................................................................. 11 Memory management, parent-child relationship ....................................................................................... 11 „Layout” application (Arrangement) ............................................................................................................. 12 Layout Manager...................................................................................................................................... 12 Laying Out of the Form........................................................................................................................... 12 Memory Managament, Parent-Children relationship................................................................................. 12 The Form Class using Layout Manager’s Classes .................................................................................... 13 Form Class’s implementation with Layout Classes ................................................................................... 13 The application’s main program .............................................................................................................. 14 The Application’s Project File ................................................................................................................. 14 Compiling & Running ............................................................................................................................. 14 Creating Application Using Qt Designer ............................................................................................................ 15 The .ui file and the generated code ................................................................................................................ 15 Extending the functionality of the form ......................................................................................................... 16 The “subclassing” approach .................................................................................................................... 16 The “ui.h” extension approach................................................................................................................. 16 Construction and destruction ................................................................................................................... 17 „Words” application (Custom slot) ............................................................................................................... 17 Creating the “Words” project .................................................................................................................. 17 Creating the Main Window (Form) .......................................................................................................... 17 The Form’s Design.................................................................................................................................. 18 The Form’s Arrangement (Layout) .......................................................................................................... 18 Creating the main program (main.cpp)..................................................................................................... 18 Inserting Variable into the Project ............................................................................................................ 19 initWords() function ................................................................................................................................ 19 init() function .......................................................................................................................................... 20

Transcript of C++ Programming with Qt 3 - Eötvös Loránd...

Page 1: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 1

C++ Programming with Qt 3Introduction ........................................................................................................................................................3 Developing Applications using Qt Classes ...........................................................................................................3

“Hello Qt!” application ..................................................................................................................................3 Classes .....................................................................................................................................................3 Code.........................................................................................................................................................4 Compiling & Running ...............................................................................................................................4

“Quit” application (Event handling)................................................................................................................5 Classes .....................................................................................................................................................5 Code.........................................................................................................................................................5 Compiling & Running ...............................................................................................................................6

“Numbers” application (Synchronization).......................................................................................................6 Task .........................................................................................................................................................6 Arrangement .............................................................................................................................................6 Modularization..........................................................................................................................................7 Classes .....................................................................................................................................................7 Definition of the Form class.......................................................................................................................7 Implementation of the Form class ..............................................................................................................8 The application’s main program ................................................................................................................8 Creating custom slots ................................................................................................................................8 Definition of Custom Slot: sayAsWord(int)................................................................................................9 Implementation of Custom Slot: sayAsWord(int) .....................................................................................10 The application’s project file ...................................................................................................................10 Compiling & Running .............................................................................................................................11 Memory management, parent-child relationship .......................................................................................11

„Layout” application (Arrangement).............................................................................................................12 Layout Manager......................................................................................................................................12 Laying Out of the Form...........................................................................................................................12 Memory Managament, Parent-Children relationship.................................................................................12 The Form Class using Layout Manager’s Classes ....................................................................................13 Form Class’s implementation with Layout Classes...................................................................................13 The application’s main program ..............................................................................................................14 The Application’s Project File .................................................................................................................14 Compiling & Running .............................................................................................................................14

Creating Application Using Qt Designer ............................................................................................................15 The .ui file and the generated code................................................................................................................15 Extending the functionality of the form.........................................................................................................16

The “subclassing” approach ....................................................................................................................16 The “ui.h” extension approach.................................................................................................................16 Construction and destruction ...................................................................................................................17

„Words” application (Custom slot) ...............................................................................................................17 Creating the “Words” project ..................................................................................................................17 Creating the Main Window (Form)..........................................................................................................17 The Form’s Design..................................................................................................................................18 The Form’s Arrangement (Layout) ..........................................................................................................18 Creating the main program (main.cpp).....................................................................................................18 Inserting Variable into the Project............................................................................................................19 initWords() function................................................................................................................................19 init() function..........................................................................................................................................20

Page 2: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 2

“Connecting” the widgets ........................................................................................................................20 Creating Custom Slot: sayAsWord(int)....................................................................................................20 The sayAsWord(int) function’s implementcation......................................................................................21 The application’s project file (words.pro).................................................................................................21 Compiling & Running .............................................................................................................................21

Workshop ....................................................................................................................................................21 Quiz........................................................................................................................................................21 Exercises ................................................................................................................................................21

Workbook’s programs can be downloaded from the people.inf.elte.hu/nacsa/qt/lessons/ site.

Examples are created on Qt 3.3.1.

Prepared by: Rozália Szabó-Nacsa email: [email protected] home page: people.inf.elte.hu/nacsa

Documentations: Jasmin Blanchette, Mark Summerfield: C++ GUI Programming with Qt 3 Daniel Solin: Qt Programming www.trolltech.com: Customizing and Integrating Qt Designer, Quick Start

Budapest, April 2005.

Page 3: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 3

Introduction Qt is a complete C++ application development framework. It includes a class library, tools for cross-platform development and internationalization.

There are a few different so-called toolkits you can use to create graphical program in Linux, however Qt is one of the more popular ones. Because of Qt’s Object-Oriented hierarchy, its good structure, its well-developed widgets, and the fact that it includes many other functions than just for creating graphical interfaces, makes it a good choice for beginners as well as experts. Qt is also the toolkit used by KDE desktop environment. Qt is that it available for UNIX/Linux, but also for Microsoft Windows program as well.

Although Qt is made as a multiplatform toolkit, because of its powerful API, many organizations use Qt for single-platform development. For example Adobe Photoshop Album is an example of Windows application written in Qt.

The Qt toolkit first became publicly available in May 1995. Qt 3.0 was released in 2001, which is available on Windows, Unix, Linux, Embedded Linux, and Mac OS X. The Qt API and tools are consistent across all supported platforms, enabling platform independent application development. Qt developers only have to learn one API to write apps that run almost anywhere. Qt applications run natively, compiled from the same source code, on all supported platforms.

Qt has got a very nice online documentation. Qt’s reference documentation is an essential tool for any Qt developer. It covers every class and function in Qt. Qt 3.2 includes over 400 public classes and over 6000 functions.

Developing Applications using Qt Classes The Qt toolkit is a C++ class library and a set of tools for building multiplatform GUI programs using a “write once, compile anywhere” approach.

Qt tools can be found on : www.trolltech.com site.

“Hello Qt!” application

Task: Make a “Hello Qt” application using Qt classes.

The “Hello Qt” application on Linux

Classes

Page 4: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 4

Code

hello.cpp

# include <qapplication.h> # include <qlabel.h> int main(int argc,char **argv) { QApplication app(argc,argv); QLabel *label = new QLabel("Hello Qt!",0); app.setMainWidget(label); label->show(); return app.exec();

}

First we inserted the definition of used classes. Then we created a QApplication object (app), which is responsible for managing the application’s resources. Having defiined the QApplication object we pass two arguments: argc, argv, because QApplication supports command-line arguments of its own. Then we created a QLabel object to display “Hello Qt!” and we announced this label as the application’s main widget (setMainWidget()). The zero value as the second parameter of the QLabel constructor says, that this widget has no parents. Having prepared the main widget we let show it on the screen (show()). By default created widgets are not shown on the screen in order to avoid flickering. The last statement passes control of the application on to Qt. The program enters kind of stand-by mode, waiting for user actions to which the program can respond. Having closed the main window the main widget will be deleted from the heap and at the same time it disappears from the screen.

You are allowed to use HTML-style text in the QLabel constructor, as well. QLabel *label = new QLabel("<h1><i>Hello</i><font color=red> Qt!</font></h1>",0);

Compiling & Running We now have a main.cpp containing the main() function. Le us learn to compile, link and run the application. The qmake tool provided with Qt can create Makefile appropriate to our platform based on .pro project file. Qt Designer produces .ui files which are used to generate .h and .cpp files for the compiler to compile. The .ui files are processed by uic.

Please do the next steps in order to compile & run the application:

1. Make the hello directory. 2. Enter the above code using your favorite text editor. Save it as hello.cpp in the hello directory. 3. Be in hello directory. 4. Generate the platform independent project file (hello.pro) with the next command: qmake -project 5. Generate the platform dependent make1 file wih the next command: qmake -o Makefile hello.pro. 6. Build the program: nmake (make in Linux) 7. Run the program. (Linux: ./hello; Windows: hello)

This program can be downloaded from the people.inf.elte.hu/nacsa/qt/lessons/hello site.

1: Makefile is a script file for compiling, linking and building project’s elements.

Page 5: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 5

“Quit” application (Event handling)

In this example we illustrate, how to respond to a user action. This application consist of only one button. This button will be the main widget of the application. Clicking on this button (user action) the program closes (responding on an action). Closing the window the main window will be deleted automatically from the memory and from the screen, too. This example is similar to the previous one, except that we are using a button instead of text.

The “Quit” application

Classes

Code

quit.pro

# include <qapplication.h> # include <qpushbutton.h> int main(int argc, char *argv[]) { QApplication app(argc,argv); QPushButton *button = new QPushButton("Quit",0); QObject::connect(button,SIGNAL(clicked()),&app,SLOT(quit())); app.setMainWidget(button); button->show(); return app.exec(); }

Qt widgets are visual graphical GUI elements (control elements). They can send a signal (message) when their state have changed or when a user action occurred. We can connect these signals with special functions (slots) in order to respond on a signal. After we have connected a signal and a slot, the slot will be automatically performed whenever this signal is emitted. We can connect more slots to the same signal. In this case the order of performance is undefined.

In our example we have connected the button’s clicked() signal with the app’s quit() slot. Please observe that we referred on the button and app via pointers.

Page 6: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 6

Compiling & Running Please do the next steps in order to compile & run the application:

1. Make the quit directory. 2. Enter the above code using any text editor. Save it as quit.cpp in the quit directory. 3. Be in quit directory. 4. Generate the platform independent project file (quit.pro) with the next command: qmake -project 5. Generate the platform dependent make file with the next command: qmake -o Makefile quit.pro. 6. Build the program: nmake (make in Linux) 7. Run the program. (Linux: ./quit; Windows: quit)

This program can be downloaded from the people.inf.elte.hu/nacsa/qt/lessons/quit site.

“Numbers” application (Synchronization)

This task illustrates how to create own main window and how to synchronize communication between widgets (control elements).

Task Make an application which has got a Slider, a SpinBox and a TextBox. Whenever you change the value one of the widgets the remainder widgets must automatically change and show this actual value.

The “Numbers” application

First we create the Form class which represents the main window. Then we create a form object in the main program (main), and we announce it to be the application’s main widget (setMainWidget()).We let to show this widget on the screen (show()) and pass the control on to Qt to start the message loop waiting on a user action (exec()). The main window inherits the QVBox2 widget. We put on the main window three widgets: a QSpinBox (spinBox), a QSlider(slider) and a QLineEdit (lineEdit) widget.

Arrangement

2 HBox: Stores elements horizontally. VBox: Stores elements vertically

Page 7: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 7

Modularization Classes

Definition of the Form class

form.h

# ifndef FORM_H # define FORM_H # include <qwidget.h> # include <qvbox.h> class QHBox; class QSpinBox; class QSlider; class QLineEdit; class Form: public QVBox { public: Form(QWidget *parent=0, const char *name=0); private: QHBox *hbox; QSpinBox *spinBox; QSlider *slider; QLineEdit *lineEdit; }; # endif

Page 8: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 8

Implementation of the Form class

form.cpp

# include <qhbox.h> # include <qspinbox.h> # include <qslider.h> # include <qlineedit.h> # include "form.h" Form::Form(QWidget *parent, const char *name) :QVBox(parent,name){ setMargin(6); setSpacing(6); hbox = new QHBox(this); lineEdit = new QLineEdit(this); hbox->setMargin(6); hbox->setSpacing(6); spinBox = new QSpinBox(hbox); slider = new QSlider(Qt::Horizontal,hbox); slider->setRange(0,10); // interval spinBox->setRange(0,10); // interval spinBox->setValue(5); connect(slider,SIGNAL(valueChanged(int)),spinBox,SLOT(setValue(int))); connect(spinBox,SIGNAL(valueChanged(int)),slider,SLOT(setValue(int))); }

It is not obligatory to add the QObject:: reference before the connect function, because QVBox and QHBox inherit the QObject class, so this function definition can be found without this “extra” prefix.

The application’s main program

main.cpp

# include <qapplication.h> # include "form.h" int main(int argc, char *argv[]) { QApplication app(argc,argv); Form *form = new Form; app.setMainWidget(form); form->show(); return app.exec(); }

Creating custom slots We would like to show the number with words in the text box. In order to respond on the Slider’s or SpinBox’s changes we introduce a new slot. sayAsWord(int).

Page 9: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 9

Definition of Custom Slot: sayAsWord(int)

form.h

# ifndef FORM_H # define FORM_H # include <qwidget.h> # include <qvbox.h> class QHBox; class QSpinBox; class QSlider; class QLineEdit; class Form: public QVBox { Q_OBJECT public: Form(QWidget *parent=0, const char *name=0); private: QHBox *hbox; QSpinBox *spinBox; QSlider *slider; QLineEdit *lineEdit; QString words[11]; void initWords(); public slots: void sayAsWord(int i); }; # endif

We declare an array to store the words of numbers (QString words[11]) and a private function to initialize this array, initWords(). Furthermore we declare a public slot sayAsWord(int). Please consider, that “public slots” keyword doesn’t exist in standard C++. These elements must be transformed into the standard C++ code using a special precompiler: moc (meta object compiler). Because of using this special keyword (public slots), we have to add an extra macro to the source: Q_OBJECT, which consists of function declarations, used in run time to obtain meta language related information.

My notes

Page 10: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 10

Implementation of Custom Slot: sayAsWord(int)

form.cpp

# include <qhbox.h> # include <qspinbox.h> # include <qslider.h> # include <qlineedit.h> # include "form.h" Form::Form(QWidget *parent, const char *name):QVBox(parent,name) { setMargin(6); setSpacing(6); hbox = new QHBox(this); lineEdit = new QLineEdit(this); hbox->setMargin(6); hbox->setSpacing(6); spinBox = new QSpinBox(hbox); slider = new QSlider(Qt::Horizontal,hbox); slider->setRange(0,10); spinBox->setRange(0,10); connect(slider,SIGNAL(valueChanged(int)),spinBox,SLOT(setValue(int))); connect(spinBox,SIGNAL(valueChanged(int)),slider,SLOT(setValue(int))); connect(slider,SIGNAL(valueChanged(int)),this,SLOT(sayAsWord(int))); initWords(); spinBox->setValue(5); } void Form::sayAsWord(int i) { lineEdit->setText(words[i]); } void Form::initWords() { words[0] = "null"; words[1] = "one"; . . . words[10] = "ten"; }

The application’s project file

numbers.pro

TEMPLATE = app INCLUDEPATH += . # Input HEADERS += form.h SOURCES += form.cpp main.cpp

Page 11: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 11

Compiling & Running

The uic tool generates the .h and .cpp files from the .ui file. The QVBox class inherits from QObject, so it requires an additional .cpp file to be generated in order to handle run time meta language information. These files are generated by the moc (meta object compiler) and are named ‘moc_numbers.cpp’ as the original file was called numbers.cpp. As far as our .cpp file contains the Q_OBJECT macro an another file ‘numbers.moc’ will be generated which will be included in our .cpp file, normally at the end. Fortunately we do not have to deal with these details, because the qmake tool creates the appropriate Makefile from our project file automatically.

1. Make the numbers directory. 2. Enter the above code using any text editor. Save it as numbers.cpp in the numbers directory. 3. Be in numbers directory. 4. Generate the platform independent project file (numbers.pro) with the next command: qmake -

project 5. Generate the platform dependent make file with the next command: qmake -o Makefile numbers.pro. 6. Build the program: nmake (make in Linux) 7. Run the program. (Linux: ./ numbers; Windows: numbers)

The program can be found on people.inf.elte.hu/nacsa/qt/lessons/numbers site.

Memory management, parent-child relationship Observing our program code we can realize, that we have used the new operator, but we have not used the delete to free the occupied memory from the heap. We have learnt that a lot of new without deleting leads to the memory leak. Furthermore in GUI applications we have to handle a lot of widgets and some how we have to control memory management. How does it work in Qt? Qt uses the so called parent-children mechanism to handle this problem. The main rules are:

● Deleting the main widget results deleting of all its children.

● Deleted widget automatically is deleted from the screen.

● Closing main window automatically results deleting the main widget.

From these rules follow, that the only objects we have to delete explicitly are the objects we create with new operator and that have no parents.

The figure below shows the parent-children relationship of our Form class in Numbers application.

After we have closed our main window (e.g. clicking on the cross in the top-right corner) each widget will be deleted from the heap and from the screen.

Page 12: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 12

„Layout” application (Arrangement)

In this example we demonstrate how to put the GUI control elements (widgets) on the screen to have the freedom to resize the screen without repositioning of its elements. To gain this aim we have to use the Layout Manager classes.

Layout Manager

In the previous example we used QVBox and QHBox widgets as a container for storing GUI elements. To handle a more sophisticated surface and to have a flexible arrangement of the screen you may use the Layout Manager’s classes. The QHBoxLayout and QVBoxLayout inherit QLayout class. Although layout managers are not widgets, they can have parents and children. The meaning of “parent” is slightly different for layouts than for widgets. If a layout is constructed with a widget as a parent, the layout automatically installs itself on the widget. If a layout is constructed with no parent the layout must be inserted into another layout using addLayout(). When we insert a layout into another layout the inner layout is automatically made a child of the outer layout, to simplify memory management. In contrast, when we insert a widget into a layout using addWidget() the widget doesn’t change parent. The QHBoxLayout horizontally, the QVBoxLayout vertically stores the inserted elements.

Laying Out of the Form

Memory Managament, Parent-Children relationship

Page 13: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 13

The Form Class using Layout Manager’s Classes

form.h

# ifndef FORM_H # define FORM_H # include <qwidget.h> class QSpinBox; class QSlider; class QLineEdit; class Form: public QWidget { Q_OBJECT public: Form(QWidget *parent=0, const char *name=0); private: QSpinBox *spinBox; QSlider *slider; QLineEdit *lineEdit; QString words[11]; void initWords(); public slots: void sayAsWord(int i); void slotTextChanged ( const QString & ); }; # endif

Form Class’s implementation with Layout Classes

form.cpp

# include <qlayout.h> # include <qspinbox.h> # include <qslider.h> # include <qlineedit.h> # include "form.h" Form::Form(QWidget *parent, const char *name):QWidget(parent,name) { spinBox = new QSpinBox(this); slider = new QSlider(Qt::Horizontal,this); slider->setRange(0,10); spinBox->setRange(0,10); lineEdit = new QLineEdit(this); QHBoxLayout *topLayout = new QHBoxLayout; //no parents topLayout->addWidget(spinBox); topLayout->addWidget(slider); QVBoxLayout *mainLayout = new QVBoxLayout(this);

Page 14: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 14

mainLayout->addLayout(topLayout); mainLayout->addWidget(lineEdit); mainLayout->setMargin(11); mainLayout->setSpacing(6); connect(slider,SIGNAL(valueChanged(int)),spinBox,SLOT(setValue(int))); connect(spinBox,SIGNAL(valueChanged(int)),slider,SLOT(setValue(int))); connect(slider,SIGNAL(valueChanged(int)),this,SLOT(sayAsWord(int))); initWords(); spinBox->setValue(5); } void Form::sayAsWord(int i) { lineEdit->setText(words[i]); } void Form::initWords() { words[0] = "null"; . . . words[10] = "ten"; }

The application’s main program

The main.cpp remains unchangeable.

The Application’s Project File

layout.pro

TEMPLATE = app INCLUDEPATH += . # Input HEADERS += form.h SOURCES += form.cpp main.cpp

Compiling & Running 1. Make the layout directory. 2. Enter the above code using any text editor. Save it as layout.cpp in the layout directory. 3. Be in layout directory. 4. Generate the platform independent project file (layout.pro) with the next command: qmake -project 5. Generate the platform dependent make file with the next command: qmake -o Makefile layout.pro. 6. Build the program: nmake (make in Linux) 7. Run the program. (Linux: ./ layout; Windows: layout)

The program can be found on people.inf.elte.hu/nacsa/qt/lessons/layout site.

Page 15: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 15

Creating Application Using Qt Designer

The .ui file and the generated code

The Qt Designer – which can be run with designer command – is a non integrated, visual tool to support of designing the graphical user interface. Qt Designer reads and writes an XML like .ui file, (form.ui) which contains the definition of the user interface. The user interface compiler, uic, creates both a header file (form.h), and an implementation file (form.cpp), from the .ui file (form.ui). Then the application code in main.cpp includes form.h. Typically main.cpp is used to instantiate the QApplication object and start off the event loop.

Qt designer

UICform.h

form.cpp main.cpp

form.ui

Reads and writesReadingGenerates#includesToolGenerated source fileRevision controlled source file

It is a simple approach, but it isn’t sufficient for more complex dialogs having a lot of logic attached to the form’s widgets, which can’t be expressed with predefined signals and slots. Adding code to the generated form.cpp doesn’t solve this problem, as this file gets recreated by the uic whenever the form changes.

There are two different possibilities to extend form’s functionality in Qt.

Page 16: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 16

Extending the functionality of the form

The “subclassing” approach One way to implement custom slots for generated forms is via C++ inheritance as shown in the next figure.

Reads and writesReadingGenerates#includesToolGenerated source fileRevision controlled source file

Qt designer

UIC form.h

formbase.cpp main.cpp

form.ui

formbase.h

form.cpp

Inhe

rita

nce

In this approach Form inherits the Qt Designer’s form FormBase class. Form is split into the header file (form.h) and the implementation file (form.cpp). The header file includes the uic generated form.h and re-implements all the custom slots. This is possible because uic generated custom slots are virtual. In addition to implementing custom slots, this approach gives the user a natural way to do extra initialization work in the constructor of the subclass, and extra cleanups in the destructor.

The “ui.h” extension approach In this approach addition to the .ui file (form.ui), Qt Designer reads and writes another associated .ui.h file (form.ui.h). This .ui.h file is an ordinary C++ source file that contains implementations of custom slots. The file gets included from the generated form’s implementation file (form.cpp) and thus can totally ignored by other user code. (The reason of using .h extension for this file even though it contains C++ code is because it is always included, and because it is easier to integrate into the build process with .h extension.)

This file can be read and write by both the user and Qt Designer. Qt Designer’s responsibility is to keep the file in sync with custom slot definitions:

• Whenever the user adds a new slot to the form, Qt Designer adds a stub to the .ui.h file.

• Whenever the user changes a custom slot’s signature, Qt Designer updates the corresponding implementation.

• Whenever the user removes a custom slot, Qt Designer removes it from the .ui.h file.

You can edit the implementations of the slots either within Qt Designer or using your own editor.

Page 17: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 17

Reads and writesReadingGenerates#includesToolGenerated source fileRevision controlled source file

Qt designer

UIC

form.cpp main.cpp

form.ui form.ui

form.h

form.ui.h

Construction and destruction With this approach objects are entirely constructed and destructed inside the generated form.cpp code, therefore it is not possible to do further form initializations or cleanups you would do within the constructor and destructor functions of a C++ class, but if you add a slot Form::init() to your form, this slot will be called automatically at the end of the generated form constructor and if you add a slot Form::destroy() to your form, the slot will automatically invoked by the destructor before any form controls get deleted.

„Words” application (Custom slot)

In this application we demonstrate how to create a project using Qt Designer. We invent our program by using “ui.h” extension approach.

Creating the “Words” project Start the Qt Designer and make a new project. The name of the project is “words” and we will save it into the words directory.

Start Qt Designer File/New/C++ project/OK Project file: (brows into the appropriate directory) words.pro OK

Creating the Main Window (Form) Create a widget, named Form, representing the main window.

File/New/Widget/OK name: Form caption: Form File/Save As : form.ui

Page 18: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 18

The Form’s Design

Type Name Properties

QSpinBox spinBox minValue = 0, maxValue = 10

QSlider slider minValue = 0, maxValue = 10

QLineEdit lineEdit

The Form’s Arrangement (Layout) 1. Keep pressing the Shift button select the spinBox and the slider widgets on the form, then give the

command Layout / Lay Out Horizontally. The red box around the two selected widgets shows they have to be laid out together. Using the Layout/ Break Layout command you can break this coherence. It is worth to find the related buttons in the toolbar, too.

2. Now, let us select the lineEdit widget and the previously created “red box” and give the command Layout/ Lay Out Verically.

3. Click on the Fom (MainForm) and give the command Layout/Lay Out in Grid.

You can preview the Form’s behaviour with the Ctrl+T command. Try to resize the application’s window and observe, what is happening.

Creating the main program (main.cpp)

Now, that we have entered some of the code let’s try to build and run the application. To do this we need to create a main() function. We can ask Qt Designer to create this file for us.

1. Click File/New to invoke the New File dialog.

2. Click “C++ Main-File”, then click OK

3. The Configure Main-File dialog appears, listing the forms in the project. We’ve only one for, “MainForm”, so it is already highlighted.

4. Click OK to create a main.cpp file that loads MainForm.

5. Save As … into the project’s directory.

Page 19: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 19

The generated main program is given below.

main.cpp

# include <qapplication.h> # include "form.h" int main( int argc, char ** argv ) { QApplication a( argc, argv ); Form w; w.show(); a.connect( &a, SIGNAL( lastWindowClosed() ), &a, SLOT( quit() ) ); return a.exec(); }

We store the QApplication object on the stack, so it will be deleted when the application ended. (All other widgets of this application will be deleted as well, as far as all of them are children of this widget.)

Inserting Variable into the Project

Let us insert an array of number-words into our project using Qt Designer. Object Explorer/Members/Class Varibles/Private/Double Click/Add Variable: QString words[11] Access: private

The variable description will be stored in the .ui, XML style file and the tool uic will generate the appropriate C++ code for it and put it into the form.h.

The related fragment in the form.ui file is given below.

form.ui

<variables> <variable access="private">QString words[11];</variable> </variables>

initWords() function

We create a new private function to initialize the words’ array. Select Form in Project Overview window. Edit/Slots... / New Function

Function: initWords() Return type: void Specifier: non virtual Access: private Type: function

The function’s description is stored in the XML-style .ui file. The uic tool generates from it the appropriate C++ code and writes it into the form.h file.

The related fragment in the form.ui file is given below.

form.ui

<functions> <function access="private" specifier="non virtual">initWords()</function> </functions>

Page 20: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 20

The implementation of initWords() is given in the form.ui.h file.

form.ui.h

void Form::initWords() { words[0] = "null"; . . . words[10] = "ten"; }

init() function

It has no meaning to add code to the generated form.cpp. In order to carry out some initialization of our form, instead of modifying the generated constructor we can add a special init() function, which will be performed immediately after the constructor have run.

Select Form in Project Overview window. Edit/Slots... / New Function

Function: init() Return type: void Specifier: virtual Access: protected Type: function

The init() function’s implementation is given below. form.ui.h

void Form::init() { spinBox->setMaxValue(10); //You can set it with Qt Designer, too slider->setMaxValue(10); //You can set it with Qt Designer, too initWords(); spinBox->setValue(5); }

“Connecting” the widgets Let’s connect the slider’s valueChanged(int) signal to the spinBox’s setValue(int) slot and the spinBox’s valueChanged(int) signal to the slider’s setValue(int) slot.

Edit/Connections/New Sender: slider Signal: valueChanged(int) Receiver: spinBox Slot: setValue(int)

Edit/Connections/New

Sender: spinBox Signal: valueChanged(int) Receiver: slider Slot: setValue(int)

Creating Custom Slot: sayAsWord(int) Select Form in Project Overview window. Edit/Slots... / New Function

Function: sayAsWord(int) Return type: void Specifier: virtual Access: public Type: slot

Page 21: C++ Programming with Qt 3 - Eötvös Loránd Universitypeople.inf.elte.hu/nacsa/qt/Lectures/Intro_workbook.pdfC++ GUI Programming with Qt 3 Introduction CEEPUS H81 Network Page 1 C++

C++ GUI Programming with Qt 3 Introduction

CEEPUS H81 Network Page 21

Let us observe that on the Object Explorer’s Member tab – among the public slots – has appeared the newly defined slot. Clicking on the form.ui.h implementation file in the Project Overview window a text editor containing the implementation file pops up and shows the tube of this newly defined slot.

The sayAsWord(int) function’s implementcation.

form.ui.h

void Form::sayAsWord( int i) { lineEdit->setText(words[i]); }

The application’s project file (words.pro) Please observe that there are no form.h and form.cpp files in the project file. These files are generated by uic.

words.pro

TEMPLATE = app INCLUDEPATH += . # Input HEADERS += form.ui.h INTERFACES += form.ui SOURCES += main.cpp

Compiling & Running Using Qt Designer you don’t have to generate project file, because it is managed by Qt Designer.

1. Be in words directory. 2. Generate the platform dependent make file with the next command:

qmake -o Makefile words.pro. 3. Build the program: nmake (make in Linux) 4. Run the program. (Linux: ./words; Windows: words)

This program can be downloaded from the people.inf.elte.hu/nacsa/qt/lessons/words site.

Workshop

You are encouraged to work through this workbook on your own and make exercises to help you to retain what you have learned in this lesson. By completing these exercises you will understand the basics of Qt programming and you’ll ensure that understand how signals and slots work and how implement them in your program.

Quiz 1. What is a slot? 2. What is a signal? 3. How do you connect a signal to a slot? 4. Can you connect multiple slots to one signal?

Exercises 1. Write a “Greeting” program. Ask user’s name then pressing the “Greeting” button program pops up a

message box and greets him or her. 2. Write a new Qt class based on QWidget. Make it 400 pixels wide and 300 pixels high. Add a button to the

upper-left corner of the window. Connect the button’s clicked() signal to qApp’s quit() slot. Make sure it works.

3. Search the Qt Reference Documentation for other signals included QPushButton. Also, look up which slots are included in QApplication.

4. Write a program with two QPushButton objects and one radio button. Connect the three objects so that the two QPushButton objects can control whether the radio button is checked.