GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen...
-
Upload
damon-garrison -
Category
Documents
-
view
232 -
download
0
Transcript of GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen...
![Page 1: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/1.jpg)
GUIs
Basic Concepts
![Page 2: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/2.jpg)
GUI
• GUI : Graphical User Interface• Window/Frame : a window on the screen• Controls/Widgets : GUI components
![Page 3: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/3.jpg)
QT
• QT – layer of code to enable platform independent applications
![Page 4: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/4.jpg)
QT
• Must add QT += widgets to .pro file– Tells QTCreator to look for those .h files / libraries
![Page 5: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/5.jpg)
QT
• QApplication : class that manages resources, runs event loop– Create BEFORE anything GUI related– exec starts loop
• Last thing main does• returns when all windows closed
![Page 6: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/6.jpg)
QObject
• All GUI components are QObjects
![Page 7: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/7.jpg)
Most Important Widgets
• Display text : Qlabel• Text input : QLineEdit• Button : QPushButton
![Page 8: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/8.jpg)
Making a Window
• Any Qwidget can be a window– Call show method
![Page 9: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/9.jpg)
Styling
• Can modify style through code:
![Page 10: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/10.jpg)
Styling
• Can style with HTML within strings:
![Page 11: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/11.jpg)
Styling
• Can apply style sheets to widgets
![Page 12: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/12.jpg)
Event Handling & Layout
![Page 13: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/13.jpg)
Event Based Programming
• Event : anything that happens– Window resized– Button pressed– Network connection closes
![Page 14: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/14.jpg)
Event Based Programming
• Event : anything that happens– Window resized– Button pressed– Network connection closes
• Event based programs:– Enter infinite loop– Wait for events to happen – respond to them
![Page 15: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/15.jpg)
Notifications
• Callback : – Way to register a function to be called
in certain situation
![Page 16: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/16.jpg)
Notifications
• Callback : – Way to register a function to be called
in certain situation
• Function Pointer : stores address of a function– Type depends on return type and parameters
![Page 17: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/17.jpg)
Function Pointers
• Name of function by itself is memory address• Use to set function pointers:
![Page 18: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/18.jpg)
Define
• Compiler macro– Preprocessor definition that replaces your source code with
something more complex
![Page 19: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/19.jpg)
Slots & Signals
• In QT– Signal : a message that a Widget can send– Slot : a function that can receive a message
• Signals wired to 0+ slots• On event, sends signal to
each listening slot
![Page 20: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/20.jpg)
A Working Button
• Want a button that quits program:
![Page 21: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/21.jpg)
A Working Button
• Want a button that quits program:
• Need to hook a signal from Button
• To slot in application
![Page 22: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/22.jpg)
A Working Button
• Want a button that quits program:
• Need to hook a signal from Button
• To slot in application
![Page 23: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/23.jpg)
Quitting
• Qobject::connect function hooks signal to slot– SIGNAL / SLOT ugly macros• Address of widget• Function to use as SIGNAL / SLOT
![Page 24: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/24.jpg)
Layout
• Cross platform /resizeable GUIs need to be flexible• Place components in layout boxes (sizers)– Components request needed size– Let layout boxes organize components
![Page 25: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/25.jpg)
A Simple QT Layout
• Layout widgets– Invisible boxes that group widgets• QVBoxLayout : Vertical group• QHBoxLayout : Horizontal group
![Page 26: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/26.jpg)
In Code
Make widgetsAdd to layout
![Page 27: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/27.jpg)
Behaviors
• Behavior hookup:
![Page 28: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components.](https://reader036.fdocuments.us/reader036/viewer/2022062301/5697bfe71a28abf838cb5c80/html5/thumbnails/28.jpg)
Behavior Errors
• Hookup happens at runtime… watch for errors in Application Output– Stuff inside SLOT / SIGNAL just treated as strings!