28
GUIs Basic Concepts

GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components

Embed Size (px)

Citation preview

Page 1: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components

GUIs

Basic Concepts

Page 2: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components

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

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

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

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

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

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

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

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

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

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

Event Handling & Layout

Page 13: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Behaviors

• Behavior hookup:

Page 28: GUIs Basic Concepts. GUI GUI : Graphical User Interface Window/Frame : a window on the screen Controls/Widgets : GUI components

Behavior Errors

• Hookup happens at runtime… watch for errors in Application Output– Stuff inside SLOT / SIGNAL just treated as strings!