한국어
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++객체의 메서드를 호출 할 수 있게된다.

 

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()
            }
        }
    }
}

 

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

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 85357
56 tslib의 ts_calibrate를 응용해서 Qt로 터치보정기능 구현 file makersweb 2019.04.06 1351
55 GPU가 없는 장치에서 Qt Quick을 사용 makersweb 2019.04.02 1850
54 QTextCodec클래스를 사용하여 유니코드와 EUC-KR 변환 makersweb 2019.03.25 2860
53 qInstallMessageHandler를 이용한 디버그 메세지 출력 제어하기 makersweb 2019.02.25 1339
52 Qt5기반 독립 프로세스(out-of-process)로 동작하는 가상키보드(virtual keyboard) file makersweb 2019.02.24 2605
51 Qml 기본 컴포넌트 강좌 (4) - 모델 리스팅(Listing) file 운영자 2019.02.23 5260
50 Qt Bluetooth를 이용한 시리얼(Serial) 통신 file makersweb 2019.02.17 3496
49 Qml 기본 컴포넌트 강좌 (3) - 배치(positioning) 컴포넌트 file 운영자 2019.02.10 4823
48 QString 문자열 다루기 예제 운영자 2019.01.26 39607
47 Qt SQL을 이용한 가벼운 데이터베이스 다루기 [1] file 운영자 2019.01.23 6880
46 구글 클라우드 Speech-To-Text API를 Qt기반(C++, Qml)테스트 [7] file makersweb 2019.01.20 2608
45 QNetworkAccessManager를 통해 HTTP POST 하는 예제 makersweb 2019.01.17 4717
44 Qt응용프로그램 실행 시 콘솔창(터미널)같이 띄우기 file makersweb 2019.01.16 4441
43 안드로이드 가상장치 사용 file makersweb 2019.01.13 1059
42 Qml 기본 컴포넌트 강좌 (2) [2] file makersweb 2019.01.05 8584
41 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 11978
40 QtWayland와 ivi-compositor file makersweb 2018.12.27 2395
» Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 13829
38 싱글터치 스크린 및 임베디드 리눅스 기반에서 Qt 터치입력 makersweb 2018.12.24 1385
37 ShaderEffect QML Type 을 이용한 그래픽효과 file makersweb 2018.12.09 2091