Le QML : les IHM déclaratives selon Qt
Principe
Problématique
Depuis quelques années, on assiste à l'émergence de nouveaux périphériques : PDA, téléphones portables, tablettes numériques, ... On a ainsi vu émerger de nouvelles pratiques tant au niveau de l'ergonomie qu'au niveau du design général des applications. Cela s'est aussi accompagné par de nouveaux moyens d'intéragir avec les programmes comme les écrans tactiles ou les accéléromètres.
Ainsi, de nouvelles possibilités matérielles appellent à de nouvelles méthodes de développement. On peut ainsi profiter d'un système prévu dès sa conception pour gérer ses possibilités. Cela permet de profiter pleinement et simplement des nouveautés plutôt que d'utiliser les anciennes méthodes.
En effet, il faut permettre aux développeurs de faire des IHM fluides à l'instar de l'Iphone tout en restant simple et facile à réaliser pour permettre au plus grand nombre de créer. Un autre problème qui est apparu rapidement est la diversité des plateformes qui impose aux développeurs de recréer un programme pour chaque appareil. Un langage pouvant être utilisé sur toutes les plateformes permettraient d'amortir plus facilement les coûts.
Objectifs donnés à Qt
Tout d'abord offrir une solution Open Source pour créer des interfaces graphiques sur des appareils mobiles. Cette ouverture est, bien entendu, proposée pour attirer les développeurs. On peut également noter qu'il a été démandé de s'inspirer des solutions déjà existantes pour profiter du retour d'expériences. Certains exemples de codes sources devraient semblés familiers aux habitués de la programmation sur Android ou Iphone.
Pour cela, le projet est à l'heure actuelle au stade de recherche. Aucune version définitive n'est défini car la création du QML a été dirigée par les développeurs de Qt mais l'appel à la communauté a été très important. Les commentaires donnés par les utilisateurs suivant le projet ont été étudiés et beaucoup de leurs demandes ont été implémentées. On obtient ainsi une approche, suivant la philosophie de Qt, de l'interface graphique pour répondre aux nouveaux besoins des utilisateurs.
La programmation déclarative
Pour créer ces interfaces, il a été décidé d'utiliser la programmation déclarative pour décrire ces IHM.
Le but est de privilégier le "Que faire" plutôt que le "Comment faire". Le principe étant de décrire à l'ordinateur le résultat attendu et de laisser à la machine le choix de la mise en oeuvre.
L'un des meilleurs exemples étant le HTML. On décrit ce que contient la page (textes, titres, paragraphes, ...) et non comment l'afficher. La partie d'affichage est laissée libre au navigateur qui s'occupe de retourner le résultat à l'utilisateur final. Le développeur n'a donc pas à développer le rendu graphique, seulement le contenu.
Un autre exemple est la fonction "map" de Perl, il suffit de passer une liste d'éléments et un traitement à effectuer, le reste est géré par le langage. Ainsi, le calcul peut être effectué en parallèle ou optimiser pour la machine tout en étant transparent pour le développeur
L'intéret de cette façon de programmer est multiple. On peut par exemple permettre au compilateur d'appliquer le meilleur algorithme automatiquement ou encore d'utiliser le CPU et le GPU en simultané pour accélérer les calculs ou bien encore la gestion du multi-threads et tout cela de façon transparente. On peut donc voir l'avantage dans le cas du développement sur mobile car les différents appareils ont des performances très hétérogènes. Laisser l'optimisation du code aux compilateurs permet ainsi de s'assurer d'une grande portabilité.
Les IHM déclaratives
Mais comment adapter les IHM pour la programmation déclarative ?
Il suffit de déclarer les éléments de la fenêtre à l'aide de types simples qui sont prédéfinis pour être le plus générique possible. On peut donner comme exemples des rectangles, des images, des textes, des listes, ... Ensuite, il faut spécifier l'agencement de tous ces éléments dans la fenêtre. Il est possible de le fixer en absolue ou en relative mais également en utilisant les "layouts" pour ne pas répondre aux besoins des développeurs.
Après la création d'une fenêtre, il faut définir les animations qui vont être affichées à l'utilisateur final. En effet, la principale différence entre une IHM classique et une IHM mobile est l'impression de fluidité offerte par les interfaces des téléphones portables comme l'effet cinétique sur une liste ou encore le déplacement des éléments au sein d'une fenêtre. Ces effets sont très difficiles à mettre en oeuvre avec une vue par Widgets. Qt permet donc de définir facilement les animations et offre les effets, comme le défilement cinétique, par défaut sur ces éléments.
Le reste de l'application peut être défini soit par du Javascript soit par du C++ en utilisant directement le framework Qt. Ce mode de fonctionnement permet de bien différencier le coeur de métier du logiciel, de l'affichage sur le périphérique. A l'aide de tout cela, on obtient une excellente portabilité.
Le QML
Le résultat de ce processus de création est un langage qui a été baptisé le QML. Il permet de décrire une interface graphique par un arbre d'objets tout en définissant les propriétés qui nous intéressent. L'avantage principal est que les valeurs de ces propriétés peuvent être n'importe quelle expression JavaScript. De plus, ces valeurs pouvant être relatives, l'expression est ré-évaluée à chaque changement de la dépendance.
Cet exemple montre comment créer un Hello World ainsi que le résultat obtenu.
Rectangle {
width: 200
height: 200
color: "white"
Text {
text: "Hello World"
anchors.centerIn: parent
}
}
Résultat obtenu par le code ci-dessus
Comment fonctionne cet exemple :
Rectangle { // definition d un object Rectangle qui sera la fenetre
width: 200 //cette fenetre fera 200 pixels de largeur
height: 200 // et 200 pixels de hauteur
color: "white" // couleur de fond en blanc
Text { // Ensuite on défini un texte
text: "Hello World" // qui affichera Hello world
anchors.centerIn: parent // et qui sera centrer de facon relative au milieu de la fenetre
}
}