Qt Signal 과 QML function 을 연결하기

QML은 UI를 구성하는 데 편의성을 제공하기는 하지만
Native code처럼 정밀한 작업을 하거나 세밀한 조작을 할때는 답답한 부분이 상당히 있다.

그래서 UI 는 QML로 구성하고, 세밀하고 빠른 속도를 요구되어지는 부분은
Qt로 구성하는 경우가 많은데, 이때 주의해야 할 부분이 QML과 Signal/Slot을 Communicate할 수 있느냐이다.

결론부터 말하자면
rootObject() 와 QVariant를 사용해서 Signal/Slot을 QML에서도 사용할 수 있다.

조금 더 상세히 말하자면 QML 파일은 결국 QDeclarativeView를 사용하여 동작이 이루어지게 되는데, 이 QDeclarativeView를 통하여 QML Controller의 pointer를 가져 올 수 있다.

QDeclarativeView view;
view.setSource( QUrl("QML파일.qml"));

QObject *rootObject = dynamic_cast(view.rootObject());

object의 포인터를 가져 오게 되면 그 다음은 일반 Qt 프로그램과 동일 해 진다.
QObject::connect(rootObject, SIGNAL(.....), &QtClass pointer, SLOT(....));
QObject::connect(&QtClass pointer, SIGNAL(...), rootObject, SLOT(...));

그리고 QML 파일과 Qt Native 사이의 parameter는 QVariant를 통하여 전달 시키면 된다.
NativeFunction( QVariant text ); // Qt
function QMLFunction( text ) // QML

다음의 forum nokia 예제를 참조한다.
<참조>
http://wiki.forum.nokia.com/index.php/CS001625_-_Connecting_Qt_signal_to_QML_function

myclass.h

#ifndef __MYCLASS_H__
#define __MYCLASS_H__

#include <qobject>
#include <qvariant>

class MyClass : public QObject
{
Q_OBJECT

public:
MyClass() {}

public slots:
void getData() {
QString text("New data");
emit data(QVariant(text));
}

signals:
void data(QVariant data);
};

#endif

main.cpp


#include <qapplication>
#include <qgraphicsobject>
#include <qdeclarativeview>
#include "myclass.h"


int main(int argc, char *argv[])
{
QApplication app(argc, argv);
MyClass myClass;

QDeclarativeView view;
view.setSource(QUrl("./ui.qml"));
view.setResizeMode(QDeclarativeView::SizeRootObjectToView);

QObject *rootObject = dynamic_cast(view.rootObject());

QObject::connect(rootObject, SIGNAL(dataRequired()), &myClass, SLOT(getData()));
QObject::connect(&myClass, SIGNAL(data(QVariant)), rootObject, SLOT(updateData(QVariant)));

view.setGeometry(QRect(100,100,800, 480));
view.show();

return app.exec();
}


ui.qml

import Qt 4.7

Rectangle {
signal dataRequired;

function updateData(text) { dataText.text = text } // slot

anchors.fill: parent; color: "black"

Text {
id: dataText
anchors.centerIn: parent; color: "white"
}

MouseArea {
anchors.fill: parent
onClicked: dataRequired()
}
}