Object- Oriented Programming Iuliana Bocicor Qt toolkit Object-Oriented Programming QApplication Qt GUI Components (widgets) Iuliana Bocicor Layout [email protected] management Qt Designer Babes-Bolyai University Common pattern to build a GUI 2020 1 / 34 Overview Object- Oriented Programming Iuliana 1 Qt toolkit Bocicor Qt toolkit 2 QApplication QApplication Qt GUI 3 Components Qt GUI Components (widgets) (widgets) Layout management 4 Layout management Qt Designer Common 5 Qt Designer pattern to build a GUI 6 Common pattern to build a GUI 2 / 34 Qt toolkitI Object- Oriented Programming Qt is a cross-platform application and UI framework in C++. Iuliana Bocicor Using Qt, one can write GUI applications once and deploy Qt toolkit them across desktop, mobile and embedded operating sys- QApplication tems without rewriting the source code. Qt GUI Components (widgets) Qt is supported on a variety of 32-bit and 64-bit platforms Layout management (Desktop, embedded, mobile): Qt Designer Windows (MinGW, MSVS) Common Linux (gcc) pattern to build a GUI Apple Mac OS Mobile / Embedded (Symbian, Windows Embedded Com- pact, Windows 10 Mobile, Embedded Linux, Android, LG webOS) 3 / 34 Qt toolkitII Object- Oriented Programming Iuliana Bocicor Language bindings are available in C#, Java, Python(PyQt, Qt toolkit Qt for Python), Ada, Pascal, Perl, PHP(PHP-Qt), Ruby(RubyQt). QApplication Qt GUI Components Qt is available under GPL v3, LGPL v2 and commercial li- (widgets) cense. Layout management Qt Designer Qt documentation: https://doc.qt.io/. Common pattern to build a GUI 4 / 34 Qt toolkit III Object- Applications/companies using Qt Oriented Programming Spotify Iuliana Bocicor VLC Player Autodesk Maya 2011 Qt toolkit LibreCAD QApplication Google Earth desktop Qt GUI Components HP Envy printer (printer's touch screen) (widgets) Roku Set-top Box (streaming players) Layout management German Air Traffic Control Qt Designer DreamWorks (movie production company) Common Wolfram Mathematica pattern to GNU Octave build a GUI Samsung (e-readers and digital photo frames) VirtualBox Video gaming: Age of Wonders III, Blizzard Battle.net client, City of Heroes. https://blogs.windows.com/devices/2011/03/15/10-qt-use-cases-you-didnt-know/ 5 / 34 Download and install Qt Object- Oriented Programming Iuliana Bocicor Please see the tutorial on how to install Qt Library at http://www.cs.ubbcluj.ro/ iuliana/oop/ - Tutorials Qt toolkit ~ QApplication Qt GUI Qt can be used with Microsoft Visual Studio as well as with Components (widgets) Eclipse (provided there is a C++ compiler installed). Layout management Qt Designer There is also an IDE which is part of the SDK for the Qt Common GUI Application development framework - QtCreator. This pattern to build a GUI also needs a C++ compiler. 6 / 34 Qt Hello World - Qt GUI Project WizardI Object- Oriented Programming Create a new Qt application, as described in the tutorial Iuliana mentioned on the previous slide. Bocicor Qt toolkit Edit the file main:cpp: add a new QLabel and display it, as QApplication follows: Qt GUI Components #include <QtWidgets/QApplication > (widgets) #include <QtWidgets/QLabel> Layout management main ( argc , ∗ argv [ ] ) Qt Designer int int char f Common pattern to QApplication a(argc , argv); build a GUI QLabel label( "Hello world!" ); label .show(); return a . exec ( ) ; g 7 / 34 Qt Hello World - Qt GUI Project WizardII Object- Oriented Programming Iuliana By executing the application, you should get the following Bocicor result: Qt toolkit QApplication Qt GUI Components (widgets) Layout management Qt Designer Common pattern to build a GUI 8 / 34 QApplicationI Object- Oriented Programming Iuliana The QApplication class manages the GUI application's con- Bocicor trol flow and main settings. Qt toolkit QApplication QApplication contains the main event loop, where all events Qt GUI Components from the window system and other sources are processed (widgets) and dispatched. Layout management Qt Designer For any GUI application using Qt, there is exactly one QAp- Common pattern to plication object (no matter how many windows the applica- build a GUI tion has at any given time). This object is accessible using the function instance(). 9 / 34 QApplicationII Object- Oriented Programming Iuliana Responsibility: Bocicor initializes the application with the user's desktop settings; Qt toolkit QApplication takes care of the event loop: performs event handling, it Qt GUI Components receives events from the underlying window system and dis- (widgets) patches them to the relevant widgets; Layout management knows about the application's windows; Qt Designer Common pattern to defines the application's look and feel. build a GUI 10 / 34 QApplication III Object- Oriented Programming For non-GUI Qt applications, use QCoreApplication instead. Iuliana Bocicor Qt toolkit The exec() method of the QApplication makes the applica- QApplication tion enter its event loop. Qt GUI Components (widgets) When a Qt application is running, the event loop waits for Layout user input, then events are generated and sent to the wid- management Qt Designer gets of the application. Common pattern to build a GUI The loop is terminated when any of the functions exit() or quit() is called. 11 / 34 Qt GUI Components (widgets)I Object- Oriented Programming Widgets are the basic building blocks for graphical user in- Iuliana Bocicor terface (GUI) applications built with Qt. E.g.: buttons, labels, textboxes, etc. Qt toolkit QApplication Qt GUI A GUI component (widget) can be placed on the user inter- Components (widgets) face window or can be displayed as an independent window. Layout management A widget that is not embedded in a parent widget is called Qt Designer Common a window. pattern to build a GUI Windows provide the screen space upon which the user in- terface is built. 12 / 34 Qt GUI Components (widgets)II Object- Oriented Programming Iuliana Bocicor Windows visually separate applications from each other and Qt toolkit usually provide a window decoration (show a title bar, al- QApplication lows the user to resize, position, etc). Qt GUI Components (widgets) The Widgets module in Qt uses inheritance. Layout management Qt Designer All widgets inherit from QWidget, which is derived from Common pattern to QObject. build a GUI 13 / 34 Qt GUI Components (widgets) III Object- Oriented Programming Iuliana Bocicor Qt toolkit QApplication Qt GUI Components (widgets) Layout management Qt Designer Common pattern to build a GUI Figure source: https://wiki.qt.io/Qt_for_Beginners 14 / 34 Qt GUI Components (widgets)IV Object- Oriented Programming Iuliana Bocicor Widgets use the parenting system: Qt toolkit Any object that inherits from QObject can have a parent QApplication and children. Qt GUI When an object is destroyed, all of its children are destroyed Components (widgets) as well. Layout All QObjects have methods that allow searching the object's management children. Qt Designer Child widgets in a QWidget automatically appear inside the Common parent widget. pattern to build a GUI 15 / 34 Widget example - label Object- Oriented Programming Iuliana QLabel Bocicor QLabel is used for displaying text or an image. Qt toolkit QApplication No user interaction functionality is provided. Qt GUI A QLabel is often used as a label for an interactive widget. Components (widgets) For this use QLabel provides a useful mechanism for adding Layout management an mnemonic that will set the keyboard focus to the other Qt Designer widget (called the QLabel's "buddy"). Common pattern to Is defined in the header <QLabel>. build a GUI QLabel label( "Hello :)" ); label .show(); 16 / 34 Widget example - textbox Object- Oriented Programming QLineEdit Iuliana Bocicor QLineEdit widget is a one-line text editor. Qt toolkit A line edit allows the user to enter and edit a single line QApplication Qt GUI of plain text with a useful collection of editing functions, Components (widgets) including undo and redo, cut and paste, and drag and drop. Layout A related class is QTextEdit which allows multi-line, rich management text editing. Qt Designer Common Is defined in the header <QLineEdit>. pattern to build a GUI QLineEdit lineEdit; QLabel label( "&Hello :)" ); label .setBuddy(&lineEdit); 17 / 34 Widget example - button Object- Oriented Programming QPushButton Iuliana The QPushButton widget provides a command button. Bocicor Qt toolkit Push (click) a button to command the computer to perform QApplication some action. Qt GUI Components (widgets) Push buttons display a textual label, and optionally a small Layout management icon. A shortcut key can be specified by preceding the pre- Qt Designer ferred character with an ampersand. Common pattern to build a GUI Is defined in the header <QPushButton>. DEMO Push button (Lecture9 demo widgets - function buttonExam- ple). 18 / 34 Widget example - list Object- Oriented Programming QListWidget Iuliana Bocicor The QListWidget widget provides an item-based list widget. Qt toolkit QApplication The widget presents a list of items to the user. Qt GUI Components (widgets) Layout QListWidget uses an internal model to manage each item management in the list (QListWidgetItem). Qt Designer Common pattern to Is defined in the header <QListWidget>. build a GUI DEMO List (Lecture9 demo widgets - function listExample). 19 / 34 Layout managementI Object- Oriented Programming The Qt layout system provides a way to automatically ar- Iuliana Bocicor range child widgets within a widget to ensure that they Qt toolkit make good use of the available space. QApplication Qt GUI Qt includes a set of layout management classes that are Components (widgets) used to describe how widgets are laid out in an applica- Layout tion's user interface. management Qt Designer Common These layouts automatically position and resize widgets when pattern to build a GUI the amount of space available for them changes, ensuring that they are consistently arranged and that the user inter- face as a whole remains usable. 20 / 34 Layout managementII Object- Oriented Programming Iuliana Bocicor Qt toolkit QApplication Qt GUI Components (widgets) Layout management Qt Designer Common pattern to build a GUI 21 / 34 QHBoxLayout Object- Oriented Programming Widgets are aligned horizontally.