L'architecture MVC avec les widgets complexes

• Le modèle : c'est la partie qui contient les données. Le modèle peut par exemple contenir la liste des élèves d'une classe, avec leurs noms, prénoms, âges...
• La vue : c'est la partie qui s'occupe de l'affichage. Elle affiche ce que contient le modèle.
  Par exemple, la vue pourrait être un tableau. Ce tableau affichera la liste des élèves si c'est ce que contient le modèle.
• Le contrôleur : c'est la partie "réflexion" du programme. Lorsque l'utilisateur sélectionne 3 élèves dans le tableau et appuie sur la touche "Supprimer", le contrôleur est appelé et se charge de supprimer les 3 élèves du modèle.

• Le modèle est la partie qui contient les données (comment, on verra ça après). Les données sont généralement récupérées en lisant un fichier ou une base de données.
• La vue est juste la partie qui affiche le modèle, ce sera donc un widget dans notre cas.
  Si un élément est ajouté au modèle (par exemple un nouvel élève apparaît) la vue se met à jour automatiquement pour afficher le nouveau modèle.
• Le contrôleur est la partie la plus algorithmique, c'est-à-dire le cerveau de votre programme. S'il y a des calculs à faire, c'est là qu'ils sont faits.

Les classes gérant le modèle

• Soit vous créez votre propre classe de modèle. Il faut créer une classe héritant de QAbstractItemModel. C'est la solution la plus flexible mais aussi la plus complexe, nous ne la verrons pas ici.
• Soit vous utilisez une des classes génériques toutes prêtes offertes par Qt :
  
  • QStringListModel : une liste de chaînes de caractères, de type QString. Très simple, très basique. Ca peut suffire pour les cas les plus simples.
  • QStandardItemModel : une liste d'éléments organisés sous forme d'arbre (chaque élément peut contenir des sous-éléments). Ce type de modèle est plus complexe que le précédent, car il gère plusieurs niveaux d'éléments. Avec QStringListModel, c'est un des modèles les plus utilisés.
  • QDirModel : la liste des fichiers et dossiers stockés sur votre ordinateur. Ce modèle va analyser en arrière-plan votre disque dur, et restitue la liste de vos fichiers sous la forme d'un modèle prêt à l'emploi.
  • QSqlQueryModel, QSqlTableModel et QSqlRelationalTableModel : données issues d'une base de données. On peut s'en servir pour accéder à une base de données (ceux qui ont déjà utilisé MySQL, Oracle ou un autre système du genre seront probablement intéressés).
    Je ne vais pas rentrer dans les détails de la connexion à une base de données dans ce chapitre, ce serait un peu hors-sujet.

Les classes gérant la vue

• QListView : une liste d'éléments.
  
  
  
  
  
  
• QTreeView : un arbre d'éléments, où chaque élément peut avoir des éléments enfants.
  
  
  
  
  
  
• QTableView : un tableau.
  
  
  

Appliquer un modèle à la vue

1. Créer le modèle
2. Créer la vue
3. Associer la vue et le modèle

Plusieurs modèles ou plusieurs vues

Plusieurs modèles et une vue

Un modèle pour plusieurs vues

1

QDirModel *modele = new QDirModel;

Le modèle appliqué à un QTreeView

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QVBoxLayout *layout = new QVBoxLayout;

    QDirModel *modele = new QDirModel;
    QTreeView *vue = new QTreeView;
    vue->setModel(modele);

    layout->addWidget(vue);

    setLayout(layout);
}

Le modèle appliqué à un QListView

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QVBoxLayout *layout = new QVBoxLayout;

    QDirModel *modele = new QDirModel;
    QListView *vue = new QListView;
    vue->setModel(modele);

    layout->addWidget(vue);

    setLayout(layout);
}

1

vue->setRootIndex(modele->index("C:"));

Le modèle appliqué à un QTableView

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QVBoxLayout *layout = new QVBoxLayout;

    QDirModel *modele = new QDirModel;
    QTableView *vue = new QTableView;
    vue->setModel(modele);

    layout->addWidget(vue);

    setLayout(layout);
}

• QStringListModel : une liste simple d'éléments de type texte, à un seul niveau.
• QStandardItemModel : une liste plus complexe à plusieurs niveaux et plusieurs colonnes, qui peut convenir dans la plupart des cas.

QStringListModel : une liste de chaînes de caractères QString

• Construire un objet de type QStringList, qui contiendra la liste des chaînes.
• Créer un objet de type QStringListModel et envoyer à son constructeur le QStringList que vous venez de créer pour l'initialiser.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QVBoxLayout *layout = new QVBoxLayout;

    QStringList listePays;
    listePays << "France" << "Espagne" << "Italie" << "Portugal" << "Suisse";
    QStringListModel *modele = new QStringListModel(listePays);

    QListView *vue = new QListView;
    vue->setModel(modele);

    layout->addWidget(vue);

    setLayout(layout);
}

1

listePays.append("Belgique");

QStandardItemModel : un liste à plusieurs niveaux et plusieurs colonnes

• List Model : c'est un modèle avec une seule colonne et pas de sous-éléments. C'est le modèle utilisé par QStringList, mais QStandardItemModel peut aussi le faire (qui peut le plus peut le moins !).
  Ce type de modèle est en général adapté à un QListView.
• Table Model : les éléments sont organisés avec plusieurs lignes et colonnes.
  Ce type de modèle est en général adapté à un QTableView.
• Tree Model : les éléments ont des sous-éléments, ils sont organisés en plusieurs niveaux. Ce n'est pas représenté sur le schéma ci-dessus, mais rien n'interdit de mettre plusieurs colonnes dans un modèle en arbre aussi !
  Ce type de modèle est en général adapté à un QTreeView.

Gérer plusieurs lignes et colonnes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QVBoxLayout *layout = new QVBoxLayout;

    QStandardItemModel *modele = new QStandardItemModel(5, 3);

    QTableView *vue = new QTableView;
    vue->setModel(modele);

    layout->addWidget(vue);

    setLayout(layout);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QVBoxLayout *layout = new QVBoxLayout;

    QStandardItemModel *modele = new QStandardItemModel(5, 3);
    modele->setItem(3, 1, new QStandardItem("Zéro !"));

    QTableView *vue = new QTableView;
    vue->setModel(modele);

    layout->addWidget(vue);

    setLayout(layout);
}

Ajouter des éléments enfants

1. Créer un élément (par exemple "item"), de type QStandardItem. Ligne 9
2. Ajouter cet élément au modèle avec appendRow(). Ligne 10
3. Ajouter un sous-élément à "item" avec appendRow(). Ligne 11

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QVBoxLayout *layout = new QVBoxLayout;

    QStandardItemModel *modele = new QStandardItemModel;

    QStandardItem *item = new QStandardItem("John Deuf");
    modele->appendRow(item);
    item->appendRow(new QStandardItem("17 ans"));

    QTreeView *vue = new QTreeView;
    vue->setModel(modele);

    layout->addWidget(vue);

    setLayout(layout);
}

• Lorsqu'on ne peut sélectionner qu'un seul élément à la fois.
• Lorsqu'on peut sélectionner plusieurs éléments à la fois.

Une sélection unique

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#ifndef HEADER_FENPRINCIPALE
#define HEADER_FENPRINCIPALE

#include <QtGui>

class FenPrincipale : public QWidget
{
    Q_OBJECT

    public:
        FenPrincipale();

    private:
        QListView *vue;
        QStringListModel *modele;
        QPushButton *bouton;

    private slots:
        void clicSelection();
};


#endif

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QVBoxLayout *layout = new QVBoxLayout;

    QStringList listePays;
    listePays << "France" << "Espagne" << "Italie" << "Portugal" << "Suisse";
    modele = new QStringListModel(listePays);

    vue = new QListView ;
    vue->setModel(modele);

    bouton = new QPushButton("Afficher la sélection");

    layout->addWidget(vue);
    layout->addWidget(bouton);

    setLayout(layout);

    connect(bouton, SIGNAL(clicked()), this, SLOT(clicSelection()));
}

void FenPrincipale::clicSelection()
{
    QItemSelectionModel *selection = vue->selectionModel();
    QModelIndex indexElementSelectionne = selection->currentIndex();
    QVariant elementSelectionne = modele->data(indexElementSelectionne, Qt::DisplayRole);
    QMessageBox::information(this, "Elément sélectionné", elementSelectionne.toString());
}

1. On récupère un objet QItemSelectionModel qui contient des informations sur ce qui est sélectionné sur la vue. C'est la vue qui nous donne un pointeur vers cet objet grâce à vue->selectionModel().
2. On appelle la méthode currentIndex() de l'objet qui contient des informations sur la sélection. Cela renvoie un index, c'est-à-dire en gros le numéro de l'élément sélectionné sur la vue.
3. Maintenant qu'on connaît le numéro de l'élément sélectionné, on veut retrouver son texte. On appelle la méthode data() du modèle, et on lui donne l'index qu'on a récupéré (c'est-à-dire le numéro de l'élément sélectionné). On récupère le résultat dans un QVariant, qui est une classe qui peut aussi bien stocker des int que des chaînes de caractères.
4. On n'a plus qu'à afficher l'élément sélectionné récupéré. Pour extraire la chaîne du QVariant, on appelle toString().

Une sélection multiple

1

vue->setSelectionMode(QAbstractItemView::ExtendedSelection);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

void FenPrincipale::clicSelection()
{
    QItemSelectionModel *selection = vue->selectionModel();
    QModelIndexList listeSelections = selection->selectedIndexes();
    QString elementsSelectionnes;

    for (int i = 0 ; i < listeSelections.size() ; i++)
    {
        QVariant elementSelectionne = modele->data(listeSelections[i], Qt::DisplayRole);
        elementsSelectionnes += elementSelectionne.toString() + "<br />";
    }

    QMessageBox::information(this, "Eléments sélectionnés", elementsSelectionnes);
}

1. La première ligne ne change pas : on récupère l'objet qui contient des informations sur les éléments sélectionnés.
2. Ensuite, au lieu d'appeler currentIndex(), on demande selectedIndexes() parce qu'il peut y en avoir plusieurs.
3. On crée un QString vide dans lequel on stockera la liste des pays pour l'afficher ensuite dans la boîte de dialogue.
4. Vient ensuite une boucle. En effet, l'objet listeSelections récupéré est un tableau (en fait c'est un objet de type QList, mais on peut faire comme si c'était un tableau). On parcourt donc ce tableau ligne par ligne, et on récupère à chaque fois le texte correspondant.
5. On stocke ce texte à la suite du QString, qui se remplit au fur et à mesure.
6. Une fois la boucle terminée, on affiche le QString qui contient la liste des pays sélectionnés. Et voilà le travail !