I want to import a custom module in my main.qml file. Main.qml is located under "/" prefix of my qml.qrc resource.
My custom module Config.qml is located within Config subdirectory. (Config directory is where main.qml is, i.e. /path/to/main/Config/Config.qml.
The config.qml and qmldir files are stored under the prefix myPrefix in the qml.qrc file.
Project
|- Config
|- Config.qml
|- qmldir
|- main.qml
Also I created a qmldir file which is according to the documentation http://doc.qt.io/qt-5/qtqml-modules-identifiedmodules.html necessary. Here are my Config.qml and qmldir files.
Config.qml
pragma Singleton
import QtQuick 2.0
QtObject {
property int myVariable: 10
}
qmldir
singleton Config 1.0 Config.qml
When I want to import my custom module asMyModule in the main.qml file.
import "???" as MyModule
How can I do that? Does someone have a suggestion?
Edit:
qrc file
<RCC>
<qresource prefix="/">
<file>main.qml</file>
</qresource>
<qresource prefix="/myPrefix">
<file>Config/qmldir</file>
<file>Config/Config.qml</file>
</qresource>
** Question has been changed after the answer of Arpegius to raise another issue, I answer this new issue. **
This has nothing to do with qrc-prefix.
I believe your are mixing two different methods to import.
With or without prefix, to import a module you need to set the import-path of the QtQuick engine accordingly.
In your case, because your module directory is in the project-root directory :
engine.addImportPath("qrc:/");
// Now engine will look for subfolders which could be modules == with a qmldir
And in your main.qml you do the import using the prefix path instead of the filesystem path :
import myPrefix 1.0 as MyNamespace
You can also import simple QML files and not as a module :
// Because the path is relative to main.qml even in a qrc
import "myPrefix" as MyNamespace
Then you don't need the qmldir at all.
From documentation:
The module's qmldir file must reside in a directory structure within the import path that reflects the URI dotted identifier string, where each dot (".") in the identifier reflects a sub-level in the directory tree. For example, the qmldir file of the module com.mycompany.mymodule must be located in the sub-path com/mycompany/mymodule/qmldir somewhere in the import path.
So you should change module MyModule to module Config or import it within specific path:
import "./Config" as MyModule
if this is still an issue for anyone, you to right click on the file and select add file to directory. then you select the directory you wish to add the qml file in. this directory should be the same as the main qml file. doing this solved my problem
Related
I am trying to setup something very simple but the QML is not resolving my module. Why?
I just following the tutorial below, but it does not use cmake, not sure if this is cmake issue or code.
https://www.youtube.com/watch?v=yTH5e6atHoE
I created a "Colors" subdirectory on my folder structure with a qmldir and "CustomColors_01.qml"
here is my cmake file list:
qt_add_qml_module(appDlgDemo
URI DlgDemo
VERSION 1.0
QML_FILES main.qml
QML_FILES Colors/CustomColors_01.qml
QML_FILES Colors/qmldir
)
My folder structure:
-
│ .gitignore
│ CMakeLists.txt
│ main.cpp
│ main.qml
│
└───Colors
CustomColors_01.qml
qmldir
the qmldir
module Colors
singleton CustomColors 1.0 CustomColors_01.qml
the Colors/CustomColors_01.qml
pragma Singleton
import QtQuick
QtObject{
readonly property string background: "#f6f9f8"
}
the main.qml and it won't resolve "import Colors 1.0", only if I import directly, but this is not what I need.
I have a simple test project at https://github.com/jh3010-qt-questions/font_test
When I build it, I get the error:
qrc:/main.qml:5 module "Fonts" is not installed
My directory structure looks like:
font_test
├── assets
│ └── Fonts
│ ├── Art Brewery.ttf
│ ├── Fonts.qml
│ ├── Roboto-Light.ttf
│ ├── Roboto-Medium.ttf
│ ├── Roboto-Regular.ttf
│ └── qmldir
├── font_test.pro
├── font_test.pro.user
├── main.cpp
├── main.qml
└── qml.qrc
my qml.qrc file is:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
</qresource>
<qresource prefix="/Fonts">
<file alias="Art Brewery.ttf">assets/Fonts/Art Brewery.ttf</file>
<file alias="Roboto-Light.ttf">assets/Fonts/Roboto-Light.ttf</file>
<file alias="Roboto-Medium.ttf">assets/Fonts/Roboto-Medium.ttf</file>
<file alias="Roboto-Regular.ttf">assets/Fonts/Roboto-Regular.ttf</file>
</qresource>
</RCC>
my project file is:
QT += quick
CONFIG += c++11
# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += \
main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH = $$PWD/assets
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
DISTFILES += \
assets/Fonts/Fonts.qml \
assets/Fonts/qmldir
My Fonts.qml file is:
pragma Singleton
import QtQuick 2.12
Item
{
readonly property FontLoader artBrewery: FontLoader { source: "qrc:/Fonts/Art Brewery.ttf" }
readonly property FontLoader robotoLight: FontLoader { source: "qrc:/Fonts/Roboto-Light.ttf" }
readonly property FontLoader robotoMedium: FontLoader { source: "qrc:/Fonts/Roboto-Medium.ttf" }
readonly property FontLoader robotoRegular: FontLoader { source: "qrc:/Fonts/Roboto-Regular.ttf" }
}
My qmldir inside of the assets/fonts folder is:
singleton Fonts 1.0 Fonts.qml
I try to use the font in main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import Fonts 1.0
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Column
{
spacing: 8
anchors.fill: parent
anchors.margins: 8
Label
{
text: "DEFAULT: Pack my box with five dozen liquor jugs"
}
Label
{
text: "ART BREWERY: Pack my box with five dozen liquor jugs"
font.family: Fonts.artBrewery.name
font.pixelSize: 36
}
Label
{
text: "ROBOTO: Pack my box with five dozen liquor jugs"
}
}
}
Before I added QML_IMPORT_PATH = $$PWD/assets to my project file, Qt Creator would complain about import Fonts 1.0. Does it make sense this would be required?
I am wondering if assets/fonts/qmldir belongs in DISTFILES...?
I am not sure what needs to be changed so font.family: Fonts.artBrewery.name in main.qml will work.
As described here, the module has to be available in the QML engine's import path:
To define a module, a developer should gather together the various QML documents, JavaScript resources and C++ plugins which belong in the module into a single directory, and write an appropriate module definition qmldir file which should also be placed into the directory. The directory can then be installed into the QML import path as a module.
You can do this by calling addImportPath() with the path to the parent directory of the directory that contains the qmldir. When you import your module with
import Fonts 1.0
the QML engine looks through each import path for a directory called Fonts, and if it finds it, looks for a qmldir file. Since you use a prefix in your QRC file, the final path to the qmldir file is :/Fonts/qmldir. The parent directory of Fonts (the directory that contains the qmldir) is the root resource directory :/, so:
diff --git a/main.cpp b/main.cpp
index 3d80569..de4efb7 100644
--- a/main.cpp
+++ b/main.cpp
## -10,6 +10,7 ## int main(int argc, char *argv[])
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
+ engine.addImportPath(":/");
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
You also need to ensure that all of the files your module uses are available as resources. That means adding the following files:
diff --git a/qml.qrc b/qml.qrc
index f212706..40cb8dc 100644
--- a/qml.qrc
+++ b/qml.qrc
## -3,6 +3,8 ##
<file>main.qml</file>
</qresource>
<qresource prefix="/Fonts">
+ <file alias="qmldir">assets/Fonts/qmldir</file>
+ <file alias="Fonts.qml">assets/Fonts/Fonts.qml</file>
<file alias="Art Brewery.ttf">assets/Fonts/Art Brewery.ttf</file>
<file alias="Roboto-Light.ttf">assets/Fonts/Roboto-Light.ttf</file>
<file alias="Roboto-Medium.ttf">assets/Fonts/Roboto-Medium.ttf</file>
I see another answer beat me in a couple of minutes. Oh well. I'll post mine just in case.
How to fix the problem through directory import:
Add missing files to resource list in qml.qrc file:
<qresource prefix="/Fonts">
...........
<file alias="Fonts.qml">assets/Fonts/Fonts.qml</file>
<file alias="qmldir">assets/Fonts/qmldir</file>
please note the aliases, otherwise paths will be different
If you do not add the files to resources, they won't be visible through qrc://, and also they won't be included into your compiled application i.e. your code will only run on your computer unless you install missing files manually with your application
Remove module import from main.qml:
//import Fonts 1.0
This is not needed (and will not work) if you create your singleton through qmldir file
The import won't work because Qt won't be looking for modules within qrc:// path unless you explicitly specify so in C++ code - see the other answer on how to do that
Instead add a directory import to the top of main.qml:
import "qrc:/Fonts/"
this imports qmldir file which creates a singleton named Fonts from file Fonts.qml as you specified
Please note that although it imports qmldir and *.qml files inside the directory, it does not tell Qt to load modules from that same directory.
I also had to add QT += qml to font_test.pro but it's probably not needed for your version of Qt/QML if it compiles at all
Use your singleton like you are already trying to do: Fonts.artBrewery.name
References
See Qt documentation for more information:
QML directory import including directory definition qmldir files
module definition qmldir files
I'm trying to make a directory of a singleton QML File "All.qml" which I can import anywhere else into my project so that I can access its objects (namely the drawer). I made a qmldir file, in the same folder as the "All.qml", and even add the directory to the .qrc file.
The contents of the directory is as follows:
Module App.Drawer
singleton All 1.0 All.qml
But when I type in
import App.Drawer. 1.0
It says "module 'App.Drawer' not installed". I can't find any other way to access that drawer, as the project is huge with multiple folders and directories. Can anyone help me?
Also, this project has C++ integrated with it. I tried going and finding some file where maybe the other directories (there are other custom directories, which were made beforehand) have been installed, but couldn't find any.
You have to make sure that QEngine can find the qmldir file, and it has some specific requirements on where it will look.
First to make QEngine aware of the qmldir file you have to add an import path:
engine.addImportPath("qrc:/");
Your path may vary, read on:
The qmldir file has to placed in the folder structure dictated by module name. In your case it is <rootPath>/App/Drawer/qmldir. The "rootPath" is unknown to me, but let's assume you have the following in your qrc file:
<RCC>
<qresource prefix="/ProjectX/App/Drawer">
<file>Drawer.qml</file>
<file>qmldir</file>
</qresource>
</RCC>
Then "rootPath" is qrc:/ProjectX and the import call becomes:
engine.addImportPath("qrc:/ProjectX");
Also, the module declaration in qmldir should be the same as the folder structure where the qmldir file is placed. (And I think it should be lowercase)
module App.Drawer
singleton Drawer 1.0 Drawer.qml
If you want Qt Creator to also find the stuff you can use the QML2_IMPORT_PATH environment variable and set it to the correct folder using the same logic.
You can also place the files in the <Qt_installation_folder>/qml/App/Drawer but this means every project can use it and you have to keep it up-to-date during development, which might be overdone.
Edit
To see if your files are lined up correctly, you can add this debug code:
QDirIterator it(":", QDirIterator::Subdirectories);
while (it.hasNext()) {
qDebug() << it.next();
}
I have a set of Qmls which are available in a folder. Now I want to use these Qml files in a Qt project. Is there any way to import those QMLs in my project without copying the Qml folder to my project directory?
My .pro file looks like this:
RESOURCES += qml.qrc
RESOURCES += $$PWD/../QML_Assets
QML_IMPORT_PATH = $$PWD/../QML_Assets
QML2_IMPORT_PATH = $$PWD/../QML_Assets
The immediate qrc generates like this :
D:/Qt_Projects/Dummy_sample/QML_Assets/QML_2.qml
D:/Qt_Projects/Dummy_sample/QML_Assets/QML_1.qml
If i add import "../QML_Assets/" then my application starts & exits immediatly.
If I dont import this & comment the components which are used from QML_Assets folder then it works.
There is are couple of possibilities to do that in Qt.
First you can set variables in your Qt project file (.pro) to add QML imports paths.
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
QML2_IMPORT_PATH =
You can also do that directly in c++ code with QQmlEngine::addImportPath before constructing/starting your Qml view
You can then check wich import paths are set for your app with QQmlEngine::importPathList
Here is Qt documentation about Import Statements and QML Import Path specifically
And even more specific: Importing QML Document Directories
I'm working on a project in which all .js and .qml files are stored in the Qt Resource file (.qrc). I've tried to import an external directory in a qml file. The external directory contains other .qml files for different purposes. I don't want to include these external directories into the .qrc file.
I get an error when I add the import path saying:
qrc:\example.qml : cannot find directory
Is there any way to include an external file or directory like this.
Found a solution in the Qt forum, http://qt-project.org/forums/viewthread/7047. For accessing any file outside QRC, use "absolute filepath" of the file.
For example:
In main.cpp file:
QString path = QDir::currentPath(); //path where the exec is present
If your file is in src/file.qml of exec folder, then you can access it like
(path += "/src/file.qml";), now path is the absolute file path for file.qml. You can access it in any of the QRC file.
QQuickView view;
view.rootContext()->setContextProperty("myFile", path);
view.setSource("qrc:/main.qml");
In main.qml file:
Loader
{
id: loadItem
source: myFile
}
Item
{
Component.onCompleted: loadItem.item
}