How can I make a QML module visible to other QML files?

serkan_tr

I am working on a project where I use C++ and QML. To keep the GUI part from becoming too complex, I created separate modules. I placed these modules in the same location as the qrc file so that they can be used directly without importing anything. However, as the project grows, having all QML files displayed in one place in Qt Creator increases complexity. Therefore, I thought about creating a directory named modules and moving the modules there. But in this case, I cannot access these modules from my QML files, and I get an error. What should I do to solve this problem?

My file structure:

.
├── cmake
│   ├── GeneralOptions.cmake
│   └── Git.cmake
├── CMakeLists.txt
├── CMakeLists.txt.user
├── README.md
├── recourse.qrc
├── resources
│   ├── icons
│   │   ├── ari.ico
│   │   ├── kamikaze.ico
│   │   ├── lectron.ico
│   │   └── L.ico
│   ├── images
│   │   ├── ari.png
│   │   ├── compass_blue.png
│   │   ├── disconnect.png
│   │   ├── downloads.png
│   │   ├── drone.png
│   │   ├── fly.png
│   │   ├── home.png
│   │   ├── info.png
│   │   ├── lectron.png
│   │   ├── location.png
│   │   ├── no_video_background.jpg
│   │   ├── satellite.png
│   │   ├── save.png
│   │   ├── target.png
│   │   ├── technology.png
│   │   └── upload.png
│   └── svg
│       ├── bomb.svg
│       ├── compass_blue.svg
│       ├── compassDial.svg
│       ├── compassInstrumentArrow.svg
│       ├── disconnect.svg
│       ├── downloads.svg
│       ├── drone.svg
│       ├── fly.svg
│       ├── gps.svg
│       ├── home.svg
│       ├── location.svg
│       ├── map.svg
│       ├── menu.svg
│       ├── previous.svg
│       ├── satellite.svg
│       ├── save.svg
│       ├── settings.svg
│       ├── takeoff.svg
│       ├── target.svg
│       ├── technology.svg
│       └── wind-rose.svg
└── src
    ├── CMakeLists.txt
    ├── Comms
    │   ├── CMakeLists.txt
    │   ├── CommTypes.hpp
    │   ├── MavLink.cpp
    │   ├── MavLink.hpp
    │   ├── MocLink.cpp
    │   ├── MocLink.hpp
    │   ├── SerialLink.cpp
    │   ├── SerialLink.hpp
    │   ├── SerialManager.cpp
    │   ├── SerialManager.hpp
    │   ├── UdpLink.cpp
    │   └── UdpLink.hpp
    ├── LGCApplication.cpp
    ├── LGCApplication.hpp
    ├── main.cpp
    ├── Map
    │   ├── CMakeLists.txt
    │   ├── Map.cpp
    │   └── Map.hpp
    ├── ParameterManager
    │   ├── CMakeLists.txt
    │   ├── ParameterManager.cpp
    │   └── ParameterManager.hpp
    ├── System
    │   ├── BatteryStatus.cpp
    │   ├── BatteryStatus.hpp
    │   ├── CMakeLists.txt
    │   ├── TimeManager.cpp
    │   └── TimeManager.hpp
    └── UI
        ├── MainWindow.qml
        ├── Map
        │   ├── MapView.qml
        │   └── MapZoomControls.qml
        ├── Module
        │   ├── LGCComboBox.qml
        │   ├── LGCImage.qml
        │   ├── LGCMessage.qml
        │   ├── LGCTextInput.qml
        │   ├── LGCText.qml
        │   └── qmldir
        ├── Pages
        │   ├── MissionPage.qml
        │   ├── SettingsPage.qml
        │   └── UploadPage.qml
        ├── Toolbar.qml
        └── WidgetLayer.qml

My QRC File:

<RCC>
    <qresource prefix="/qml">
        <file alias="LGCText.qml">src/UI/Module/LGCText.qml</file>
        <file alias="LGCImage.qml">src/UI/Module/LGCImage.qml</file>
        <file alias="LGCComboBox.qml">src/UI/Module/LGCComboBox.qml</file>
        <file alias="LGCTextInput.qml">src/UI/Module/LGCTextInput.qml</file>
        <file alias="LGCMessage.qml">src/UI/Module/LGCMessage.qml</file>
        <file alias="MainWindow.qml">src/UI/MainWindow.qml</file>
        <file alias="Toolbar.qml">src/UI/Toolbar.qml</file>
        <file alias="MapView.qml">src/UI/Map/MapView.qml</file>
        <file alias="MapZoomControls.qml">src/UI/Map/MapZoomControls.qml</file>
        <file alias="WidgetLayer.qml">src/UI/WidgetLayer.qml</file>
        <file alias="MissionPage.qml">src/UI/Pages/MissionPage.qml</file>
        <file alias="SettingsPage.qml">src/UI/Pages/SettingsPage.qml</file>
        <file alias="UploadPage.qml">src/UI/Pages/UploadPage.qml</file>
    </qresource>
    <qresource prefix="/icons">
        <file alias="kamikaze.ico">resources/icons/kamikaze.ico</file>
        <file alias="L.ico">resources/icons/L.ico</file>
        <file alias="lectron.ico">resources/icons/lectron.ico</file>
        <file alias="ari.ico">resources/icons/ari.ico</file>
    </qresource>
    <qresource prefix="/images">
        <file alias="compass_blue.png">resources/images/compass_blue.png</file>
        <file alias="disconnect.png">resources/images/disconnect.png</file>
        <file alias="downloads.png">resources/images/downloads.png</file>
        <file alias="drone.png">resources/images/drone.png</file>
        <file alias="home.png">resources/images/home.png</file>
        <file alias="info.png">resources/images/info.png</file>
        <file alias="lectron.png">resources/images/lectron.png</file>
        <file alias="location.png">resources/images/location.png</file>
        <file alias="no_video_background.jpg">resources/images/no_video_background.jpg</file>
        <file alias="satellite.png">resources/images/satellite.png</file>
        <file alias="save.png">resources/images/save.png</file>
        <file alias="target.png">resources/images/target.png</file>
        <file alias="technology.png">resources/images/technology.png</file>
        <file alias="upload.png">resources/images/upload.png</file>
        <file alias="ari.png">resources/images/ari.png</file>
    </qresource>
    <qresource prefix="/svg">
        <file alias="compassInstrumentArrow.svg">resources/svg/compassInstrumentArrow.svg</file>
        <file alias="previous.svg">resources/svg/previous.svg</file>
        <file alias="bomb.svg">resources/svg/bomb.svg</file>
        <file alias="compassDial.svg">resources/svg/compassDial.svg</file>
        <file alias="compass_blue.svg">resources/svg/compass_blue.svg</file>
        <file alias="disconnect.svg">resources/svg/disconnect.svg</file>
        <file alias="downloads.svg">resources/svg/downloads.svg</file>
        <file alias="drone.svg">resources/svg/drone.svg</file>
        <file alias="gps.svg">resources/svg/gps.svg</file>
        <file alias="home.svg">resources/svg/home.svg</file>
        <file alias="satellite.svg">resources/svg/satellite.svg</file>
        <file alias="menu.svg">resources/svg/menu.svg</file>
        <file alias="save.svg">resources/svg/save.svg</file>
        <file alias="settings.svg">resources/svg/settings.svg</file>
        <file alias="takeoff.svg">resources/svg/takeoff.svg</file>
        <file alias="target.svg">resources/svg/target.svg</file>
        <file alias="technology.svg">resources/svg/technology.svg</file>
        <file alias="wind-rose.svg">resources/svg/wind-rose.svg</file>
        <file alias="fly.svg">resources/svg/fly.svg</file>
        <file alias="location.svg">resources/svg/location.svg</file>
    </qresource>
</RCC>

It gives an error saying that the modules are not defined this way, but they work because they are in the same directory.

JKSH

@serkan_tr said in How can I make a QML module visible to other QML files?:

What should I do to solve this problem?

Use qt_add_qml_module() to create your modules. Don't use *.qrc files any more.
When you want to access QML types from a different module, import that module.

See:

serkan_tr

@JKSH ,

In my projects, I use add_executable. In this case, will the system allow me to use qt_add_qml_module()?
Should I completely stop using .qrc files, or should I just avoid using them for creating QML modules?

JKSH

@serkan_tr said in How can I make a QML module visible to other QML files?:

@JKSH ,

In my projects, I use add_executable. In this case, will the system allow me to use qt_add_qml_module()?

Good question; I'm not sure. I usually use qt_add_executable() instead.

Just give it a try. If add_executable() doesn't work, then try qt_add_executable().

Should I completely stop using .qrc files, or should I just avoid using them for creating QML modules?

It's fine to keep using *.qrc files for resources that aren't related to QML (or used by your QML files).

However, if the resources are used by your QML files, I find it more convenient to add them directly to qt_add_qml_module():

qt_add_qml_module(myApp
    URI MyModule
    QML_FILES
        Main.qml
        MyCustomItem.qml
    RESOURCES
        MyImage.png
)

serkan_tr

@JKSH Thank you for your response. I will try the qt_add_qml_module() function, and if it works, I will get back to you