Introduction to Qt

1. Department of Computer and Information Science,School of Science, IUPUI Introduction to Qt Dale Roberts, Lecturer Computer Science, IUPUI E-mail: droberts@cs.iupui.edu

2. GUI History • In 1962, Douglas Engelbart invented the first “mouse,” which he called an “X-Y Position Indicator.” • It was a little gizmo housed in a wooden box on wheels that moved around the desktop and took the cursor with it on the display. Source: US Patent Office

3. GUI History • In 1963 a grad student at MIT, Ivan Sutherland, submitted as his thesis a program called “Sketchpad.” This was the first GUI (Graphical User Interface) long before the term was coined." http://accad.osu.edu/~waynec/history/images/ivan-sutherland.jpg

4. GUI History • In the 1970s, at Xerox’s PARC facility, Alan Keys created an object-oriented graphical programming language called “Smalltalk.” Smalltalk featured a graphical user interface (GUI) that looked suspiciously similar to later iterations from both Apple and Microsoft. http://www.sra.co.jp/people/aoki/SqueakIdioms/chapter01/Xerox1100SIP.jpg

5. GUI History • 1981, Xerox attempted to market the “Star.” It introduced the idea of what you see is what you get (WYSIWYG). • Commercial failure • cost ($15,000); • IBM had just announced a less expensive machine • limited functionality • e.g., no spreadsheet • closed architecture, • 3rd party vendors could not add applications • perceived as slow • but really fast! • slavish adherence to direct manipulation http://www.catb.org/~esr/writings/taouu/html/graphics/xerox_star.jpg

6. Apple gets a GUI • In 1983, the Apple Lisa was first GUI offering. Apple II, 1980 http://www.s-line.de/homepages/horber-privat/bilder/apple2a.jpg Lisa http://fp3.antelecom.net/gcifu/applemuseum/lisa2.html

7. Apple gets a GUI http://computermuseum.50megs.com/images/collection/apple-mac-plus.jpg • In 1984, Macintosh was the first computer with a GUI marketed to the masses. • “old ideas” but well done! • Commercial success because: • aggressive pricing ($2500) • did not need to trail blaze • learned from mistakes of Lisa and corrected them; ideas now “mature” • market now ready for them • developer’s toolkit encouraged 3rd party non-Apple software • interface guidelines encouraged consistency between applications • domination in desktop publishing because of affordable laser printer and excellent graphics • Full Microsoft Office suite(Apple was the dominant player at this time.) http://toastytech.com/guis/bigmac1.gif

8. Unix Gets a GUI • The X Windows System was introduced in the mid-1980s to provide graphical support for unix operating systems. • The implementation was a client-server approach, where an X window system server ran on the displaying machine, and the client programs communicated with it using a network protocol. • X provides only a communication mechanism, not policy. At least three major user interface look & feel styles are widely used on X - MIT's own Athena style, Sun and AT&T's OpenLook, and OSF's Motif (supported primarily by HP and IBM). http://www.pattosoft.com.au/jason/Articles/HistoryOfComputers/X11.gif

9. Microsoft Gets a GUI • Microsoft introduced Windows 1.0 in 1985 • Tiled Windows, no overlapping • Windows 2.03 in 1987 • Overlapping windows • Windows 3.0 in 1990 • Features Program Manager

10. Shells • Unix and DOS operating systems circa 1980s do support text-based user interfaces via a program called a shell. These shells insert another layer between the user and the operating system. Typical text shells under unix are csh and ksh. The typical text shell under microsoft is command.com. It is still emulated today by cmd.exe. • Original unix and Microsoft GUI support was also implemented as shells. The dominant unix GUI library became an open library called X11 supported by the X.org foundation. Microsoft introduced Windows 1.0 as a shell that ran on a layer above MS-DOS. • The original Apple GUI is embedded into its operating system kernel. Windows migrated to embedding GUI support beginning with Windows NT.

11. Windows Timeline • It took roughly 15 years to consolidate its shell-based GUI architecture offerings with its embedded GUI architecture offerings. http://www.microsoft.com/windows/WinHistoryProGraphic.mspx

12. The Qt Story • The Qt toolkit is a multi-platform C++ GUI toolkit (class library) that has been developed over a 6 year period. • The company Troll Tech AS was founded in 1994 to secure future development of Qt. • On May 20, 1995, Qt was made available under commercial and non-commercial GNU licenses. The non-commercial license grants any developer the right to use Qt to develop software for the free software community. • It was ten months before the first commercial license was purchased. The European Space Agency purchased the second. • Around 1997, Qt was chosen as the code basis for the KDE linux desktop environment. • Qt 3.0 was released in 2001 with Windows, Unix, Linux, Embedded Linux, and Mac OS X libraries.

13. Why GUI Toolkits? • Unix GUIs are typically based on the X Window System. • Primitive X11 functions let you draw primitive graphics like line and rectangles, set foreground and background colors, and (most importantly) interact with the user and send events back to the server. • The functions are network transparent, meaning that the server can display graphic on the local workstation or across the world. This is the same model as telnet. • Programming graphical objects like buttons, scrollbars, dialog boxes, and toolbars is very difficult using pure X11. • GUI Toolkits facilitate GUI programming under Unix. • Motif is both a GUI toolkit and popular GUI standard. Dalheimer argues that it is does not support type safety and is awkward compared to Qt. However, Qt does support the Motif look-and-feel as well as Windows.

14. Why Cross-Platform GUI toolkits • Increases target market. • May provides the same look-and-feel across platform. Reduces training and documentation costs.

15. Stategies for Implementing Cross-Platform GUIs • API Layering – Mapping one API to many others • Example – wxWindows – Win32 API on top of Motif or Xt API under Unix. • Advantages – easy to write, 100% compatible native look and feel. • Disadvantages – • slower • problems mapping to vastly different API architectures • Lowest common denominator – i.e. no pop-up help anywhere • Objects required a C++ wrapper to work with them in C++

16. Stategies for Implementing Cross-Platform GUIs • API Emulation – Implement a full API emulation (programming gaps where APIs to not directly map) • Examples – MainWin and Wind/U – Win32 API on top of Motif or Xt API under Unix. • Advantages – Running on native platform requires no emulation, and is therefore fast. Provides full emulation. I.e. you can run Word under Unix. • Disadvantages – • slower on emulated platforms • towers of layers: MFC on Win32 on Motif on Xt on X11 • toolkit harder to emulate • Problems with undocumented features • No direct support for C++. APIs still needs a C++ wrapper.

17. Stategies for Implementing Cross-Platform GUIs • GUI Emulation – Complete API written on top of primitive graphics (i.e. supported by all GUI OS). Each widget is drawn by the toolkit. • Examples – Qt (C++) and GTK (C) • Advantages – • Faster because toolkit layer talks directly to OS. • Easy to change display style from within application – Motif style under Windows, or Windows style under Unix. • Widgets are implemented as C++ classes and can be inherited from directly in client code. (This is the reason Qt is chosen instead of GTK) • Disadvantages – • Does not support porting of existing programs (i.e. no Word under Unix). • More work to create implementations for every OS release for every target platform. This means Qt support lags behind OS releases. Impacts not only Qt but any widgets created by user • Emulation of look-and-feel is not 100% exact.

18. Qt Assistant • All documentation is available through the trolltech web site. • Qt Assistant is a Qt help browser that runs under Windows. • It has with search and indexing features that make it quicker and easier than the web.

19. A Simple Example/* HelloWorld.cpp */ 1 #include <qapplication.h> 2 #include <qlabel.h> 3 4 int main(int argc, char **argv) { 5 6 QApplication myapp(argc, argv); 7 8 Qlabel *mylabel = new Qlabel(“Hello World”, 0); 9 mylabel->resize(100, 200); 10 11 myapp.setMainWidget(mylabel); 12 mylabel->show(); 13 return myapp.exec(); 14 }

20. Line-by-line 1 #include <qapplication.h> 2 #include <qlabel.h> Always #include any Q types referenced in code. 6 QApplication myapp(argc, argv); Creates an object to manage application-wide resources. Passes argc and argv because Qt supports a few command line arguments of its own. • Qlabel *mylabel = new Qlabel(“Hello World”, 0); Creates a QLabel widget on the heap. A widgets is any visual element in a user interface. Widgets can contain other widgets. For example a window may contain a QMenuBar,0 QToolBar, QStatusBar, and other widgets. The 0 parameters says that that the label is a stand-alone window, is not inside another window.

21. Line-by-line 9 mylabel->resize(100, 200); Invokes the resize() member function. 11 myapp.setMainWidget(mylabel); Make the label the main application widget. This means that closing the label windows closes the application. 12 mylabel->show(); Invoke the show() member function to make the label visible. All widgets are created invisible so that their properties can be manipulated without flickering. For example, you would show a widget and then change its size and color. You would change the size and color first, and then show the widget. 13 return myapp.exec(); Passes control of the application to Qt. At this point the application goes into “event-driven” mode. It will just sit there until the user does something to create an even. This is the same concept as Word. Word starts and waits for the user to do something.

22. Callback Function • One of the most feared and hackish aspects of GUI programming has always been the dreaded callback-function. • A register table for widget (e.g. Motif) - no type checking - example: • quit = XtVaCreateManagedWidget(……); • tAddCallback( quit, XmNactivateCallback, QuitCallback, NULL); • void QuitCallback( Widget w, XtPointer, clientData, XtPointer callData);

23. Callback Function • Virtual function (e.g. wxWindows) - too many classes need to inherit for all widgets - high dependence between GUI and kernel of application - would be slower in a inefficient vtable • Macro (e.g. MFC、OWL) - message map was complicated and difficult to coding - need additional preprocessor, IDE or application builder

24. Event Handling • QT's new approach: signals and slots • A widget sends out various signals • Object methods can be declared as slots • Compatible signals and slots can be connected or plugged together like a telephone switchboard (parameter types must match) • Strict separation • This strict separation between UI components and program elements lends itself to component-based programming • Goal: separate UI from program logic

25. Signals and Slots clicked_method()

26. Signals and Slots (cont) • advantage: - independent interface - type-safe - process transparence • disadvantage: - not as fast as a direct function pointer call. ( A signal triggering a slot has been measured to approximately 50 microseconds on a SPARC2. )

27. Signals and Slots(cont) 1 class PixmapRotator : public QWidget { 2 Q_OBJECT 3 public: 4 PixmapRotator(QWidget *parent=0, const char *name=0); 5 public slots: 6 void setAngle(int degrees); 7 signals: 8 void angleChanged(int); 9 private: 10 int ang; 11 }; 12 void PixmapRotator::setAngle( int degrees ) { 13 degrees = degrees % 360; // keep in range <-360, 360> 14 if(ang == degrees) 15 return; // actual state change? 16 ang = degrees; // a new angle 17 emit angleChanged(ang); // tell world ... 18 } 19 QObject::connect(scrollBar, SIGNAL(valueChanged(int)), rotator, SLOT(setAngle(int)));

28. Signals and Slots(cont) • Qt meta object compiler (moc) - It parses C++ header files and generates C++ code necessary for Qt to handle signals and slots. The signals, slots and emit keywords are macros, so the compiler preprocessor changes or removes them. • How to do? 1. moc –o moc_file.moc moc_file.cpp moc_file.h 2. #include “moc_file.moc” Fortunately, the Qt utility qmake takes care of all this.

29. qmake • The qmake utility is typically invoked with the following three commands] qmake –project qmake make (or nmake under Windows) • Rules: • Be sure to place code in its own directory. • qmake scans all subdirectories for dependencies. Do not place archive version under a “save” subdirectory. • If you reorganize your files, like adding a new .h, delete all the .pro and other working files, then start over.

30. Defining Signals and Slots • New C++ syntax for defining signals and slots, added to public, private, etc. class myClass : public Qobject { Q_OBJECT //required macro, no semicolon … signals: void somethingHappened(); … public slots: void slotDoSomething(); … private slots: void slotDoSomethingInternal(); … };

31. Events • Signals: emit events • declare as signals, otherwise normal member functions • You don't implement them. Rather, you send them with the (new) keyword emit • E.g. emit(sliderChanged(5)) • Slots: receive and handle events • Normal member functions declared as slots • Connect: must connect signals to slots • QObject::connect( mymenu, SIGNAL(activated(int)), myobject, SLOT(slotDoMenuFunction(int)) ); • moc: meta object compiler (preprocessor) converts these new keywords to real C++

32. Widgets • Base class for all UI widgets • Properties • width, height, backgroundColor, font, mouseTracking, backgroundPixmap, etc. • Slots • repaint, show, hide, move, setGeometry, setMainWidget, etc. • Signals: • mouseMoveEvent, keyPressEvent, resizeEvent, paintEvent, enterEvent, leaveEvent, etc.

33. Qt, a GUI toolkit • Events processed with signals and slots • signal generates an event, e.g., button push • slot processes the event, e.g., pop up a file dialog box QPushButton * quitB = new QPushButton(“Quit”,...,...); • connect (quitB, SIGNAL(clicked()), qApp, SLOT(quit()); • qApp is a global variable, of type QApplication • one QApplication per program defined first in main() • main returns qApp.exec() • SIGNAL and SLOT are macros, expanded by a meta-object • compiler (moc) • moc generates .cpp files from user-defined Qt subclasses

34. Other Features of Qt • The Qt Paint Engine • QPainter is highly optimized and contains several caching mechanisms to speed up drawing. Under X11, it caches GCs (graphics contexts), which often make it faster than native X11 programs. • QPainter contains all the functionality one would expect from a professional 2D graphics library. The coordinate system of a QPainter can be transformed using the standard 2D transformations (translate, scale, rotate and shear). • Qt supports Open GL for 3D graphics. • Qt also contains a set of general purpose classes and a number of collection-classes to ease the development of multi-platform applications. • Qt has platform independent support for the operating system dependent functions, such as time/date, files/directories and TCP/IP sockets.

35. Acknowledgements • Plantinga, Harry. Calvin College • Trolltech Tutorials. • pages.cpsc.ucalgary.ca/ ~saul/hci_topics/topics/history.html