Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

QML 與 C++ 的美麗邂逅

3,477 views

Published on

QML with C++ integration

Published in: Engineering
  • Be the first to comment

QML 與 C++ 的美麗邂逅

  1. 1. QML 與 C++ 的美麗邂逅 Jack Yang jackyang5000@gmail.com
  2. 2. 回顧一下...QML 是什麼 ? ● 描述性語言 ● property, method, signal ● javascript 控制 Ref: http://www.slideshare.net/jackyang5000/hello-qml-42873653
  3. 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. 4. 複雜一些, 我們可以做到這樣...
  5. 5. 有了 QML 還需要 C++ ?
  6. 6. 如果要這樣...
  7. 7. 或者這樣...
  8. 8. 或這樣...
  9. 9. 我們要如何讓 QML 使用這些功能 ? ● 透過 c++ 使用 third-party library ● 讓資料的擷取, 儲存, 操作更為方便 ● Client/Server 架構 讓 Application 更 powerful~
  10. 10. 首先, 我們所認識的彼此... C++ class ● member variable ● member function ● event notify QML type ● property ● function ● signal
  11. 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. 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 都小寫開頭
  13. 13. 方法一: 將 C++ 嵌入至 QML ● QQmlContext::setContextObject ● QQmlContext::setContextProperty Ref: http://doc.qt.io/qt-5/qtqml-cppintegration- exposecppattributes.html
  14. 14. main.cpp
  15. 15. QML
  16. 16. 方法二: 註冊成為一個 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
  17. 17. #include <QtQml> qmlRegisterType<className>(url, version major, version minor, qml name) Ref: http://doc.qt.io/qt-5/qtqml-cppintegration- definetypes.html qmlRegisterType
  18. 18. main.cpp main.qml
  19. 19. 方法三: QML plugin dll 如何製作 ? by QtCreator
  20. 20. 設定 class 名稱 & QML import 路徑
  21. 21. QML 啟動時, 會去 call 此 plugin 的 registerType Ref: http://doc.qt.io/qt-5/qtqml-modules-cppplugins.html
  22. 22. qmldir module HanGee.Hackathon (qml import 路徑) plugin TestQmlExtPlugin (dll 名稱)
  23. 23. QML 如何使用 plugin dll ? 方法一:
  24. 24. 方法二: 設環境變數 Windows: set QML2_IMPORT_PATH=your_plugin_dir Linux: export QML2_IMPORT_PATH = /your_plugin_dir
  25. 25. 開始讓你 QML 更強大吧 !!
  26. 26. 工商服務 敏捷開發團隊生活的一二事... http://vvtk-digest.blogspot.tw

×