Basic folder organization?

JeTSpice

How do you simply organize qml files into folders?

Apparently they must be organized externally of Qt Creator. i.e., there is no "Add Folder" option in Qt Creator. So I've created a folder called "library" which has subfolders and qml files in it.

Right-clicking Resources,>>"Add Existing Directory" adds the folder "library" to Qt Creator (see screenshot). However, none of the contents of the folder are recognized by Qt Creator. If I type "But", I don't see my custom "ButtonEts" component in the intellitype list. Nor is ButtonEts recognized by the compiler if I try to compile and run.

Import statements don't seem to work. I don't want import statements, if possible. I want it to work as if I had selected "Add New File". But here's what was tried, none of which worked:
import "library/buttons"
import "library/buttons/ButtonEts.qml"
import "library/buttons/*"
...and various uses of "../" and also replacing forward slash with dot notation

Hacking the qml.qrc file ends up nesting "library" further within "Resources", but still no qml files are recognized.

Is there a solution to this? Or am I stuck with a folder of hundreds of files?

6thC

You can use relative links in your imports like this:

import "../DirectoryWithQMLStuffs"
import "../../JS/stringHelpers.js" as StringHelpers

http://doc.qt.io/qt-5/qtqml-syntax-imports.html
http://doc.qt.io/qt-5/qtqml-modules-identifiedmodules.html

6thC

In your case, as you are in ?main.qml? assumably in / of qml.qrc? - try

import "../library/buttons"

If you type

import "..

when you press the double dot Qt Creator should kick in the assists and help you step through your resource structure.

JeTSpice

The relative import urls I've tried are still not working.
I'm testing the import statement both in main.qml and other qml files.

My ideal solution is to avoid import statements altogether when possible, and just get it to work as if I had done right-click->Add New->Qt QML File which allows the QML file/object to be used app-wide with no import statements.

But, I did try moving the library out of the project folder (up one level) and then doing
import "../library/buttons"

In which case the intellitype eventually started working.
But attemps to run the program still give this error:
qrc:/main.qml:4 "../library/buttons": no such directory

I also tried the absolute path, and running Qt Creator as administrator. No avail.

ekkescorner

@JeTSpice take a look at my example apps. per ex.
https://github.com/ekke/drawer_nav_x
I always organize my qml files in folders.

JeTSpice

@ekkescorner Thanks. That worked.

For future reference, this is what I found out:
If I have a folder "library" which has subfolders and .qml files in it,
and I put the subfolders and .qml files into the project folder, with no parent "library" folder,
and alter qml.qrc to have a second qresource tag like this:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>qtquickcontrols2.conf</file>
    </qresource>
    <qresource prefix="/library">
        <file>buttons/ButtonEts.qml</file>
    </qresource>
</RCC>

...then the import statements become

import "library"
import "library/buttons"

However, the intellitype/code help does not work.
I should see my custom "ButtonEts.qml" in the code help dropdown, but it does not show up.
Running qmake and cleaning, even deleting the cache manually from appData.local does not fix the problem.

If the import statement is changed to

import "buttons"

then my custom "ButtonEts.qml" class shows up in code help. But compiling and running gives the error
"buttons": no such directory

So, pending I overlooked something, a usable library must be physically in its own folder. The qrc file has only qresource tag. The library will show up in the folder tree, nested 4 folders deep:

It would be nice to get rid of the three redundant folders, if anyone knows how to do this. It helps to avoid needing to horizontally scroll the file tree repeatedly, as the project grows. But I'll mark this solved because it works now.

longhoangdev

@ekkescorner hello you
I am starting build my app but i don't understand to creating many folder like as you . Example in qml.qrc you have created many folder like as common folder , ..,
Could you tell me how to add new folder in qml.qrc like as your project ?
Thank you very much

ekkescorner

@longhoangdev create your folders on disk. then from qml.qrc in QtC right-click 'Add existing directory', choose the directory you created.

longhoangdev

@ekkescorner ok you i try to do follow you guide and i ask you later

longhoangdev

This post is deleted!