Discussion :

[maxouche]

Bonjour à tous,

Je voudrais connaître la différence entre les .ui et les .qml (même si les ui portent bien leurs noms).
Je voudrais faire une appli avec des fenêtres très design (images en fond et images à la place des boutons et non des images dans les boutons où l'on voit les bords du bouton). J'ai vu que la fenêtre 'design' de Qt Creator était intéressante pour mettre disposer les objets et les dimensionner comme il faut.

Merci pour votre aide
Max

[Amnell]

Bonjour,

Le QML et les .ui diffèrent radicalement dans le sens où les .ui intègrent des éléments du module Qt Widgets, qui sous-entend que le développement de l'interface graphique se fait en C++. Leur stylisation se fait par le biais de feuilles de style CSS. Les fichiers QML quant à eux utilisent un langage déclaratif proche du CSS associant des propriétés à des valeurs. Par exemple, pour faire un bouton très simple, stylisé et centré, on aurait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Rectangle { // Création d'un rectangle pour le fond du bouton
    color: "#494949" // Couleur grise pour le fond du bouton
    radius: 12 // On l'arrondit
    width: 50 // Il fait 50px de largeur
    height: 20 // Il fait 20px de hauteur
    anchors.centerIn: parent // On le centre dans la fenêtre le contenant
 
    Text { // Le texte affiché par le bouton
        anchors.centerIn: parent // On le centre dans le rectangle arrondi créé, son parent
        text: "Cliquez ici !" // Le texte du bouton
        color: "white" // Couleur blanche
    }
 
    MouseArea { // Permet de définir une zone permettant de détecter les clics
        anchors.fill: parent // On lui indique qu'il prend la taille de son parent, le rectangle gris
        onClicked: {
            // Traitement à faire lors du clic sur le bouton
        }
    }
}

Un aperçu du rendu :



On atteint des résultats assez sympas via du QML, comme la démo SameGame le montre :



On peut placer ce genre de code dans un fichier .qml pour pouvoir l'instancier dans d'autres fichiers QML sans avoir à tout réécrire. En gros, faire du QML, c'est faire des composants réutilisables selon vos goûts stylistiques et les assembler pour en faire l'interface graphique. Globalement, j'aime aujourd'hui bien plus travailler avec le QML dans le sens où il est bien plus aisé de concevoir simplement une interface graphique avec des animations, un style qui diffère des styles de bureau, ce genre de chose, mais il ne faut pas perdre de vue que, même si le QML est en soit très simple, il faut tout de même apprendre à s'en servir. L'approche générale de développement avec QML est une approche modèle-view, soit avec la logique côté C++ et l'interface graphique côté QML/JavaScript, soit la logique côté JavaScript directement en phase avec le QML, sans qu'il n'y ait plus de C++ qu'un main(). En effet, le QML repose sur le JavaScript, comme à l'endroit du onClicked de la MouseArea du code précédent. Il existe un grand nombre de ressources qui permettent de s'initier au QML si cette nouvelle façon de coder avec Qt vous intéresse.

Voir aussi : Le forum Qt, les cours et tutoriels Qt, et la FAQ Qt.

N'hésitez pas si vous avez des questions (je suis resté très général dans mes explications pour vous donner un léger aperçu),
Bonne soirée,
Louis