Architecture d'un projet QML

Bonjour,
Je souhaiterais quelques éclaircissements vis-à-vis le l'architecture d'un projet QML. Le projet tel que je l'ai créé est divisé en plusieurs parties (dossiers projet):
-En-têtes (avec les headers)
-Sources (les fichiers .cpp)
-Ressources (la partie QML). Ce répertoire contient qml.qrc, qui contient le répertoire "/", qui contient tous mes fichiers .qml.

De un, qu'est-ce que c'est que le qml.qrc? on l'avait déjà abordé dans un de mes précédents messages mais je n'ai toujours pas compris. Est-ce que c'est vraiment nécessaire car à part une ligne en plus dans l'arbre projet, il ne me sert à rien de l'afficher? Comment créer d'autres répertoires dans l'arbre projet pour agencer mes composants? Pour le moment tout est dans le même dossier donc c'est difficile de s'y retrouver. De plus, les images ajoutées sont aussi dedans... bonjour le chantier. J'ai comparé avec l'exemple Flickr et c'est bien agencé dans un répertoire QML. Pourquoi j'ai pas ça moi? :(

Cordialement

Bonjour,

Les ressources (fichiers .qrc) sont des fichiers indiquant que les éléments y étant présents (par exemple, des images, des fichiers qml ou ce que vous voulez d'autre) doivent être compilés à l'intérieur de l'application. Prenons l'exemple d'une image de 400 Ko : si elle est compilée à l'intérieur de l'application, le poids du .exe généré va être augmenté d'une taille plus ou moins équivalente, et elle n'aura pas besoin d'être jointe à côté de l'exécutable. L'intérêt d'une telle chose est multiple :

• Ne pas permettre aux gens d'accéder ou de modifier l'élément placé dans les ressources (exemple, un fichier de configuration) ;
• Permettre au code d'accéder plus rapidement au fichier, vu que l'on ne passe pas par le système de fichiers : une image pourra ainsi être chargée un peu plus vite, même si c'est souvent un gain négligeable ;
• Réduire la taille des packages au moment du déploiement de l'application, vu qu'il y a moins de fichiers à côté de l'exécutable.

En terme d'accès, si vous avez un fichier "test.txt" placé dans un fichier .qrc, dans le préfixe "/", vous pourrez l'ouvrir via ce code :

Code:

---

1 2 3

QFile file("qrc://test.txt"); if (file.open(QIODevice::ReadOnly | QIODevice::Text)) qDebug() << file.readAll();

---

On constate d'ailleurs que par défaut, dans le main.cpp, le QML est recherché dans un .qrc :

Code:

---

1 2	QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:///main.qml")));

---

Maintenant, parlons du QML. En général, le fait d'avoir le code QML en clair à côté de l'application n'est pas très appréciable, vu que cela permet à l'utilisateur de le modifier. De plus, vu que le fait d'utiliser les ressources accélère légèrement les performances, pourquoi ne pas placer les sources QML dans un fichier .qrc ? C'est probablement ce que se sont dit les développeurs quand ils ont mis par défaut les sources QML dans le .qrc dans les projets d'application Qt Quick. Maintenant, il faut voir les inconvénients : si on place des images à côté des fichiers .qml dans un fichier qml.qrc, ça devient vite le bazar. De même, la compilation s'en voit ralentie, parce qu'à chaque fois qu'un fichier QML est modifié, les images vont être recompilées avec à l'intérieur de l'application. Je conseille donc de créer plusieurs fichiers .qrc : qml.qrc, contenant uniquement les fichiers .qml, et images.qrc, contenant uniquement les images. Ainsi, une modification d'un fichier QML mènera uniquement le qml.qrc à demander une recompilation ; la compilation n'en sera ainsi pas ralentie.

Vous parliez plus tôt de Flickr. Flickr utilise également les ressources pour y placer les fichiers .qml à l'intérieur. Le fait qu'il possède un répertoire QML dans l'arborescence de Qt Creator provient d'un ajout dans le .pro pour avoir un visuel plus joli :

Code:

---

1 2 3

OTHER_FILES += flickr.qml \ flickrcommon/* \   flickrmobile/*

---

Ses sources QML se trouvant dans les dossiers flickrcommon/ et flickrmobile/, Qt Creator fait le travail et place les fichiers .qml dans un répertoire QML de l'arborescence. Cependant, si vous déroulez le fichier qml.qrc de Flickr, vous trouverez tout de même tous les fichiers et les images à l'intérieur.

Voilà ce que je peux vous dire là-dessus ; n'hésitez pas si vous avez des questions.

Bonne journée,
Louis

Merci, je vais donc faire comme vous m'avez dit et créer un deuxième fichier ressource pour y placer mes images. Par contre, est-ce qu'il y a une méthode particulière pour les appeler? J'ai vu dans Flickr par exemple que pour appeler des composants, ils font Mobile.GridDelegate. N'empêche qu'à la fin d'un projet QML, ça doit être un sacré chantier dans l'arborescence. J'ai déjà une dizaine de fichiers et ça ne fait que commencer ^^.

Bonjour,

Pour ce qui est du fichier qrc pour les images, vous pouvez tout simplement le nommer images.qrc, il n'y a aucun problème. Dedans, il faut y insérer un préfixe "/" pour que les images à l'intérieur soient dans le même préfixe que les éléments de qml.qrc. Les préfixes spécifient des chemins d'accès, mais je ne vous conseille pas vraiment de les utiliser (http://qt-project.org/doc/qt-5/resources.html pour plus d'infos).

Concernant le deuxième point, Mobile.GridDelegate, cela provient de la façon d'importer les fichiers .qml des sous-dossiers :

Code:

---

1 2 3 4

import QtQuick 2.0 import QtQuick.XmlListModel 2.0 import "flickrcommon" as Common import "flickrmobile" as Mobile

---

Leur arborescence est ainsi :

Code:

---

1 2 3 4

fickr.qml flickrcommon/*.qml flickrmobile/*.qml flickrmobile/images/*.png

---

C'est-à-dire qu'ils placent dans des sous-dossier les différents composants de l'application. Le fait d'importer les fichiers QML d'un dossier avec import "flickrcommon" as Common va mener tous les composants QML contenus à être exploitables via Common.[Nom du composant]. On peut prendre pour exemple le composant que vous avez cité : Mobile.GridDelegate. Si on retire le as Mobile, la notation aurait été tout simplement GridDelegate. Par conséquent, toutes les arborescences de dossiers sont valables, à partir du moment où elles vous semblent logiques. Pour ma part, j'affectionne en ce moment les arborescences de ce genre :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

|- src/ |--- [sources .cpp, éventuellement réparties dans des dossiers selon la fonctionnalité] |--- [sources .h, éventuellement réparties dans des dossiers selon la fonctionnalité] |- images/ |--- [images .png ou autre, éventuellement réparties dans des dossiers si nécessaire] |- qml/ |--- pages/ |------ [fichiers .qml concernant les pages complètes de QML affichées] |--- widgets/ |------ [fichiers .qml concernant les composants réutilisables] |- images.qrc |- qml.qrc |- main.cpp |- project.pro

---

Selon ce que je développe, cela peut différer légèrement ou bien être découpé de manière bien plus précise. Après, effectivement, ça ajoute souvent des "import ..." en haut des fichiers QML pour accéder aux fichiers QML des autres dossiers.

Bonne journée,
Louis

J'ai créé un fichier ressources pour chaque sous dossier QML (pas moyen de faire autrement). J'arrivais à faire des arborescences plus claires sur visual studio m'enfin passons. Voila le résultat:

Pièce jointe 160571

En fait je comprends pas l’intérêt que les développeurs ont eu de faire apparaître les fichiers ressources dans l'arbre projet. Fondamentalement ça n'apporte rien et ça nuit à la lisibilité du projet.

Bonjour,

Cette approche se vaut, je l'ai utilisée pendant un bon bout de temps (ma requête pour avoir une belle arborescence avec la visualisation des dossiers dans les ressources n'a pas été acceptée à cause des préfixes présents dans les ressources : https://bugreports.qt-project.org/br...EATORBUG-12277). Cela dit, si vous placez vos fichiers QML dans des dossiers (dans votre explorateur Windows ou autre, j'entends), l'utilisation de OTHER_FILES dont je parlais plus tôt devrait convenir. Exemple d'un projet chez moi :

Pièce jointe 160774

À noter que tous les fichiers QML présentés sont placés dans le qml.qrc (je n'ai pas d'images intégrées dans mon projet pour le moment), c'est mon OTHER_FILES qui permet de gérer le dossier QML de l'arborescence :

Code:

---

1 2 3 4 5 6 7

OTHER_FILES += main.qml \ Gui/Battle/* \   Gui/Camp/* \   Gui/Widgets/Map/* \   Gui/Widgets/Menus/* \   Gui/Widgets/Other/* \   Gui/Widgets/Weather/*

---

Bonne journée,
Louis

Merci le forum Qt, c'est exactement ce que je voulais faire.