J’ai déjà présenté ce qu’est QML dans un article passé, ce langage à base de syntaxe Javascript qui permet la création d’interface très simplement.

Il est assez aisé de suivre la documentation pour comprendre le fonctionnement de QML, d’autant plus que plusieurs exemples sont fournis avec la version 4.7 de Qt.

Cependant un petit exemple commenté peut toujours aider :

import Qt 4.7

Item {
    // Taille de la fenêtre
    width: 320; height: 240;

    Rectangle {
        id: rectangle;
        // Dimensions du rectangle pour prendre toute la fenêtre
        width: 320; height: 240;
        // Couleur de fond du rectangle
        color: "lightgray";
        // Les ancres permettent de fixer le rectangle aux coins de l'écran
        anchors.bottom: screen.bottom; anchors.top: screen.top;

        Image {
            // Une image dans le dossier du projet
            id: loading; source: "logo.png"; transformOrigin: "Center";
            rotation: rotationA;
        }
        // Une première transformation : translation de 0 à 180 sur l'axe X et lance la rotation C une fois terminée
        rotation: NumberAnimation {
            target: loading; id: rotationA; property: "x";
            from: 0; to: 180;
            onCompleted: rotationC.start();
        }
        // La même qu'avant mais dans l'autre sens de 180 à 0
        rotation: NumberAnimation {
            target: loading; id: rotationB; property: "x";
            from: 180; to: 0; //running: loading.visible == true;
            onCompleted: rotationD.start();
        }
        // Une rotation avec comme centre, le centre de l'image de 180° à partir de 180
        rotation: RotationAnimation {
            target: loading; id: rotationC; from: 180; to: 360;
            onCompleted: rotationB.start()
        }
        // La même qu'avant mais à partir de 0
        rotation: RotationAnimation {
            target: loading; id: rotationD; from: 0; to: 180;
            onCompleted: rotationA.start()
        }
    }
}

Vous pouvez télécharger l’exemple ci dessous.
Note: There is a file embedded within this post, please visit this post to download the file.

Pour l’exécuter, il vous faudra compiler le projet, soit en ligne de commande :

qml chemin_vers_le_fichier_qml

soit avec un IDE comme QtCreator par exemple.

C’est un exemple très basique mais qui peut servir de base pour s’amuser avec QML.

Je connais et développe avec Qt depuis un moment maintenant, et le moins qu’on puisse dire c’est que le rachat de TrollTech par Nokia n’a en rien altéré la volonté des développeur de faire évoluer leur bébé.

Il faut bien reconnaître que Nokia y trouve son compte en disposant ainsi d’un framework bien complet pour animer ses appareils mobiles.

Mais que nous réservent donc ces deux produits actuellement en “Technology Preview” que sont Qt 4.7 et Qt Creator 2.0 ?

On commence avec Qt 4.7 et les nouveautés que cette version apporte à la 4.6 :

• De nouvelles classes pour la gestion des medias : gestion des playlists etc…
• Nouvelles classes pour le réseau, gestion des interfaces entre autres
• Mais la plus grosse nouveauté dans cette version c’est l’arrivée de Qt Quick

Qt Quick qu’est-ce que c’est ?

Qt Quick c’est un ensemble de trois produits qui vous permet de créer des interfaces dynamiques facilement, rapidement et compatible avec les technologies Qt déjà en place. Qt Quick comprend :

• QML : un langage déclaratif (sur lequel je reviendrai un jour) semblable au Javascript et qui simplifie la création d’interfaces animées et fluides
• QtDeclarative : un ensemble de classes C++ qui traduisent le QML en objets QGraphicScene, et permettent la connexion entre l’interface QML et l’application en C++.
• Enfin Qt Creator 2.0 : l’IDE made in Qt a été revu pour pleinement supporter le QML et ainsi offrir une interface facile à utiliser via le drag and drop, l’auto-complétion et la détection d’erreurs de syntaxe.

Ci-dessous une petite vidéo de Qt Quick en action sur un N900. On notera la fluidité de l’ensemble.

Une autre vidéo disponible sur la page de Qt 4.7, c’est un exemple de développement en QML avec Qt Creator. Encore une fois la simplicité est au rendez-vous.

Vous pouvez en apprendre plus sur ces deux pages et évidemment télécharger le tout pour vous amuser !

Présentation de Qt 4.7

Snapshot Qt 4.7