QML : CRÉER SON PREMIER PROGRAMME EN QML

Dans cet article je vais vous expliquer comment créer un programme en QML,sans trop tarder on va commencer par créer un nouveau projet sous Qt Creator.

Vous pouvez maintenant choisir le modèle de projet pour nous on doit choisir «Applications ».  Puis cliquer sur «Qt Quick 2 UI »  et enfin cliquez sur le bouton  « choisir.. »

Une petite fenêtre s’ouvre et vous demande de saisir le nom de projet ,entrer un nom puis choisissez l’emplacement et enfin cliquer sur suivant.

Une autre boite de dialogue s’ouvre, c’est la dernière cliquer sur terminer. 

On vient de finir la création de notre projet , maintenant vous devez avoir deux fichiers dans votre projet, ces fichiers sont créés automatiquement par Qt Creator :

Le premier fichier  :  *.qmlproject 

C'est un fichier de configuration du  projet QML.

Le deuxième  fichier  :  *.qml

C'est un  fichier QML , c'est dans ce fichier qu'on va écrire du code. 


Commencer par supprimer le contenu du fichier QML (pour moi c'est FirstTest.qml car j'ai nommé mon projet "FirstTest") .

Maintenant on peut commence à écrire du code mais avant je vais vous présenter les éléments QML qu’on va utiliser pour créer notre application 

        

    1-  Le premier élément QML est :  Rectangle

L’élément "Rectangle" nous permet de dessiner un rectangle , pour cet élément on peut spécifier La longueur, la largeur, la couleur du rectangle, le border et autres propriétés .

Code : QML

Rectangle { id : screen //id de l'élément il doit être unique width: 280 //la longueur en px height: 460 //la largeur en px /* couleur on peut soit donner le nom ou la valeur en Hexadécimal ou bien on utilisant la fonction Qt.rgba(r,g,b,a); */ color : "white" border.width : 10 //la largeur du border en px border.color : Qt.rgba(0,0,0,255); }

    2-  Le deuxième élément QML :    Text

L’élément "Text" nous permet d’afficher un texte, on peut utiliser "html" pour la mise en page du texte.

Code : Qml

Text { id: hello text: "<h1>Hello, Word !</h1>" //le texte qu'on veut afficher color: "#000000" //coleur en Héxadécimal }

Pour notre premier programme,  on ne va pas casser la règle et notre but c’est afficher  «Hello, word ! »

Donc on va commencer par créer la surface où on va écrire  notre texte.

Code : Qml

import QtQuick 2.0  //Cette importation permet l'utilisation de tous les types fournis par le module QtQuick Rectangle { id : screen //id de l’élément il doit être unique width: 280 //la longueur en px height: 460 //la largeur en px /* couleur on peut soit donner le nom ou la valeur en Hexadecimal ou bien on utilisant la fonction Qt.rgba(r,g,b,a); */ color : "white" border.width : 10 border.color : Qt.rgba(0,0,0,255); }

Pour le texte :

Code : Qml

Text { id: hello text: "<h1>Hello, Word !</h1>" //le texte qu'on veut afficher $ }

Maintenant on peut insérer notre texte dans notre élément Rectangle :

Code :  Qml

import QtQuick 2.0 //Cette importation permet l'utilisation de tous les types fournis par le module QtQuick  Rectangle { id : screen //id de l'element il doit etre unique width: 280 //la longueur en px height: 460 //la largeur en px /* couleur on peut soit donner le nom ou la valeur en Hexadecimal ou bien on utilisant la fonction Qt.rgba(r,g,b,a); */ color : "white" border.width : 10 //la largeur du border en px border.color : Qt.rgba(0,0,0,255); Text { id: hello text: "<h1>Hello, Word !</h1>" //le text qu'on veut afficher anchors.centerIn : screen // on centre notre text dans l'element Rectangle } }

Maintenant vous pouvez cliquez sur exécuter.

Résultat :

Pour l’instant on utilise "qmlscene" pour afficher le résultat de notre code, dans le prochain article je vais vous montrer comment intégrer QML dans vos applications C++ ;-).