Le tutoriel QML, première partie : types de base

Ce premier programme est un exemple d'un « Hello world » très simple qui introduit quelques concepts basiques du QML. L'image ci-dessous est une capture d'écran du programme.

Voici le code QML pour ce programme :

 import QtQuick 1.0
 
 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"
 
     Text {
         id: helloText
         text: "Hello world!"
         y: 30
         anchors.horizontalCenter: page.horizontalCenter
         font.pointSize: 24; font.bold: true
     }
 }

Explications

import

Premièrement, on doit importer les types utilisés dans cet exemple. La plupart des fichiers QML vont importer les types de base dans QML (tels que Rectangle, Image...) venant de Qt, avec :

 import QtQuick 1.0

Élément Rectangle

 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"

On déclare un élément racine de type Rectangle. Il fait partie des blocs basiques utilisables pour créer une application QML. On lui donne un identifiant id pour y faire référence plus tard. Dans ce cas, on l'appelle « page ». On a aussi défini les propriétés de largeur width, de hauteur height et de couleur color. L'élément Rectangle possède de nombreuses propriétés (tel que x et y) mais on laisse leur valeur par défaut.

Élément Text

     Text {
         id: helloText
         text: "Hello world!"
         y: 30
         anchors.horizontalCenter: page.horizontalCenter
         font.pointSize: 24; font.bold: true
     }

On ajoute un élément Text en enfant de l'élément racine Rectangle qui affiche le texte « Hello world! ».

La propriété y est utilisée pour positionner le texte verticalement à 30 pixels du bord supérieur de son parent.

La propriété anchors.horizontalCenter réfère au centre horizontal d'un élément. Dans ce cas, on spécifie que l'élément de texte doit être centré horizontalement dans l'élément page (voir layout basé sur les ancres).

Les propriétés font.pointSize et font.bold sont liés aux polices de caractères et utilisent la notation en point.

Visualiser l'exemple

Pour visualiser l'exemple créé, exécuter l'outil QML Viewer (situé dans le répertoire bin) avec le nom du fichier QML comme premier argument. Par exemple, pour exécuter l'exemple du premier tutoriel à partir du répertoire d'installation, taper :

 bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml

[ Précédent : le tutoriel QML ] [ Suivant : le tutoriel QML, partie 2 : composants QML ]

Remerciements

Merci à Alexandre Laurent pour la traduction, ainsi qu'à Thibaut Cuvelier, Jonathan Courtois et Jacques Thery pour leur relecture !