How to use qmlpreview?

sierdzio

Your QML code is compiled into the executable, so you need to recompile after changing the code.

You can load QML from disk, without compiling it into the exe, that will require some code changes though.

rudolflovrencic

I have also tried to have a CMake option that dictates if files are hot-reloadable or not. Here is a GitHub project where I almost managed to make that work. It is relying on the typical Loader+QFileSystemWatcher approach instead of using the qmlpreview tool - and it does not fully work as expected (see this issue).

@sierdzio said in How to use qmlpreview?:

You can load QML from disk, without compiling it into the exe, that will require some code changes though.

I am fully on board for code changes but I am unable to see which changes are necessary. Where can I learn how to prepare my project in order to use qmlpreview?

GrecKo

I've not really read your QML project but I believe using Loader is not the correct approach since that's different from the production code you want.

What you want is a way to point your qml code to actual files instead of qrc files and then a way to reload it.

The first can be done in CMake if you have proper QML modules. Here's a function I wrote doing that:

function (enable_qml_hotreload target)
    get_target_property(source_dir ${target} SOURCE_DIR)
    get_target_property(qmldir_content ${target} _qt_internal_qmldir_content)
    string(REGEX REPLACE "prefer [^\n]*" "prefer ${source_dir}/" qmldir_content "${qmldir_content}")
    set_property(TARGET ${target} PROPERTY _qt_internal_qmldir_content "${qmldir_content}")
endfunction()

Do note that this is using a internal variable so it is not guaranteed to work in the future.

What this does is changing the folder pointer to by the generated qmldir file to your local source files.

Then from I understanding qmlpreview should handle the reloading itself if you have defined QT_QML_DEBUG. I haven't used this as I prefer to do a reload on demand via a shortcut that then calls clearSingletons, clearComponentCache and loadFromModule.

rudolflovrencic

@GrecKo Thank you for your response. I haven't been able to make it work - I've made a branch cmake-qml-redirect (link) that starts to implement your suggestion, but I'm getting No qmldir at "/path/to/project/root/" at project build time.

Do you have an example of how that should be set up?

GrecKo

Honestly I don't know, I tried to make it work with qmlpreview yesterday after my message to see if it would be simple but I didn't unsterstand much.

I recompiled qmlpreview to add more debug messages but I think I need message on the other side (the qml debug server running in the application) to get the full picture.
The window closed and re-opened itself upon a change but the change was ignored.

I'll ask Qt commercial support about this. For now the manual method with your own QFileSystemWatcher or shortcut seems to be the sensible one.

GrecKo

As for your cmake / qmldir issue I'm not sure. I first tried it with a simpler CMake like this:

...
qt_add_executable(appuntitled40
    main.cpp
)

qt_add_qml_module(appuntitled40
    URI untitled40
    VERSION 1.0
    QML_FILES
        Main.qml
)
...

I do use it one a more complicated project with multiple CMakeLists.txt and modules though.

rudolflovrencic

@GrecKo Are you able to share main.cpp for such setup? I am blocked on that.

GrecKo

@rudolflovrencic just a default generated main.cpp:

#include <QApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.loadFromModule("untitled40", "Main");

    return app.exec();
}

rudolflovrencic

@GrecKo Don't you handle key press signals from QML and invoke clearSingletons, clearComponentCache and loadFromModule in main.cpp? That was the impression I got from post #4 where you introduced the enable_qml_hotreload CMake function.

Basically, I'm asking: how do you currently do a hot reload with a key press? Minimal working example or a bit more details would be useful since I'm a bit lost in the advice so far. I'm especially interested in your approach since you said that you maintain the same QML in production and for hot reloading:

@GrecKo said in How to use qmlpreview?:

...but I believe using Loader is not the correct approach since that's different from the production code you want.

In other words, you avoid the QML scaffolding needed for hot reloading (apart from catching the hot reload key press, I guess).

GrecKo

@rudolflovrencic Either use a recursive QFileSystemWatcher or a QML Shortcut / c++ eventFilter depending on you want to trigger the reload, then connect that to a function which does the following:

for (QObject* rootObject : m_engine->rootObjects()) {
  rootObject->deleteLater();
}
QMetaObject::invokeMethod(this, [this] {
    m_engine->clearSingletons();
    m_engine->clearComponentCache();
    m_engine->loadFromModule("MyAppModuleUri", "Main");
}, Qt::QueuedConnection);

Markkyboy

How are you starting/trying to start QML preview?, I use it when creating desktop apps for Windows 10 and to an extent, for my Android phone.

rudolflovrencic

@Markkyboy As I mentioned in the original post, just qmlpreview myexe. The executable myexe is compiled with QML debugging enabled.