QML with C++ integration

1. QML 與 C++ 的美麗邂逅
Jack Yang
jackyang5000@gmail.com

2. 回顧一下...QML 是什麼 ?
● 描述性語言
● property, method, signal
● javascript 控制
Ref: http://www.slideshare.net/jackyang5000/hello-qml-42873653

3. import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 360
height: 360
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
}

4. 複雜一些, 我們可以做到這樣...

5. 有了 QML 還需要 C++ ?

6. 如果要這樣...

7. 或者這樣...

8. 或這樣...

9. 我們要如何讓 QML 使用這些功能 ?
● 透過 c++ 使用 third-party library
● 讓資料的擷取, 儲存, 操作更為方便
● Client/Server 架構
讓 Application 更 powerful~

10. 首先, 我們所認識的彼此...
C++ class
● member variable
● member function
● event notify
QML type
● property
● function
● signal

11. 一個 Qt C++ class 的概念
● Based on QObject
● Q_OBJECT
Tool: moc (meta-object compiler)
o moc 參考 c++ header, 產生出 moc_className.cpp
o moc_className.cpp 描述 signals, slot, property
Ref: http://doc.qt.io/qt-5/metaobjects.html

12. Qt C++ object 對應到 QML object
● member variable by Q_PROPERTY
o -> QML property
● member function by Q_INVOKABLE prefix
o -> QML function
● event notify define in signals
o -> QML signal
* property/function name 都小寫開頭

15. 方法一: 將 C++ 嵌入至 QML
● QQmlContext::setContextObject
● QQmlContext::setContextProperty
Ref: http://doc.qt.io/qt-5/qtqml-cppintegration-
exposecppattributes.html

16. main.cpp

17. QML

18. 方法二: 註冊成為一個 QML type
● QML object type
o Rectangle, Text, Image, ListModel…
● Object type from QML document
o MyButton.qml
● Object type from c++
o Register c++ object to QML

19. #include <QtQml>
qmlRegisterType<className>(url, version major,
version minor, qml name)
Ref: http://doc.qt.io/qt-5/qtqml-cppintegration-
definetypes.html
qmlRegisterType

20. main.cpp
main.qml

21. 方法三: QML plugin dll
如何製作 ? by QtCreator

22. 設定 class 名稱 & QML import 路徑

23. QML 啟動時, 會去 call 此 plugin 的 registerType
Ref: http://doc.qt.io/qt-5/qtqml-modules-cppplugins.html

24. qmldir
module HanGee.Hackathon (qml import 路徑)
plugin TestQmlExtPlugin (dll 名稱)

25. QML 如何使用 plugin dll ?
方法一:

26. 方法二: 設環境變數
Windows:
set QML2_IMPORT_PATH=your_plugin_dir
Linux:
export QML2_IMPORT_PATH = /your_plugin_dir

27. 開始讓你 QML 更強大吧 !!

28. 工商服務
敏捷開發團隊生活的一二事...
http://vvtk-digest.blogspot.tw