Premiers pas avec QML

Création d'un document QML

Un document QML définit une hiérarchie d’objets avec une mise en page structurée et très lisible. Chaque document QML se compose de deux parties : une section d’importations et une section de déclaration d’objets. Les types et fonctionnalités les plus courants dans les interfaces utilisateur sont fournis dans l’importation QtQuick.

Importation et utilisation du module QtQuick

Pour utiliser le Qt Quick module, un document QML doit l'importer. La syntaxe d'importation se présente comme suit :

import QtQuick

Les types et fonctionnalités fournis par Qt Quick peuvent désormais être utilisés dans le document QML !

Définition d'une hiérarchie d'objets

La déclaration d’objets dans un document QML définit ce qui sera affiché dans la scène visuelle. Qt Quick fournit les éléments de base de toutes les interfaces utilisateur, tels que les objets permettant d’afficher des images et du texte, ainsi que de gérer les entrées de l’utilisateur.

Une déclaration d’objet simple peut être une fenêtre colorée contenant du texte centré :

Window {
    width: 640
    height: 480
    visible: true
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

Cela définit une hiérarchie d’objets avec un objet racine ` Window ` qui possède un objet enfant ` Text `. L’ parent e de l’objet ` Text ` est automatiquement définie sur ` Window`, et de la même manière, l’objet ` Text ` est ajouté à la propriété ` children ` de l’objet ` Window ` par QML.

Mise en pratique

Les types ` Window ` et ` Text ` utilisés dans l’exemple ci-dessus sont tous deux fournis par l’importation ` QtQuick `. En combinant l’importation et la déclaration d’objet, nous obtenons un document QML complet :

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

Si nous enregistrons ce document sous le nom « HelloWorld.qml », nous pouvons le charger et l'afficher.

Création et exécution de projets QML

Pour afficher la scène graphique définie par le document QML, il suffit de le charger à l’aide de Qt Creator. Pour créer un nouveau projet QML dans Qt Creator:

1. Sélectionnez « File » > « New Project » > Qt Quick Application depuis Qt Creator.
2. Entrez un nom pour votre projet et sélectionnez un emplacement où l'enregistrer.
3. Sélectionnez la version appropriée de Qt et, si vous le souhaitez, configurez les paramètres de contrôle de version pour le projet.
4. Vérifiez le récapitulatif des paramètres de votre projet, puis poursuivez pour terminer la compilation du projet.

Une fois l'opération terminée, Qt Creator générera les fichiers nécessaires et ouvrira le projet pour le développement. Appuyez sur le bouton vert « Run » pour lancer l'application. Vous devriez voir le texte « Hello, World ! » au centre d'un rectangle rouge.

Pour plus d’informations sur la création et l’exécution de projets dans Qt Creator, consultez les pages suivantes :

• Qt Creator: Créer des applications Qt Quick
• Qt Creator: Tutoriel : Compiler et exécuter

Création d'applications QML avec des contrôles

Bien qu’ Qt Quick fournisse des éléments graphiques de base, Qt Quick Controls il fournit des types QML prêts à l’emploi pouvant être utilisés au sein d’une application.

L'insertion du type « ApplicationWindow » constitue un bon point de départ pour créer des applications. L'interface utilisateur d'une application présente la structure de base suivante :

Dans chaque zone, différents contrôles peuvent être ajoutés et reliés entre eux pour former une application. Par exemple, l’extrait de code suivant présente une application basique illustrant l’utilisation de l’espace disponible :

//import related modules
import QtQuick
import QtQuick.Controls

//window containing the application
ApplicationWindow {
    width: 640
    height: 480
    visible: true
    //title of the application
    title: qsTr("Hello World")

    //menu containing two menu items
    header: MenuBar {
        Menu {
            title: qsTr("&File")
            Action {
                text: qsTr("&Open...")
                onTriggered: console.log("Open action triggered")
            }
            MenuSeparator { }
            Action {
                text: qsTr("&Exit")
                onTriggered: Qt.quit()
            }
        }
    }

    //Content Area

    //a button in the middle of the content area
    Button {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

L'application comporte deux éléments de menu et un bouton au centre. Un clic sur l'élément de menu « Exit » ferme l'application.

Il existe également différentes méthodes de navigation et différents contrôles, tels que des boutons et des curseurs. Les exemples suivants, disponibles à l'adresse Qt Creator, illustrent différents contrôles et mises en page.

• Mises en page de base
• Qt Quick Controls - Galerie

N'hésitez pas à copier-coller les extraits de code dans cette application « Hello World » simple pour découvrir le fonctionnement de QML.

Gestion des entrées utilisateur

L'un des grands avantages de l'utilisation de QML pour définir une interface utilisateur est qu'il permet au concepteur d'interface de définir comment l'application doit réagir aux événements à l'aide de simples expressions JavaScript. En QML, ces événements sont appelés « signaux » et sont gérés par des « gestionnaires de signaux ».

Prenons par exemple l'exemple suivant :

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: isRed ? "red" : "blue"
    visible: true

    property bool isRed: true  // Track the color state

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    TapHandler {
        onTapped: root.isRed = !root.isRed  // Toggle state
    }
}

Cet exemple peut être enregistré sous le nom « ClickableHelloWorld.qml » et exécuté à l’aide de qml, l’outil «QML Runtime ». Chaque fois que l’utilisateur clique n’importe où dans la fenêtre, le rectangle passe du rouge au bleu. Un nouveau clic le fait repasser au rouge.

Les saisies au clavier peuvent être gérées de manière similaire à l’aide d’une simple expression :

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true

    Text {
        id: myText
        anchors.centerIn: parent
        text: toggle ? "Hello, World!" : "Goodbye, World!"
        focus: true
        property bool toggle: true
        Keys.onReturnPressed: (event)=>{
            myText.toggle = !myText.toggle;
            event.accepted = true;
        }
    }
}

Désormais, chaque fois que vous appuierez sur la touche Entrée, le texte alternera entre « Hello, World » et « Goodbye, World ».

Liaisons de propriétés

Les objets et leurs propriétés constituent la base d’une interface graphique définie dans un document QML. Le langage QML permet de lier des propriétés entre elles de diverses manières, ce qui permet de créer des interfaces utilisateur très dynamiques.

Dans l’exemple suivant, la géométrie de chaque enfant Rectangle est liée à celle du parent Window. Si la géométrie de l’objet parent Window venait à changer, la géométrie de chaque enfant Rectangle serait automatiquement mise à jour grâce aux liaisons de propriétés.

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true


    Rectangle {
        width: root.width / 2
        height: root.height
        color: "blue"
    }

    Rectangle {
        width: root.width / 2
        height: root.height
        x: root.width / 2
        color: "green"
    }
}

Animations

Les propriétés peuvent également être mises à jour de manière dynamique via des animations. L’import QtQuick fournit divers types d’animations pouvant être utilisés pour animer les changements de valeur d’une propriété. Dans l’exemple suivant, une propriété est animée, puis affichée dans une zone Text:

import QtQuick

Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true

    property int animatedValue

    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation {
            to: 150
            duration: 1000
        }
        PropertyAnimation {
            to: 0
            duration: 1000
        }
    }

    Text {
        anchors.centerIn: parent
        text: root.animatedValue
    }
}

La valeur affichée varie périodiquement entre 0 et 150.

Définition de types QML personnalisés pour la réutilisation

L’un des concepts les plus importants en QML est celui de la réutilisation des types. Une application comportera probablement plusieurs types visuels similaires (par exemple, plusieurs boutons), et QML permet de définir ce genre d’éléments en tant que types personnalisés réutilisables, afin de minimiser la duplication de code et d’optimiser la lisibilité.

Imaginons, par exemple, qu'un développeur définisse un nouveau type « MessageLabel » dans le fichier « MessageLabel.qml » :

// MessageLabel.qml
import QtQuick

Rectangle {
    height: 50
    property string message: "debug message"
    property var msgType: ["debug", "warning" , "critical"]
    color: "black"

    Column {
        anchors.fill: parent
        padding: 5.0
        spacing: 2
        Text {
            text: msgType.toString().toUpperCase() + ":"
            font.bold: msgType == "critical"
            font.family: "Terminal Regular"
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            ColorAnimation on color {
                running: msgType == "critical"
                from: "red"
                to: "black"
                duration: 1000
                loops: msgType == "critical" ? Animation.Infinite : 1
            }
        }
        Text {
            text: message
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            font.family: "Terminal Regular"
        }
    }

}

Ce type peut désormais être réutilisé plusieurs fois dans l’application, comme suit :

// application.qml import QtQuick Window { id: root width: 180 height: 180 visible: true Column { anchors.fill: parent padding: 1.5 topPadding: 10.0 bottomPadding: 10.0 spacing: 5 MessageLabel{ width: root.width - 2 msgType: "debug" } MessageLabel { width: root.width - 2 message: "This is a warning!" msgType: "warning" } MessageLabel { width: root.width - 2 message: "A critical warning!" msgType: "critical" } } }

De cette manière, des types d’interface utilisateur modulaires sont assemblés et réutilisés au sein d’une application.

Consultez la section Attributs des objets QML pour plus de détails sur la manière de développer vos propres composants réutilisables.

Et maintenant ?

Maintenant que vous avez vu le QML en action, vous êtes prêt à passer à l’étape suivante. La page suivante vous guidera dans votre découverte du QML.

• Applications QML
• Qt Quick Exemples et tutoriels