New qml object added to scene in c++ - qt

I have a problem with adding new QML object to existing scene.
My main.qml source:
ApplicationWindow
{
id:background
visible: true
width: 640
height: 480
}
MyItem.qml source:
Rectangle
{
width: 100
height: 62
color: "red"
anchors.centerIn: parent
}
Finally, here is my main.cpp source:
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
QQmlComponent *component = new QQmlComponent(&engine);
component->loadUrl(QUrl("qrc:/MyItem.qml"));
qDebug() << "component.status(): "<< component->status();
QObject *dynamicObject = component->create();
if (dynamicObject == NULL) {
qDebug()<<"error: "<<component->errorString();;
}
return app.exec();
}
main.qml appears correctly but MyItem.qml doesn't appear inside main.qml. Component.status() returns state Ready, no errors on dynamicObject. What am I doing wrong?

You need to specify a parent for the item otherwise it isn't a part of the visual hierarchy and won't be rendered.

I think you should use QQuickView instead of QQmlEngine. main.cpp would be:
int main(int argc, char *argv[]) {
QGuiApplication app(argc, argv);
QQuickView view;
view.setSource(QUrl(QStringLiteral("qrc:/main.qml")));
view.show();
QQmlComponent component(view.engine(), QUrl("qrc:/MyItem.qml"));
QQuickItem *item = qobject_cast<QQuickItem*>(component.create());
item->setParentItem(view.rootObject());
QQmlEngine::setObjectOwnership(item, QQmlEngine::CppOwnership);
return app.exec();
}
And you need to change main.qml type from ApplicationWindow to Item
Item
{
id:background
visible: true
width: 640
height: 480
}
It is easier, and this way you can create a class that extends QQuickView and which manages the creation of your new items.

Related

QQuickWidget: grabToImage: item's window is not visible

I'm having a problem when I try to use Item::grabToImage() qml method.
No matter which item I point to, it always says the following error:
grabToImage: item's window is not visible
I tried using the root/toplevel Item named rect too, but it didnt work.
My goal: I want to capture a rectangle sized image with the map tile and polygon draw on it
Below there's a minimal reproducible example
import QtQml 2.2
import QtLocation 5.9
import QtPositioning 5.9
import QtQuick 2.0
import QtQuick.Controls 2.4
Item {
id: rect
width: 1024
height: 768
visible: true
Plugin {
id: mapPlugin
name: "osm"
}
Map {
id: map
enabled: true
visible: true
parent: rect
gesture.enabled: true
anchors.fill: parent
plugin: mapPlugin
zoomLevel: 14
activeMapType: supportedMapTypes[3]
}
Item {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 10
height: 40
Button {
id: saveToDisk
text: qsTr("Pick")
onClicked: {
map.grabToImage(function (result) {
console.log('saving to disk..')
result.saveToFile("pick.png")
})
}
}
}
}
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQuickWidgets/QQuickWidget>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv);
QQuickWidget *q = new QQuickWidget;
q->setResizeMode(QQuickWidget::SizeRootObjectToView);
q->setSource(QUrl("main.qml"));
q->show();
return app.exec();
}
The strategy of QQuickWidget for painting is to create an off-screen QQuickWindow that renders the QML from where a screenshot is taken and drawn onto the widget. The above limits the use of grabToImage() since this method requires that the QQuickWindow of the items be visible.
The solution is to use QQuickView + QWidget::createWindowContainer():
#include <QApplication>
#include <QWidget>
#include <QQuickView>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv);
QQuickView *q = new QQuickView;
q->setResizeMode(QQuickView::SizeRootObjectToView);
q->setSource(QUrl("main.qml"));
QWidget * container = QWidget::createWindowContainer(q);
container->show();
return app.exec();
}

How to get the className of activeFocusControl in QML ApplicationWindow

I try
ApplicationWindow {
onActiveFocusControlChanged: {
console.log(activeFocusControl)
console.log(activeFocusControl.objectName)
}
}
ouput:
qml: QQuickTextField(0xa6ec00) //the 'activeFocusControl'
qml: //the 'activeFocusControl.objectName'
qml: QQuickButton(0xd7ccb0)
qml:
I want to
onActiveFocusControlChanged: {
if (activeFocusControl.className == "QQuickTextField") {
//do something
}
else if (activeFocusControl.className == "QQuickButton") {
//do something
}
but the "className" method does not exist
so how i can do it?
sorry, my english is pool, and thank you
There is no method to access the className from qml, so a possible solution is to create a helper from c ++ as shown below:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QObject>
class Helper : public QObject
{
Q_OBJECT
public:
Q_INVOKABLE QString getClassName(QObject *obj) const{
return obj? obj->metaObject()->className(): "";
}
};
#include "main.moc"
int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
Helper helper;
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("helper", &helper);
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
then it is used on the QML side:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button {
id: button
x: 270
y: 47
text: qsTr("Button")
}
TextField {
id: textField
x: 220
y: 169
text: qsTr("Text Field")
}
onActiveFocusControlChanged: {
var className = helper.getClassName(activeFocusControl)
switch(className){
case "QQuickTextField":
console.log("I am QQuickTextField")
break
case "QQuickButton":
console.log("I am QQuickButton")
break
default:
console.log("empty")
}
}
}
The complete example can be found at the following link.

Run the QtQuick application

I create a project on QtQuick in QT Creator 4.3.1 without using the ui form.
Here's the code main.qml:
import QtQuick 2.6
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MouseArea {
anchors.fill: parent
onClicked: {
console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
}
}
TextEdit {
id: textEdit
text: qsTr("Enter some text...")
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 20
Rectangle {
anchors.fill: parent
anchors.margins: -10
color: "transparent"
border.width: 1
}
}
}
The program runs and works.
Now I want to get rid of Window and replace it with Rectangle:
import QtQuick 2.6
Rectangle {
id: root
width: 200; height: 200;
color: "#ffffff"
}
But when the program starts, nothing happens, the form does not open
What am I doing wrong?
main.cpp code. code in the same in both cases:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
In a Qt application you must have at least one window that is the top-level, that is, the window where other components are placed.
When you create your project, you should get the default main.cpp:
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
main.qml
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
}
So let's analyze the elements and use the documentation for it:
QQmlApplicationEngine:
QQmlApplicationEngine provides a convenient way to load an application from a single QML file.
[...]
Unlike QQuickView, QQmlApplicationEngine does not automatically create a root window. If you are using visual items from Qt Quick, you will need to place them inside of a Window.
That is, QQmlApplicationEngine does not create a top-level, so if we want the window to be shown you must use another element, and as recommended, an option is to use Window{}
In your second test you are using an item, e.g. Rectangle, and this is only a component and is not able to create a top-level, so for that it is advisable to use QQuickView:
The QQuickView class provides a window for displaying a Qt Quick user interface.
[...]
So if you want to show the Rectangle you should use the following in your main.cpp:
main.cpp
#include <QGuiApplication>
#include <QQuickView>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQuickView view;
view.setSource(QUrl(QStringLiteral("qrc:/main.qml")));
view.setResizeMode(QQuickView::SizeRootObjectToView);
view.show();
return app.exec();
}
main.qml
import QtQuick 2.6
Rectangle {
id: root
width: 200; height: 200;
color: "#ffffff"
}

How to create QML object within a singleton?

I have defined a QML object under MyQMLObject.qml. This QML file looks like this:
import QtQuick 2.4
Item {
id: rootItem
implicitWidth: LayoutUtils.maxImplicitWidth(children)
implicitHeight: LayoutUtils.maxImplicitHeight(children)
Text {
id: text1
}
Text {
id: text2
}
// ...
Text {
id: textN
}
}
The text is added dynamically when the application starts. For each language different text is added, there for the width of the rootItem varies by the chosen language. I would like to somehow create MyQMLObject only once at application startup without even visualizing it and save its actual width in a singleton for example so I can reuse that value throughout my code without creating MyQMLObject more then once. How could I achieve this?
Right now I have a singleton QML file, which holds a QtObject which contains some constant values. Can I somehow create an instance of MyQMLObject within this singleton QtObject?
My singleton Style.qml looks like this:
pragma Singleton
import QtQuick 2.4
QtObject {
readonly property int maxWidth: 400
// ...
}
Firstly, if possible, you could use a Column instead of manually calculating the maximum width:
MyQMLObject.qml
import QtQuick 2.4
Column {
Text {
text: "blah"
}
Text {
text: "blahblah"
}
}
You can use dynamic object creation to create the temporary Column item:
Style.qml
pragma Singleton
import QtQuick 2.4
QtObject {
readonly property int maxWidth: {
var component = Qt.createComponent("qrc:/MyQMLObject.qml");
if (component.status === Component.Error) {
console.error(component.errorString());
return 0;
}
return component.createObject().width;
}
}
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
import App 1.0
Window {
visible: true
Component.onCompleted: print(Style.maxWidth)
}
Then, register the singleton:
main.cpp
#include <QtGui>
#include <QtQml>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
qmlRegisterSingletonType(QUrl("qrc:///Style.qml"), "App", 1, 0, "Style");
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
However, note that this approach could be improved by calculating the maximum width from C++, eliminating the need to construct an item only to throw it away. Working off this example:
#include <QtGui>
#include <QtQml>
class Style : public QObject
{
Q_OBJECT
Q_PROPERTY(int maxWidth READ maxWidth CONSTANT)
public:
Style(QObject* parent = 0) :
QObject(parent),
mMaxWidth(0)
{
QFontMetrics fontMetrics(qApp->font());
// Here is where you'd fetch the text...
QStringList dummyText;
dummyText << "blah" << "blahblah";
foreach (const QString &string, dummyText) {
const int width = fontMetrics.boundingRect(string).width();
if (width > mMaxWidth)
mMaxWidth = width;
}
}
int maxWidth() const
{
return mMaxWidth;
}
private:
int mMaxWidth;
};
static QObject *singletonTypeProvider(QQmlEngine *, QJSEngine *)
{
Style *style = new Style();
return style;
}
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
qmlRegisterSingletonType<Style>("App", 1, 0, "Style", singletonTypeProvider);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
#include "main.moc"
It uses QFontMetrics to calculate the width.
main.qml remains unchanged.

Using QAbstractItemModel to return QQuickPaintedItem for use in QML delegate

I implemented a subclass of QQuickPaintedItem to be used in QML which works on its own when registered through
qmlRegisterType<T>
Instances of this class are created at application startup and put into a QList that is stored inside a subclass of QAbstractItemModel. I thought I could easily return each of those objects in the model's data method and use them as the QML ListViews delegate.
It now looks like this:
Model.cpp:
QVariant AbteilungsModel::data(const QModelIndex &index, int role) const
{
if(index.isValid() && role == Qt::DisplayRole)
{
Abteilung* a = static_cast<Abteilung*>(index.internalPointer());
return QVariant::fromValue(a);
}
}
main.qml:
ListView {
id: abteilungenListView
anchors.fill: parent
spacing: 5
model: abteilungen
delegate: modelData
}
I, of course, made the model available in QML via
void QQmlContext::setContextProperty(const QString & name, QObject * value)
but I don't know how to properly declare the ListViews delegate, since "modelData" doesn't work.
Does anyone have an idea if this is even possible or do you guys have a better solution?
Any help is appreciated! :)
It might be possible, but it goes against the whole MVC idea. Your model shouldn't know about your delegates. As a simplified example:
main.cpp
#include <QGuiApplication>
#include <QtQml>
#include <QtQuick>
class Abteilung : public QQuickPaintedItem
{
Q_OBJECT
public:
Abteilung() {
}
void paint(QPainter *painter) {
painter->setPen(Qt::red);
painter->drawRect(boundingRect().adjusted(0, 0, -painter->pen().width(), -painter->pen().width()));
}
};
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
qmlRegisterType<Abteilung>("Test", 1, 0, "Abteilung");
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
return app.exec();
}
#include "main.moc"
main.qml
import QtQuick 2.2
import QtQuick.Controls 1.1
import Test 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
ListView {
id: abteilungenListView
anchors.fill: parent
spacing: 5
model: ListModel {
Component.onCompleted: {
for (var i = 0; i < 100; ++i) {
append({name: i});
}
}
}
delegate: Abteilung {
width: abteilungenListView.width
height: 40
}
}
}

Resources