Premier tutoriel QML

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.