Dale Roberts Introduction to Qt Dale Roberts, Lecturer Computer Science, IUPUI Department of Computer and Information Science, School of Science, IUPUI

Dale Roberts 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

Dale Roberts 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."

Dale Roberts 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.

Dale Roberts 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

Dale Roberts Apple gets a GUI In 1983, the Apple Lisa was first GUI offering. Apple II, 1980 Lisa

Dale Roberts Apple gets a GUI 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.)

Dale Roberts 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).

Dale Roberts 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

Dale Roberts 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.

Dale Roberts Windows Timeline It took roughly 15 years to consolidate its shell- based GUI architecture offerings with its embedded GUI architecture offerings.

Dale Roberts 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.

Dale Roberts 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.

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

Dale Roberts 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++

Dale Roberts 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.

Dale Roberts 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.

Dale Roberts 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.

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

Dale Roberts Line-by-line 1 #include 1 #include 2 #include 2 #include 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. 8 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.

Dale Roberts 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.

Dale Roberts 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: 1. quit = XtVaCreateManagedWidget(……); 2. tAddCallback( quit, XmNactivateCallback, QuitCallback, NULL); 3. void QuitCallback( Widget w, XtPointer, clientData, XtPointer callData);

Dale Roberts 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

Dale Roberts 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

Dale Roberts Signals and Slots clicked_method()

Dale Roberts 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 ( A signal triggering a slot has been measured to approximately 50 microseconds on a SPARC2. ) approximately 50 microseconds on a SPARC2. )

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

Dale Roberts 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, necessary for Qt to handle signals and slots. The signals, slots and emit keywords are macros, so the compiler slots and emit keywords are macros, so the compiler preprocessor changes or removes them. preprocessor changes or removes them. How to do? 1. moc –o moc_file.moc moc_file.cpp moc_file.h 1. moc –o moc_file.moc moc_file.cpp moc_file.h 2. #include “moc_file.moc” 2. #include “moc_file.moc” Fortunately, the Qt utility qmake takes care of all this.

Dale Roberts 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.

Dale Roberts 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(); …};

Dale Roberts 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++

Dale Roberts 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.

Dale Roberts 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

Dale Roberts 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.

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