Le QML : les IHM déclaratives selon Qt

Etats - transisitions

Le QML s'utilise en deux étapes. La première : les états qui permettent de défnir l'affichage de l'IHM, le deuxième : les transisitions, qui permettent de spécifier les animations de l'interface graphique.

Les états

La définition donnée par Qt : un état est une abstraction des propriétés d’une collection d’éléments. Pour simplifier, un état permet de définir la position de tous les éléments de la fenêtre à un instant donné. Il faut donc spécifier chaque étape de la fenêtre. Il est possible de définir les différents états d’une fenêtre de façon indépendante les uns par rapport aux autres.

Pour donner un exemple, il faut regarder les images suivantes :

Il y a trois images, correspondant aux trois états de la fenêtre. Ces états sont symbolisés par le déplacement de cette image dans les rectangles gris.
Etat initial
Etat nommé Position1 : l'image est dans le rectangle à droite
Etat nommé Position2 : l'image est dans le rectangle en bas

Code correspondant :

import Qt 4.6

Rectangle {
    id: page
    width: 640; height: 480; color: "#343434"

    // Definition du premier carre
    Rectangle {
        id: initialPosition
        MouseRegion {
            anchors.fill: parent;
            onClicked: page.state = ""
        }
    }

    // definition du second carre
    Rectangle {
        id: position1
        MouseRegion {
            anchors.fill: parent;
            onClicked: page.state = "Position1"
        }
    }

    // definition du dernier carre
    Rectangle {
        id: position2
        MouseRegion {
            anchors.fill: parent;
            onClicked: page.state = "Position2"
        }
    }

    // image qui est déplacer
    Image {
        id: user
        source: "user.png"
        x: initialPosition.x; y: initialPosition.y
    }

    states: [
        // Passage a l etat "Position 1"
        State {
            name: "Position1"
            PropertyChanges { target: user; x: position1.x; y: position1.y }
        },

        // Passage a l etat "Position 2"
        State {
            name: "Position2"
            PropertyChanges { target: user; x: position2.x; y: position2.y }
        }
    ]
}

Ainsi, en cliquant sur les carrés, l'image nommée "user" voit ses attributs "x" et "y" changés pour prendre la position du rectangle sur lequel l'utilisateur a cliqué. Le code source complet est accessible ici.

La calculatrice

Un exemple plus didactique est celui de la calculatrice avec un état simple et un état avancé :


A gauche, un état représentant l'interface simple. A droite, un état de l'interface avancée.

Mais, ce contentez des états reviens à peut être aux mêmes possibilités que la vue par widget. Le véritable intérêt du QML est de rajouter un niveau permettant de gérer les animations.

Pour plus d'informations, je vous conseille la documentation de Qt ici.

Les transistions

Une transition permet de définir une animation entre deux états. On peut voir cela sur une présentation informatique ou l'on peut définir une animation entre deux slides.


Exemple d'une animation

Il est possible de choisir entre quels états appliqués une transition ainsi que la durée de cette animation. On peut également définir les propriétés qui doivent être animées, on peut donc choisir un déplacement vertical avec une animation différente du déplacement horizontal. Il est aussi possible de choisir entre des animations séquentielles ou parallèles.

transitions: [
    Transition {
        from: "*"
        to: "state1"
        NumberAnimation {
            properties: "x,y"
            easing: "OutBounce"
            duration: 200
        }
    }
]

Pour plus d'informations, je vous conseille la documentation de Qt ici.