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 toolkitIII
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
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 QApplicationIII
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
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
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
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
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. Iuliana Bocicor
Qt toolkit
QApplication
Qt GUI Components (widgets)
Layout management
Qt Designer
Common pattern to build a GUI DEMO QHBoxLayout (Lecture9 demo widgets - function hBoxLayout).
22 / 34 QVBoxLayout
Object- Oriented Widgets are aligned vertically. Programming
Iuliana Bocicor
Qt toolkit
QApplication
Qt GUI Components (widgets)
Layout management
Qt Designer
Common pattern to build a GUI
DEMO QVBoxLayout (Lecture9 demo widgets - function vBoxLayout). 23 / 34 QFormLayout
Object- Oriented Widgets are layed out in a two column form. Programming
Iuliana Bocicor The left column contains labels and the right column con- tains widgets. Qt toolkit
QApplication
Qt GUI Components (widgets)
Layout management
Qt Designer
Common pattern to build a GUI
DEMO QFormLayout (Lecture9 demo widgets - function formLayout). 24 / 34 QGridLayout
Object- Oriented Widgets are layed out in a grid. Programming The space is divided into rows and columns and each widget Iuliana Bocicor is put in the specified cell. It is also possible for a widget to occupy multiple cells by Qt toolkit spanning the row/column. QApplication
Qt GUI Components (widgets)
Layout management
Qt Designer
Common pattern to build a GUI
DEMO QGridLayout (Lecture9 demo widgets - function gridLayout).
25 / 34 Layout and widgets’ combinations
Object- Oriented Multiple widgets can be nested and different layouts can be Programming used to create a GUI. Iuliana Bocicor
Qt toolkit
QApplication
Qt GUI Components (widgets)
Layout management
Qt Designer
Common pattern to build a GUI
DEMO Multiple layouts (Lecture9 demo widgets - function multipleLay- outs). 26 / 34 Key benefits of using layout managersI
Object- Oriented Programming
Iuliana Bocicor They provide a consistent behavior across different screen
Qt toolkit sizes and styles.
QApplication Qt GUI Layout managers handle resize operations. Components (widgets)
Layout management They automatically adapt to different fonts and platforms. Qt Designer If the user changes the systems font settings, the applica- Common tions forms will respond immediately, resizing themselves if pattern to build a GUI necessary.
27 / 34 Key benefits of using layout managersII
Object- Oriented Programming
Iuliana Bocicor They automatically adapt to different languages. If the ap- plications user interface is translated to other languages, the Qt toolkit layout classes take into consideration the widgets translated QApplication contents to avoid text truncation. Qt GUI Components (widgets)
Layout If a widget is added to or removed from a layout, the layout management will automatically adapt to the new situation (the same Qt Designer thing happens when applying the show() or hide() functions Common pattern to for a widget). build a GUI
28 / 34 Absolute positioningI
Object- Oriented Programming An absolute position can be specified for a widget using the
Iuliana function setGeometry(), which builds a rectangle using the Bocicor given parameters (x and y positions, width and height). Qt toolkit
QApplication
Qt GUI Components Absolute positioning disadvantages (widgets)
Layout management If the window is resized, the widgets with absolute positions
Qt Designer remain unchanged. Common Some text may be truncated (large font or change in the pattern to build a GUI labels). The positions and sizes must be calculated manually (error- prone, hard to maintain).
29 / 34 Absolute positioningII
Object- Oriented Programming
Iuliana Bocicor
Qt toolkit QApplication DEMO Qt GUI Components Absolute positioning (Lecture9 demo widgets - functions create- (widgets) Absolute and createWithLayout). Layout management
Qt Designer
Common pattern to build a GUI
30 / 34 Qt DesignerI
Object- Oriented Programming
Iuliana Bocicor Qt Designer is the Qt tool for designing and building GUIs.
Qt toolkit
QApplication Windows and dialogs can be designed in a what-you-see-is- Qt GUI what-you-get manner. Components (widgets)
Layout management Objects can be dragged from the widget box and dropped
Qt Designer on the form.
Common pattern to build a GUI Object properties can be modified interactively.
31 / 34 Qt DesignerII
Object- Oriented Programming Using the Qt Designer can be faster than hand-coding the
Iuliana interface. Bocicor
Qt toolkit One can experiment with different designs quickly. QApplication
Qt GUI Components (widgets) A .ui file is created, representing the widget tree of the form
Layout in XML format. The User Interface Compiler (uic) can then management be used to create a corresponding C++ header file Qt Designer
Common pattern to build a GUI DEMO Qt Designer (Lecture9 demo Qt designer).
32 / 34 When should we write code programatically?
Object- Oriented When the elements in the dialog must change dynamically. Programming
Iuliana When we want to use custom widgets. Bocicor
Qt toolkit QApplication How? Qt GUI Components (widgets) 1 Create a new class, by inheriting from QWidget.
Layout 2 management Implement the GUI. Qt Designer 3 Show the newly created widget. Common pattern to build a GUI DEMO Dynamically changing elements (Lecture9 demo Qt designer - ProgramaticallyDesignedWidget class).
33 / 34 Common pattern to build a GUI
Object- Oriented Programming
Iuliana Bocicor 1 Instantiate the required Qt widgets.
Qt toolkit QApplication 2 Set properties for these, if necessary. Qt GUI Components (widgets) 3 Add the widgets to a layout (the layout manager will take Layout management care of the position and size).
Qt Designer
Common 4 pattern to Connect the widgets using the signal and slot mechanism build a GUI (will be presented next week).
34 / 34