Transcript Qt mit C++

®
Universität Leipzig
(Institut für Wirtschaftsinformatik)
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 GUIProjekt
• Qt mit C++
3
®
Über mich
Max Schlee
Email: [email protected]
Blog: www.maxschlee.com
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)
Aurochs (Aktienanalyse)
In Mac Application Store
www.neonway.com/traderstar
Win & Mac & Lin
5
®
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 GUIProjekt
• Qt mit C++
7
®
Sie kennen schon Qt!
• Google Earth
• VLC MediaPlayer
• KDE
• Autodesk Maya
• Adobe Photoshop Album
• Virtual Box
• Parallels
8
®
Einführung in Qt
• Überblick
• Module
9
®
• C++ Crossplatform
Framework
Überblick
• 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
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
*
* Pfeile stehen für
die Abhängigkeiten,
z.B. QtGui hängt
von QtCore ab.
13
®
Im Fokus
• QtCore
• QtGui
• QtDeclarative
14
®
Übersicht
• Ihr Gastreferent
• Einführung in Qt
• Wichtige Werkzeuge
• Wichtige Steuerelemente und das erste GUIProjekt
• Qt mit C++
15
Qt Umgebung
www.qt.nokia.com/downloads
Erforderlich
• Qt SDK
oder
• Qt Libs
• Qt Creator
Online & Offline
Installer
16
®
®
Entwicklungsumgebu
ng 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
®
Qt Creator
Projektübersicht
Symbolsinfo
Modes
Ausführen
Ausführen im
Debugger
Übersetzen
Schnelle Suche
Ausgabenfenster
18
®
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
Vorher
Nacher
29
®
Spacers
Leisten Hilfe bei der Anordnung von Widgets und
fügen zusätzliche Abstände ein
Vorher
Nacher
30
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 GUIProjekt
• 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/SlotVerbindungen 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
Signals
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
• 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();
Q_OBJECT
signals
slots
sind sowohl C++Macros als auch
Anweisungen für MOC
private slots:
void mySlot();
}
40
®
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 Timeout 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
Events
Klassen
QEvent
QPainEvent
QCloseEvent
QHideEvent
QShowEvent
QMouseEvent
QResizeEvent
...
...
...
®
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/ChildMechanismus 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 QtGui-Modul
#include <QtGui>
int main(int argc, char** argv)
{
QApplication app(argc, argv);
QLabel lbl("Hello, World !");
lbl.show();
return app.exec();
}
Ereignisschleife!!!
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
®
Menüs
• Klasse QMenu
MenuBar
HotKey
ItemArrow
CheckItem
ItemIcon
Submenu
Separator
Disabled Item
ShortKey
57
®
Menüs
Ziel: Menü wie in vorangehender Folie
implementieren
...
QMenuBar* pmnuBar = new QMenuBar(pwgt); SLOT-Verbindung
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()));
Die Actions kann man direkt mit
pmnuBar->addMenu(pmnu);
Slots verbinden
SLOT-Verbindung
...
58
®
Dialoge
Dialoge können
• 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 DialogKlassen am Beispiel QFileDialog
QString str =
QFileDialog::getOpenFileName(0, “Open File”, “”, “*.cpp *.h”);
Parent
62
Title
Directory
Erweiterungen
®
Mitteilungen
• Klasse QMessageBox
• Methoden:
• information(...)
• warning(...)
• critical(...)
63
®
Message Boxes
DEMO
Ziel: QMessageBox verwenden
Parent
Title
Message
int n =
QMessageBox::critical(0, “Attention”, “This...”,
QMessageBox::Yes
| QMessageBox::No
| QMessageBox::Cancel);
if (n == QMessageBox::Yes) {
//Do it!
Buttons
}
64
®
Da wäre noch was
65
®
Ein kleiner
Qt Quick-Überblick
66
®
Qt Quick
• Ist eine neue Technologie für die GUIEntwicklung
• Besteht aus
• QML - eine Beschreibungssprache
• JavaScript - Programmiersprache
• Qt - Framework
sind uns bekannt
• Qt Creator - IDE
67
®
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 QMLProjekt zu erstellen
70
®
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
72
®
Eigenschaften
• x, y, position: Positionierung
• width, height: Grösse
• anchors: Anordnung
• id, parent: Referencen
73
®
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
}
Was geschieht bei der
Grösseänderung des Fensters?
}
74
®
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
}
}
}
86
®
Zur Hilfe
Nützliche Internetadressen:
Unterstützungsseite dieses Qt-Vortrags:
http://www.neonway.com/qtleipzig
Foren:
http://developer.qt.nokia.com/forums/
QtCenter:
http://www.qtforum.org
87
®
Danke!
88