Best practices when importing javascript/qml

asked 2018-04-22 20:02:28 +0300

Sefriol gravatar image

updated 2018-04-25 15:54:44 +0300

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.

EDIT2: One possible solution provided by salarelv is to include wanted file into resources in following manner:

<RCC>
    <qresource prefix="/">
        <file alias="file011.js">qml/js/file011.js</file>
    </qresource>
</RCC>
edit retag flag offensive close delete

Comments

setup proper QML IMPORTPATH ?

coderus ( 2018-04-23 15:19:57 +0300 )edit

Currently I have QML_IMPORT_PATH = qml as my import path in .pro -file. What would be the proper value for this if we follow the example above? Are the qmldir files required and are they correctly done (js-directory as an example above)?

Sefriol ( 2018-04-23 15:49:45 +0300 )edit

Have You tried to include the JS files in the qrc file? If you put the js files into the qrc file then you can make an alias and just

<RCC> <qresource prefix="/"> <file>main.qml</file> <file>test/test2/Test.qml</file> <file alias="module.js">js/module/module.js</file> </qresource> </RCC> import "qrc:/module.js" as Module or without the alias import "qrc:/js/modules/module.js" as Module

and call Module.func();

salarelv ( 2018-04-25 10:17:11 +0300 )edit

This seems to work quite well! Does this come with disadvantages? Of course in simpler directory structure this isn't necessary, but is there a reason to not include a file into resources?

Sefriol ( 2018-04-25 15:37:23 +0300 )edit

I always putting stuff in qrc. otherwise you have to manage the inclusion into the build in pro file

salarelv ( 2018-04-25 15:48:54 +0300 )edit