QML script provider similar to image provider
-
Hi, I have written a simple image provider which basically gets the images from the network. Is there something similar that can be done for javascript files as well? I want to be able to get the javascript resources from the network too using my custom code. Where would i have to make the change to do this?
Thanks,
Rohit -
Hi,
To load an Image from Network in QML you can use
@
Image {
source: "http://upload.wikimedia.org/wikipedia/commons/b/b8/Qt-logo.png"
}
@And use import to get JavaScript from network. for eg.
@
import "http://192.168.0.16/sample.js" as RemoteComponent.onCompleted: console.log(Remote.myFunction())
@Remember that the Qualifier should start with a Capital letter.
-
Hi,
Thanks for the reply.
I needed to use custom code to get these javascript files. For example, for the images, i was able to do that using a custom Image provider where I can add some security and get the image id and i can get the image from my resource manager. I want to be able to do the same for scripts which i will obtain from the same resource manager. Is there a way to achieve that?
Thanks,
Rohit -
Do you mean you want to download JavaScript files from C++ code ?
-
Yes, that is right. I want to be able to download the file from c++ and then use it. I am assuming i would have to make a change to or inherit from some Qt class.
Basically i want to have control over obtaining the javascript file, since i want to add a security layer. if there is a solution to do this from javascript, then that would work too.
Thanks,
Rohit -
You can use "QNetworkAccessManager::get":http://qt-project.org/doc/qt-5/qnetworkaccessmanager.html#get to download the file. Checkout the examples for how to use it.
-
Ok. but how do i make Qt/QML use this code to download the file? Can it be done via a plugin?
I want to be able to use this custom code when someone writes:
import "some-uri" as Remote
At this point it should get the file using my plugin. -
bq. but how do i make Qt/QML use this code to download the file?
From C++ did you check the examples of QNetworkAccessManager::get ?
You can call C++ functions from QML. Check "qtqml-cppintegration-topic":http://qt-project.org/doc/qt-5/qtqml-cppintegration-topic.html and especially "qtqml-cppintegration-exposecppattributes":http://qt-project.org/doc/qt-5/qtqml-cppintegration-exposecppattributes.html
I'm not sure about the plugin as I have never used one. -
@p3c0: Thanks. I get how to use the QNetworkAccessManager to download the file. But I need to be able to run this code whenever someone uses the import statement for external javascript files. Sorry for not being clear before.
-
Well then check "registering-an-instantiable-object-type":http://qt-project.org/doc/qt-5/qtqml-cppintegration-definetypes.html#registering-an-instantiable-object-type. Create a Q_INVOKABLE function in it where you download the file then you can call this function from QML after instantiating it.
-
@p3c0: I am not able to get the example you stated above to work actually
import "http://192.168.0.16/sample.js" as Remote
I have my own node.js file server running on 8030 which i am trying to access using the below import statement:
import "http://127.0.0.1:8030/testbrowser.js" as Browser
Sometimes it does send a request to my server and my server correctly responds too, but the app then exits for some reason. do you know why that is?
thanks,
Rohit -
Sorry but i haven't used node.js. I have used it with particularly simple example like few JavaScript functions in sample.js and it works as expected.
-
Actually node.js is not the issue here..as the server does work when i try to access the file in the browser.
Do you know why the download would not work in QML? My app exits with an exit code 255.
Thanks -
Can you try with some simple Javascript file which will contain just a few functions ?
-
i tried with an empty javascript file too and it did not seem to work
-
I tested it with apache server and it worked. The js file contains a simple function which returns a string.
sample.js
@
function myFunction() {
return "Hello Qt"
}
@and the from QML
@
import "http://192.168.1.3/sample.js" as Remote
...
//and on some Button click calling it as
Remote.myFunction()
@ -
It seems to work when I create a Qt Quick Application project from Qt Creator and try to import the javascript file from the node js server.
However the import fails when I create a Qt Quick UI project. Is there a way to enable this behavior in a Qt Quick UI project?