how to use .qmlproject .ui.qml forms from Design Studio in Qt Creator .pro project?

Question

I'm involved in a project that has a designer working in Design Studio to develop .ui.qml forms (with related assets) and me, the developer, working on an existing Qt Creator .pro project. I would like to keep the two projects in separate repositories.

Would someone be so kind as to point to a tutorial that covers this? Or a wiki page? Or some other resource on the web that explains how to do what I want to do i.e. use the .ui.qml resources from the .qmlproject in the QtQuick QML files in my .pro project.

Thanks for any an all pointers.

----- update for more detail -----

I have 2 projects, named marge and patty. Patty is a .qmlproject that is being worked on by the designer in Qt Design Studio and contains the UI forms in .ui.qml files along with related graphic assets and themes, etc. It is in its own git repository. Marge, on the other hand, is the .pro application that I'm developing in Qt Creator -- it is a mix of QtQuick QML and supporting C++. I think this is a fairly typical approach, but if I'm doing something that is making my life more difficult, please point me in a different direction.

In Marge's qml.qrc file, I have added a element that contains 3 entries (so far) that reference .qml and .ui.qml resources in the patty project:

<qresource prefix="/forms">
  <file>../patty/StatusBarForm.ui.qml</file>
  <file>../patty/Tempo.qml</file>
  <file>../patty/TempoForm.ui.qml</file>
</qresource>

I do see these resources in Qt Creator in the marge project navigator, but I cannot figure out how to now use those resources in my other QML files in marge. I'm expecting to be able to have a StatusBar.qml file, for example, that would contain something like this:

import QtQuick 2.0
import "qrc:/forms/../patty/StatusBarForm.ui.qml"

StatusBarForm {
}

That doesn't work for me and that's what I'm trying to figure out.

talamaki · Accepted Answer · 2021-04-27T05:45:58.743

There is a chapter named Converting UI Projects to Applications in Qt Design Studio Manual.

Basically, you just copy QML files and related assets from the Qt UI Quick project (Design Studio project) to your qmake based application project (.pro project), and add them to Qt resource file(s) in it.

FYI: Qt Creator supports adding new resource files and adding existing files and existing directories to resources.

Answer to updated part:

You can use file tag's alias attribute in your resource file.

<qresource prefix="/">
  <file alias="StatusBarForm.ui.qml">../patty/StatusBarForm.ui.qml</file>
</qresource>

And if you leave qresource tag's prefix attribute to point to root as above you don't need to import forms directory in your QML file. Otherwise, you add import "qrc:/forms", so you import a directory, not an individual file.

import QtQuick 2.0

StatusBarForm {
}

It would make sense to add a separate resource file for external resources, e.g. patty.qrc, instead of collecting everything to the default generated qml.qrc. (Qt Creator: Right click on top of project -> Add New... -> Qt -> Qt Resource File)

I'd like to keep the files in their respective project directories and not have to copy things from one project to the other all the time. — alpartis, Apr 26 '21 at 12:33
I like the idea of creating a separate resource file for the external resources. The bit was also very helpful. Thanks. — alpartis, Apr 30 '21 at 03:50
I cannot find resource file. Qt has nothing updated about this topic and it should be documented ASAP. — OrkhanGG, Oct 31 '22 at 11:36

how to use .qmlproject .ui.qml forms from Design Studio in Qt Creator .pro project?

1 Answers1