Qt mit C++ - Neonway

Universität Leipzig
(Institut für Wirtschaftsinformatik)
Qt
Max Schlee
27. Juni 2012
1
®

Das gesamte Material finden
Sie auf:
www.neonway.com/qtleipzig
2
®

Übersicht
• Ihr Gastreferent
• Einführung in Qt
• Wichtige Werkzeuge
• Wichtige Steuerelemente und das erste GUI-
Projekt
• Qt mit C++
3
®

Max Schlee
Email: Max.Schlee@neonway.com
Blog: www.maxschlee.com
Über mich
10 Jahre Entwicklung mit Qt
Autor des Buches
“Qt 4.8 Professional programming
with C++”
(in Russisch)
916 Seiten
www.ozon.ru/context/detail/id/8752092/
4
®

Eigene Projekte mit Qt
TraderStar (Aktienanalyse)
www.neonway.com/traderstar
Win & Mac & Lin
5
Aurochs (Aktienanalyse)
In Mac Application Store
®

Eigene Projekte mit Qt
HappyBirthday (Reminder)
www.neonway.com/happy
und auch in Mac Application Store
6
®

Übersicht
• Ihr Gastreferent
• Einführung in Qt
• Wichtige Werkzeuge
• Wichtige Steuerelemente und das erste GUI-
Projekt
• Qt mit C++
7
®

Sie kennen schon Qt!
• Google Earth
• VLC MediaPlayer
• Parallels
• KDE
• Autodesk Maya
• Adobe Photoshop Album
• Virtual Box
8
®

Einführung in Qt
• Überblick
• Module
9
®

•
•
•
•
Überblick
C++ Crossplatform Framework
•
Grundidee: Code einmal entwickeln und überall
übersetzen
LGPL (GNU Lesser General Public License)
Viele Sprachenanbindungen verfügbar: Python,
Ruby, C#, Java, PHP, D, Haskel, Perl etc.
Qt umfasst zahlreiche Module. Diese sind in
mehereren Bibliotheken organisiert
•
Insgesamt ist Qt umfangreich
10
®

Module I
• QtCore: Basis NonGUI (Container, Threads usw.)
• QtGui: GUI (Grafik und Steuerelemente)
• QtNetwork: Network (TCP, UDP)
• QtWebKit: WebKit (WebBrowser Engine)
• QtXml, QtXmlPatterns: XML (SAX, DOM)
• QtTest: Automatische Unit-Tests
• QtOpenGL: OpenGL-Adaptation
11
®

Module II
• Phonon, QtMultimedia: Multimedia (High & LowLevel)
• QtScript, QtScriptTools: JavaScript Evaluation und
Debuggen
• QtSql: SQL Drivers und Highlevel Klassen für die
Anfragen und Datenrepresentation
• QtDeclarative: QML-Unterstützung (Qt Modeling
Language). Beschreibungssprache für GUI und
Animationen
• QtSVG: SVG (Scalable Vector Graphic Renderer)
12
®

Beziehungen zwischen
ausgewählten Modulen
*
13
* Pfeile stehen für die
Abhängigkeiten, z.B.
QtGui hängt von
QtCore ab.
®

• QtCore
• QtGui
• QtDeclarative
Im Fokus
14
®

Übersicht
• Ihr Gastreferent
• Einführung in Qt
• Wichtige Werkzeuge
• Wichtige Steuerelemente und das erste GUI-
Projekt
• Qt mit C++
15
®

Erforderlich
• Qt SDK
oder
• Qt Libs
• Qt Creator
Online & Offline
Installer
Qt Umgebung
www.qt.nokia.com/downloads
16
®

Entwicklungsumgebung
Qt Creator
• Verfügbar für Windows, Mac OS X und Linux
• Help System, Qt Doku
• Debugger
• Qt Designer
• Anbindung an
• Beliebige Qt4.x
• GNU & Microsoft C++ Kompilatoren
17
®

Modes
Ausführen
Ausführen im
Debugger
Übersetzen Schnelle Suche
Projektübersicht
Qt Creator
18
Symbolsinfo
®
Ausgabenfenster

Qt Designer
• Tool für RAD (Rapid Application
Development)
• WYSIWYG (What You See Is What You
Get)
19
®

Qt Designer
Steuerelemente Aussehen und Edit
20
Objektbrowser
Eigenschaften
®

Das erste Projekt
“EmptyWindow”
Ziel: Die Entwicklungswerkzeuge
kennenlernen
21
®

Übersicht
• Ihr Gastreferent
• Einführung in Qt
• Wichtige Werkzeuge
• Wichtige Steuerelemente und das erste
GUI-Projekt
• Qt mit C++
22
®

GUI Elemente =
Widgets
• Buttons
• ItemViews, ItemsWidgets
• Container
• InputWidgets
• DisplayWidgets
• Layouts
• Spacer
23
®

Buttons
Steuerelemente, die auf Klicks reagieren
24
®

ItemViews &
ItemWidgets
Steuerelemente für Datenansicht
25
®

Containers
Gruppieren andere Steuerelemente.
26
®

Input Widgets
Dienen der Dateneingabe
27
®

Display Widgets
Zeigen Informationen an
28
®

Layouts
Dienen der Anornung von Widgets sind selbst aber keine
Widgets
29
Vorher
Nacher
®

Spacers
Leisten Hilfe bei der Anordnung von Widgets und
fügen zusätzliche Abstände ein
30
Vorher
Nacher
®

Zweites Projekt
Demo “CounterDialog”
Ziel: Ein Dialogfenster mit GUI-Elementen erstellen
31
®

Übersicht
• Ihr Gastreferent
• Einführung in Qt
• Wichtige Werkzeuge
• Wichtige Steuerelemente und das erste GUI-
Projekt
• Qt mit C++
32
®

QtCore-Modul
• Enthält keine GUI-Anteile
• QObject-Klasse
• Signal/Slots
• Metainformation
• Behälterklassen
• Threads
• IO
33
®

QObject
• Basisklasse für die meisten Qt-Klassen
• Signals/Slots
• Speicherverwaltung
• Metainformationen
34
®

Von QObject vererben
class MyObject : public QObject {
Q_OBJECT
public:
}
MyObject(QObject* parent = 0);
35
®

•
•
•
•
•
Signals/Slots
Mechanismus um Nachrichten zwischen Objekten
auszutauschen; die Objekte könen sich in
unterschiedlichen Threads befinden
Signals verschiecken Nachrichten
Slots empfangen Nachrichten
Nur für Exemplare von Klassen verfügbar, die direkt
oder indirekt von QObject erben
Wird ein Objekt zerstört, weden seine Signal/Slot-
Verbindungen automatisch gelöscht
36
®

Signals/Slots
• Eine Signla/Slot-Verbindung wird mit
QObject::connect() hergestellt
• Sie kann jederzeit hergestellt werden
• Da es sich um kein C++-Sprachmerkmal
handelt, werden Fehler erst zur Laufzeit
bemerkbar
37
®

•
•
•
•
•
Eine Nachricht, die mit einem Signal verschickt
wird, kann eine beliebige Zahl von Argumenten
haben
Signale können mit einer beliebigen Anzahl von
Slots verbunden werden
Signale werden mit dem Schlüsselwort “signals”
deklariert
Signals
Der Rückgabetyp von Signalen ist immer void
Verwendung von Vitual-Deklaration hat keinen Sinn
38
®

•
•
•
•
Slots
Slots können Nahrichten von beliebig vielen Signalen
empfangen
Können Virtual deklariert werden
Die Rückgabe von Slots können typisiert werden
• Das hat Sinn z.B. in Verwendung mit QtScript
Slots können public, private und protected declariert weden:
• Public deklarierten Slots können wie einfache methoden aufgerufen
werden
• Die private deklarierte slots lassen sich nicht als methoden aufrufen
aber können mit connect() zweicks Nachrichenaustausch verbunden
werden.
39
®

Signals und Slots
Deklarieren
class MyObject : public QObject {
Q_OBJECT
public:
MyObject(QObject* parent = 0);
signals:
void mySignal();
private slots:
}
void mySlot();
40
Q_OBJECT
signals
slots
sind sowohl C++-Macros
als auch Anweisungen für
MOC
®

Signals mit Slots
verbinden
Empfaenger* pEmpfaenger = new Empfaenger(pobj);
Sender* pSender = new Sender(pobj);
connect(pSender, SIGNAL(nachricht(QString))
pEmpfaenger, SLOT(nachrichtBearbeiten(QString))
);
nachricht() ist ein signal das QString-Objekt übermittelt
nachrichtBearbeiten() ist ein slot das QString-Objekt erhält
SIGNAL und SLOT sind makros
41
®

Events
• Nicht mit Slots zu verwechseln
• Mechanismus, um über Ereignisse zu
benachrichtigen z.B.: Maus- und Tastatureingaben
des Benutzers oder Time-out vom Timer usw.
• Werden als protected in der Klassedefinition
deklariert weil die bei Objekten nicht direkt
aufgeruffen weden sollen
• QEvent ist die Basisklasse
• QEvent ist von der Klasse QObject abgeleitet
42
®

QEvent
QPainEvent
QCloseEvent
QHideEvent
QShowEvent
QMouseEvent
QResizeEvent
...
...
...
Klassen
Events
DEMO: für einen Event-Handler
QObject::timerEvent(QTimerEvent*)
43
®

Speicherverwaltung
• C++ hat keinen Garbage-Collector wie in Java
• Qt führt daher einen Parent/Child-Mechanismus ein
• Wenn “Parent” gelöscht wird, werden auch seine
“Childs” gelöscht. Das Löschen erfolgt impliziert
mit delete-Anweisung
44
®

Speicherverwaltung
Beispiel
QObject* pobj1 = new QObject;
QObject* pobj2 = new QObject(pobj1);
QObject* pobj3 = new QObject(pobj1);
QObject* pobj4 = new QObject(pobj2);
45
®

QtGui-Modul
• Widgets
• Zwei Graphic Engines
• QPainter
• QGraphicsView
46
®

QWidget
• Basisklasse für alle GUI-Elemente
• Erbt von QObject und QPaintDevice
(Mehrfachvererbung)
• mehr als 300 eigene Methoden
47
®

QWidget
QWidget
48
®

Dimensionierung von
QWidget
QWidget
49
®

MinGui Projekt
Application-Objekt
Ereignisschleife!!!
QtGui-Modul
#include
int main(int argc, char** argv)
{
QApplication app(argc, argv);
QLabel lbl("Hello, World !");
lbl.show();
return app.exec();
}
Widget zeigen
Jedes Widget ohne Parent-Objekt wird als eigenes Fenster angezeigt
50
®

DEMO
• Ziele GUI vollständig in C++ schreiben
• Demonstrieren von
• Signal/Slots
• Ereignisschleife
• Speicherverwaltung
51
®

Events
DEMO “ResizeEvent”
Ziel: Events anhand von QResizeEvent zeigen
52
®

Zeichnen
• Wird in paintEvent() durchgeführt
• Klasse QPainter zuständig fürs Zeichnen
• Geometrieklassen: QPoint, QSize, QRect
• Stift und Pinsel: QPen, QBrush
• Bilder: QImage, QPixmap
53
®

Zeichnen
DEMO1
Ziel: QPaintEvent und QPainter verwenden
MyWidget::paintEvent(QPaintEvent* pe)
{
...
PaintDevice
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);
painter.setBrush(QBrush(Qt::green));
painter.drawRoundRect(QRect(10, 10, 110, 70), 30, 30);
...
}
54
®

Zeichnen
DEMO2
• Ziel: Ausgabe von Bildern
MyWidget::paintEvent(QPaintEvent* pe)
{
nebendran
...
zeichnen
QPainter painter(this);
QImage img(“lisa.png”);
painter.drawImage(0, 0, img);
painter.drawImage(img.width(), 0,
img.mirrored(true, true));
...
}
gibt QImage
zurück
Prototype der Zeichenmethode: QPainter::drawImage(x, y, image);
55
®

Zeichnen
DEMO3
• Ziel: Schriftarten verwenden
MyWidget::paintEvent(QPaintEvent* pe)
{
...
QPainter painter(this);
QRect r(0, 0, 120, 200);
painter.setFont(QFont(“Times”, 25, QFont::Normal));
painter.drawText(r, Qt::AlignCenter | Qt::TextWordWrap,
“Draw Text”);
...
}
56
®

• Klasse QMenu
MenuBar
CheckItem
ItemIcon
ShortKey
Menüs
57
HotKey
ItemArrow
Submenu
Separator
Disabled Item
®

Menüs
Ziel: Menü wie in vorangehender Folie implementieren
...
QMenuBar* pmnuBar = new QMenuBar(pwgt);
QMenu* pmnu = new QMenu(pmnuBar);
pmnu->addAction(“About Qt”, qApp, SLOT(aboutQt()), Qt::CTRL + Qt::Key_Q);
pmnu->addSeparator();
QAction* pCheckableAction= pmnu->addAction(“&CheckableItem”);
pCheckableAction->setCheckable(true);
pCheckableAction->setChecked(true);
pmnu->addAction(QPixmap(img4_xmp), “&IconItem”);
QMenu* pmnuSubMenu = new QMenu(“&SubMenu”, pmnu);
pmnu->addMenu(pmnuSubMenu);
pmnuSubMenu->addAction(“&Test”);
QAction* pDisableAction = pmnu->addAction(“&DisabledItem”);
pDisabledAction->setEnabled(false);
pmnu->addSeparator();
pmnu->addAction(“&Exit”, qApp, SLOT(quit()));
pmnuBar->addMenu(pmnu);
... SLOT-Verbindung
58
SLOT-Verbindung
Die Actions kann man direkt mit
Slots verbinden
®

Dialoge können
Dialoge
• modal (Blockieren der laufenden Anwendungen)
und
• nicht-modal (laufende Anwendung wird nicht
blockiert)
• Klasse QDialog
59
®

Dialoge
DEMO
• Ziel: Einfachen Dialog erstellen
60
®

Standard-Dialoge
• Klasse QFileDialog
• Klasse QPrinterDialog
• Klasse QColorDialog
• Klasse QFontDialog
• Klasse QInputDialog
61
®

Standart-Dialog
DEMO
Ziel: Verwendung von Dialog-Klassen
am Beispiel QFileDialog
QString str =
QFileDialog::getOpenFileName(0, “Open File”, “”, “*.cpp *.h”);
62
Parent Title Directory Erweiterungen
®

Mitteilungen
• Klasse QMessageBox
• Methoden:
• information(...)
• warning(...)
• critical(...)
63
®

Message Boxes
DEMO
Ziel: QMessageBox verwenden
int n =
QMessageBox::critical(0, “Attention”, “This...”,
QMessageBox::Yes
| QMessageBox::No
| QMessageBox::Cancel);
if (n == QMessageBox::Yes) {
//Do it!
}
Buttons
64
Parent Title Message
®

Da wäre noch was
65
®

Ein kleiner
Qt Quick-Überblick
66
®

Qt Quick
• Ist eine neue Technologie für die GUI-
Entwicklung
• Besteht aus
• QML - eine Beschreibungssprache
• JavaScript - Programmiersprache
• Qt - Framework
• Qt Creator - IDE
67
sind uns bekannt
®

Vorteile
• Bessere zusammenarbeit Graphic-Designer und
Software-Entwickler
• Sehr gut für die GUI-Animationseffekte
• Kein Kompielervorgang notwendig
• Wenn im Programm keine C++-Anteile sind, dann
kann man das QML-program übeall ausführen
• Optimiert für mobile Geräte
• Erweiterbar auch mit Hilfe von C++
68
®

DEMO “HelloQML”
• Ziel: Mit Hilfe von QtCreator ein QML-
Projekt zu erstellen
69
®

Einige QML Elemente
• Item: Basis Element für alle QML-Elemente
• Rectangle: Rechteck-Element
• Image und BorderImage: Bild-Element
• ListView: Darstellung als Liste
• GridView: Dastellung als Tabelle
• Text: Anzeigen vom Text
70
®

Eigenschaften
• x, y, position: Positionierung
• width, height: Grösse
• anchors: Anordnung
• id, parent: Referencen
71
®

Was geschieht bei der
Grösseänderung des Fensters?
Beispiel
Item {
width: 360
height: 360
Rectangle {
id: redrect;
color: "red"
x: 0
y: 0
width: parent.width / 2
height: parent.height / 2
}
}
Colorname
Rectangle {
color: "green";
x: redrect.width
y: redrect.height
width: redrect.width
height: redrect.height
}
72
®

RotationAnimation
Demo
Rectangle {
width: 150
height: 150
Image {
source: "happyos.png"
anchors.centerIn: parent
smooth: true
}
}
RotationAnimation on rotation {
from: 0
to: 360
duration: 2000
loops: Animation.Infinite
easing.type: Easing.InOutBack
}
73
®

Zur Hilfe
Nützliche Internetadressen:
Unterstützungsseite dieses Qt-Vortrags:
Foren:
QtCenter:
http://www.neonway.com/qtleipzig
http://developer.qt.nokia.com/forums/
http://www.qtforum.org
®

Danke!
75
®