Bonjour tout le monde,
voici enfin mon premier petit tuto sur QML. J'ai beaucoup parlé de ce langage... et vous allez enfin pouvoir comprendre pourquoi.
J'ai installé Qt 4.7 et QtCreator (le tout dernier en version beta en somme, mais ce n'est pas très important). J'ai créé un simple projet QML et voici ce que j'obtiens :
import QtQuick 1.0
Rectangle {
width: 360
height: 360
Text {
anchors.centerIn: parent
text: "Hello World"
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
C'est très important pour vous de comprendre exactement ce que signifie ce petit morceau de code même si, en jetant un simple coup d'oeil, tout est très clair. Je sais que vous n'êtes pas bête mais je vais quand même expliquer tout ça.
Comme vous pouvez le litre, l’élément racine est un
Rectangle. Et il est nécessaire que ce soit un
Rectangle pour être sûr que l'on puisse voir quelque chose car l'élément de base de toute application QML est un
Rectangle. Ce rectangle a bien entendu des propriétés intrinsèques telles que
width,
height,
color, etc. J'en parlerai plus en détail plus tard.
Dans notre
Rectangle, nous rajoutons un élément
Text qui possède lui aussi des propriétés telles que
text (le text à afficher),
width,
height, etc. Bien entendu, toutes les propriétés en rapport avec la taille du texte, sa couleur ou encore la police du texte peuvent être changées. Les propriétés de type
anchors permettent d'attacher un élément à un autre. QML suit le patron parent/enfant. On peut donc lier un enfant à son parent ou aux autres enfants de l'élément parent. Du coup, je pense que vous comprenez que
anchors.centerIn: parent permet de centrer l'élément courant dans son parent. Cela sera toujours vrai même si vous modifier la taille de l'élément parent.
Le second élément est une
MouseArea. Cet élément permet de gérer tout évènement induit par la souris (simple clique, double clique, clique long, etc.) et en capturant cet évènement, vous pouvez faire quelque chose. Dans cet exemple, l'application sera fermée. Cette
MouseArea est ancrée de façon à remplir l'espace (en gros, la zone de capture de la souris recouvre tout l'espace). Comme je vous l'avais dit: c'est assez facile à comprendre.
De mon point de vue, je trouver que ce code aussi simple soit-il manque de quelque chose. En effet, bien que ce soit petit et simple, je pense que ce bout de code serait mieux comme ceci :
import QtQuick 1.0
Rectangle {
id: hello_root
width: 360
height: 360
Text {
id: hello_text
anchors.centerIn: parent
text: "Hello World"
}
MouseArea {
id: hello_msa
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
La différence est très légère mais très importante. Comme je vous l'ai dit, tout fonctionne de façon parent/enfant. Un enfant peut se référer à son parent en utilisant le mot clé
parent. Cependant, pour ancrer ensemble deux enfants, la seule façon de faire est en utilisant l'
id de l'élément. C'est pourquoi, en tant que première bonne pratique, je vous prie de toujours rajouter l'
id. Et par pitié, garder le nom simple et clair ! C'est
TRÈS important. Quand on a un fichier dont tous les éléments sont appelés text1, text2, text3, etc. c'est tout simplement dégoûtant à lire !
Jusque là, tout va bien. Voyons voir ce qu'on obtient :
Mouais, bon, c'est pas très excitant vous allez me dire. Mais comme je vous l'ai dit, on peut s'amuser un peu avec les propriétés et voici une petite version un peu plus marrante :
Voici le code :
import QtQuick 1.0
Rectangle {
id: happy_root
width: 360
height: 360
color: "darkgrey"
Rectangle{
id: happy_circle_red
x: 31
y: 97
width: 41
height: 41
radius: width/2
color: "red"
}
Rectangle{
id: happy_circle_blue
x: 68
y: 248
width: 20
height: 20
radius: width/2
color: "blue"
}
Rectangle{
id: happy_circle_yellow
x: 142
y: 121
width: 28
height: 28
radius: width/2
color: "yellow"
}
Rectangle{
id: happy_circle_pink
x: 221
y: 233
width: 54
height: 54
radius: width/2
color: "pink"
}
Rectangle{
id: happy_circle_green
x: 271
y: 72
width: 63
height: 63
radius: width/2
color: "lightgreen"
}
Text {
id: happy_text
anchors.centerIn: parent
color: "blue"
font.pointSize: 16
font.bold: true
text: "Happy New Year"
}
MouseArea {
id: happy_msa
anchors.centerIn: parent
onClicked: {
Qt.quit();
}
}
}
Bon, vous devez penser: "Ouais, c'est... nul" mais vous vous trompez. Et vous comprendrez mieux pourquoi dans le prochain tuto que je ferai dans lequel je vous apprendrai à faire vos propres éléments QML pour que le code ne soit pas aussi imposant pour rien. A bientôt :D
EDIT: Ok, bon, il semblerait que je n'ai pas été très clair sur un point, je suis désolé, voici l'explication:
La prorpiété
radius qui est rajoutée au
Rectangle permet d'avoir des angles arrondis. Si vous regardez de plus près, vous pouvez voir :
radius: width/2
Cela signifie tout simplement que je réutilise la largeur du rectangle et en la divisant par 2, ça me permet de créer un cercle. C'est une petite astuce maison, navré de ne pas l'avoir expliquée plus tôt.
Avec QML, vous pouvez réutiliser presque toutes les propriétés de l'objet courant ou de tout autre objet du moment que vous donnez la bonne référence. C'est pour ça que je vous prie de bien vouloir donner des noms à tous les éléments.
