QT Designer Widgets
QT Designer Widgets
Presented by ics.com
Visit us at http://www.ics.com/learning/training/
Produced by Nokia, Qt Development Frameworks
Material based on Qt 4.7, created on March 16, 2011
Part 1
Intro to Qt
Objects in Qt
2/96
Module: Intro to Qt
Developing a Hello World Application
Hello World using Qt Creator
Intro to Qt
3/96
Module: Intro to Qt
Developing a Hello World Application
Hello World using Qt Creator
Intro to Qt
4/96
Hello World in Qt
// main.cpp
#include <QtGui>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QPushButton button("Hello world");
button.show();
return app.exec();
}
Program consists of
main.cpp - application code
helloworld.pro - project file
Demo fundamentals/ex-helloworld
Intro to Qt
5/96
Assignment to variables
Possible operators =, +=, -=
See qmake tutorial Documentation
Intro to Qt
6/96
Using qmake
qmake tool
Creates cross-platform make-files
Build project using qmake
cd helloworld
qmake helloworld.pro # creates Makefile
make
# compiles and links application
./helloworld
# executes application
Intro to Qt
7/96
Module: Intro to Qt
Developing a Hello World Application
Hello World using Qt Creator
Intro to Qt
8/96
QtCreator IDE
Advanced C++ code editor
Integrated GUI layout and forms designer
Project and build management tools
Integrated, context-sensitive help system
Visual debugger
Rapid code navigation tools
Supports
multiple
platforms
Intro to Qt
9/96
Intro to Qt
10/96
Locator Prefixes
: <class name> - Go to a symbol definition
l <line number> - Go to a line in the current document
? <help topic> - Go to a help topic
o <open document> - Go to an opened document
See Navigating Around Your Code with Locator Documentation
Intro to Qt
11/96
Debugging an Application
Debug > Start Debugging (or F5)
Intro to Qt
12/96
the application
Looking up the text property of our button
Intro to Qt
13/96
Module: Objects in Qt
Common Features of Qts Object Model
Object Communication using Signals & Slots
Signal/Slot Variations
Handling Events in Qt
Objects in Qt
14/96
Objects in Qt
15/96
Module: Objects in Qt
Common Features of Qts Object Model
Object Communication using Signals & Slots
Signal/Slot Variations
Handling Events in Qt
Objects in Qt
16/96
Objects in Qt
17/96
Object Tree
QObjects organize themselves in object trees
Based on parent-child relationship
QObject(QObject *parent = 0)
Parent adds object to list of children
Parent owns children
Construction/Destruction
Tree can be constructured in any order
Tree can be destroyed in any order
Parent
QObject
Children
QObject
QObject
Objects in Qt
18/96
Creating Objects
On Heap - QObject with parent:
QLabel *label = new QLabel("Some Text", parent);
children automatically
On Stack - QObject without parent:
QFile, usually local to a function
QApplication (local to main())
Top level QWidgets: QMainWindow
On Stack - "value" types
QString name;
QStringList list;
QColor color;
19/96
Objects in Qt
QObject
QWidget
QLabel
QFile
QTextEdit
QPushButton
20/96
Tristate mechanism
For hide/show and enable/disable, ensures that e.g. an explicitly
hidden child is not shown when the parent is shown.
Demo objects/ex-showhide
Objects in Qt
21/96
Layout Process
Add widgets to layout
Layouts may be nested
Set layout on container widget
Objects in Qt
22/96
Objects in Qt
23/96
Objects in Qt
24/96
Objects in Qt
24/96
Objects in Qt
24/96
Objects in Qt
24/96
Objects in Qt
24/96
Objects in Qt
24/96
Optionally
Provide a window title
Add Edit, Remove buttons
On the right of list
Use group box to provide list caption
Lab objects/lab-firstapp
Objects in Qt
25/96
Module: Objects in Qt
Common Features of Qts Object Model
Object Communication using Signals & Slots
Signal/Slot Variations
Handling Events in Qt
Objects in Qt
26/96
Callbacks
General Problem
How do you get from "the user clicks a button" to your business
logic?
Possible solutions
Callbacks
Based on function pointers
Not type-safe
Observer Pattern (Listener)
Based on interface classes
Needs listener registraction
Many interface classes
Qt uses
Signals and slots for high-level (semantic) callbacks
Virtual methods for low-level (syntactic) events.
Objects in Qt
27/96
Objects in Qt
28/96
Objects in Qt
29/96
42
Signal
emitted
Objects in Qt
29/96
42
Slot implemented
Objects in Qt
29/96
42
42
Signal/Slot connection
Objects in Qt
29/96
42
42
Objects in Qt
29/96
42
Objects in Qt
42
29/96
42
Objects in Qt
42
29/96
42
Signal
emitted
42
Slot implemented
Signal/Slot connection
Demo objects/ex-connect
Objects in Qt
29/96
Custom Slots
File: myclass.h
class MyClass : public QObject
{
Q_OBJECT // marker for moc
// ...
public slots:
void setValue(int value); // a custom slot
};
File: myclass.cpp
void MyClass::setValue(int value) {
// slot implementation
}
Objects in Qt
30/96
Objects in Qt
31/96
Custom Signals
File: myclass.h
class MyClass : public QObject
{
Q_OBJECT // marker for moc
// ...
signals:
void valueChanged(int value); // a custom signal
};
File: myclass.cpp
// No implementation for a signal
Sending a signal
emit valueChanged(value);
Demo objects/ex-quotebutton
Objects in Qt
32/96
Q_OBJECT
signals and slots
emit
At $QTDIR/src/corelib/kernel/qobjectdefs.h
Demo objects/ex-signalslots
Objects in Qt
33/96
Example
connect(button, SIGNAL(clicked()), this, SLOT(onClicked()));
Objects in Qt
34/96
Objects in Qt
35/96
Module: Objects in Qt
Common Features of Qts Object Model
Object Communication using Signals & Slots
Signal/Slot Variations
Handling Events in Qt
Objects in Qt
Signal/Slot Variations
36/96
Connect to
Slot(s)
many
one
another signal
Objects in Qt
Signal/Slot Variations
37/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
valueChanged(int)
textChanged(QString)
clicked()
Objects in Qt
X
X
X
Slot
setRange(int,int)
setValue(int)
updateUi()
setValue(int)
updateUi()
setRange(int,int)
setValue(float)
setValue(int)
updateUi()
setValue(int)
Signal/Slot Variations
38/96
need it?
Objects in Qt
Signal/Slot Variations
39/96
need it?
Objects in Qt
Signal/Slot Variations
39/96
need it?
Objects in Qt
Signal/Slot Variations
39/96
need it?
Objects in Qt
Signal/Slot Variations
39/96
need it?
Objects in Qt
Signal/Slot Variations
39/96
need it?
Objects in Qt
Signal/Slot Variations
39/96
need it?
Objects in Qt
Signal/Slot Variations
39/96
need it?
Objects in Qt
Signal/Slot Variations
39/96
Objects in Qt
Signal/Slot Variations
40/96
Module: Objects in Qt
Common Features of Qts Object Model
Object Communication using Signals & Slots
Signal/Slot Variations
Handling Events in Qt
Objects in Qt
Handling Events in Qt
41/96
Event Processing
Qt is an event-driven UI toolkit
QApplication::exec() runs the event loop
1
Generate Events
by input devices: keyboard, mouse, etc.
by Qt itself (e.g. timers)
Queue Events
Dispatch Events
by event loop
by QApplication to receiver: QObject
Key events sent to widget with focus
Mouse events sent to widget under cursor
4
Handle Events
by QObject event handler methods
Objects in Qt
Handling Events in Qt
42/96
Event Handling
QObject::event(QEvent *event)
Handles all events for this object
Specialized event handlers
QWidget::mousePressEvent() for mouse clicks
QWidget::keyPressEvent() for key presses
Accepting an Event
event->accept() / event->ignore()
Accepts or ignores the event
Accepted is the default.
Event propagation
Happens if event is ignored
Might be propagated to parent widget
Demo objects/ex-allevents
Objects in Qt
Handling Events in Qt
43/96
Objects in Qt
Handling Events in Qt
44/96
Objects in Qt
Handling Events in Qt
45/96
Part 2
Widgets
46/96
Module: Objects in Qt
Qt Designer
Qt Designer
47/96
Qt Designer
Design UI forms visually
Qt Designer
48/96
Designer Views
Object Inspector
Displays hierarchy of objects on form
Widget Box
Property Editor
Qt Designer
49/96
Widget Editing
Change appearance of form
Add layouts
Edit properties of widgets
Buddy Editing
Assign buddy widgets to label
Buddy widgets help keyboard focus handling correctly
Qt Designer
50/96
Qt Designer
51/96
OrderForm.ui
designer
(Design Mode from Creator)
orderform.h
uic
ui_orderform.h
produces
class Ui_OrderForm {
public:
QVBoxLayout *verticalLayout;
QLineEdit *lineEdit;
QDoubleSpinBox *doubleSpinBox;
QSpinBox *spinBox;
[...]
orderform.cpp
#include "orderform.h"
#include "ui_orderform.h"
OrderForm::OrderForm(QWidget *parent)
: QWidget(parent), ui(new Ui::OrderForm)
{ ui->setupUi(this);}
OrderForm::~OrderForm()
{ delete ui; }
Qt Designer
52/96
Qt Designer
53/96
Naming Widgets
1
2
Qt Designer
54/96
Qt Designer
55/96
Top-Level Layout
1
Qt Designer
56/96
Qt Designer
57/96
Qt Designer
58/96
Qt Designer
59/96
Qt Designer
60/96
Demo $QTDIR/examples/designer/customwidgetplugin
See Creating Custom Widgets for Qt Designer Documentation
Qt Designer
61/96
62/96
Lab dialogs/lab-orderform
Qt Designer
63/96
Module: Widgets
Common Widgets
Layout Management
Guidelines for Custom Widgets
Widgets
64/96
Module Objectives
Common Widgets
Text widgets
Value based widgets
Organizer widgets
Item based widgtes
Layout Management
Geometry management
Advantages of layout managers
Qts layout managers
Size policies
Custom Widgets
Rules for creating own widgets
Widgets
65/96
Module: Widgets
Common Widgets
Layout Management
Guidelines for Custom Widgets
Widgets
Common Widgets
66/96
Text Widgets
QLabel
label = new QLabel("Text", parent);
QLineEdit
line = new QLineEdit(parent);
line->setText("Edit me");
line->setEchoMode(QLineEdit::Password);
connect(line, SIGNAL(textChanged(QString)) ...
connect(line, SIGNAL(editingFinished()) ...
QTextEdit
edit = new QTextEdit(parent);
edit->setPlainText("Plain Text");
edit->append("<h1>Html Text</h1>");
connect(edit, SIGNAL(textChanged(QString)) ...
Widgets
Common Widgets
67/96
Button Widgets
QAbstractButton
Abstract base class of buttons
QPushButton
button = new QPushButton("Push Me", parent);
button->setIcon(QIcon("images/icon.png"));
connect(button, SIGNAL(clicked()) ...
QRadioButton
radio = new QRadionButton("Option 1", parent);
QCheckBox
check = new QCheckBox("Choice 1", parent);
Common Widgets
68/96
Value Widgets
QSlider
slider = new QSlider(Qt::Horizontal, parent);
slider->setRange(0, 99);
slider->setValue(42);
connect(slider, SIGNAL(valueChanged(int)) ...
QProgressBar
progress = new QProgressBar(parent);
progress->setRange(0, 99);
progress->setValue(42);
// format: %v for value; %p for percentage
progress->setFormat("%v (%p%)");
QSpinBox
spin = new QSpinBox(parent);
spin->setRange(0, 99);
spin->setValue(42);
spin->setSuffix(" USD");
connect(spin, SIGNAL(valueChanged(int)) ...
Widgets
Common Widgets
69/96
Organizer Widgets
QGroupBox
box = new QGroupBox("Your Options", parent);
// ... set layout and add widgets
QTabWidget
tab = new QTabWidget(parent);
tab->addWidget(widget, icon, "Tab 1");
connect(tab, SIGNAL(currentChanged(int)) ...
setCurrentWidget( widget )
Displays page assoziated by widget
setTabPosition( position )
Defines where tabs are drawn
setTabsClosable( bool )
Adds close buttons
Widgets
Common Widgets
70/96
Item Widgets
QComboBox
combo = new QComboBox(parent);
combo->addItem("Option 1", data);
connect(combo, SIGNAL(activated(int)) ...
QVariant data = combo->itemData(index);
setCurrentIndex( index )
QListWidget
list = new QListWidget(parent);
list->addItem("Item 1");
// ownership of items with list
item = new QListWidgetItem("Item 2", list);
item->setCheckState(Qt::Checked);
connect(list, SIGNAL(itemActivated(QListWidgetItem*)) ...
QListWidgetItem::setData(Qt::UserRole, data)
Widgets
Common Widgets
71/96
Other Widgets
QToolBox
Column of tabbed widget items
QDateEdit, QTimeEdit, QDateTimeEdit
Widget for editing date and times
QCalendarWidget
Monthly calendar widget
QToolButton
Quick-access button to commands
QSplitter
Implements a splitter widget
QStackedWidget
Stack of widgets
Only one widget visible at a time
See Widget Classes Documentation
Widgets
Common Widgets
72/96
Module: Widgets
Common Widgets
Layout Management
Guidelines for Custom Widgets
Widgets
Layout Management
73/96
Doing it Yourself
Place and resize widgets
move()
resize()
setGeometry()
Example:
QWidget *parent = new QWidget(...);
parent->resize(400,400);
QCheckBox *cb = new QCheckBox(parent);
cb->move(10, 10);
Widgets
Layout Management
74/96
Widgets
Layout Management
75/96
Widgets
Layout Management
76/96
Widgets
Layout Management
77/96
Layout Management
78/96
Additional
setColumnMinimumWidth() (minimum width of column)
setRowMinimumHeight() (minimum height of row)
No need to specify
Widgets
Layout Management
79/96
QFormLayout
A two-column layout
Column 1 a label (as annotation)
Column 2 a widget (as field)
Respects style guide of individual platforms.
QWidget* window = new QWidget();
QPushButton* one = new QPushButton("One");
...
QFormLayout* layout = new QFormLayout();
layout->addRow("One", one);
...
window->setLayout(layout)
( See createFormLayout() )
Form layout with cleanlooks and mac style
Demo widgets/ex-layouts
Widgets
Layout Management
80/96
Optional:
Click on Picture
Contact
Firstname
Lastname
Zip-Code
Town
Picture
(128x128)
[ ] Show Details
Details
Widgets
Layout Management
81/96
QBoxLayout::addWidget(widget, stretch)
QBoxLayout::addStretch(stretch)
QGridLayout::setRowStretch(row, stretch)
QGridLayout::setColumnStretch(col, stretch)
Contents Margins
Space reserved around the managed widgets.
QLayout::setContentsMargins(l,t,r,b)
Spacing
Space reserved between widgets
QBoxLayout::addSpacing(size)
Widgets
Layout Management
82/96
QWidget::setMinimumSize( QSize )
QWidget::setMaximumSize( QSize )
QWidget::setFixedSize( QSize )
Nested Layouts
Allows flexible layouts
QLayout::addLayout(...)
Widgets
Layout Management
83/96
Widgets
Layout Management
84/96
authoritative
Widget
can not grow or shrink
minimal, sufficient
is maximum
is best
is minimum
sensible size
sizeHint()
Widgets
Layout Management
85/96
Lab widgets/lab-layoutbuttons
Widgets
Layout Management
86/96
Widgets
Layout Management
87/96
Widgets
Layout Management
87/96
Widgets
Layout Management
87/96
Widgets
Layout Management
87/96
Module: Widgets
Common Widgets
Layout Management
Guidelines for Custom Widgets
Widgets
88/96
yourself.
Widgets
89/96
If
If
Widgets
90/96
Widgets
91/96
Widgets
92/96
Widgets
93/96
Lab widgets/lab-filechooser
Widgets
94/96
Widgets
95/96
Widgets
Legal
96/96