Tuto - Nouveau composant QML et intégration dans une interface graphique

L’objectif de ce tuto est de créer un composant graphique complexe (c’est à dire composé de plusieurs éléments graphiques simples, tels des rectangles, des textes…), pour s’en servir à plusieurs reprises dans une application (ou dans plusieurs applications d’ailleurs).

Commençons par créer un projet Qt Quick Application, appelé TestPluginComponent. Nous allons créer un nouveau composant QtQuick (langage Qml), et l’intégrer à plusieurs reprises dans cette application.

Création du composant

  • Créez un nouveau fichier de ressources : New File / Qt / Qt Resource File.

  • Créez un nouveau fichier Qml appelé MyComponent : New File / QT/ Qml file (Qt Quick 2). Important: Mettez la première lettre du nom du composant en majuscule !

  • Passez en mode Design sur le fichier MyComponent.qml, et faite quelque chose qui ressemble à cela :

    • Identifiant : monPlugin
    • Réduire la fenêtre principale à 90x60.
    • Ajouter un élément Text (identifié par plugTexte), centré sur la fenêtre, taille 24 pixels. Changer le texte Text qui apparaît par votre prénom, et dans l’icône à gauche en forme d’écrou, sélectionner Export Property as Alias.
      qml1.png
      Cette dernière opération aura généré automatiquement la ligne suivante property alias plugTextText: plugTexte.text dans le fichier MyComponent.qml.

  • À ce stade, il faut inclure les fichiers qml dans le répertoire Ressouces. Cela se fait en utilisant le bouton droit de la souris sur le répertoire Ressources, et en sélectionnant le menu Ajouter des fichiers existants, aboutissant à l’organisation suivante:
    qml2.png

Intégration du composant dans notre application

  • Sélectionnez le fichier main.qml en mode Design. Changer les dimensions de Window en 300x100.

  • Ajoutez un rectangle coloré ajusté aux dimensions de votre fenêtre. Ajouter la propriété focus: true , dans le menu Avancé.

  • Notez que le composant MyComponent apparaît comme nouvel élément du panneau latéral gauche : qml3.png

  • Ajouter deux instances de ce nouveau composant dans votre fenêtre, en les identifiant par prenom1 et prenom2 (pas de majuscule, pas d’espace).

  • La propriété exportée par alias de notre composant se trouve visible pour chaque instance (cf Exposed Custom Properties): vous pouvez donc changer le texte qui apparaît sur chaque composant. À cet égard, sélectionner le bouton tr (il doit apparaître en bleu), pour que la chaîne de caractères soit considérée comme une QString :
    qml4.png

  • Ajoutons de l’interactivité :
    Si la touche A (lettre A majuscule) est appuyée, alors on remplace Ahmed par Alba. Pour cela, il suffit d’insérer le code suivant dans l’item Rectangle de main.qml : 

Keys.onPressed: (event)=> {
    if (event.key === Qt.Key_A) {
        prenom1.plugTextText=qsTr("Alba")
        console.log(event.key + " /// " + event.text);
        event.accepted = true;
    }
}

Vérifiez que cela marche !

  • Ajoutons maintenant des actions avec la souris. Si je clique-gauche sur le second prénom (dans mon exemple Irina), alors la couleur de la police doit changer.
    • En mode Design sur le fichier main.qml, ajoutez un élément Mouse Area dans le Rectangle, et on déplace l’élément prenom2 de manière à obtenir la hiérarchie suivante dans le navigateur : qml6.png
    • En mode Edition, ajoutez la ligne onClicked: console.log("prénom cliqué") dans l’élément MouseArea, et vérifiez, lors de l’exécution du programme, que le texte apparaît bien dans la console lorsque l’on appuie avec la souris dans la zone définie par Mouse Area. Il ne doit rien se passer si vous cliquez en dehors de cette zone.
    • Pour changer la couleur de la police associée au prénom Irina, repartons vers le fichier MyComponent.qml, en mode Design, et exporter la propriété qui correspond à la couleur de la police (relire plus haut si vous ne savez plus comment faire).
    • Dans le fichier main.qml, modifier la ligne onClicked:... par onClicked: prenom2.plugTextColor="#51c3e1". Testez l’action de la souris sur le prénom.