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.

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 plateforme ont choisi un code XML).
Il suffit d'une ligne de code pour afficher "Hello World!" contre une trentaine avec Qt (voir Hello World! 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.

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 fonctionner avec JavaScript.

Caractéristiques du langage

• La syntaxe est inspirée de celle de C. Les objets sont décrits comme des structures C.
• Il n'y a pas de point virgule en fin d'instruction quand on retourne à la ligne (comme en Scriptol).
• Un objet peut être défini par combinaison d'autres objets.
• Les valeurs des propriétés d'un objet peuvent être des expressions JavaScript. On peut ainsi associer une liste de conditions-actions à une propriété.
• State, Transition, Animation sont des blocs que l'on associe aux objets graphiques (tels que Image, Rectangle, Text, etc.).
• State est une déclaration nommée qui décrit un ensemble de propriétés, que l'on applique à un objet graphique quand une condition est remplie.
• Transition est une déclaration qui étale un changement dans le temps.
• Animation décrit l'évolution d'un objet à partir du changement de ses propriétés.

Exemples de code

Dessiner un rectangle contenant les mots "Hello World!".

Rectangle {
   width: 200
   height: 200
   color: mouse.pressed ? "blue" : "red"  
   Text {          
     text: "Hello World"          
     anchors.centerIn: parent      
   }  
}

Inclure du code JavaScript...

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

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

Outils et documentation

• QML. La description de Nokia.
• Qt Creator. IDE de développement.
• Qt Quick. Kit de développement, inclut Qt Creator.

Tweet