Qt Quick sort de la quiétude

Image non disponible

Le module Qt Quick et le langage QML est l'un des ajouts majeurs de Qt 4.7. Cet article entre en détail sur ce qu'est Qt Quick et le QML, les spécificités du langage et son interaction avec du code C++/Qt.

Cet article est une traduction autorisée de Qt Quick Quits Quiescence, par Alan Alper.

N'hésitez pas à commenter cet article !
9 commentaires Donner une note à l'article (5)

Article lu   fois.

Les trois auteurs

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. L'article original

Qt Quarterly est une revue trimestrielle électronique proposée par Nokia à destination des développeurs et utilisateurs de Qt. Vous pouvez trouver les versions originales.

Nokia, Qt, Qt Quarterly et leurs logos sont des marques déposées de Nokia Corporation en Finlande et/ou dans les autres pays. Les autres marques déposées sont détenues par leurs propriétaires respectifs.

Cet article est la traduction de l'article Qt Quick Quits Quiescence, par Alan Alper paru dans la Qt Quarterly Issue 34.

Cet article est une traduction de l'un des tutoriels en anglais écrits par Nokia Corporation and/or its subsidiary(-ies), inclus dans la documentation de Qt. Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia.

II. Qu'est-ce que Qt Quick ?

Qt Quick est une fonctionnalité clé de la release de Qt 4.7 et vise à étendre de façon significative la portée de ce framework de première classe. Mais qu'est-ce qu'est exactement Qt Quick ? En un mot : c'est génial. Simplifier un concept si vaste en un seul mot est en fait absurde. Le reste de cet article va donc inclure une description de Qt Quick plus exhaustive mais aussi plus utile.

Étant l'un des ingénieurs travaillant sur Qt Quick, j'aimerais d'abord expliquer pourquoi nous l'avons développé. À l'origine, Qt Quick est un projet de recherche qui a démarré il y deux ans et dont le but est de trouver le meilleur moyen de créer des interfaces (UI) que le modèle traditionnel de widget ne pouvait pas permettre.

Les widgets Qt sont une méthode incroyablement rapide de créer une UI indépendamment des concepts standards implémentés dans les "look and feel" spécifiques à une plateforme. Pour les UI construites à partir de ces concepts, vous pouvez avoir une UI utilisable instantanément. Mais, pour les UI qui demandent une approche complètement différente ou alors qui ne correspondent tout simplement pas à "utilisable", Qt vous propose QPainter. À partir de là vous pouvez l'implémenter vous-même. Le processus qui mène à cette situation ressemble à ceci : d'abord les designers d'UI réalisent un prototype de l'UI. Ils réalisent une maquette parfaite au pixel près en utilisant un outil de prototypage sur un ordinateur de bureau. Dans un second temps, la maquette est donnée aux développeurs qui ont la tâche de ré-implémenter la maquette en code réel.

Dans le meilleur des cas, les développeurs devront travailler très dur pour ré-implémenter les détails qui étaient pourtant si faciles à faire en utilisant l'outil de prototypage mais difficiles à faire en C++ et quasiment impossible à faire rapidement sur des dispositifs embarqués. Dans le cas normal, les développeurs n'accorderont pas la même attention aux détails que les designers lorsqu'ils ont conçu la maquette. L'UI finale n'est alors qu'une pâle copie de la belle maquette d'origine. Dans le pire des cas, les développeurs diront aux designers que leur vision est impossible et qu'ils doivent la revoir (cependant, c'est aussi le pire des cas quand les développeurs sont fainéants - parfois les designers demandent l'impossible sans connaître l'impact sur les performances d'un dispositif mobile).

Ce que Qt Quick offre, c'est la possibilité de remplacer cette seconde étape par "l'UI que les designers ont créée avec leur outil de prototypage, qu'elle se greffe simplement sur la logique C++ que les développeurs ont écrit". Les designers ne font pas qu'écrire l'UI réelle, ils peuvent aussi la tester pendant la phase de prototypage sur le dispositif ciblé. Cela garantit que le résultat a des caractéristiques de performances acceptables. Qt Quick est un langage de prototypage, avec une intégration au C++ incorporée, ainsi qu'un outil pour créer l'application qui peut être utilisé à la fois par les designers et les développeurs et ensemble.

III. Qu'est-ce que le QML ?

Le cœur de Qt Quick est le QML. C'est un langage déclaratif conçu spécifiquement pour le prototypage d'UI et pour les designers. Aussi extraordinaire que peut être C++ pour les entrailles d'un programme informatique, QML est un bien meilleur outil pour écrire des UI car il possède les avantages suivants :

III-A. Déclaratif

Les concepteurs d'UI n'ont pas l'expérience que les développeurs ont en programmation. Il est probable qu'ils ne sachent pas comment faire faire à un ordinateur ce qu'ils veulent qu'il fasse ; ils connaissent juste le résultat final voulu. C'est l'essence d'un langage déclaratif. Quand ils disent de placer un rectangle ici, ce qu'ils demandent est un résultat final et ils n'ont pas à réfléchir comment l'ordinateur dessine ce rectangle. Encore mieux, en déléguant la partie implémentation au moteur, cela permet à l'équipe de développement de Qt de rechercher des changements internes radicaux pour améliorer la performance, au-delà de ce que peuvent apporter des micro-optimisations.

III-B. Interprété

L'intérêt complet d'un langage de prototypage est de permettre un cycle de développement rapide. La suppression de l'étape de compilation accélère considérablement ce cycle, en particulier quand vous devez le tester sur le dispositif sur lequel il est censé s'exécuter. Les designers peuvent alors tester leur prototype d'UI dans un contexte réaliste de performance. Lorsqu'ils demandent trop de "bling-bling" visuel par rapport à ce que la machine peut fournir, ils s'en rendent alors compte par eux-mêmes. Puisque que QML intègre Javascript, il permet même le développement d'une logique interprétée basique (comme la couche logique d'une UI).

III-C. Bindings

En tant qu'interfaces déclaratives, les UI doivent être capables de réagir à beaucoup de changements, les designers ne veulent pas passer de temps sur le "comment". Avec les bindings, QML vous autorise la liaison d'une variable à une autre sans devoir connecter explicitement des signaux et des slots pour les notifications de changement. Tout ça se passe en arrière-plan, pour vous donner les mêmes performances à l'exécution du programme mais avec une vitesse de développement considérablement améliorée. Cela peut aussi bien être fait avec la partie données de l'application que pour répondre à des changements dans d'autres parties de l'UI.

Ajoutez à ce langage des fonctionnalités livrées avec : un ensemble d'objets primitifs spécialement conçus pour une création d'interface fluide, animations incluses, les transformations 2,5D, la gestion des interactions utilisateurs et QML fonctionne alors comme par magie pour transposer la vision d'une UI de l'esprit à l'écran de l'ordinateur.

Ci-dessous, un exemple de QML présente toutes ces choses. L'élément Rectangle dessine un rectangle sur l'écran. À travers des propriétés comme x, y, width et height, vous pouvez le placer simplement à la bonne position pour une UI parfaite, pixel par pixel. Quand le positionnement est plus complexe, vous pouvez ancrer les côtés ou l'objet entier à un autre objet ; anchors.fill demande à l'objet de remplir l'objet cible pour avoir la même position et les mêmes dimensions à l'écran.

En spécifiant un Behavior sur la propriété color, vous pouvez demander à l'UI d'animer cette propriété à chaque fois qu'elle change, quelle qu'en soit la raison. La ColorAnimation est une autre primitive d'UI fournie par le module QtDeclarative et qui permet d'animer les couleurs en interpolant sans à-coups un chemin visuellement attirant à travers l'espace colorimétrique, de la couleur A à la couleur B.

L'élément MouseArea contrôle les interactions utilisateur et permet au designer de définir le moment où l'utilisateur peut cliquer et ce qui se passe quand il le fait. Quand l'utilisateur clique dans la MouseArea, le handler onClicked est appelé et un script arbitraire est exécuté. Dans ce cas, foo() représente une fonction écrite en C++, profondément enfuie dans les entrailles de l'application, présentée à l'UI comme une simple et opaque fonction Javascript.

Tous les assignements de propriétés (comme assigner la valeur 10 à la propriété x) sont en réalité des bindings. Alors que des constantes comme 80 ne sont pas supposées changer, n'importe quelle expression Javascript pourrait être placée ici et serait mise à jour si ses variables internes changeaient. Si nous utilisons alors width: parent.width - 80, la largeur sera inférieure de 80 pixels par rapport à celle de son objet parent. De plus, quand la largeur de l'objet parent sera modifiée, la largeur de cet objet sera automatiquement mise à jour. Dans le bout de code ci-dessous, un exemple subtil consiste à mettre anchors.fill à parent. Si la MouseArea change de parent, ce binding sera ré-évalué en conséquence.

 
Sélectionnez
Rectangle
    x: 10
    y: 20
    width: 80
    height: 60
    Behavior on color: ColorAnimation{}
    MouseArea{
        anchors.fill: parent
        onClicked: doSomething();
    }
}

Ce morceau de code permet de donner de la perspective en montrant du vrai code QML et ce qu'il peut faire. Néanmoins, ce n'est pas un bon tutoriel. Si vous voulez apprendre QML, jetez un œil à la documentation fournie avec Qt (disponible aussi sur le site Internet) qui contient les tutoriels et les exemples.

IV. Qu'est-ce que l'intégration C++ de Qt Quick ?

Qt 4.7 introduit donc un langage de prototypage ; comment cela aide-t-il concrètement les équipes de développement ? Si nous avions simplement ajouté un langage de prototypage, Qt Quick ne serait pas si formidable. Si vous aviez à réécrire toute la logique compliquée de votre application en QML, Qt Quick (et votre application) serait particulièrement boiteux. Ce qui rend Qt Quick vraiment brillant, c'est que le langage de prototypage d'UI peut être utilisé pour faire une UI qui s'intègre avec du code C++/Qt pour réaliser un lifting complet.

QML est construit avec la fonctionnalité QObject. Une fois que vous avez chargé un fichier QML avec les classes dans le module QtDeclarative, vous obtenez un arbre de QObject, probablement un graphe de scène visuel, que vous pouvez placer dans votre application comme n'importe quel autre (mais, en comparaison avec la configuration d'un arbre d'objets équivalent en C++, cela prend énormément moins de temps en termes de développement et, qui plus est, cela n'a désormais plus besoin d'être le temps du développeur).

Vous pouvez toujours utiliser le Qt/C++ pour les fonctionnalités de plus bas niveau : vos traitements de données lourds, votre connexion externe à une base de données personnelle ou n'importe quelle autre logique complexe qui doit être réalisée au plus proche du matériel. Et désormais il ne vous appartient plus d'écrire votre UI en C++. Dans le cas idéal, vous pouvez même prendre le code existant de votre application Qt et y greffer une UI en QML, sans même avoir besoin de changer une ligne de code de vos classes de logique métier.

Mais ce cas idéal n'est pas le plus réaliste. En réalité, vous pouvez avoir besoin d'ajuster l'interface pour obtenir les meilleurs résultats possible avec cette nouvelle approche. QML s'interface très simplement avec le système de méta-objet Qt qui fournit essentiellement des propriétés, des signaux et des slots. Si vos classes de données ont déjà leur interface composée de propriétés, signaux et slots, comme beaucoup de classes basées sur Qt, alors vous pouvez réellement les utiliser à partir de QML avec la ligne de code suivante :

 
Sélectionnez
declarativeView->rootContext()->setContextObject(myObject);

declarativeView est un pointeur sur une instance de QDeclarativeView, et myObject est un pointeur sur un QObject.

Cependant, pour de meilleurs résultats, vous aurez certainement envie d'exposer une interface composée de propriétés essentielles afin d'être plus utilisable de façon déclarative. Le plus souvent, il est simplement question de déclarer des propriétés utilisant des méthodes existantes de lecture, écriture et notification pour créer une variable nommée correctement qui peut être utilisée simplement dans QML. Avec le signal de notification défini sur une propriété, QML connecte automatiquement ces signaux aux expressions en utilisant cette propriété afin de savoir exactement quand les réévaluer.

Encore mieux, si vous définissez vos classes C++ comme des objets indépendants qui exposent leurs propriétés, signaux et slots à la couche QML, cela aide à créer une séparation claire entre la logique de l'application et celle de l'UI. Implémenter une séparation claire comme cela vous permet de tirer le maximum de QML et de ses cycles de développements courts. Votre UI peut alors être re-prototypée ou reconstruite de zéro au-dessus de la logique existante (par exemple, pour un dispositif mobile différent), sans avoir à altérer ou déstabiliser la logique métier. Ainsi la communication entre les développeurs et les designers devient un prétexte, bien plus utile, pour négocier l'interface à la logique et ce que l'application peut exactement faire.

V. Quels outils propose Qt Quick ?

Pour faire en sorte que tout cela fonctionne ensemble, Qt Quick apporte des améliorations à Qt Creator qui est déjà un excellent IDE pour Qt/C++. L'outillage QML est actuellement en cours d'intégration dans Qt Creator. Qt Creator possède déjà une intégration complète de QML dont le but est d'exécuter et éditer des programmes écrits dans ce langage. Un plug-in d'édition QML ajoutant la colorisation syntaxique et la complétion de code QML sera inclus à partir de la version 2.1 de Qt Creator. Les modes Run et Debug pour QML seront également inclus.

Un éditeur visuel pour QML, qu'on peut présenter comme une version survitaminée du plug-in Qt Designer actuel, est également en cours de développement. En utilisant Qt Creator à la fois comme votre IDE C++ et QML, il est alors vraiement plus facile de faire coexister ces deux mondes et les faire travailler ensemble en utilisant leurs différentes forces.

VI. La vision Qt Quick

Qt Quick permet aux développeurs et aux designers de travailler ensemble de façon bien plus efficace que par le passé. C'est un moyen de résoudre le vieux problème des designers produisant de charmantes maquettes qui ne ressemblent finalement que par coïncidence au produit fini. Les designers d'UI peuvent à la fois prototyper et réaliser les UI finales en utilisant le même outil et langage orienté design ; ils n'ont d'ailleurs pas non plus besoin de le compiler pour l'essayer sur le dispositif cible.

Ce même outil, Qt Creator, est déjà utilisé par les développeurs, ce qui rend instantanée l'intégration avec du code bas-niveau de haute performance. Qt Quick rend réel le rêve des UI parfaites au pixel prêt, fluides, s'exécutant à 60 images par secondes sur un dispositif embarqué ayant des ressource limitées, tout ça au creux de votre main. Tout ce que vous avez à faire c'est tendre la main et cliquer pour télécharger le SDK 4.7 de Qt.

VII. Divers

Au nom de toute l'équipe Qt, j'aimerais adresser le plus grand remerciement à Nokia pour nous avoir autorisés à traduire cet article !

Merci à jacques_jean pour sa relecture et ses conseils.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2010 Alan Alper. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.