Can a QML element be displayed inside a QT C++ GUI?

[StealthCentroid]

I have a problem in which I need my application to have in the same window the system API controls and some elements I have found only to be available in QML (a hybrid one could say). So I have read here: http://www.qtforum.org/index.php?pag...qtbinding.html

But it is creating a new window instance instead of showing the element into the normal C++ window instance. In other words, its creating 2 windows when I use QDeclarativeView.

Here is my rectangle.qml

import Qt 4.7
 
 
 
Rectangle {
	width: 100
	height: 62
	radius: 13
	gradient: Gradient {
    	GradientStop {
        	position: 0
        	color: "#95eac2"
    	}
 
    	GradientStop {
        	position: 0.5
        	color: "#4bb0ee"
    	}
 
    	GradientStop {
        	position: 0.97
        	color: "#7ce0d5"
    	}
 
    	GradientStop {
        	position: 1
        	color: "#ffffff"
    	}
	}
}

import Qt 4.7



Rectangle {
	width: 100
	height: 62
	radius: 13
	gradient: Gradient {
    	GradientStop {
        	position: 0
        	color: "#95eac2"
    	}

    	GradientStop {
        	position: 0.5
        	color: "#4bb0ee"
    	}

    	GradientStop {
        	position: 0.97
        	color: "#7ce0d5"
    	}

    	GradientStop {
        	position: 1
        	color: "#ffffff"
    	}
	}
}

To copy to clipboard, switch view to plain text mode 

and the code I added to the main.cpp code to display the rectangle:

QDeclarativeView view;
 
    	view.setSource(QUrl::fromLocalFile("qrc:/rectangle.qml"));
    	view.show();

QDeclarativeView view;

    	view.setSource(QUrl::fromLocalFile("qrc:/rectangle.qml"));
    	view.show();

To copy to clipboard, switch view to plain text mode 

I was wondering if it was possible to insert some sort of frame inside the .ui design that allowed me to later display the qml element inside the .ui interface. In the attached image is the idea of what I want to do. Does anyone know?

[Urthas]

The answer to your titular question is, "Yes". I know one way to go about dropping QML into a ui, but I don't know if this helps you:

// inside custom QGraphicsView class...
 
...
 
QGraphicsObject *qmlThing = getQMLGraphicsObjectFromURL(QUrl("pathToYourURL"));
myScene->addItem(qmlThing);
 
...
 
QGraphicsObject * MyGraphicsView::getQMLGraphicsObjectFromURL(const QUrl &url) {
    QDeclarativeComponent component(new QDeclarativeEngine(), url);
    QObject *object = component.create();
    return qobject_cast<QGraphicsObject *>(object);
}

// inside custom QGraphicsView class...

...

QGraphicsObject *qmlThing = getQMLGraphicsObjectFromURL(QUrl("pathToYourURL"));
myScene->addItem(qmlThing);

...

QGraphicsObject * MyGraphicsView::getQMLGraphicsObjectFromURL(const QUrl &url) {
    QDeclarativeComponent component(new QDeclarativeEngine(), url);
    QObject *object = component.create();
    return qobject_cast<QGraphicsObject *>(object);
}

To copy to clipboard, switch view to plain text mode 

[ChrisW67]

I am not sure what you are asking. You can drag and drop a QDeclarativeView from the "Display Widgets" group into your Designer UI and set its source at your leisure.

[StealthCentroid]

I am not sure what you are asking. You can drag and drop a QDeclarativeView from the "Display Widgets" group into your Designer UI and set its source at your leisure.

That is exactly what I want to do , but I don't see a QDeclarativeView in "Display Widgets". I only see a "Graphics View" and "QWebView", unless you are meaning it can be done with a Graphics View.

@Urthas

Thanks. I'll be honest, I don't really know what to do with the code you wrote, meaning I don't know where the class should go in order for me to access it on the main.cpp or how to display the item. I suppose I'll have to store some coordinates in a variable and with some existing function make it display on the spot I want in the UI. Though, I don't know how to do that. I'm limited on time right now because of the studies, but as soon as I finish the current batch of material, I'll take a more calm look at it because I really want to do this.

[ChrisW67]

That is exactly what I want to do , but I don't see a QDeclarativeView in "Display Widgets". I only see a "Graphics View" and "QWebView", unless you are meaning it can be done with a Graphics View.

No, I mean what I said. I just checked that I wasn't imagining the QDeclarativeView in Designer (Qt 4.7.4 on Linux) but in my recent Windows Qt SDK it is not present.

[StealthCentroid]

No, I mean what I said. I just checked that I wasn't imagining the QDeclarativeView in Designer (Qt 4.7.4 on Linux) but in my recent Windows Qt SDK it is not present.

Perfect then. I'll check it on Linux. The program I want to do is on Linux, but before moving I was testing in Windows because the only code that uses other libraries that are not from QT are available in Linux and Windows. Now that I think about it, it doesn't make much sense to do it that way, but I'm a noob after all and felt more comfortable working with QT Creator in a system I'm more familiar with (you know, until I get the hang of it). Thanks for lining that out, I'll tell you how it goes when I check it.

[ChrisW67]

I am surprised it is missing in the Windows Qt SDK given the headlong rush to QML everything. There are QML components for Designer in the SDK but they seem to be only Symbian.

[StealthCentroid]

I am surprised it is missing in the Windows Qt SDK given the headlong rush to QML everything. There are QML components for Designer in the SDK but they seem to be only Symbian.

Yeah, there are others too that are on Linux, but not in Widnows.

It works on Linux perfectly, look at the attachment. You choose File->New File or Project->Qt Widget Project->QT Gui Application

Once its created you must edit the .pro file and add under SOURCES:
QT += declarative

This step is important, if you don't do it, you won't be able to compile the application.

Something to note is that QDeclarativeView is not available in Windows by default. In Windows you can insert a Graphics View (under Display Widgets) and after adding the above to the .pro file you can right click it and promote it to QDeclarativeView. However, there won't be a way to specify its source on the designer and from what I've tried it doesn't work either through code.

Only way I found around this is to make the project on linux and then open it in Windows and even though, you won't see the QDeclarativeView preview on the designer. You will just see a white component in the screen. Anyway, this time you will be able to set its source on the designer on the property segment of the screen all the way to the end. It says source in bold.