QML, langage de description d'interface

Qt Markup Langage est un langage déclaratif d'interface utilisateur. Il est compatible avec le framework Qt et s'interface avec son API. Il peut être étendu avec du code C contenant des appels à cette API.

Pour l'utiliser, on ajoute le runtime Qt Declarative à celui de Qt.

Capture d'écran de démos QML
QML démos: galerie et navigateur

Pourquoi utiliser QML?

Construire une interface sous l'environnement Qt est plus facile avec QML comme il est plus facile de décrire une interface Java avec JavaFX, qui est similaire (tandis que d'autres plateformes ont choisi un code dérivé de XML, comme XAML par exemple).
Il suffit d'une instruction pour afficher "Hello World!" contre sept avec Qt comme on le voit dans la liste des "Salut le Monde!" en tous langages.

Le traitement peut être beaucoup plus lent cependant qu'avec l'emploi d'appels directs aux fonctions du framework Qt, aussi le langage convient mieux pour de petites applications avec une interface simple, et moins pour des applications plus lourdes. On peut aussi utiliser QML durant la phase de développement et optimiser ensuite l'application finale en la traduisant en Qt si elle est trop lente.
On recommande en général d'utiliser QML pour les mobiles et Qt seul sur le bureau, sans à cause d'un temps de chargement moins long avec QML.

Selon l'éditeur, le runtime étant installé sur un serveur, une application QML peut fonctionner sur le Web avec HTTP, ce qui en fait une alternative à HTML. On peut aussi générer une page en HTML qui sera vue dans un navigateur et fonctionne avec JavaScript.

QML à une syntaxe JSON plutôt que XML

Le choix d'une syntaxe inspirée de C permet un traitement plus rapide des fichiers et un taille réduite. C'est aussi le principe de JSON.

Exemples de code

Dessiner un rectangle contenant les mots "Salut le Monde!".

Rectangle {
   width: 200
   height: 200
   color: mouse.pressed ? "blue" : "red"  
   Text {          
     text: "Salut le Monde!"          
     anchors.centerIn: parent      
   }  
}

Inclure du code JavaScript...

Rectangle {      
   function calculateHeight() 
   {
     ... calculs... 
     return x;      
   }      

   height: calculateHeight()      
   width: { 
      if (height > 100) 200; else 50 
   }  
}  

Plus d'information sur le site de Qt. On peut trouver sur qt-project.org une démonstration montrant comme réaliser l'interface d'un navigateur en QML, avec tous les widgets nécessaires.