I created a project that puts some QML in a plugin, and an app using Qt's QPluginLoader.
The app's QML can then use the plugin's QML, with one noticeable problem. From one of the plugin's QML files, I am not able to read a property of a singleton in another QML file. If you look in the file hello.qml, there is a Text item that tries to get his text from MySingleton, but that text does not show up. When I substitute a string literal (the commented out line), the text shows up just fine.
I've got the project here: https://github.com/rhvonlehe/qmlplugin
The project itself is very basic, but represents a lot of the same things going on in a larger project that I can't share but has the same problem.
Output as-is:
In the blue rectangle there should be the words, "singleton Text"
The QtCompany provided the answer, which I'm able to share here.
Long story short, to get the full functionality expected from QML in a plugin I needed to use QQmlExtensionPlugin. Here are the updated files to make things work (Plugin.h and hello.qml)
hello.qml
import QtQuick 2.0
import org.example.PluginInterface 1.0
import "."
Rectangle {
id: page
width: 320; height: 240
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
Rectangle {
id: innerPage
width: 300; height: 30
anchors.horizontalCenter: page.horizontalCenter
color: "blue"
Text {
id: nextOne
color: "white"
// text: "literal Text"
text: MySingleton.getTheText()
anchors.verticalCenter: innerPage.verticalCenter
anchors.horizontalCenter: innerPage.horizontalCenter
font.pointSize: 18; font.bold: false
}
}
OtherThing {
id: myOtherThing
x: 20; y: 150
}
}
Plugin.h
#ifndef PLUGIN_H
#define PLUGIN_H
#include <PluginIf.h>
#include <QQmlExtensionPlugin>
#include <QQmlEngine>
class Q_DECL_EXPORT Plugin : public QQmlExtensionPlugin, PluginInterface
{
Q_OBJECT
Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
Q_INTERFACES(PluginInterface)
public:
void init() override;
void registerTypes(const char *uri) override
{
qmlRegisterSingletonType(QUrl("qrc:/MySingleton.qml"), uri, 1, 0, "MySingleton");
}
};
#endif // PLUGIN_H
Related
I'm trying to create a minimal version of the following example: https://doc.qt.io/qt-5/qtquickcontrols-texteditor-example.html
I have created a DocumentHandler class with the following method:
class DocumentHandler : public QObject {
Q_OBJECT
QML_ELEMENT
public:
Q_INVOKABLE void changeFormat(QQuickTextDocument *doc) {
QTextCursor cursor(doc->textDocument());
cursor.select(QTextCursor::Document);
QTextCharFormat format;
format.setFontItalic(true);
cursor.mergeBlockCharFormat(format);
}
}
Unfortunately, when I call this method from the following QML code
import DocumentTest 1.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Document Test")
TextArea {
id: textArea
focus: true
anchors.fill: parent
wrapMode: Text.Wrap
selectByMouse: true
text: "Another day in paradise"
onReleased: {
document.changeChar(textDocument);
}
textFormat: Text.RichText
}
DocumentHandler {
id: document
}
}
I have a crash at the following line: https://github.com/qt/qtbase/blob/5.15.2/src/gui/text/qtextoption.h#L118
I read in the documentation that the QQuickTextDocument::textDocument() is read-only and that I can not modify its internal state so I wonder if using the QTextCursor is the right way to go. This is what is done in the example but I struggle finding out what is the difference with my code.
Looking at https://doc.qt.io/qt-5/qml-qtquick-textedit.html#textFormat-prop, i would replace textFormat: Text.RichText with textFormat: TextEdit.RichText
Sometime ago, I wrote a wrapper for the QSyntaxHighter classes. This achieves more than you require, but, it has the following elements:
control text color and formatting in your TextEdit
link to the TextEdit's textDocument property
Note that the example works with TextEdit not TextArea.
#include <QObject>
#include <QTextDocument>
#include <QSyntaxHighlighter>
#include <QQuickTextDocument>
class SyntaxHighlighter : public QSyntaxHighlighter
{
Q_OBJECT
Q_PROPERTY(QQuickTextDocument* textDocument READ textDocument WRITE setTextDocument NOTIFY textDocumentChanged)
public:
SyntaxHighlighter(QObject* parent = nullptr);
Q_INVOKABLE void setFormat(int start, int count, const QVariant& format);
// ...
};
You can use it like this:
TextEdit {
id: textEdit
}
SyntaxHighlighter {
textDocument: textEdit.textDocument
onHighlightBlock: {
let rx = /[A-Za-z]/g;
let m;
while ( ( m = rx.exec(text) ) !== null ) {
let keywords = [
'import', 'function', 'bool', 'var',
'int', 'string', 'let', 'const', 'property',
'if', 'continue', 'for', 'break', 'while',
];
if (keywords.includes(m[0])) {
setFormat(m.index, m[0].length, keywordFormat);
continue;
}
}
}
}
TextCharFormat {
id: keywordFormat
foreground: "#808000"
font.pointSize: 12
font.bold: true; font.italic: true
}
For full source code, refer to:
https://github.com/stephenquan/QtSyntaxHighlighterApp
I have this small example that does not work as i expected :
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
Window {
id: root
visible: true
width: 640
height: 480
property bool lightTheme: false
Material.theme: Material.Dark
Material.foreground: Material.color(Material.Red) // value is always material red #F44336 (from light theme)
onLightThemeChanged: {
Material.theme = lightTheme ? Material.Light : Material.Dark;
}
Button {
id: btn
width: 200
height: 200
anchors.centerIn: parent
text: "change theme"
onClicked: {
lightTheme = !lightTheme;
}
}
Text {
id: darkRed
text: "predefinedDarkThemeRed"
color: "#EF9A9A"
anchors.top: btn.bottom
anchors.horizontalCenter: btn.horizontalCenter
}
Text {
id: lightRed
text: "predefinedLightThemeRed"
color: "#F44336"
anchors.top: darkRed.bottom
anchors.left: darkRed.left
}
}
The issue is with the default Material.Red color being always picked from the Material.Light theme whatever theme i have selected.
However, when i don't set any Material.foreground, then it is white with the Material.Dark and dark with the Material.Light, and dynamically switched between those colors when the theme is changed, so everything is fine.
I would expected the same behaviour with a custom Material.foreground but it does not seem to work.
What is wrong here ?
Thank you.
Note: the app is run with options -style material args, and i am using Qt 5.9.3 or Qt 5.10.1
i think you missed a little nuance
add in .pro file
QT += quickcontrols2
in mine file add QQuickStyle::setStyle("Material");
#include <QQuickStyle>
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
................
QQuickStyle::setStyle("Material");
//The style can also be specified as a path to a custom style, such as
//QQuickStyle::setStyle(":/mystyle");
................
return app.exec();
}
in your example, the result will be
when pressed
Based on Qt documentation, whenever a QObject pointer type is passed from C++ code to QML, via a Q_INVOKABLE method, there is a set of rules that determine who is responsible for the lifetime of that pointer. Should the QObject be parentless, implicitly the QML engine is responsible for taking ownership of the pointer.
In my scenario, I want my frontend UI to represent a list model which is generated/provided by the backend C++ code. My assumption is that the pointer will stay alive as long as there is a reference to it by the QML code. The code below shows the trimmed down test case:
Main.cpp
#include <QAbstractItemModel>
#include <QDebug>
#include <QGuiApplication>
#include <QObject>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QStringListModel>
class MyStringListModel : public QStringListModel
{
Q_OBJECT
public:
explicit MyStringListModel(const QStringList &strings, QObject* parent=nullptr) : QStringListModel(strings, parent)
{
qDebug() << "Creation";
}
virtual ~MyStringListModel() override
{
qDebug() << "Destruction";
}
};
class Backend : public QObject
{
Q_OBJECT
public:
Backend(QObject* parent=nullptr) : QObject(parent)
{
}
Q_INVOKABLE QAbstractItemModel* createModel() const
{
static const QStringList months = {
tr("January"),
tr("February"),
tr("March"),
tr("April"),
tr("May"),
tr("June"),
tr("July"),
tr("August"),
tr("September"),
tr("October"),
tr("November"),
tr("December"),
};
return new MyStringListModel(months);
}
};
int main(int argc, char* argv[])
{
QGuiApplication application(argc, argv);
qmlRegisterType<QAbstractItemModel>();
Backend backend;
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("backend", &backend);
engine.load("qrc:///ui/main.qml");
return application.exec();
}
#include "main.moc"
Main.qml
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.1
ApplicationWindow {
id: window
width: 200
height: 250
visible: true
ColumnLayout {
anchors.fill: parent
anchors.margins: 10
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: backend.createModel()
delegate: Text {
anchors.horizontalCenter: parent.horizontalCenter
text: model.display
}
}
Button {
Layout.alignment: Qt.AlignCenter
text: qsTr("Garbage Collect")
onClicked: gc()
}
}
}
This is a screenshot of the program:
The moment the user clicks on the button, the garbage collector runs and destroys the model ptr (destruction is evident by the "Creation" and "Destruction" output in the stdout).
I'm curious to know why the pointer was destroyed? I've noticed that it didn't set the ListView as its parent, which is fair enough, I thought that the QML engine would have used some form of reference pointer to try keep track of who still holds a reference to it. Is there a document which gives greater insight into the way in which garbage collection / ownership is implemented.
Likewise, is there a better way of structuring this code while still meeting the demands of passing a parentless QObject back to QML.
It seems that the reason for the destruction is because the object is not being referenced in QML, for example if it is assigned to a property the garbage collector will not affect it:
ApplicationWindow {
id: window
width: 200
height: 250
visible: true
property var mymodel: backend.createModel()
ColumnLayout {
anchors.fill: parent
anchors.margins: 10
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: mymodel
delegate: Text {
anchors.horizontalCenter: parent.horizontalCenter
text: display
}
}
Button {
Layout.alignment: Qt.AlignCenter
text: qsTr("Garbage Collect")
onClicked: gc()
}
}
}
in my QT application for embedded device , i want play a sound on key pressed event of the QML virtualkeyboard . Can I get this event? and How get it?
I already have a class that play sound ( click effect) when a button was clicked that i use in the others qml pages
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import QtQuick.VirtualKeyboard 2.1
Page{
id: pag
width: 1280
height: 800
background: Rectangle { color: "black"}
TextField {
id: txtName
height: 200
width:200
anchors.horizontalcenter:parent.horizontalCenter
font.family: "Arial
font.pixelSize: 24
placeholderText: "insert your text here"
background: Rectangle {
anchors.fill: parent
color: "transparent"
}
}
InputPanel {
id: virtualkeyboard
width: 0.95*parent.width
anchors.bottom: parent.bottom
}
}
You can create a class Mykeyfilter, it's a QObject class
then in your file .h you declare:
bool eventFilter(QObject *object, QEvent *event);
Then in your Mykeyfilter.cpp file you define eventFilter like this:
bool MykeyFilter::eventFilter(QObject *object, QEvent *event)
{
switch(event->type())
{
case QEvent::KeyPress:
case QEvent::KeyRelease:
{
//////call your sound class here that you want to play/////
qDebug()<<"I have clicked" //For testing
}
default:
break;
// return QObject::eventFilter(object, event);
}
return QObject::eventFilter(object, event);
}
Also add in your main.cpp file:
#include "mytouchfilter.h"
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
app.installEventFilter(new MykeyFilter());
return app.exec();
}
You have two options:
Use the clicked() signal of BaseKey.
Use the soundEffect property of KeyPanel.
Both require having your own style. You can read more about creating your own style here. To quote from there:
A good starting point for creating a new style is to use an existing built-in style as a template and edit it. You can find the built-in styles from the virtual keyboard sources directory src/virtualkeyboard/content/styles. Copy one of the directories containing a built-in style into the Styles directory and rename it to "test". [...]
I've successfully exposed a C++ class to QML. It is registered and found in Qt Creator. It's purpose is to connect to a database, as shown in following code:
#ifndef UESQLDATABASE_H
#define UESQLDATABASE_H
#include <QObject>
#include <QtSql/QSqlDatabase>
class UeSqlDatabase : public QObject
{
Q_OBJECT
Q_PROPERTY(bool m_ueConnected READ isConnected WRITE setConnected NOTIFY ueConnectedChanged)
private:
bool m_ueConneted;
inline void setConnected(const bool& ueConnected)
{ this->m_ueConneted=ueConnected; }
public:
explicit UeSqlDatabase(QObject *parent = 0);
Q_INVOKABLE inline const bool& isConnected() const
{ return this->m_ueConneted; }
~UeSqlDatabase();
signals:
void ueConnectedChanged();
public slots:
void ueConnectToDatabase (const QString& ueStrHost, const QString& ueStrDatabase,
const QString& ueStrUsername, const QString& ueStrPassword);
};
#endif // UESQLDATABASE_H
However, when I try to call method isConnected() from the following QML code
import QtQuick 2.0
Rectangle
{
id: ueMenuButton
property string ueText;
width: 192
height: 64
radius: 8
states: [
State
{
name: "ueStateSelected"
PropertyChanges
{
target: gradientStop1
color: "#000000"
}
PropertyChanges
{
target: gradientStop2
color: "#3fe400"
}
}
]
gradient: Gradient
{
GradientStop
{
id: gradientStop1
position: 0
color: "#000000"
}
GradientStop
{
position: 0.741
color: "#363636"
}
GradientStop
{
id: gradientStop2
position: 1
color: "#868686"
}
}
border.color: "#ffffff"
border.width: 2
antialiasing: true
Text
{
id: ueButtonText
color: "#ffffff"
text: qsTr(ueText)
clip: false
z: 0
scale: 1
rotation: 0
font.strikeout: false
anchors.fill: parent
font.bold: true
style: Text.Outline
textFormat: Text.RichText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 16
}
MouseArea
{
id: ueClickArea
antialiasing: true
anchors.fill: parent
onClicked:
{
uePosDatabase.ueConnectToDatabase("127.0.0.1",
"testDb",
"testUser",
"testPassword");
if(uePosDatabase.isConnected()==true)
{
ueMenuButton.state="ueStateSelected";
}
else
{
ueMenuButton.state="base state"
}
}
}
}
I get the following error:
qrc:/UeMenuButton.qml:92: TypeError: Property 'isConnected' of object UeSqlDatabase(0x1772060) is not a function
What am I doing wrong?
You have this error because you have declared the property isConnected in C++ but you're calling it from QML in the wrong way: uePosDatabase.isConnected is the correct way, not uePosDatabase.isConnected().
If you want to call the function isConnected() you should change its name to differate it from the property, like getIsConnected(). Given your property declaration, you neither need to call this function directly nor you need to make it callable from QML with the Q_INVOKABLE macro.
You must first create the object you want in QML code and then use the function:
your QML Code:
import QtQuick 2.0
import QSqlDatabase 1.0
Rectangle {
id: ueMenuButton
QSqlDatabase {
id: uePosDatabase
}
.
.
.
MouseArea
{
id: ueClickArea
antialiasing: true
anchors.fill: parent
onClicked: {
console.log(uePosDatabase.isConnected())
}
}
}
Be aware in case of an error some lines earlier in the same .js file can lead to this problem. The following code will not be executed.