Discussion :

[Avatar36]

Bonjour,

Je viens juste de me mettre à QML et je souhaiterai réaliser un mur contenant des images. Je m'explique:
Je suis en train de réaliser une vidéothèque et pour cela, j'ai besoin de faire un mur de jaquettes. J'ai une base de donnée qui indique l'emplacement des jaquettes sur le disque et je souhaiterais que le logiciel les récupère pour les disposer comme sur un mur. Ils doivent aller à la ligne quand il y a trop d'élément dans la largeur, etc... un peu comme dans l'explorateur Windows. Je n'ai pas nécessairement besoin d'une page de code toute faite mais juste le cheminement et les éventuels objets à explorer. Je vous remercie par avance.

Bonne journée.

[Avatar36]

Je me répond à moi même partiellement:
Je pense qu'il faut utiliser un GridView. Pour le reste, voir l'exemple Flickr qui est disponible dans Qt/examples/declarative/Flickr. C'est plus ou moins la même chose.

Cordialement

[Amnell]

Bonjour,

En effet, c'est bien un GridView qu'il vous faut, avec pour sa propriété "delegate" un composant Image. Ce GridView devra afficher un ListModel contenant les données de chacune des jaquettes.

Bonne soirée,
Louis

[Avatar36]

Pendant qu'on y est, j'aurai 2-3 questions concernant les modèles de vues:
-Qu'est-ce que c'est un modèle de vue concrètement? C'est une manière d'agencer les élément? Et quelles sont les particularités de chacun? Je vois pas bien.
-Le delegate sert à faire une modèle des objets à ranger c'est ça? Et le listElement sert juste à rentrer les données qui seront utilisées par le delegate?
-Est-ce que tu connaitrais un bon tuto pour l’interaction QML/C++? Parce que là, j'ai une base de donnée dans laquelle le C++ fait des requettes et donc récupère principalement des QString et des int. Mais comment je l'envoie au QML pour qu'il les affiche? En fait, je vois pas bien comment on passe d'un ou plusieurs QString au ListElement.

[Amnell]

Salut,

Pour la communication C++/QML, j'avais écrit un petit article il y a longtemps, mais il est à reprendre car incomplet et car il n'y a pas de méthode meilleure que d'autres, seulement des méthodes plus adaptées que d'autres à différentes situations : http://louis-du-verdier.developpez.c...communication/. Pour la communication directe avec du C++, j'avais également donné quelques éléments ici : http://www.developpez.net/forums/d14...n/#post7947917. Dans votre cas, si vous avez une liste simple de chaînes de caractères, vous pouvez passer par une propriété contextuelle de type QStringList. Par exemple :

Code C++ :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
QStringList list;
list << "a" << "b" << "c";
view.rootContext()->setContextProperty("test", list); // avec view, l'instance de l'élément qui affiche le QML

Utilisation dans le QML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
ListView {
    anchors.fill: parent
    model: test
    delegate: Text {
        text: test[index]
    }
}

Dans l'approche modèle/vue, le modèle contient uniquement les données tandis que la vue se charge de l'affichage. Un delegate est un composant graphique qui va être créé pour chaque entrée du modèle. Il permet d'utiliser "index" pour avoir l'id de l'élément actuel du modèle affiché, ce qui permet d'en récupérer le texte associé. Dans votre cas, le delegate serait un composant Image, le modèle serait votre propriété contextuelle, et la vue, un composant GridView. Un modèle peut être pas mal de choses : un ListModel QML, une QStringList, QVariantList, dérivée de QAbstractModel, etc.

N'hésitez pas à demander plus d'informations,
Bonne journée,
Louis

[Avatar36]

Merci de cette réponse, c'est tout de suite nettement plus clair. J'ai deux questions à propos de votre remarque:
1) Qu'est-ce qu'une propriété contextuelle? Une propriété je vois, mais que signifie contextuelle?
2) La variable "index" est-elle une variable définie par la liste ou est-ce qu'on pourrait par exemple faire test[k]?

Cordialement

[Amnell]

Bonjour,

Par propriété contextuelle, j'entends une propriété accessible depuis un contexte. Dans le cas présent, il s'agit du rootContext(), ce qui fait que la propriété contextuelle nommée "test" est accessible partout dans le QML. Pour ce qui est de la propriété "index", il s'agit d'une propriété accessible dans tous les delegates qui permet d'identifier l'id de l'élément traité par le composant du delegate. Si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
ListView {
    model: 10
    delegate: Text { text: index }
    anchors.fill: parent
}

J'aurai pour résultat des textes à la suite affichant 0, 1, 2, etc. jusqu'à 9.

Bonne journée,
Louis

[Avatar36]

Ok, j'étais sûr que c'était ça pour l'index. En revanche je comprend pas le coup du contexte. A la limite, que rootcontext permette de faire une propriété accessible depuis n'importe où d'accord mais je ne saisis pas du tout le concept...

En fait, est-ce que vous pouvez m'expliquer étape par étape ce qu'on fait à cette ligne:

Code C++ :

Sélectionner tout - Visualiser dans une fenêtre à part

view.rootContext()->setContextProperty("test", list);

[Amnell]

Bonsoir,

De ce que je sais, les composants QML possèdent/peuvent posséder ce qui s'appelle des "contextes". Un contexte est une instance de la classe QQmlContext qui peut notamment contenir un certain nombre de propriétés pouvant être exposées aux composants QML associés.

Code C++ :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
QQmlApplicationEngine view; // Création d'un viewer permettant d'afficher l'interface graphique QML
 
QStringList list; // Création d'une liste de chaînes de caractères
list << "a" << "b" << "c"; // Ajout d'éléments dans la liste
 
QString propertyName = "test"; // Définition du nom de la propriété contextuelle
QVariant propertyData = list; // Définition de la valeur de cette propriété
 
QQmlContext *rootContext = view.rootContext(); // Récupération du contexte de l'élément racine de la hiérarchie du QML
rootContext->setContextProperty(propertyName, propertyData); // Ajout d'une propriété à ce contexte (cela la rend accessible par tous les éléments et sous-éléments de l'élément racine du QML)
 
view.load(QUrl(QStringLiteral("qrc:///main.qml"))); // Chargement du code QML

Dans le cas où main.qml contiendrait comme composants un composant Window dans lequel serait intégré un composant Text, par exemple, étant donné qu'on a attribué la propriété "test" au contexte racine, cela fait que le composant Window et tous ses enfants (ici, seulement le Text, du coup) auront accès à cette propriété :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import QtQuick 2.2
import QtQuick.Window 2.1
 
Window {
    width: 1200
    height: 800
    visibility: Window.Maximized
    visible: true
 
    Text {
        anchors.fill: parent
        text: test[0] // Exploitation de la propriété contextuelle ; affiche le premier élément du QStringList "list" C++, c'est-à-dire "a"
    }
}

N'hésitez pas à demander d'autant plus de précisions si je ne suis pas clair,

Bonne soirée,
Louis

[Avatar36]

Je suis en train de lire le document que vous avez rédigé sur la communication C++/QML mais je dois avouer que même à tête reposée j'ai du mal à comprendre. La dernière technique utilise beaucoup d'objets que je ne connais pas donc je suis obligé de jongler entre la doc et ce document. Doc qui d'ailleurs ne m'aide pas beaucoup car elle fait référence à des élément qui font référence à des éléments, etc... Bref, difficile à suivre pour quelqu'un qui débute ^^.

[Avatar36]

Pour la postérité, si j'ai à envoyer des tableaux du C++ vers QML, comment ça se passe? Quel type d'objet faut-il utiliser?

Cordialement

[Amnell]

Bonjour,

En général, un QVariantList est l'idéal. Par exemple, pour transmettre une liste de points par le biais d'une context property :

Code C++ :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
QVariantList list;
list << QPoint(1, 2) << QPoint(1, 3);
viewer.engine()->setContextProperty("mylist", list);

Pour un tableau associatif, un QVariantMap pourra convenir, et ainsi de suite. Le QVariant est en fait une classe qui va permettre de contenir n'importe quel type connu (si le type n'est pas connu, il suffira de le déclarer, mais c'est une autre histoire). Ainsi, un QPoint sera encapsulé dedans mais son type ne sera pas perdu (vous pouvez même déclarer ceci : QVariant mylist = QVariant::fromValue(QVariantList() << QPoint(1, 2) << QPoint(1, 3)); et passer le QVariant en context property, le QML saura qu'il y a une liste derrière).
Du côté du QML, vous allez recevoir une liste exploitable dans le QML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
ListView {
    anchors.fill: parent
    model: mylist
    delegate: Text {
        text: mylist[index].x + ";" + mylist[index].y
    }
}

... ou dans le JavaScript :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function myFunction()
{
    for (var i = 0; i < mylist.length; ++i)
        console.log(mylist[i].x + ";" + mylist[i].y); // Affichage
    mylist.splice(0, 1); // Suppression du premier élément
}

Espérant avoir répondu à votre question,
Bonne soirée,
Louis

[Avatar36]

Ce n'est pas exactement ce à quoi je pensais. Si j'ai bien compris, la QVariantList permet de faire une liste d'un objet particulier. Par exemple, si on met un point dedans, alors elle ne pourra contenir que des points (ou alors j'ai pas compris). Moi je pensais plutôt à un tableau qui se présenterait sous cette forme:
Titre1 | note1 | Commentaire1
Titre2 | note2 | Commentaire2

Et je souhaiterais y accéder de la même manière que vous m'avez indiqué plus haut: tableau[1,2] renvoie note1. Du coup, le tableau est constitué de plusieurs variables (des QString et des Int). En fait ce qui m'intéresse c'est de récupérer des lignes entières de la base de données. En effet, je ne vais pas faire 10 requettes pour obtenir toutes les infos d'une ligne quand je peux en faire qu'une. Ou alors c'est moi qui n'ai pas la bonne méthodologie et qu'il vaut mieux faire les 10 requettes? Mais ça me paraît moins pratique.

[Amnell]

Bonjour,

En gros, vous avez ceci dans chaque ligne [QString, int, QString].
Deux solutions que je vous propose, avec dans un premier temps l'approche par des QVariant :

Code C++ :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
QVariantList entry1 = QVariantList() << "Titre1" << 10 << "Commentaire1";
QVariantList entry2 = QVariantList() << "Titre2" << 18 << "Commentaire2";
QVariant value = QVariantList() << QVariant::fromValue(entry1) << QVariant::fromValue(entry2);
viewer.rootContext()->setContextProperty("mylist", value);

Notez l'intérêt du QVariant::fromValue() qui retourne un QVariant depuis la valeur passée en paramètre (ici, des QVariantList). Cette étape est nécessaire, sinon il tombera sur l'opérateur << qui demande de concaténer deux listes. L'autre solution par du JSON, identique mis à part la syntaxe que je n'ai pas abrégée :

Code C++ :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
QJsonArray entry1;
QJsonArray entry2;
QJsonArray value;
 
entry1.append("Titre1");
entry1.append(10);
entry1.append("Commentaire1");
 
entry2.append("Titre2");
entry2.append(18);
entry2.append("Commentaire2");
 
value.append(entry1);
value.append(entry2);
 
viewer.rootContext()->setContextProperty("mylist", value);

L'utilisation est telle que vous l'avez indiquée, peu importe le type :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for (var i = 0; i < mylist.length; ++i)
    for (var j = 0; j < mylist[i].length; ++j)
        console.log(mylist[i][j]);

Le résultat obtenu est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
qml: Titre1
qml: 10
qml: Commentaire1
qml: Titre2
qml: 18
qml: Commentaire2

Ou une utilisation dans le QML pour afficher le tableau en tant que tel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Column { // Column parce que chaque entrée étant affichée par son Repeater est une ligne : on veut un tableau
    spacing: 10
    anchors.centerIn: parent
 
    Repeater { // Le premier Repeater qui gère chaque ligne : mylist[x]
        model: mylist
        delegate: Row { // Chaque mylist[x] est affiche en ligne
            spacing: 10
 
            Repeater { // Le second Repeater qui gère chaque entrée d'une ligne : mylist[x][y]
                id: row
                model: mylist[index]
                property int i: index // Cette propriété est nécessaire car le cas échéant, on aurait à écrire mylist[index][index], ce qui poserait problème
                delegate: Text {
                    text: mylist[row.i][index] // Récupération de la case mylist[x][y] sous forme d'une string
                }
            }
        }
    }
}

Vous pouvez également remplacer le Column et son Repeater par "ListView" pour avoir un rendu plus sympathique (scrollable, en fait) sur des grandes listes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ListView {
    spacing: 10
    anchors {
        left: parent.left
        right: parent.right
        verticalCenter: parent.verticalCenter
    }
    height: Math.min(childrenRect.height, parent.height) // Pour que la taille de l'élément n’excède pas la taille de son élément le contenant
    model: mylist
    delegate: Row {
        spacing: 10
 
        Repeater {
            id: row
            model: mylist[index]
            property int i: index
            delegate: Text {
                text: mylist[row.i][index]
            }
        }
    }
}

N'hésitez pas si vous avez des questions,
Bonne journée,
Louis

[Avatar36]

Merci, c'est exactement ce que je recherchais. Je reviens vers vous si j'ai encore un souci avec ça.

[Avatar36]

Sur le principe c'est bon, mais dans les faits, j'obtiens les erreurs suivantes:

QSslSocket: cannot resolve TLSv1_1_client_method
QSslSocket: cannot resolve TLSv1_2_client_method
QSslSocket: cannot resolve TLSv1_1_server_method
QSslSocket: cannot resolve TLSv1_2_server_method
QSslSocket: cannot resolve SSL_select_next_proto
QSslSocket: cannot resolve SSL_CTX_set_next_proto_select_cb
QSslSocket: cannot resolve SSL_get0_next_proto_negotiated
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu
qrc:/VideoDelegate.qml:30:17: QML Image: Le protocole "c" est inconnu

La ligne incriminée est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Image { id: jaquetteFilm; source: test[index]; x: 1; y: 1; smooth: true }

J'ai téléchargé des jaquettes sur le net et les ai placées dans un dossier. Mon but est de les afficher, juste pour tester. La propriété test[index] est une QStringList contenant le chemin absolu des images. J'arrive pas à comprendre ce qui cloche :/

[Amnell]

Bonjour,

Le problème vient du fait que Image attende un chemin relatif ou bien une URL et non un chemin absolu brut de la forme "C:/...". Dans le cadre d'un fichier du disque, il faut donc utiliser file:// (c'est pour ça que l'erreur parle du protocole "C:"). Pour remplir votre liste d'URL, côté C++, il vous faut ainsi passer par ceci :

Code C++ :

Sélectionner tout - Visualiser dans une fenêtre à part

mylist << "C:/path/vers/image.png";

À changer en :

Code C++ :

Sélectionner tout - Visualiser dans une fenêtre à part

mylist << QUrl::fromLocalFile("C:/path/vers/image.png").toString();

Cela devrait fonctionner après ça.

Bonne journée,
Louis

[Avatar36]

Effectivement, je n'ai plus les messages d'erreur. Cependant, je n'arrivais pas à afficher les images. Le code est globalement le même que celui de Flickr. J'ai passé le scale du début à 1 au lieu de 0. J'ai alors pu admirer mes images.
Ce qui me laisse supposer que le State "Show" n'est jamais établi. Donc que thumb.status === Image.ready n'est jamais vérifié. Comment est-ce possible? Pourtant l'image est bien chargée puisque j'ai réussi à l'afficher. Donc pourquoi est-ce que ça coince?

[Amnell]

Bonsoir,

Le mieux est que vous me montriez un peu de code pour que je puisse y chercher l'erreur (si ce n'est pas juste que vous avez écrit dans votre code précisément ce que vous avez mis sur votre message, à savoir thumb.status === Image.ready, auquel cas ça reviendrait à dire thumb.status === undefined, parce qu'il s'agit de Ready et non ready).

Bonne soirée,
Louis

[Avatar36]

Voila pour le moment le code du Delegate de mon GridView:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
Item {
    id: wrapper; width: GridView.view.cellWidth; height: GridView.view.cellHeight
Item {
        anchors.centerIn: parent
        scale: 0.0
        Behavior on scale { NumberAnimation { easing.type: Easing.InOutQuad} }
        id: scaleMe
 
        Item {
            width: 200; height: 260; anchors.centerIn: parent
            Rectangle {
                id: whiteRect; width: 200; height: 260; color: "#dddddd"; smooth: true; radius: 5
 
                Image { id: jaquetteFilm; source: test[index]; x: 1; y: 1; smooth: true } 
 
            }
        }
 
        states: [
            State {
                name: "Show"; when: thumb.status === Image.Ready    //Cet état ne s'enclenche jamais  
                PropertyChanges { target: scaleMe; scale: 1 }
            },
            State { //ce n'est pas la peine de se concentrer sur celui-là, il n'est pas encore en état de marche
                name: "Details"
                PropertyChanges { target: scaleMe; scale: 1 }
                ParentChange { target: whiteRect; x: 10; y: 20; parent: imageDetails.frontContainer }
                PropertyChanges { target: murJaquette; state: "DetailedView" }
            }
        ]
        transitions: [
            Transition {
                from: "Show"; to: "Details"
                ParentAnimation {
                    via: foreground
                    NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
                }
            },
            Transition {
                from: "Details"; to: "Show"
                ParentAnimation {
                    via: foreground
                    NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
                }
            }
        ]
    }
    MouseArea { anchors.fill: wrapper; onClicked: photoClicked() }
}

C'est le code de Flickr modifié pour mes besoins. Merci de votre aide ^^.