4

I can import JavaScript files which are already part of the project tree like this:

import "myFile.js" as MyFile

Is there any way to do this for external files that aren't already included in my project, i.e. by passing an absolute or relative path to the file on my disc?

Don Joe
  • 274
  • 4
  • 13
  • What is 'part of the project tree' to you? Of course it needs to be somewhere in the reach of your project. But you can define your project tree as you like, can't you? – derM - not here for BOT dreams Aug 03 '17 at 17:24
  • Sorry for being unclear. What I meant was that I want to import a file that I haven't created within Qt and that isn't located in my qrc. Just a local file from my disc. – Don Joe Aug 04 '17 at 07:32

1 Answers1

4

For some questions that go like:

Is it possible to do something like [this...]

usually the easiest way, is to try it out.

In your question a important detail is missing:

Is the QML file in question in a qrc-file or not?

If it is, then you need to tell QML that it shall look outside the qrc. As with pictures, you do that, by prefixing it with file:///.

A absolute path works fine here. The relative is tricky, as you need to predict from which directory you are coming. I can't tell you that.

If the QML is not in a qrc, than you will specify a relative path on the file system in any case, so no problems here. You don't even need to prepend the file:///

If you want to have it a litte more remote, try it from the internet:

import QtQuick 2.5
import QtQuick.Controls 2.0
import 'http://code.qt.io/cgit/qt/qtdeclarative.git/plain/examples/quick/demos/photoviewer/PhotoViewerCore/script/script.js' as Test

ApplicationWindow {
    id: window
    visible: true
    width: 600
    height: 600

    Button {
        text: 'Calculate Scale of an Image: 100x100px for a target size of 200px'
        onClicked: console.log('It is:', Test.calculateScale(100, 100, 200) + '!\nMagical!')
    }
}

For a more dynamic import, you can create a proxy script with no more than this content:

// proxyScript.js

function include(path) { Qt.include(path) }

Then you can use it in your QML file as this:

import QtQuick 2.0
import QtQuick.Controls 2.0
import 'proxyScript.js' as Script1
import 'proxyScript.js' as Script2

ApplicationWindow {
    Component.onCompleted {
        // Load scripts here
        var path1 = [...] // Build the absolute path of some script to load
        var path2 = [...] // Build the absolute path of another script to load
        Script1.include(path1) // Now you can access the content of the script at path1 via `Script1.functionFromPath1...`
        Script2.include(path2)
    }
    [...]
}

You can also import multiple .js-files in one proxyScript. The functions of the scripts you import however will then be in the same name space.

Of course you can also have more static proxy scripts if you want:

// staticProxyScript.js

Qt.include('file:/My/Absolute/Path/To/A/Script/That/I/Want/To/Use.js')
derM - not here for BOT dreams
  • 13,081
  • 4
  • 49
  • 89
  • Thanks for your answer. The QML file is in a qrc, yes. Using an absolute path with "file:///" works, but I'd like to get a relative path working. I tried storing the absolute application path in a variable and using it as a base folder, but I can't use that variable in the import statement. Seems weird to me that you can import remote files from the internet, but not a local one using a path relative to the application. – Don Joe Aug 04 '17 at 07:28
  • 1
    `Qt.include` is now/unfortunately deprecated. See [here](https://doc.qt.io/qt-5/qtqml-javascript-imports.html#importing-a-javascript-resource-from-another-javascript-resource). – Russ Dec 01 '20 at 01:11