2014-2015
Qt Creator
*
(Qt Designer)
*
de Qt Development Frameworks (anciennement Trolltech)
(http://qt.digia.com)
2I007 & LI357 / Université Paris VI
1
Choun Tong LIEU
2014-2015


Environnement multi-plateforme de développement intégré (IDE) (qtcreator)
contenant entre autre
• un éditeur de texte,
• deux éditeurs graphiques :
‑ Qt Designer pour construire les interfaces graphiques utilisateurs (UI) à
partir des widgets Qt,
‑ Qt Quick Designer pour développer avec le langage QML les UIs pour les
médias mobiles. Des UIs plus intuitifs, plus fluides, à partir des éléments
Qt (mobile sous Symbian et Maemo). Voir Qt SDK 1.1 ou Qt Quick.
Editeur de texte :
• vérification syntaxique,
• complétion,
• cacher ou non un bloc (contenu d'une classe, d'une procédure, etc, ...)
• aide contextuelle : par exemple, sur un mot
‑ en laissant la souris au dessus → bulle d'information (s'il y en a),
‑ cliquer avec le bouton de droite → menu pour poursuivre le mot,
‑ taper sur la touche « F1 » → documentation s'il y en a (par exemple si le
mot est une classe Qt),
‑ ...
2I007 & LI357 / Université Paris VI
2
Choun Tong LIEU
2014-2015
Fichier en cours d'édition
Menu déroulant pour sélectionner d'autres fichiers
2I007 & LI357 / Université Paris VI
3
Pour suivre et choisir les
symboles (procédures) de
la page
Choun Tong LIEU
2014-2015


Editeur d’interface graphique Qt Designer intégré dans Qt Creator
Vue groupée d’ensemble
2I007 & LI357 / Université Paris VI
4
Choun Tong LIEU
2014-2015




Ou éditeur d’interface graphique indépendant (designer-qt4).
Vue groupée
d’ensemble
Exécuter designer (ou designer-qt4) ou choisir dans le menu
<Fedora>  Programmation  Qt4 Designer
À la façon Visual Studio (Microsoft)
2I007 & LI357 / Université Paris VI
5
Choun Tong LIEU
2014-2015

Choix des différentes fenêtres avec vue éclatée « docked »

« docked » : (fenêtre ancrable par défaut) possibilité de déplacer les fenêtres
(souris enfoncée sur la barre de titre) à l’intérieur de la fenêtre principale.
La classe QDockWidget fournit des composantes qui peuvent être ancrées à
plusieurs dans un QMainWindow ou être au top-level.

2I007 & LI357 / Université Paris VI
6
Choun Tong LIEU
2014-2015

Ou vue éclatée de
l’ensemble
Signaux/slots
Barre
des
outils
Explorateur des
objets (instance
et classe)
Choix des
objets
prédéfinis
Propriétés de
l’objet sélectionné
2I007 & LI357 / Université Paris VI
7
Choun Tong LIEU
2014-2015




Plus puissant, mais moins d’outils d’aide au développement en version
gratuite que la précédente version Qt 3.
Pas mal de choses à faire à la main, mais quelques outils puissants sont
présents :
●
qmake-qt4 (pour faire le fichier projet .pro et le Makefile avec tous les
liens nécessaires).
●
uic (pour traduire un fichier XML contenant l’interface générée par
Designer en .h C++,
●
…,
En général, on choisit les objets proposés. On se contente de le modifier
pour l’adapter au besoin. Ils sont souvent composés et complexes.
On veut créer une application PlusMoins :
2I007 & LI357 / Université Paris VI
8
Choun Tong LIEU
2014-2015

Manipulations à faire : (par exemple)
●
Fichier  Nouveau... pour choisir une nouvelle forme d’objet
●
 Dialog without Buttons
pour choisir une forme de dialogue
●
 Créer
●
on ajoute ou retire les objets
Vertical Layout
●
on place un layout avant ou après avoir
mis ou non les pièces (ici QVBoxLayout),
●
on peut modifier l’aspect de ces objets
en modifiant leurs propriétés dans
la fenêtre Editeur de propriétés
●
on peut choisir notre propre classe
d’objets héritée des classes proposées
avec Promouvoir en....
Il faut pour cela, la présence des
fichiers .h et .cpp contenant la classe
de ces objets.
2I007 & LI357 / Université Paris VI
9
Choun Tong LIEU
2014-2015
●
on peut remplacer l'outil d'agencement (Layout) par un conteneur.
2I007 & LI357 / Université Paris VI
10
Choun Tong LIEU
2014-2015
●
●
●
●
●
●
●
la connexion signaux/slots peut être faite sans changer de classe.
mais en général, on veut définir nos propres signaux/slots pour une ou
des utilisations particulières (comme ici).
on enregistre la forme par Save Form As
 qmake-qt4 –project
pour générer un fichier .pro.
Il est important de laisser avant les fichiers .h et .cpp des classes
étrangères, car qmake-qt4 les intègre automatiquement au projet.
 qmake-qt4
pour le Makefile
 make ui_PlusMoins.h
(ce n’est pas nécessaire, car sera fait
automatiquement par make)
pour générer le ui_PlusMoins.h où l’on retrouve les instances des
objets utilisés (en C++) réunis dans une classe.
Il faut faire le lien avec une instance de cette classe et tout le nécessaire
pour donner vie à l’application.
2I007 & LI357 / Université Paris VI
11
Choun Tong LIEU
2014-2015
●
monbouton.h
#include <QApplication>
#include <QPushButton>
#include <iostream>
class MonBouton : public QPushButton
{
public :
MonBouton (QWidget *parent) : QPushButton(parent) {}
protected :
virtual void mouseReleaseEvent (QMouseEvent *e);
};
●
monbouton.cpp
#include "monbouton.h"
void MonBouton::mouseReleaseEvent (QMouseEvent *e)
{
QPushButton::mouseReleaseEvent(e);
std::cout << "Mon Bouton\n";
}
2I007 & LI357 / Université Paris VI
12
Choun Tong LIEU
2014-2015
●
ui_PlusMoins.h
#ifndef UI_PLUSMOINS_H
#define UI_PLUSMOINS_H
...
#include "monbouton.h"
class Ui_plusmoins
{
public:
QWidget *verticalLayout;
QVBoxLayout *vboxLayout;
MonBouton *plus;
QLineEdit *lineEdit;
MonBouton *moins;
void setupUi(QDialog *plusmoins)
{
plusmoins->setObjectName(QString::fromUtf8("plusmoins"));
...
plus = new MonBouton(verticalLayout);
plus->setObjectName(QString::fromUtf8("plus"));
...
lineEdit = new QLineEdit(verticalLayout);
2I007 & LI357 / Université Paris VI
13
Choun Tong LIEU
2014-2015
lineEdit->setObjectName(QString::fromUtf8("lineEdit"));
...
moins = new MonBouton(verticalLayout);
moins->setObjectName(QString::fromUtf8("moins"));
vboxLayout->addWidget(moins);
retranslateUi(plusmoins);
QSize size(400, 300);
size = size.expandedTo(plusmoins->minimumSizeHint());
plusmoins->resize(size);
...
}
namespace Ui {
class plusmoins: public Ui_plusmoins {};
} // namespace Ui
#endif // UI_PLUSMOINS_H
2I007 & LI357 / Université Paris VI
14
Choun Tong LIEU
2014-2015
●
TP.h
#include "ui_PlusMoins.h"
class TP : public QDialog, public Ui::PlusMoins
{
Q_OBJECT
public:
TP(QWidget *parent = 0);
private slots:
void slotPlus();
void slotMoins();
};
2I007 & LI357 / Université Paris VI
15
Choun Tong LIEU
2014-2015
●
TP.cpp
#include
#include
#include
#include
#include
<QApplication>
"TP.h"
<iostream>
<QObject>
<QString>
int main(int argc, char **argv)
{
QApplication app(argc, argv);
TP *tp = new TP(NULL);
tp->setupUi(tp);
tp->show();
QObject::connect(tp->plus, SIGNAL(clicked()),
tp, SLOT(slotPlus()));
QObject::connect(tp->moins, SIGNAL(clicked()),
tp, SLOT(slotMoins()));
return app.exec();
}
2I007 & LI357 / Université Paris VI
16
Choun Tong LIEU
2014-2015
TP::TP (QWidget *parent) : QDialog(parent)
{
}
void TP::slotPlus(void)
{
QString s = lineEdit->text();
int n
= s.toInt();
s.setNum(n + 1);
lineEdit->setText(s);
}
void TP::slotMoins(void)
{
QString s = lineEdit->text();
int n
= s.toInt();
s.setNum(n - 1);
lineEdit->setText(s);
}
2I007 & LI357 / Université Paris VI
17
Choun Tong LIEU
2014-2015

Il est possible de créer une classe de widget et de demander à Designer de
l’inclure parmi des widgets proposées. Dans l’exemple ci-dessous, on
trouve une nouvelle classe MonLineEdit.

Il faut que la classe soit présentée comme un plugin pour Designer.
Pour cela :
●
Créer une nouvelle classe (ici, MonLineEdit) héritée d’une des
classes de la famille des widgets en ajoutant les slots/signaux ou non.

2I007 & LI357 / Université Paris VI
18
Choun Tong LIEU
2014-2015
monlineedit.h
#include <qapplication.h>
#include <qlineedit.h>
#include <iostream.h>
monlineedit.cpp
#include "monlineedit.h"
class MonLineEdit : public QLineEdit
{
Q_OBJECT
public :
MonLineEdit (QWidget *parent) :
QLineEdit(parent) {}
private slots :
void slotPlus();
void slotMoins();
void
MonLineEdit::slotPlus (void)
{
QString s = text();
int n
= s.toInt();
s.setNum(n + 1);
setText(s);
}
};
void
MonLineEdit::slotMoins (void)
{
QString s = text();
int n
= s.toInt();
s.setNum(n - 1);
setText(s);
}
2I007 & LI357 / Université Paris VI
19
Choun Tong LIEU
2014-2015
●
Créer une classe (ici, MonLineEditPlugin) faisant l’interface entre
la classe MonLineEdit et Designer :
monlineeditplugin.h
#ifndef CUSTOMWIDGETPLUGIN_H
#define CUSTOMWIDGETPLUGIN_H
#include <QDesignerCustomWidgetInterface>
class MonLineEditPlugin : public QObject, public QDesignerCustomWidgetInterface
{
Q_OBJECT
Q_INTERFACES(QDesignerCustomWidgetInterface)
public:
MonLineEditPlugin(QObject *parent = 0);
bool isContainer() const;
bool isInitialized() const;
QIcon icon() const;
QString domXml() const;
QString group() const;
QString includeFile() const;
QString name() const;
QString toolTip() const;
QString whatsThis() const;
QWidget *createWidget(QWidget *parent);
void initialize(QDesignerFormEditorInterface *core);
private:
bool initialized;
};
#endif
2I007 & LI357 / Université Paris VI
20
Choun Tong LIEU
2014-2015
monlineeditplugin.cpp
#include "monlineedit.h"
#include "monlineeditplugin.h"
#include <QtPlugin>
MonLineEditPlugin::MonLineEditPlugin(QObject *parent)
: QObject(parent)
{ initialized = false; }
void MonLineEditPlugin::initialize(QDesignerFormEditorInterface * /* core */)
{ if (initialized)
return;
initialized = true;
}
bool MonLineEditPlugin::isInitialized() const
{ return initialized; }
QWidget *MonLineEditPlugin::createWidget(QWidget *parent)
{ return new MonLineEdit(parent); }
QString MonLineEditPlugin::name() const
{ return "MonLineEdit"; }
2I007 & LI357 / Université Paris VI
21
Choun Tong LIEU
2014-2015
QString MonLineEditPlugin::group() const
{ return "Display Widgets [Examples]"; }
QIcon MonLineEditPlugin::icon() const
{ return QIcon(); }
QString MonLineEditPlugin::toolTip() const
{ return ""; }
QString MonLineEditPlugin::whatsThis() const
{ return ""; }
bool MonLineEditPlugin::isContainer() const
{ return false; }
QString MonLineEditPlugin::domXml() const
{
return "<widget class=\"MonLineEdit\" name=\"monLineEdit\">\n"
" <property name=\"geometry\">\n"
" <rect>\n"
"
<x>0</x>\n"
"
<y>0</y>\n"
"
<width>100</width>\n"
"
<height>100</height>\n"
" </rect>\n"
" </property>\n"
" <property name=\"toolTip\" >\n"
2I007 & LI357 / Université Paris VI
22
Choun Tong LIEU
2014-2015
" <string>Mon Line Edit</string>\n"
" </property>\n"
" <property name=\"Qu'est-ce-que c'est ?\" >\n"
" <string>Mon Line Edit.</string>\n"
" </property>\n"
"</widget>\n";
}
QString MonLineEditPlugin::includeFile() const
{ return "monlineedit.h"; }
Q_EXPORT_PLUGIN2(monlineeditplugin, MonLineEditPlugin)
●
●
Il faut ensuite à partir de ces fichiers générer un projet :
qmake-qt4 –project
 MonLineEdit.pro
Modifier ce fichier pour qu’un lib contenant la classe MonLineEdit
et son plugin MonLineEditPlugin soit créé pour Designer :
2I007 & LI357 / Université Paris VI
23
Choun Tong LIEU
2014-2015
TEMPLATE = lib
CONFIG += designer plugin debug_and_release
TARGET =
DEPENDPATH += .
INCLUDEPATH += .
# Input
HEADERS += monlineedit.h monlineeditplugin.h
SOURCES += monlineedit.cpp monlineeditplugin.cpp
●
●
Exécuter ensuite qmake-qt4 pour créer le Makefile et ensuite
compiler avec make qui rend un lib (ici, libMonLineEdit.so)
prêt à s’intégrer dans les widgets de Designer.
Il suffit pour cela d’indiquer le chemin :
●
Créer un répertoire ..../plugins/designer et y mettre le
fichier libMonLineEdit.so.
●
Faire un export QT_PLUGIN_PATH=…./plugins
●
Lancer designer-qt4.
2I007 & LI357 / Université Paris VI
24
Choun Tong LIEU