Le tutoriel QML, partie 2 : composants QML

Ce chapitre ajoute un sélecteur de couleur pour changer la couleur du texte.

Le sélecteur de couleur est composé de six cellules de différentes couleurs. Pour éviter la réécriture du même code pour chaque cellule, on crée un nouveau composant Cell. Un composant permet de définir un nouveau type réutilisable dans d'autres fichiers QML. Un composant QML peut être comparé à une boîte noire pouvant interagir avec le monde extérieur au travers des propriétés, des signaux et des fonctions, définis dans son propre fichier QML. (Pour plus de détails, voir définir de nouveaux composants). Le nom du fichier du composant doit toujours commencer par une lettre majuscule.

Voici le code QML pour le fichier Cell.qml :

 import QtQuick 1.0
 
 Item {
     id: container
     property alias cellColor: rectangle.color
     signal clicked(color cellColor)
 
     width: 40; height: 25
 
     Rectangle {
         id: rectangle
         border.color: "white"
         anchors.fill: parent
     }
 
     MouseArea {
         anchors.fill: parent
         onClicked: container.clicked(container.cellColor)
     }
 }

Explications

Le composant Cell

 Item {
     id: container
     property alias cellColor: rectangle.color
     signal clicked(color cellColor)
 
     width: 40; height: 25

L'élément racine de notre composant est un Item ayant pour identifiant container. Un Item est le plus simple élément visuel dans QML et est souvent utilisé comme conteneur pour les autres éléments.

     property alias cellColor: rectangle.color

On déclare une propriété cellColor. Cette propriété est accessible de l›extérieur du composant, cela permet d'instancier les cellules avec différentes couleurs. Cette propriété n'est qu'un alias d'une propriété déjà existante - la couleur du rectangle qui compose la cellule (voir ajouter des propriétés).

     signal clicked(color cellColor)

On souhaite que le composant possède aussi un signal, clicked, avec un paramètre de type color, cellColor. On va utiliser ce signal pour changer la couleur du texte dans le fichier principal QML plus tard.

     Rectangle {
         id: rectangle
         border.color: "white"
         anchors.fill: parent
     }

Le composant cellule est simplement un rectangle colorié ayant l'identifiant rectangle.

La propriété anchors.fill est une façon commode de définir la taille d'un élément. Dans ce cas, le rectangle aura la même taille que son parent (voir layout basé sur les ancres).

     MouseArea {
         anchors.fill: parent
         onClicked: container.clicked(container.cellColor)
     }

Pour changer la couleur du texte lors du clic sur la cellule, on crée un élément MouseArea ayant la même taille que son parent.

Une MouseArea définit un signal appelé clicked. Lorsque ce signal est déclenché, on veut émettre le signal clicked avec la couleur en paramètre.

Le fichier QML principal

Dans le fichier principal QML, on utilise le composant Cell pour créer un sélecteur de couleurs :

 import QtQuick 1.0
 
 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"
 
     Text {
         id: helloText
         text: "Hello world!"
         y: 30
         anchors.horizontalCenter: page.horizontalCenter
         font.pointSize: 24; font.bold: true
     }
 
     Grid {
         id: colorPicker
         x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
         rows: 2; columns: 3; spacing: 3
 
         Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
     }
 }

On crée le sélecteur de couleurs en insérant six cellules, dans une grille, avec différentes couleurs.

         Cell { cellColor: "red"; onClicked: helloText.color = cellColor }

Lorsque le signal clicked de la cellule est déclenché, on veut définir la couleur du texte à la couleur cellColor passée en paramètre. On peut réagir à n'importe quel signal du composant grâce à une propriété du nom ‹onSignalName› (voir gestionnaires de signaux).

[ Précédent : le tutoriel QML, première partie : types de base ] [ Suivant : le tutoriel QML, troisième partie : états et transitions ]

Remerciements

Merci à Alexandre Laurent pour la traduction ainsi qu'à Thibaut Cuvelier, Jonathan Courtois et Jacques Thery pour leur relecture !