Livre blanc de l'outillage de Qt Quick

Le Qt Developer Network est un réseau de développeurs utilisant Qt afin de partager leur savoir sur ce framework. Vous pouvez le consulter en anglais.

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 Qt Quick Tooling Whitepaper.

Qt Creator est un environnement de développement (EDI) complet réalisé pour la création d'applications avec Qt QuickQt Quick et le framework applicatif Qt. Qt est conçu pour le développement d'applications et d'interfaces utilisateur, puis à leur déploiement vers de nombreux systèmes d'exploitation fixes et mobiles.

L'un des avantages majeurs de Qt Creator est qu'il permet à une équipe de développeurs de participer à un projet malgré la présence de différentes plateformes (Microsoft Windows®, Mac OS X® et Linux®) grâce à un outil commun pour le développement et le débogage. De plus, la version 2.1 permet aux designers d'interfaces utilisateur de rejoindre l'équipe en les équipant d'outils Qt Quick pour la création d'interfaces utilisateur fluides en coopération étroite avec les développeurs.

L'objectif premier de Qt Creator est de combler les besoins de développement des développeurs Qt Quick qui recherchent la simplicité, la facilité d'utilisation, la productivité, l'extensibilité et l'ouverture, en plus de tenter de casser le mur ralentissant les nouveaux venus dans Qt Quick et Qt. Les fonctions-clés de Qt Creator permettent aux designers d'interfaces utilisateur et aux développeurs d'accomplir les tâches suivantes :

• débuter avec le développement d'applications Qt Quick rapidement et facilement avec des exemples, tutoriels et assistants de projets ;
• concevoir des interfaces utilisateur d'applications avec l'éditeur intégré, le Qt Quick Designer, ou utiliser des logiciels graphiques pour concevoir une interface utilisateur et utiliser des scripts pour exporter son design vers le Qt Quick Designer ;
• développer des applications avec l'éditeur de code avancé qui fournit de nouvelles fonctionnalités puissantes pour la complétion de fragments de code, la refactorisation de code et la visualisation de la hiérarchie des éléments de fichiers QML ;
• générer et déployer des applications Qt Quick qui ciblent des plateformes fixes et mobiles, comme Microsoft Windows, Mac OS X, Linux, Symbian et Maemo ;
• déboguer des fonctions JavaScript, exécuter des expressions JavaScript dans le contexte actuel et inspecter QML au moment de l'exécution pour explorer la structure des objets, déboguer des animations et inspecter les couleurs ;
• déployer des applications vers des appareils mobiles et créer des paquets d'installation d'application pour les appareils Symbian et Maemo qui peuvent être publiées sur Ovi Store et d'autres réseaux ;
• accéder facilement aux informations avec le système intégré sensible au contexte Qt Help.

Qt Creator remplit ses objectifs : simplicité, facilité d'utilisation et productivité en s'appuyant sur le concept des modes. Ceux-ci adaptent l'interface utilisateur aux diverses tâches de développement applicatif à portée de main. Lorsque les développeurs lancent Qt Creator, celui-ci ouvre le mode d'accueil où ils peuvent ouvrir des tutoriels, des projets exemples ou encore démarrer l'assistant de projet pour créer leurs propres projets.

Chaque mode a sa propre vue qui affiche uniquement l'information requise à la réalisation d'une tâche donnée, et fournit uniquement les fonctions et caractéristiques les plus relevantes à celle-ci. Au final, la majorité de la zone de la fenêtre de Qt Creator est toujours dédiée aux tâches de développement de l'application actuelle.

Les utilisateurs peuvent utiliser le sélecteur de modes pour passer à un autre mode de Qt Creator. L'image suivante montre un exemple d'application dans les modes Édition et Design.

Afin de créer et de lancer des applications, Qt Creator a besoin de la même information dont un compilateur aurait besoin. Cette information est spécifiée dans les paramètres de génération et d'exécution du projet.

La mise en place d'un nouveau projet dans Qt Creator est facilitée par un assistant qui guide l'utilisateur étape par étape durant tout le processus de la création du projet. Lors de la première étape, l'utilisateur sélectionne le type de projet dans les différentes catégories. Lors de la création d'un projet Qt Quick, l'utilisateur peut choisir soit Application QML graphique, soit Application QML.

Un projet d'application graphique contient un seul fichier QML qui définit la vue principale de l'application. Les designers d'interfaces utilisateur peuvent l'utiliser pour créer une interface utilisateur d'application et en avoir un aperçu dans la visionneuse QML sans avoir à générer l'application. Ils n'ont donc pas besoin d'avoir installé sur leur ordinateur l'environnement de développement pour créer et lancer ce type de projets.

Les développeurs peuvent générer des applications Qt Quick et les déployer sur des plateformes cibles mobiles. Par exemple, ils peuvent créer des archives SIS (Symbian Installation System) pour ce type de projet.

Un projet d'interface utilisateur Qt Quick peut aisément être converti à l'intérieur d'une application Qt Quick en utilisant l'assistant d'application Qt Quick pour importer le fichier principal QML dans le projet d'interface utilisateur Qt Quick.

L'assistant demande au développeur d'entrer les paramètres nécessaires à un type de projet particulier.

Une fois les étapes réalisées, Qt Creator génère automatiquement le projet avec les en-têtes, fichiers sources, descriptions d'interfaces utilisateur et fichiers projets requis, comme défini par l'assistant.

L'assistant aide non seulement les nouveaux utilisateurs à démarrer rapidement, il permet également aux utilisateurs plus expérimentés de rationaliser leur processus de travail concernant la création de nouveaux projets. Une interface utilisateur commode permet de s'assurer que le projet démarre avec la configuration et les dépendances correctes. Spécifiquement, l'assistant d'applications Qt Quick permet aux développeurs de créer des projets qu'ils peuvent déployer sur des appareils mobiles d'un clic sur le bouton de lancement.

Avant Qt Creator 2.1, la coopération entre développeurs et concepteurs d'interfaces prenait du temps, parce qu'ils utilisaient des outils différents. Les concepteurs d'interfaces préfèrent les logiciels graphiques qui leur permettent de concevoir visuellement des interfaces qui compliquent le travail des développeurs qui doivent les implémenter au moyen d'outils mal adaptés à cette tâche. Ceci mène généralement à des compromis et des résultats suboptimaux.

Qt Creator 2.1 permet aux développeurs ainsi qu'aux concepteurs d'interfaces d'utiliser leurs outils préférés, en rendant le transfert de produits livrables plus facile. Les concepteurs d'interfaces peuvent travailler dans Photoshop ou Gimp et utiliser un script d'export QML pour exporter leurs interfaces dans Qt Creator. Les développeurs peuvent dès lors ajouter le code nécessaire pour compléter l'application. Si plus de changements sont requis, les concepteurs peuvent les faire dans le designer Qt Quick. Évidemment, il est aussi possible de concevoir l'interface du début à la fin dans le designer.

Le centre de la vue du designer Qt Quick est utilisé pour la construction de l'interface utilisateur, avec les blocs de construction disponibles (items et ressources), conservés dans la bibliothèque sur le côté gauche de la fenêtre. Des éléments réutilisables copiés dans le dossier du projet sont automatiquement ajoutés à la bibliothèque.

Les autres outils incluent :

• le navigateur, qui affiche des éléments QML dans le fichier QML courant ;
• les propriétés, qui organisent les propriétés de l'élément QML sélectionné des composants QML ;
• le statut, qui affiche les différents statuts du composant.

Les concepteurs et les développeurs peuvent éditer les fichiers QML aussi dans l'éditeur de code. Le designer Qt Quick charge les fichiers QML de telle sorte qu'on puisse toujours passer entre les modes de conception et d'édition. Le designer supporte un sous-ensemble des fonctionnalités QML que le développeur peut implémenter dans l'éditeur de code.

Écrire, éditer et naviguer dans le code source sont des tâches de base dans le développement d'applications. Dès lors, l'éditeur de code est l'une des composantes-clés de Qt Creator. L'éditeur de code peut être utilisé dans le mode d'édition pour écrire du code QML.

L'éditeur de code offre un certain nombre de fonctionnalités qui aident le développeur à maintenir la lisibilité et le style de code :

• complétion de code pour les éléments, propriétés, ID et snippets de code ; ceci est aussi supporté pour les classes de l'utilisateur dans le projet courant ;
• support pour la refactorisation de code pour améliorer la qualité interne d'une application, ses performances et son extensibilité, la lisibilité du code et sa maintenabilité, tout comme la simplification de la structure du code ;
• les barres d'outils Qt Quick pour spécifier les propriétés d'éléments QML, ce qui est difficile à obtenir sans utiliser des outils visuels ;
• vérifier la syntaxe du code et marquer les erreurs (en les soulignant avec des vaguelettes rouges) lors de l'édition, pour trouver les typos et les erreurs de syntaxe ;
• mise en évidence syntaxique pour les mots-clés, les symboles et les macros dans les fichiers QML ; en plus, la colorisation générique est supportée pour d'autres fichiers d'autres types ;
• recherche incrémentale qui met en évidence les chaînes de caractères dans la fenêtre lors de l'entrée ; la recherche avancée permet aux développeurs d'effectuer des recherches dans les projets ouverts ou les fichiers sur le système de fichiers ; en plus, les développeurs peuvent faire des recherches sur des symboles quand ils veulent refactoriser du code.

L'éditeur de code supporte différents raccourcis clavier pour une édition plus rapide. Il est possible de travailler sans utiliser la souris, ce qui fait que les développeurs peuvent garder leurs mains sur le clavier et travailler de manière plus productive.

Alors que les développeurs écrivent du code, Qt Creator suggère des propriétés, des ID et des snippets de code pour compléter le code. Il fournit une liste de suggestions sensibles au contexte pour la déclaration actuellement sous le curseur.

Des snippets de codes, ça peut être de multiples champs pour lesquels les développeurs définissent des valeurs. Ils peuvent sélectionner un item dans la liste et appuyer sur Tab ou Entrée pour compléter le code. Ils peuvent appuyer sur Tab pour se déplacer entre les champs et spécifier des valeurs.

Qt Creatir permet aux développeurs, rapidement et simplement, d'appliquer des actions pour refactoriser du code en le sélectionnant dans un menu contextuel. Les actions disponibles dépendent de la position du curseur dans l'éditeur de code.

Pour appliquer des actions de refactorisation, les développeurs peuvent sélectionner un élément, puis sélectionner une action dans le menu contextuel.

Les développeurs peuvent appliquer les types suivants d'actions de refactorisation du code QML :

• renommer les ID pour donner aux items un ID plus explicite et mettre à jour toutes les références aux ID précédents ;
• séparer les initialisateurs pour placer chaque propriété sur une ligne séparée ;
• déplacer un élément QML dans un fichier séparé pour le réutiliser dans d'autres fichiers QML.

Quand les utilisateurs éditent le code QML dans l'éditeur, ils spécifient les propriétés des composants QML. Pour certaines propriétés, comme les couleurs et les noms de police, ce n'est pas trivial. Par exemple, peu de gens peuvent visualiser la couleur #18793f.

Pour éditer facilement ces propriétés, les utilisateurs peuvent employer les barres d'outils Qt Quick. Quand un composant est sélectionné dans le code et qu'une barre d'outils est disponible, une icône en lampe apparaît. Les utilisateurs sélectionnent l'icône pour ouvrir la barre d'outils.

Les barres d'outils Qt Quick sont disponibles pour éditer les propriétés des éléments QML suivants :

• Rectangles ;
• Text ;
• Images ;
• Animation.

Des projets d'interfaces Qt Quick ne doivent pas être compilés avant d'être lancés. Cependant, pour déployer des applications Qt Quick sur des périphériques mobiles, les développeurs doivent créer des paquets d'installation. Qt Creator supporte la compilation, l'exécution et le déploiement d'applications Qt Quick mobiles pour les périphériques (Symbian et Maemo).

Qt Creator permet de spécifier des paramètres de compilation séparés pour chaque plateforme de développement et de passer rapidement d'une cible à l'autre. Par défaut, les shadow builds sont utilisés pour garder les fichiers spécifiques à la plateforme en dehors de la source. Les développeurs peuvent créer des versions séparées des fichiers de projet pour garder séparé le code dépendant de la plateforme. On peut utiliser des scopes QMake pour sélectionner le fichier à traiter en fonction de la plateforme d'exécution.

Les développeurs peuvent lancer l'application du Qt Simulator pour tester des applications Qt Quick qui sont prévues pour des périphériques mobiles dans un environnement similaire au périphérique. Ils peuvent aussi changer l'information que le périphérique contient sur sa configuration et l'environnement. Le simulateur Qt est installé avec le Nokia Qt SDK. Après son installation, les développeurs peuvent le sélectionner comme une cible dans Qt Creator.

Les développeurs peuvent utiliser le mode de débogage de Qt Creator pour inspecter l'état d'une application lors du débogage de fonctions JavaScript. Ils peuvent définir des points d'arrêt, voir la trace de la pile d'appels et examiner des variables globales et des points d'observation.

Quand l'application est interrompue par un point d'arrêt, les développeurs peuvent utiliser la console de script QML pour exécuter des expressions JavaScript dans le contexte courant. Ils peuvent taper des expressions JavaScript et les utiliser pour obtenir des informations sur l'état de l'application, comme les valeurs de propriétés.

Si les développeurs changent les valeurs des propriétés ou ajoutent des propriétés dans l'éditeur de code, les changements sont répercutés sur l'application en cours d'exécution où ils sont sauvés.

Quand l'application est lancée, les développeurs peuvent utiliser la vue d'observateur QML pour explorer la structure des objets, déboguer des animations et inspecter des couleurs. Lors du débogage d'applications complexes, les développeurs peuvent utiliser le mode d'observation pour sauter à la position dans le code où un élément est défini.

Les configurations de déploiement Qt Creator gèrent le packaging de l'application comme un exécutable et le copient à l'endroit où les développeurs veulent lancer l'exécutable. Les fichiers peuvent être copiés en un endroit du système de fichiers du PC de développement ou du périphérique mobile. Pour déployer des fichiers sur des périphériques mobiles, les développeurs doivent soit connecter les périphériques sur le PC de développement ou utiliser des paquets d'installation générés par Qt Creator. Les projets d'interface Qt Quick doivent être convertis en applications Qt Quick pour le déploiement sur des périphériques mobiles.

Qt Creator permet aux développeurs de créer des paquets d'installation pour les périphériques Symbian et Maemo, qui peuvent être utilisés sur l'Ovi Store.

De temps en temps, les développeurs pourraient avoir besoin de plus d'informations sur un élément QML particulier, une classe ou une fonction Qt ou une autre partie de l'API Qt. Toute la documentation Qt et les exemples sont accessibles par le plug-in Qt Help dans Qt Creator.

Pour voir la documentation, le mode Aide est utilisé, où la plus grande partie de la fenêtre est dévouée au texte d'aide. Quand on travaille avec le code source dans le mode d'édition, l'utilisateur peut accéder à l'aide sensible au contexte en déplaçant le curseur de texte sur une classe Qt ou une fonction et en appuyant sur la touche F1. La documentation est affichée dans un panneau sur le côté droit de l'éditeur de code, comme montré sur la figure suivante.

C'est aussi possible d'accéder à une documentation externe à Qt Creator, complémentaire ou remplaçant la documentation existante.

Qt Creator offre un environnement de développement complet pour la création d'applications Qt Quick. C'est un outil léger qui se focalise exclusivement sur les besoins des développeurs Qt Quick et des concepteurs d'interfaces, la productivité et l'ergonomie.

Les fonctionnalités-clés pour des concepteurs d'interfaces sont le designer Qt Quick intégré et la possibilité d'exporter des designs depuis des logiciels graphiques. En plus, le support pour l'écriture de code QML dans l'éditeur de code, les barres d'outils Qt Quick et l'inspection d'applications Qt Quick dans l'observateur QML fait de Qt Creator l'environnement idéal pour développer des applications Qt Quick.

La manière de travailler de Qt Creator aide les développeurs à se concentrer sur la tâche en ne présentant que les fonctionnalités intéressantes pour l'utilisateur.

Le support pour les systèmes de compilation cross-plateformes et les logiciels de contrôle de version permettent de s'assurer que Qt Creator est intégré complètement dans l'environnement de travail d'une équipe de développement.

Qt Creator est disponible sur le site de Nokia.

Merci à Claude Leloup pour sa relecture !