한국어
Qt
 

이전에 간단한 QML 어플리케이션 프로젝트를 생성하고 실행하는 방법을 소개한적이 있다. (QML로 만드는 Hello World)

 

최근 QML 엔진의 최적화가 많이 이뤄지긴 했지만 QML만을 이용해서 어플리케이션을 개발하는 것은 현실적으로 어려운일이며 특히 성능을 중요시 하는 시스템이거나 C++로 개발된 기존 백엔드 API를 이용해야 한다면 C++과의 통합은 꼭 알아야하는 부분이다.

 

아래 다이어그램은 QML과 C++로된 어플리케이션 구조를 설명하는데 Persentation Layer는 QML를 이용한 구현, Business Layer는 Native C++ 또는 Qt C++ API를 통해 구현한다. Business Layer 측에서는 Persentation Layer를 위해 API를 제공해야하며 바로 이부분에 대한 주제를 가지고 이글에서 설명하고자 하는 것이다.

qml+cpp.png

 

 

예제를 통해 QML과 C++로 개발하는 방법을 알아보자.

 

아래 소스코드는 기본으로 생성되는 QML 프로젝트의 main.cpp 코드이다.

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

 

QQmlApplicationEngine 객체를 생성하고 main.qml을 로드시키고 있다.

 

양측 통합의 일반적인 방법은 QQmlApplicationEngine의 객체 즉, QQmlEngine의 context에 QObject를 서브클래싱한 C++클래스 객체를 등록하여 QML에서 등록된 객체에 접근할 수 있게 하는 것이다.

 

QQmlApplicationEngine클래스는 QQmlEngine를 서브클래싱하고 있는데 QQmlEngine 클래스는 QML엔진의 root context를 얻을 수 있도록 rootContext() 메서드를 제공한다. 

 

rootContext()는 QQmlContext 포인터를 반환하고 QQmlContext의 setContextProperty()메서드를 통해 C++ 새롭게 추가된 객체를 등록할 수 있다.

 

아래 예제 소스코드를 보자.

QML에서 C++객체의 메서드를 호출하거나 비동기로 어떤 시그널을 처리하는 방법이다.

Phonebook 클래스는 QObject를 서브클래싱하였고 setter, getter 메서드를 선언하였다. 여기서 Q_INVOKABLE 매크로에 주목하자. 컴파일 시점에 moc에 의해 표준 C++코드로 재생성되고 Q_INVOKABLE 으로 선언된 클래스의 함수들은 QML에서 호출 할 수 있도록 해준다. 

phonebook.h

#include <QObject>

class Phonebook: public QObject{
    Q_OBJECT
public:
    explicit Phonebook(QObject *parent = nullptr);
    virtual ~Phonebook();

    Q_INVOKABLE void setName(const QString &name);
    Q_INVOKABLE QString name() const;

signals:
    void nameChanged();

private:
    QString m_name;
};

 

함수의 구현부분은 단순하다. setName함수는 새로 입력된 name을 바꾸고 시그널을 방출한다.

phonebook.cpp

#include "phonebook.h"

Phonebook::Phonebook(QObject *parent)
    :QObject(parent),
      m_name("")
{

}

Phonebook::~Phonebook()
{

}

void Phonebook::setName(const QString &name)
{
    if(name != m_name){
        m_name = name;
        emit this->nameChanged();
    }
}

QString Phonebook::name() const
{
    return m_name;
}

 

main함수에서는 Phonebook 객체를 생성하고 QML 엔진 context에 "phonebook" 이라는 이름으로 등록한다.

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "phonebook.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    Phonebook pb;
    engine.rootContext()->setContextProperty("phonebook", &pb);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

 

이제 QML에서 "phonebook" 이라는 문자열로 C++객체의 메서드를 호출 할 수 있게된다.

다이얼 로그를 통해 사용자로부터 문자열을 입력받고 setName() 메서드를 통해 값을 설정한다. 값이 바뀔때 발생하는 nameChanged시그널을 연결하여 값이 phonebook 의 name 값이 바뀌면 name() 메서드를 통해 값을 가져와 QML의 text에 새로운 값을 설정하게 되어있다.

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Dialogs 1.3
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Dialog{
        id: inputDialog
        title: qsTr("이름을 입력하세요.")
        anchors.centerIn: parent
        height: 200
        width: 300
        modal: Qt.ApplicationModal
        contentItem: TextField{
            width: 100
            height: 50
            font.pixelSize: 25
            horizontalAlignment: TextInput.AlignHCenter
        }
        standardButtons: Dialog.Ok | Dialog.Cancel

        onAccepted: {
            if(contentItem.text.length){
                phonebook.setName(contentItem.text)
            }
        }
    }

    Connections{
        target: phonebook
        onNameChanged:{
            name.text = phonebook.name()
        }
    }

    Row{
        height: 50
        anchors.centerIn: parent

        Text {
            id: name
            width: 150
            font.pixelSize: 20
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            elide: Text.ElideRight
        }
        Button{
            width: 70
            height: 50
            text: qsTr("입력")
            onClicked: {
                inputDialog.open()
            }
        }
    }
}

 

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 75
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++)으로 테스트 file makersweb 2019.01.20 9
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 3
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 5
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 8
42 Qml 기본 컴포넌트 강좌 (2) file makersweb 2019.01.05 23
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 28
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 40
» Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 43
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 12
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 40
36 Qml에서 커튼효과 구현 예제 - Shader Effects file 운영자 2018.12.05 46
35 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 116
34 리눅스에서 Qt4.8기반 어플리케이션의 한글입력 file makersweb 2018.11.29 51
33 QML에서 동적으로 텍스트 다국어 처리 file makersweb 2018.11.04 110
32 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 148
31 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 192
30 소스코드에서 환경변수 가져오기와 설정하기 makersweb 2018.10.08 74
29 표를 만들고 PDF문서로 출력하기 file makersweb 2018.09.30 90
28 Qml에서 키보드 입력 이벤트 핸들링 file makersweb 2018.08.09 194