Revision history [back]

I'm developing/updating my app for Sailfish and I was just wondering what is the best way of importing files inside a project. I started to notice that I have a lot of qml pages / components and they started to pile up in one folder so I decided to organize them into specific folders:

project.pro
qml
|   └───js
│   │   file011.js
│   │   file012.js
│   │
│   └───components "reusable"
|   |   | GlobalComponent.qml
|   |   └───component_package1
|   |       PackageComponent1.qml 
|   |       PackageComponent2.qml "package specific component"
|   |
│   └───pages
│       └───page1
|       |   | Page1.qml
|       |   └───components "page specific"
|       |       Component1.qml
|       |
│       └───page2
|       |   | Page2.qml
|       |   └───components "page specific"
|       |       Component2.qml
...    ...
 

Now otherwise this works well, but the current problem is that importing becomes "ugly" when you have to go upwards to parent directory. For example, if you wanted to access file011.js from Page1.qml, it wouldbe import ../../js/file011.js, or when you want push Page2 to pagestack from Page1 pageStack.push(Qt.resolvedUrl("../Page2.qml")) or even worse, from some of the sub components.

I partially fixed this with qmldir-files which map qml files from the subdirectories. So I don't have to specifically import component_package1/PackageComponent1.qml from components, just components directory itself. This works fine, but it could be better and It doesn't seem to work for .js files at all.

Like if I import js directory (import "../js") with qmldir file like this:

# qmldir
File011 file011.js
 

File011 and it's functions still aren't defined in the code.

Ideal situtation would be that I don't have to import these "parts" with absolute paths. I have tried to tinker with my .pro file and tried different things, but none of them seem to work.

I'm developing/updating my app for Sailfish and I was just wondering what is the best way of importing files inside a project. I started to notice that I have a lot of qml pages / components and they started to pile up in one folder so I decided to organize them into specific folders:

project.pro
qml
|   └───js
│   │   file011.js
│   │   file012.js
│   │
│   └───components "reusable"
|   |   | GlobalComponent.qml
|   |   └───component_package1
|   |       PackageComponent1.qml 
|   |       PackageComponent2.qml "package specific component"
|   |
│   └───pages
│       └───page1
|       |   | Page1.qml
|       |   └───components "page specific"
|       |       Component1.qml
|       |
│       └───page2
|       |   | Page2.qml
|       |   └───components "page specific"
|       |       Component2.qml
...    ...
 

Now otherwise this works well, but the current problem is that importing becomes "ugly" when you have to go upwards to parent directory. For example, if you wanted to access file011.js from Page1.qml, it wouldbe import ../../js/file011.js, or when you want push Page2 to pagestack from Page1 pageStack.push(Qt.resolvedUrl("../Page2.qml")) or even worse, from some of the sub components.

I partially fixed this with qmldir-files which map qml files from the subdirectories. So I don't have to specifically import component_package1/PackageComponent1.qml from components, just components directory itself. This works fine, but it could be better and It doesn't seem to work for .js files at all.

Like if I import js directory (import "../js") with qmldir file like this:

# qmldir
File011 file011.js
 

File011 and it's functions still aren't defined in the code.

Ideal situtation would be that I don't have to import these "parts" with absolute paths. I have tried to tinker with my .pro file and tried different things, but none of them seem to work.

I'm developing/updating my app for Sailfish and I was just wondering what is the best way of importing files inside a project. I started to notice that I have a lot of qml pages / components and they started to pile up in one folder so I decided to organize them into specific folders:

project.pro
qml
|   └───js
│   │   file011.js
│   │   file012.js
│   │
│   └───components "reusable"
|   |   | GlobalComponent.qml
|   |   └───component_package1
|   |       PackageComponent1.qml 
|   |       PackageComponent2.qml "package specific component"
|   |
│   └───pages
│       └───page1
|       |   | Page1.qml
|       |   └───components "page specific"
|       |       Component1.qml
|       |
│       └───page2
|       |   | Page2.qml
|       |   └───components "page specific"
|       |       Component2.qml
...    ...
 

Now otherwise this works well, but the current problem is that importing becomes "ugly" when you have to go upwards to parent directory. For example, if you wanted to access file011.js from Page1.qml, it wouldbe import ../../js/file011.js, or when you want push Page2 to pagestack from Page1 pageStack.push(Qt.resolvedUrl("../Page2.qml")) or even worse, from some of the sub components.

I partially fixed this with qmldir-files which map qml files from the subdirectories. So I don't have to specifically import component_package1/PackageComponent1.qml from components, just components directory itself. This works fine, but it could be better and It doesn't seem to work for .js files at all.

Like if I import js directory (import "../js") with qmldir file like this:

# qmldir
File011 file011.js
 

File011 and it's functions still aren't defined in the code.

Ideal situtation would be that I don't have to import these "parts" with absolute paths. I have tried to tinker with my .pro file and tried different things, but none of them seem to work.

I'm developing/updating my app for Sailfish and I was just wondering what is the best way of importing files inside a project. I started to notice that I have a lot of qml pages / components and they started to pile up in one folder so I decided to organize them into specific folders:

project.pro
qml
|   └───js
│   │   file011.js
│   │   file012.js
│   │
│   └───components "reusable"
|   |   | GlobalComponent.qml
|   |   └───component_package1
|   |       PackageComponent1.qml 
|   |       PackageComponent2.qml "package specific component"
|   |
│   └───pages
│       └───page1
|       |   | Page1.qml
|       |   └───components "page specific"
|       |       Component1.qml
|       |
│       └───page2
|       |   | Page2.qml
|       |   └───components "page specific"
|       |       Component2.qml
...    ...
 

Now otherwise this works well, but the current problem is that importing becomes "ugly" when you have to go upwards to parent directory. For example, if you wanted to access file011.js from Page1.qml, it wouldbe import ../../js/file011.js, or when you want push Page2 to pagestack from Page1 pageStack.push(Qt.resolvedUrl("../Page2.qml")) or even worse, from some of the sub components.

I partially fixed this with qmldir-files which map qml files from the subdirectories. So I don't have to specifically import component_package1/PackageComponent1.qml from components, just components directory itself. This works fine, but it could be better and It doesn't seem to work for .js files at all.

Like if I import js directory (import "../js") with qmldir file like this:

# qmldir
File011 file011.js
 

File011 and it's functions still aren't defined in the code.

Ideal situtation would be that I don't have to import these "parts" with absolute paths. I have tried to tinker with my .pro file and tried different things, but none of them seem to work.

EDIT: Some resources that I have tried to look at:

QML-Import

QML-DirectoryImport

QML-JavascriptImport

But these really lack in practical examples. Would make it easier to find a repository and work on that.

<RCC>
    <qresource prefix="/">
        <file alias="file011.js">qml/js/file011.js</file>
    </qresource>
</RCC>