qwidget into QML

[Le_B]

hi all,

I'm trying to put a treeview in my QML application.
The last thing i was trying was to put a qwidget (QTreewidget) into my QML file.
so i used qmlRegisterType, and have :

import QtQuick 1.0
import Test 1.0
 
Rectangle {
    id:ttt
    width: 360
    height: 360
    CustomTree{
        id:customW
        parent:ttt
       // anchors.fill: parent
    }
}

import QtQuick 1.0
import Test 1.0

Rectangle {
    id:ttt
    width: 360
    height: 360
    CustomTree{
        id:customW
        parent:ttt
       // anchors.fill: parent
    }
}

To copy to clipboard, switch view to plain text mode 

as my QML file but nothing happens
can someone help me ?

[wysota]

Did you implement a subclass of QDeclarativeItem for yout widget?

[Le_B]

this is the part i'm not sure of
i create an object subclassed from QDeclarativeItem with
this->setFlag(QGraphicsItem::ItemHasNoContents, false);

my problem is how to paint it. I'm not familiar with the paint() function

[wysota]

I don't see your point. In my opinion your declarative item should create a tree view, a proxy item for it and set that item as the child of the declarative item. Then you can forward all calls you want from the item to the widget.

[Le_B]

i must be really @#?! or tired
when i try this

CustomWidget::CustomWidget(QDeclarativeItem *parent) :
    QDeclarativeItem(parent)
{
    this->setFlag(QGraphicsItem::ItemHasNoContents, false);
 
    tree = new QTreeWidget;
    new QTreeWidgetItem(tree, QStringList()<<"First");
    new QTreeWidgetItem(tree, QStringList()<<"Second");
    new QTreeWidgetItem(tree, QStringList()<<"Third");
    new QTreeWidgetItem(tree, QStringList()<<"Fourth");
 
    proxy = new QGraphicsProxyWidget;
    proxy->setWidget(tree);
    proxy->setParentItem(this);
 
 
}

CustomWidget::CustomWidget(QDeclarativeItem *parent) :
    QDeclarativeItem(parent)
{
    this->setFlag(QGraphicsItem::ItemHasNoContents, false);

    tree = new QTreeWidget;
    new QTreeWidgetItem(tree, QStringList()<<"First");
    new QTreeWidgetItem(tree, QStringList()<<"Second");
    new QTreeWidgetItem(tree, QStringList()<<"Third");
    new QTreeWidgetItem(tree, QStringList()<<"Fourth");

    proxy = new QGraphicsProxyWidget;
    proxy->setWidget(tree);
    proxy->setParentItem(this);


}

To copy to clipboard, switch view to plain text mode 

in the constructor of my QDeclarativeItem it doesn't display anything

here is the qml file

import QtQuick 1.0
import Test 1.0
 
Rectangle {
    id:ttt
    width: 360
    height: 360
    CustomTree{
        id:customW
        anchors.fill:parent
    }
}

import QtQuick 1.0
import Test 1.0

Rectangle {
    id:ttt
    width: 360
    height: 360
    CustomTree{
        id:customW
        anchors.fill:parent
    }
}

To copy to clipboard, switch view to plain text mode 

[wysota]

This works for me:

#include <QtDeclarative>
#include <QtGui>
 
class PushButtonItem : public QDeclarativeItem {
  Q_OBJECT
public:
  PushButtonItem(QDeclarativeItem *parent =0) : QDeclarativeItem(parent) {
    pb = new QPushButton("text");
    proxy = new QGraphicsProxyWidget(this);
    proxy->setWidget(pb);
    proxy->setPos(-pb->sizeHint().width()/2, -pb->sizeHint().height()/2);
  }
private:
  QPushButton *pb;
  QGraphicsProxyWidget *proxy;
};
 
 
#include "main.moc"
 
int main(int argc, char **argv) {
  QApplication app(argc, argv);
  QDeclarativeView view;
  qmlRegisterType<PushButtonItem>("PushButton", 1, 0, "PushButtonItem");
  view.setSource(QUrl::fromLocalFile("file.qml"));
  view.show();
  return app.exec();
};

#include <QtDeclarative>
#include <QtGui>

class PushButtonItem : public QDeclarativeItem {
  Q_OBJECT
public:
  PushButtonItem(QDeclarativeItem *parent =0) : QDeclarativeItem(parent) {
    pb = new QPushButton("text");
    proxy = new QGraphicsProxyWidget(this);
    proxy->setWidget(pb);
    proxy->setPos(-pb->sizeHint().width()/2, -pb->sizeHint().height()/2);
  }
private:
  QPushButton *pb;
  QGraphicsProxyWidget *proxy;
};


#include "main.moc"

int main(int argc, char **argv) {
  QApplication app(argc, argv);
  QDeclarativeView view;
  qmlRegisterType<PushButtonItem>("PushButton", 1, 0, "PushButtonItem");
  view.setSource(QUrl::fromLocalFile("file.qml"));
  view.show();
  return app.exec();
};

To copy to clipboard, switch view to plain text mode 

with file.qml:

import Qt 4.7
import PushButton 1.0
 
 
Rectangle {
        width: 300
        height: 300
        PushButtonItem {
                anchors.centerIn: parent
        }
}

import Qt 4.7
import PushButton 1.0


Rectangle {
        width: 300
        height: 300
        PushButtonItem {
                anchors.centerIn: parent
        }
}

To copy to clipboard, switch view to plain text mode 

[Le_B]

i had a strange case mismatch warning that i didn't see

anyway, thanks to you i understand it much better

thank you

[Le_B]

I discovered that you can directly subclass QGraphicsProxyWidget and that works even better for resizing and positioning with QML

[keriuonlesmar]

the code of third snippet does not understand.

[nouch64]

Hi,

I used the same way to try to embedded a QX11EmbedContainer into QML but the result is not really good :
My goal is to use the QX11EmbedContainer to execute mplayer and to declare this one as a QML Element to be able to manipulate it into my *.qml files.
The result is, when I execute it, the video is played on a new window and not on my QML window.

Here is the code :

/* videodisplayitem.h */
 
#include <QDeclarativeItem>
#include <QX11EmbedContainer>
#include <QtDeclarative>
#include <QProcess>
#include <QtGui>
 
class VideoDisplayItem : public QDeclarativeItem
{
    Q_OBJECT
public:
    VideoDisplayItem(QDeclarativeItem *parent =0) : QDeclarativeItem(parent) {
        container = new QX11EmbedContainer(NULL);
 
        // if I execute container->show(); here, I get the video on a new window
        container->show();
 
        QProcess * process = new QProcess(container);
        QString executable("/usr/bin/mplayer");
        QStringList arguments;
        arguments << "-wid";
        arguments << QString::number(container->winId());
        arguments << "/myvideo.mp4";
        process->start(executable, arguments);
 
        proxy = new QGraphicsProxyWidget(this);
        proxy->setWidget(container);
        proxy->setPos(-container->sizeHint().width()/2, -container->sizeHint().height()/2);
 
        // if I execute container->show(); here, I get nothing visible
        // container->show();
    }
private:
    QX11EmbedContainer *container;
    QGraphicsProxyWidget *proxy;
 
};

/* videodisplayitem.h */

#include <QDeclarativeItem>
#include <QX11EmbedContainer>
#include <QtDeclarative>
#include <QProcess>
#include <QtGui>

class VideoDisplayItem : public QDeclarativeItem
{
    Q_OBJECT
public:
    VideoDisplayItem(QDeclarativeItem *parent =0) : QDeclarativeItem(parent) {
        container = new QX11EmbedContainer(NULL);

        // if I execute container->show(); here, I get the video on a new window
        container->show();

        QProcess * process = new QProcess(container);
        QString executable("/usr/bin/mplayer");
        QStringList arguments;
        arguments << "-wid";
        arguments << QString::number(container->winId());
        arguments << "/myvideo.mp4";
        process->start(executable, arguments);

        proxy = new QGraphicsProxyWidget(this);
        proxy->setWidget(container);
        proxy->setPos(-container->sizeHint().width()/2, -container->sizeHint().height()/2);

        // if I execute container->show(); here, I get nothing visible
        // container->show();
    }
private:
    QX11EmbedContainer *container;
    QGraphicsProxyWidget *proxy;

};

To copy to clipboard, switch view to plain text mode 

/* main.cpp */
 
#include <QtGui/QApplication>
#include "videodisplayitem.h"
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QDeclarativeView view;
    qmlRegisterType<VideoDisplayItem>("VideoDisplay", 1, 0, "VideoDisplayItem");
    view.setSource(QUrl::fromLocalFile("file.qml"));
    view.show();
    return app.exec();
}

/* main.cpp */

#include <QtGui/QApplication>
#include "videodisplayitem.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QDeclarativeView view;
    qmlRegisterType<VideoDisplayItem>("VideoDisplay", 1, 0, "VideoDisplayItem");
    view.setSource(QUrl::fromLocalFile("file.qml"));
    view.show();
    return app.exec();
}

To copy to clipboard, switch view to plain text mode 

/* file.qml */
 
import Qt 4.7
import VideoDisplay 1.0
 
Rectangle {
    width: 300
    height: 300
 
    VideoDisplayItem {
        anchors.centerIn: parent
    }
}

/* file.qml */

import Qt 4.7
import VideoDisplay 1.0

Rectangle {
    width: 300
    height: 300

    VideoDisplayItem {
        anchors.centerIn: parent
    }
}

To copy to clipboard, switch view to plain text mode 

If you get any idea or advise, thanks for all.
My way to proceed might be totally wrong but I dont have any other ideas how to do.

Thanks for all.

[wysota]

It won't work with Embed. Use appropriate API from QtMultimedia instead.