Load qmldir from QRC file - qt

I'm trying to use the QML-material library in a Qt Quick Application.
But when I try to use the import code it says
module "Material" is not installed`
import Material 0.1
I did also try this but that seems not to work:
import "modules/Material" as Material
qml.qrc looks like this, all qmldir files are listed:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>modules/Material/qmldir</file>
<file>modules/Material/Extras/qmldir</file>
<file>modules/Material/ListItems/qmldir</file>
<file>modules/QtQuick/Controls/Styles/Material/qmldir</file>
</qresource>
</RCC>
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.addImportPath("qrc:/");
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
Is there something I'm missing or is it not possible to use qmldir in qrc file?

You need to add to the import path the folder where the modules are located.
In this case it's qrc:/modules/.
Example:
engine.addImportPath( "qrc:///modules" );
For a module to work you need to have access to the qmldir file, but also all the files referenced in it. So you need to add all the files of the library to the the qrc.

Related

Import QML module from resource file

The following project structure is working for import a qml module:
Project structure
Project
|- modules
|- Goofy
|- qmldir
|- Donald.qml
|- project.pro
|- main.cpp
|- main.qml
|- qml.qrc
project.pro
QT += quick
SOURCES += \
main.cpp
RESOURCES += \
modules/Goofy/Donald.qml \
modules/Goofy/qmldir \
qml.qrc
QML_IMPORT_PATH = $$PWD/modules
QML_DESIGNER_IMPORT_PATH = $$PWD/modules
main.cpp
QQmlApplicationEngine engine;
engine.addImportPath("qrc:/modules");
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import Goofy 1.0
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Donald{}
}
qmldir
module Goofy
Donald 1.0 Donald.qml
How should I modify my project to import the module from a qrc file instead of adding any single file to the resources??
Ideally I'd like to have the following pro file:
project.pro
QT += quick
SOURCES += \
main.cpp
RESOURCES += \
modules/Goofy/goofy.qrc \
qml.qrc
QML_IMPORT_PATH = $$PWD/modules
QML_DESIGNER_IMPORT_PATH = $$PWD/modules
I tried adding goofy.qrc (or Goofy.qrc) to my modules/Goofy folder with the following format:
<RCC>
<qresource prefix="/">
<file>qmldir</file>
<file>Donald.qml</file>
</qresource>
</RCC>
but it doesn't work. What should I do?
Your Goofy.rcc doesn't work because the files are not located in the used importPath. The files are next to the qrc, so no relative path is added to the specified prefix. Alter the rcc to the following to make it work:
<RCC>
<qresource prefix="/modules/Goofy">
<file>qmldir</file>
<file>Donald.qml</file>
</qresource>
</RCC>
As you already seem to understand, the qmldir file needs to be in the Goofy path for the QmlEngine to accept it. Add that to the specified import path and QmlEngine will find your module, just like it's on disk (since qrc is actually rendered as a normal filesystem)
BTW, You can check the working of relative qrc paths with the following snippet:
QDirIterator qrc(":", QDirIterator::Subdirectories);
while(qrc.hasNext())
{
qDebug() << qrc.next();
}

Need help on importing QML

I need some help on QML importing. I have 2 projects, name Project1 and Project2
Project 1
|-QmlFile1.qml
|-qml1.qrc
Project 2
|-QmlFile2.qml
|-qml2.qrc
Is it possible to import QmlFile1.qml from Project 1 to QmlFile2.qml of Project 2?
QT_WS\TestQuick\main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import "../COMMON"
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MyButton {
id: button1
}
}
QT_WS\COMMON\MyButton.qml
import QtQuick 2.0
Item {
width: 400
height: 80
Rectangle {
id: button
anchors.fill: parent
color: "red"
}
}
QT_WS\TestQuick\TestQuick.pro
QT += quick
CONFIG += c++11
DEFINES += QT_DEPRECATED_WARNINGS
SOURCES += main.cpp
RESOURCES += qml.qrc \
sharedresource.qrc
QML_IMPORT_PATH =
QML_DESIGNER_IMPORT_PATH =
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
main.qrc
<RCC>
<qresource prefix="/">
<file>main.qml</file>
</qresource>
</RCC>
sharedresource.qrc
<RCC>
<qresource prefix="/">
<file>../COMMON/MyButton.qml</file>
</qresource>
</RCC>
Error:
Starting C:\Personal\QT_WS\build-TestQuick-Desktop_Qt_5_9_4_MSVC2015_64bit-Debug\debug\TestQuick.exe...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:3 "../COMMON": no such directory
C:/Personal/QT_WS/build-TestQuick-Desktop_Qt_5_9_4_MSVC2015_64bit-Debug/debug/TestQuick.exe exited with code -1
Folder structure screenshot
I think what you're probably missing is the qml file is not in your .qrc file so it doesn't know where to find it. If you're going to be sharing code between projects, it makes sense to create a separate .qrc file for common files that will be included in both. So your project structure could look like this:
Project 1
|---qml1.qrc // Files for Project1
|---someFile1.qml
|---shared_qml.qrc // Shared files
|---sharedFile1.qml
|---sharedFile2.qml
Project 2
|---qml2.qrc // Files for Project2
|---someFile2.qml
|---shared_qml.qrc // Shared files
|---sharedFile1.qml
|---sharedFile2.qml
EDIT:
I tried building a project with the same structure you used. It worked when I imported the file like this:
import "qrc:/../COMMON"
It is tricky to share code in the way you are trying to do it now, as the qrc system does not support pointing to paths outside the project tree.
Instead, I would suggest you factor out the shared code into a library that you then use from both projects. That will probably be easier to maintain in the long run anyway.

Angular 6 Material retreive material colors

"#angular/material": "^6.2.1"
Got quite stuck with a very minor issue.
Can't import any standard material color in any of my app's css/scss files, including styles.scss
example:
$app-panel-green: mat-color($mat-green);
gives this error in any scss file:
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed:
$app-panel-green: mat-color($mat-green);
^
Undefined variable: "$mat-green".
in /**********/src/styles.scss (line 1, column 29)
styles.scss consits only of (except previous):
#import "~#angular/material/prebuilt-themes/deeppurple-amber.css";
/*#import './theme.scss';*/
body { margin: 0; }
and pre-built theme works just fine.
I don't even need a custom theme, just want to use material color palette.
If you want to use one of default palettes, you can do it like this:
#import '~#angular/material/theming'; // Pay attention on the path
#include mat-core();
$candy-app-primary: mat-palette($mat-deep-orange);
$candy-app-accent: mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
#include angular-material-theme($candy-app-theme);
And don't forget to include the file with your theming to .angular-cli.json to styles section.

Lumen/Elixir - File to import not found or unreadable

I need to setup sass in Lumen project, from the sass made in kitchen sink. It is my first time setting it up, so I am wondering how to setup a gulpfile.js for it?
I have installed node_modules by running npm install, and I have also installed laravel elixir.
I have put my folder/files structure looks like this:
resources/assets/img
/js/app.js
/sass/_settings.scss
app.scss
My gulpfile.js looks like this:
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
But when I run gulp I get errors for all import and includes in my scss files:
This is how my scss files look like:
app.scss
#import "settings";
#import "foundation";
#import "motion-ui";
#include foundation-flex-grid;
#include foundation-global-styles;
#include foundation-typography;
#include foundation-button;
#include foundation-forms;
#include foundation-visibility-classes;
#include foundation-float-classes;
#include foundation-flex-classes;
// #include foundation-accordion;
// #include foundation-accordion-menu;
// #include foundation-badge;
// #include foundation-breadcrumbs;
// #include foundation-button-group;
// #include foundation-callout;
// #include foundation-close-button;
// #include foundation-drilldown-menu;
// #include foundation-dropdown;
// #include foundation-dropdown-menu;
// #include foundation-flex-video;
// #include foundation-label;
// #include foundation-media-object;
// #include foundation-menu;
// #include foundation-off-canvas;
// #include foundation-orbit;
// #include foundation-pagination;
// #include foundation-progress-bar;
// #include foundation-slider;
// #include foundation-sticky;
// #include foundation-reveal;
// #include foundation-switch;
// #include foundation-table;
// #include foundation-tabs;
// #include foundation-thumbnail;
// #include foundation-title-bar;
// #include foundation-tooltip;
// #include foundation-top-bar;
#include motion-ui-transitions;
#include motion-ui-animations;
And my _setttings.scss has this line, for which I get an error:
#import 'util/util';
Error:
{ [Error: resources/assets/sass/_settings.scss Error: File to import
not found or unreadable: util/util
Parent style sheet: /Users/markodraksic/Projects/Quiz-landing-page/resources/assets/sass/_settings.scss
on line 42 of resources/assets/sass/_settings.scss
#import 'util/util';
I reproduced your error and found the solution here.
You can try to copy the package to your resources.
Add the copy method to your gulpfile:
elixir(function(mix) {
mix.copy('node_modules/foundation-sites/scss', 'resources/assets/sass')
.sass('app.scss');
});
Another option is to add an include path (which I couldn't get to work).

Importing QML Document Directories

I want to import my custom QML type MyType from subdirectory mytypes into my main.qml file. Which is also in the same directory with the mytypes folder. I used this documentation page as reference.
http://doc.qt.io/qt-5/qtqml-syntax-directoryimports.html
I use it as follows:
import "mytypes"
MyType {
}
In code, MyType is recognized and highlighted as usual. However, when I run the application, I get the following error:
qrc:/main.qml:5:1: "mytypes": no such directory
And my .qrc file looks like that:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
</qresource>
<qresource prefix="/mytypes">
<file>mytypes/MyType.qml</file>
</qresource>
</RCC>
So where is the error? Should I also make some changes in the .pro file?
The qrc file
<qresource prefix="/mytypes">
<file>mytypes/MyType.qml</file>
</qresource>
says mytypes/MyType.qml is under the prefix /mytypes. Therefore, the import statement in main.qml should include that prefix:
import "mytypes/mytypes"
MyType { }
Or, remove /mytypes prefix and move mytypes/MyType.qml under / prefix in qrc file:
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>mytypes/MyType.qml</file>
</qresource>
</RCC>
and main.qml can import the type directly:
import "mytypes"
MyType { }

Resources