Trying to load qml files dynamically with javaScript in relation Qt for WebAssembly

[kuersat]

Hi guys,
i want to have your thoughts and maybe a solution.
What i am trying to do is, basically making it able to load qml files in a swipe view, if the qml file exists and run the .html in the browser.
I thought it would be possible by just adding files without compiling again, but it isnt. I always need to run my Makefile again to get a new wasm file.
Is there any option we could load qml dynamically without that procedure because it takes way to long to always run make again.
Compiling time is about 5 minutes.
I used the code from here https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html
Otherwise the app works perfectly fine.
Just need to make sure i can load files by just adding file to the directory and not to qmake and make all again to get the wasm file. I know that the wasm file contains the compiled code but there s got to be a solution i think.

Another thing is, maybe somebody knows because i tried to figure out and found some posts that didnt help, I cant use #include <QDeclarative>. It is possible and recommended to use Declarative for dynamic loadings via cpp.
I checked my user/include and i verified that i had the necesarry files but still the same. I tried to add declarative in the .pro file but even that didnt help me out.

Hoping to get help, thanks

[sierdzio]

@kuersat said in Trying to load qml files dynamically with javaScript in relation Qt for WebAssembly:

Just need to make sure i can load files by just adding file to the directory

But your QML code directory is on server, right? Your WASM application runs on client side (in the web browser). So to load the files you need to specify the URL (and make sure that your server serves the files), then it should work (but make sure to use HTTP and not HTTPS, unless you want to fight with OpenSSL).

I cant use #include <QDeclarative>

That module is deprecated (it is the old QtQuick version 1). Use #include <QtQuick> and #include <QtQml> instead.

[tham]

@sierdzio said in Trying to load qml files dynamically with javaScript in relation Qt for WebAssembly:

unless you want to fight with OpenSSL).

Qt for webassembly do not support ssl yet, but we could use js to download the file, it works.

[kuersat]

sorry for answering late guys

So i tried it again and i still cant get out of it, let me show u what i did.

I have my basic main.qml which has a Swipe view and in the same file i have my javascript code:

function fillItem(fileName){
var component;
var item;
var request = new XMLHttpRequest()
request.open('GET', fileName)
request.onreadystatechange = function(event) {
if (request.readyState === XMLHttpRequest.DONE) {
console.log("File: ",fileName,"opened.");
component = Qt.createComponent(fileName);
item = component.createObject(firstPage,{});
}
}
request.send()
}
--> It does well by loading the file and displaying what it should.
--> After compiling to deploy in the browser, it works fine too. But now the thing I'd expect when I take the .qml File out which is loaded it should affect the swipe view so the page should not look the same like when the file was in the folder.

@sierdzio Yes, i have everything on the server. Using the SimpleHTTPServer from python to run in the browser.
I want it to load the file when the file is there and also try to load when the file is not there and display nothing because its not available or created.

Thanks guys!

[lorn.potter]

@sierdzio said in Trying to load qml files dynamically with javaScript in relation Qt for WebAssembly:

@kuersat said in Trying to load qml files dynamically with javaScript in relation Qt for WebAssembly:

Just need to make sure i can load files by just adding file to the directory

But your QML code directory is on server, right? Your WASM application runs on client side (in the web browser). So to load the files you need to specify the URL (and make sure that your server serves the files), then it should work (but make sure to use HTTP and not HTTPS, unless you want to fight with OpenSSL).

You should be able to use https anyway as we bypass Qt networking and use javascript to download.

[lorn.potter]

wasm does not have direct access to local filesystems. You should be able to use network source for qml, if this does not currently work, there is a regression somewhere and you could kindly report a bug about it. :)

MyComponent {
source: "http://someserver/my.qml"
}

[kuersat]

@lorn-potter actually i dont use the filesystem itself, i just upload the whole folder to the server.
So it doesnt matter if http://... or qrc:/...
still the same problem that i am not able to make changes once I comiled.

Doesnt anyone have an Idea ?

[kuersat]

guys anyone?

[kuersat]

*update
When using FileDialog the sandbox within the browser is opened so.
I think it does not make sense to manipulate the sandbox cause its gonna be changed anyways every time I start.
Also I found this bug report which is quite informative:
https://bugreports.qt.io/browse/QTBUG-67834

[lorn.potter]

There is a way to 'persist' files, but you need to sync them from the local system into the sandbox.
https://emscripten.org/docs/api_reference/Filesystem-API.html

Using the IDBFS you can copy files to a mounted IndexDB filesystem.
In fact, QSettings on wasm uses this to attempt to persist QSettings.