Best approach to organize a bunch of QML files

[gardiol]

I am porting an app from a pure widget to QML, i am in the process of deciding how to organize all the QML files which will be generated.

There will be quite a lot of custom QML controls, plus all the normal QML files to define the top level pages of the application. Due to this i would like to "organize" all the files properly into folders.

To make things more complicated, i plan to store ALL the QML files into resources, to have a consistent multi-platform deployment behavior.

How should i do it? Let's say i will put all the files into these two folders:

/ (root): contain the main QML files
/controls: contains specific custom controls

Then i create a Qt Recourse file called "ui.qrc" and load all the QML files inside, replicating the /controls as prefix.
The main QML file will be loaded as a resource, with the proper URI for the resource.

Now, from my main QML file i cannot import the control (QtCreator does not find it):

import "controls" 

So i cannot actually include any of the components defined into the folder.
What am i doing wrong? Is importing from resource prefix supported at all?

[favoritas37]

One small note here. Qt Creator indeed shows that it can not find it, though if you run qmake (to be sure that the resource file is processed correctly) and then compile & run, the application will be launched successfully. So it is a matter of the IDE.

A workaround: If all your QML files have different names (despite the fact that they are in different paths) then you can import explicitly the files that you want in the QML file of your choice.

For instance, lets assume that in the / prefix you have main.qml and in the /controls you have CustomButton.qml. Then in the main.qml you can import the CustomButton by writting:

import "./CustomButton.qml"

I know it is not very clean, though it is a workaround.

EDIT: one clarification, because i have not explained one thing. Use relative paths at the import statement. Relative paths respective to the actual file tree of the folders where the files exist.

[gardiol]

I think i will give up in organizing the subfolders...

If the IDE does not support it, i don't want to lose IDE support, QML i already messy and scarcely documented (or too much documented, which is the same) that IDE support is important for me.

I find overall QML very intriguing, but a mess to get into. Too many ways, too many unexpected things, documentation is good but sometimes too much, sometime too little, overall feels yet not very mature, like a project which experienced a few directions and has not yet found it's real direction or is failing to properly document it.

I have so many questions on things in QML like i never had with Qt in general. Maybe Qt documentation was more coherent overall and the API more stable and clear.

[favoritas37]

The IDE support is kept if you use the relative paths at the import commands (the example above).

Give it a try. For me it is a valid solution. Do you consider it wrong or hard to use?

[geniuss]

@gardiol I was facing the same problem once. It seems there doesn't exist a single standard / recommendation from QT on how to organize project's folders. So I came up with my own structure to suit my needs. Feel free to use it if you like.

project
    |- src
        |- Classes // classes which are responsible for application's logic are here
            |- Helpers
                |- AppHelper.qml
            .....
        |- Components // your custom global components are here
            |- Buttons
                |- TextButton
                    |- Images
                    |- TextButton.qml
            .....
        |- Translations // translation files (if necessary for the project)
            |- es.ts
            |- es.qm
        |- Views // all major pieces of UI (divide it on as many pieces as u want)
            |- Header
                |- Images
                |- Components // your custom local components used only within "Header" view
                |- Views // all pieces of "Header" view
                    |- InfoArea
                        |- Images
                        |- InfoArea.qml
                    .....
                |- Header.qml
            |- Main
            |- Footer
            |- Views.qml
        |- Windows
            |- About
                |- Images
                |- About.qml
            .....
        |- main.qml // entry point of qml application
    |- bin
    |- project.pro

I use Upper CamelCase notation for folder and file names, except for main.qml.
As for putting all files into qt's resource file - also no problems at all. Just use relative paths on import within your qml files.