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 !