1. www.evl.uic.edu QT GUI Programming CS340 – Software Design © 2009 – Jason Leigh University of Illinois at Chicago

2. 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

3. 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 1 st 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.

4. 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.htmlwww.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.

5. 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.

6. www.evl.uic.edu Hello Qt #include int main( int argc, char* argv[] ) { // Qapplication manages application-wide resources QApplication myapp( argc, argv ); // A label I want to show QLabel* mylabel = new QLabel( "Hello, world", 0 ); mylabel->resize( 120, 30 ); mylabel->show(); // Pass control of application to Qt- which enters its own event loop return myapp.exec(); }

7. 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:

8. 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. Create a new Empty Qt4 Project. Then add a C++ source file to it and type in your code.

9. www.evl.uic.edu By the way… F1 provides you with context sensitive help. Also Qlabel lets you use HTML: Qlabel *label = new Qlabel(“ Hello Qt! ”);

10. 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.

11. www.evl.uic.edu MyClass.h #ifndef MYCLASS_H #define MYCLASS_H #include class MyClass : public QObject// Inheriting from QObject { Q_OBJECT// Marks that this class needs a Meta Object public: 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.

12. 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); }

13. www.evl.uic.edu main.cpp #include #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 1 3 3 2 2 99 3 3

14. 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

15. 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.

16. 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.

17. 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.

18. 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.

19. www.evl.uic.edu Dialog Layout Widget Hierarchy

20. 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 Button lineEdit box Emits Clicked() signal Emits findNext() Signal for something else to receive… presumably your Search routine. Emits findPrevious() signal Emits textChanged signal Received by close() Slot Emits clicked() signal Depending on state of search backward checkbox