Integrating QML with C++

Training Course

Visit us at http://qt.digia.com
Produced by Digia Plc.
Material based on Qt 5.0, created on September 27, 2012

Digia Plc.

Module: Integrating QML with C++

Declarative Environment Exporting C++ objects to QML Exporting Classes to QML
Exporting Non-GUI Classes Exporting QPainter based GUI Classes Exporting Scene Graph based GUI Classes

Using Custom Types Plug-ins

2/74

Integrating QML with C++

Objectives
The QML runtime environment
understanding of the basic architecture ability to set up QML in a C++ application

Exposing C++ objects to QML

knowledge of the Qt features that can be exposed familiarity with the mechanisms used to expose objects
Demo qml-cpp-integration/ex-clock .

3/74

Integrating QML with C++

Module: Integrating QML with C++

Declarative Environment Exporting C++ objects to QML Exporting Classes to QML
Exporting Non-GUI Classes Exporting QPainter based GUI Classes Exporting Scene Graph based GUI Classes

Using Custom Types Plug-ins

Declarative Environment

4/74

Integrating QML with C++

Overview
Qt Quick is a combination of technologies:
A set of components, some graphical A declarative language: QML
based on JavaScript running on a virtual machine

A C++ API for managing and interacting with components

the QtQuick module

Declarative Environment

5/74

Integrating QML with C++

Setting up a QtQuick View

#include <QGuiApplication> #include <QQuickView> #include <QUrl> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQuickView view; view.setSource(QUrl("qrc:///animation.qml")); view.show(); return app.exec(); }
Demo qml-cpp-integration/ex-simpleviewer .

Declarative Environment

6/74

Integrating QML with C++

Setting up QtQuick
QT SOURCES += quick = main.cpp RESOURCES = simpleviewer.qrc

Declarative Environment

7/74

Integrating QML with C++

Module: Integrating QML with C++

Declarative Environment Exporting C++ objects to QML Exporting Classes to QML
Exporting Non-GUI Classes Exporting QPainter based GUI Classes Exporting Scene Graph based GUI Classes

Using Custom Types Plug-ins

Exporting C++ objects to QML

8/74

Integrating QML with C++

Exporting C++ objects to QML

C++ objects can be exported to QML
class User : public QObject { Q_OBJECT Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged) Q_PROPERTY(int age READ age WRITE setAge NOTIFY ageChanged) public: User(const QString &name, int age, QObject *parent = 0); ... }

The notify signal is needed for correct property bindings! Q_PROPERTY must be at top of class

Exporting C++ objects to QML

9/74

Integrating QML with C++

Exporting C++ objects to QML

QQmlContext exports the instance to QML.
void main( int argc, char* argv[] ) { ... User *currentUser = new User("Alice", 29); QAbstractItemModel *thingsModel = createModel(); QQuickView *view = new QQuickView; QQmlContext *context = view->engine()->rootContext(); context->setContextProperty("_currentUser", currentUser); context->setContextProperty("_favoriteThings", thingsModel); ... }

Exporting C++ objects to QML

10/74

Integrating QML with C++

Using the object in QML

Use the instances like any other QML object
Text { text : _currentUser.name ... } ListView { model : _favoriteThings ... }

Exporting C++ objects to QML

11/74

Integrating QML with C++

What is exported?
Accessible from QML:
Properties Signals Slots Methods marked with Q_INVOKABLE Enums registered with Q_ENUMS
class Circle { Q_ENUMS(Style) public: enum Style { Outline, Filled }; ... };

Exporting C++ objects to QML

12/74

Integrating QML with C++

Module: Integrating QML with C++

Declarative Environment Exporting C++ objects to QML Exporting Classes to QML
Exporting Non-GUI Classes Exporting QPainter based GUI Classes Exporting Scene Graph based GUI Classes

Using Custom Types Plug-ins

Exporting Classes to QML

13/74

Integrating QML with C++

Overview
Steps to dene a new type in QML:
In C++: Subclass either QObject or QQuickItem In C++: Register the type with the QML environment In QML: Import the module containing the new item In QML: Use the item like any other standard item Non-visual types are QObject subclasses Visual types (items) are QQuickItem subclasses
QQuickItem is the C++ equivalent of Item

Exporting Classes to QML

14/74

Integrating QML with C++

Step 1: Implementing the Class

#include <QObject> class QTimer; class Timer : public QObject { Q_OBJECT public: Timer(QObject *parent = 0); private: QTimer* m_timer; };

Exporting Classes to QML

15/74

Integrating QML with C++

Implementing the Class

Timer is a QObject subclass As with all QObjects, each item can have a parent Non-GUI custom items do not need to worry about any painting

Exporting Classes to QML

16/74

Integrating QML with C++

Step 1: Implementing the Class

#include "timer.h" #include <QTimer> Timer::Timer(QObject *parent) : QObject(parent), m_timer(new QTimer(this)) { m_timer->setInterval( 1000 ); m_timer->start(); }

Exporting Classes to QML

17/74

Integrating QML with C++

Step 2: Registering the Class

#include <QGuiApplication> #include <QQuickView> #include "timer.h" int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); qmlRegisterType<Timer>("CustomComponents", 1, 0, "Timer"); QQuickView view; view.setSource(QUrl("qrc:///main.qml")); view.show(); return app.exec(); }

Timer registered as an element in module "CustomComponents" Automatically available to the main.qml le

Exporting Classes to QML

18/74

Integrating QML with C++

Reviewing the Registration

qmlRegisterType<Timer>("CustomComponents", 1, 0, "Timer");

This registers the Timer C++ class Available from the CustomComponents QML module
version 1.0 (rst number is major; second is minor)

Available as the Timer element

the Timer element is an non-visual item a subclass of QObject

Exporting Classes to QML

19/74

Integrating QML with C++

Step 3+4 Importing and Using the Class

In the main.qml le:
import QtQuick 2.0 import CustomComponents 1.0 Rectangle { width: 500 height: 360 Timer { id: timer ... } }
Demo qml-cpp-integration/ex_simple_timer .

Exporting Classes to QML

20/74

Integrating QML with C++

Adding Properties
In the main.qml le:
Rectangle { ... Timer { id: timer interval: 3000 } }

A new interval property

Demo qml-cpp-integration/ex_timer_properties .

Exporting Classes to QML

21/74

Integrating QML with C++

Declaring a Property
In the timer.h le:
class Timer : public QObject { Q_OBJECT Q_PROPERTY( int interval READ interval WRITE setInterval NOTIFY intervalChanged ) ...

Use a Q_PROPERTY macro to dene a new property

named interval with int type with getter and setter, interval() and setInterval() emits the intervalChanged() signal when the value changes

The signal is just a notication

it contains no value we must emit it to make property bindings work

Exporting Classes to QML

22/74

Integrating QML with C++

Declaring Getter, Setter and Signal

In the timer.h le:
public: ... void setInterval(int msec); int interval(); signals: void intervalChanged(); ... private: QTimer *m_timer; };

Declare the getter and setter Declare the notier signal Contained QTimer object holds actual value

Exporting Classes to QML

23/74

Integrating QML with C++

Implementing Getter and Setter

In the timer.cpp le:
void Timer::setInterval( int msec ) { if ( m_timer->interval() == msec ) return; m_timer->stop(); m_timer->setInterval( msec ); m_timer->start(); emit intervalChanged(); } int Timer::interval() { return m_timer->interval(); }

Do not emit notier signal if value does not actually change Important to break cyclic dependencies in property bindings

Exporting Classes to QML

24/74

Integrating QML with C++

Summary of Items and Properties

Register new QML types using qmlRegisterType
new non-GUI types are subclasses of QObject

Add QML properties

dene C++ properties with NOTIFY signals notications are used to maintain the bindings between items only emit notier signals if value actually changes

Exporting Classes to QML

25/74

Integrating QML with C++

Adding Signals
In the main.qml le:
Rectangle { ... Timer { interval: 3000 onTimeout: { console.log( "Timer fired!" ); } } }

A new onTimeout signal handler

outputs a message to stderr.
Demo qml-cpp-integration/ex_timer_signals .

Exporting Classes to QML

26/74

Integrating QML with C++

Declaring a Signal
In the timer.h le:
... signals: void timeout(); void intervalChanged(); ...

Add a timeout() signal

this will have a corresponding onTimeout handler in QML we will emit this whenever the contained QTimer object res

Exporting Classes to QML

27/74

Integrating QML with C++

Emitting the Signal

In the timer.cpp le:
Timer::Timer(QObject *parent) : QObject(parent), m_timer(new QTimer(this)) { connect(m_timer, SIGNAL(timeout()), this, SIGNAL(timeout())); }

Change the constructor connect QTimer::timeout() signal to Timer::timeout() signal

Exporting Classes to QML

28/74

Integrating QML with C++

Handling the Signal

In the main.qml le:
Rectangle { ... Timer { interval: 3000 onTimeout: { console.log( "Timer fired!" ); } } }

In C++:
the QTimer::timeout() signal is emitted connection means Timer::timeout() is emitted

In QML:
the Timer item's onTimeout handler is called outputs message to stderr

Exporting Classes to QML

29/74

Integrating QML with C++

Adding Methods to Items

Two ways to add methods that can be called from QML:
1 .

Create C++ slots

automatically exposed to QML useful for methods that do not return values

2 .

Mark regular C++ functions as invokable

allows values to be returned

Exporting Classes to QML

30/74

Integrating QML with C++

Adding Slots
In the main.qml le:
Rectangle { Timer { id: timer onTimeout: { console.log( "Timer fired!" ); } } MouseArea { onClicked: { if ( timer.active == false ) { timer.start(); } else { timer.stop(); } } } }

Exporting Classes to QML

31/74

Integrating QML with C++

Adding Slots
Timer now has start() and stop() methods Normally, could just use properties to change state... For example a running property
Demo qml-cpp-integration/ex_timer_slots .

Exporting Classes to QML

32/74

Integrating QML with C++

Declaring Slots
In the timer.h le:
... public slots: void start(); void stop(); ...

Added start() and stop() slots to public slots section No difference to declaring slots in pure C++ application

Exporting Classes to QML

33/74

Integrating QML with C++

Implementing Slots
In the timer.cpp le:
void Timer::start() { if ( m_timer->isActive() ) return; m_timer->start(); emit activeChanged(); } void Timer::stop() { if ( !m_timer->isActive() ) return; m_timer->stop(); emit activeChanged(); }

Remember to emit notier signal for any changing properties

Exporting Classes to QML

34/74

Integrating QML with C++

Adding Methods
In the main.qml le:
Rectangle { Timer { id: timer interval: timer.randomInterval( 500, 1500 ) onTimeout: { console.log( "Timer fired!" ); } } }

Timer now has a randomInterval() method

obtain a random interval using this method accepts arguments for min and max intervals set the interval using the interval property
Demo qml-cpp-integration/ex-methods .

Exporting Classes to QML

35/74

Integrating QML with C++

Declaring a Method
In the timer.h le:
... public: explicit Timer( QObject* parent = 0 ); ... Q_INVOKABLE int randomInterval( int min, int max ) const; ...

Dene the randomInterval() function

add the Q_INVOKABLE macro before the declaration returns an int value cannot return a const reference

Exporting Classes to QML

36/74

Integrating QML with C++

Implementing a Method
In the timer.cpp le:
int Timer::randomInterval( int min, int max ) const { int range = max - min; int msec = min + qrand() % range; qDebug() << "Random interval =" << msec << "msecs"; return msec; }

Dene the new randomInterval() function

the pseudo-random number generator has already been seeded simply return an int do not use the Q_INVOKABLE macro in the source le

Exporting Classes to QML

37/74

Integrating QML with C++

Summary of Signals, Slots and Methods

Dene signals
connect to Qt signals with the onSignal syntax

Dene QML-callable methods

reuse slots as QML-callable methods methods that return values are marked using Q_INVOKABLE

Exporting Classes to QML

38/74

Integrating QML with C++

Exporting a QPainter based GUI class

Derive from QQuickPaintedItem Implement paint() Similar to non GUI classes:
Export object from C++ Import and use in QML properties, signals/slots, Q_INVOKABLE

Exporting Classes to QML

39/74

Integrating QML with C++

Exporting a QPainter based GUI class cont'd.

#include <QQuickPaintedItem> class EllipseItem : public QQuickPaintedItem { Q_OBJECT public: EllipseItem(QQuickItem *parent = 0); void paint(QPainter *painter); };

Exporting Classes to QML

40/74

Integrating QML with C++

Exporting a QPainter based GUI class cont'd.

EllipseItem::EllipseItem(QQuickItem *parent) : QQuickPaintedItem(parent) { } void EllipseItem::paint(QPainter *painter) { const qreal halfPenWidth = qMax(painter->pen().width() / 2.0, 1.0); QRectF rect = boundingRect(); rect.adjust(halfPenWidth, halfPenWidth, -halfPenWidth, -halfPenWidth); painter->drawEllipse(rect); }

Exporting Classes to QML

41/74

Integrating QML with C++

Exporting a QPainter based GUI class cont'd.

#include <QGuiApplication> #include <QQuickView> #include "ellipseitem.h" int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); qmlRegisterType<EllipseItem>("Shapes", 1, 0, "Ellipse"); QQuickView view; view.setSource(QUrl("qrc:///ellipse1.qml")); view.show(); return app.exec(); }

Exporting Classes to QML

42/74

Integrating QML with C++

Exporting a QPainter based GUI class cont'd.

In the ellipse1.qml le:
import QtQuick 2.0 import Shapes 1.0 Item { width: 300; height: 200 Ellipse { x: 50; y: 50 width: 200; height: 100 } }
Demo qml-cpp-integration/ex-simple-item .

Exporting Classes to QML

43/74

Integrating QML with C++

Exporting a Scene Graph based GUI class

Derive from QQuickItem Implement updatePaintNode() Create and initialize a QSGNode subclass (e.g. QSGGeometryNode)
QSGGeometry to specify the mesh QSGMaterial to specify the texture

Similar to other classes:

Export object from C++ Import and use in QML properties, signals/slots, Q_INVOKABLE

Exporting Classes to QML

44/74

Integrating QML with C++

Exporting a Scene Graph based GUI class cont'd.

#include <QQuickItem> #include <QSGGeometry> #include <QSGFlatColorMaterial> class TriangleItem : public QQuickItem { Q_OBJECT public: TriangleItem(QQuickItem *parent = 0); protected: QSGNode *updatePaintNode(QSGNode *node, UpdatePaintNodeData *data); private: QSGGeometry m_geometry; QSGFlatColorMaterial m_material; };

Exporting Classes to QML

45/74

Integrating QML with C++

Exporting a Scene Graph based GUI class cont'd.

#include <QSGGeometryNode> TriangleItem::TriangleItem(QQuickItem *parent) : QQuickItem(parent), m_geometry(QSGGeometry::defaultAttributes_Point2D(), 3) { setFlag(ItemHasContents); m_material.setColor(Qt::red); }

Exporting Classes to QML

46/74

Integrating QML with C++

Exporting a Scene Graph based GUI class cont'd.

QSGNode *TriangleItem::updatePaintNode(QSGNode *n, UpdatePaintNodeData *) { QSGGeometryNode *node = static_cast<QSGGeometryNode *>(n); if (!node) node = new QSGGeometryNode(); QSGGeometry::Point2D *v = m_geometry.vertexDataAsPoint2D(); const QRectF rect = boundingRect(); v[0].x = rect.left(); v[0].y = rect.bottom(); v[1].x = rect.left() + rect.width()/2; v[1].y = rect.top(); v[2].x = rect.right(); v[2].y = rect.bottom(); node->setGeometry(&m_geometry); node->setMaterial(&m_material); return node; }
Demo qml-cpp-integration/ex-simple-item-scenegraph .

Exporting Classes to QML

47/74

Integrating QML with C++

Module: Integrating QML with C++

Declarative Environment Exporting C++ objects to QML Exporting Classes to QML
Exporting Non-GUI Classes Exporting QPainter based GUI Classes Exporting Scene Graph based GUI Classes

Using Custom Types Plug-ins

Using Custom Types

48/74

Integrating QML with C++

Dening Custom Property Types

Enums Custom types as property values
Timer { interval { duration: 2 unit: IntervalSettings.Seconds } }

Collection of custom types

Chart { bars: [ Bar { color: "#a00000"; value: -20 }, Bar { color: "#00a000"; value: 50 }, Bar { color: "#0000a0"; value: 100 } ] }

Using Custom Types

49/74

Integrating QML with C++

Dening Custom Property Types

Custom classes can be used as property types
allows rich description of properties subclass QObject or QQuickItem (as before) requires registration of types (as before)

A simpler way to dene custom property types:

use simple enums and ags easy to declare and use

Collections of custom types:

dene a new custom item use with a QQmlListProperty template type

Using Custom Types

50/74

Integrating QML with C++

Using Enums
class IntervalSettings :public QObject { Q_OBJECT Q_ENUMS( Unit ) Q_PROPERTY( Unit unit READ unit ...) public: enum Unit { Minutes, Seconds, MilliSeconds }; ... }

Timer { interval { duration: 2 unit: IntervalSettings.Seconds } }

Using Custom Types

51/74

Integrating QML with C++

Custom classes as Property Types

Use the sub type as a pointer
class Timer : public QObject { Q_OBJECT Q_PROPERTY( IntervalSettings* interval READ interval WRITE setInterval NOTIFY intervalChanged) public: IntervalSettings* interval() const; void setInterval( IntervalSettings* ); ... private: IntervalSettings* m_settings; }

Using Custom Types

52/74

Integrating QML with C++

Custom classes as Property Types cont'd.

Instantiate m_settings to an instance rather than just a null pointer:
Timer::Timer(...) : m_settings(new IntervalSettings) { ... }

Using Custom Types

53/74

Integrating QML with C++

Custom classes as Property Types cont'd.

Instantiating allow you this syntax:
Timer { interval { duration: 2 unit: IntervalSettings.Seconds } }

Alternatively you would need this syntax:

Timer { interval: IntervalSettings { duration: 2 unit: IntervalSettings.Seconds } }

Using Custom Types

54/74

Integrating QML with C++

Custom classes as Property Types cont'd.

Both classes must be exported to QML
qmlRegisterType<Timer>( "CustomComponents", 1, 0, "Timer" ); qmlRegisterType<IntervalSettings>( "CustomComponents", 1, 0, "IntervalSettings");

Demo qml-cpp-integration/ex_timer_custom_types .

Using Custom Types

55/74

Integrating QML with C++

Collections of Custom Types

import QtQuick 2.0 import Shapes 8.0 Chart { width: 120; height: 120 bars: [ Bar { color: "#a00000" value: -20 }, Bar { color: "#00a000" value: 50 }, Bar { color: "#0000a0" value: 100 } ] }

A Chart item
with a bars list property accepting custom Bar items
Demo qml-cpp-integration/ex-custom-collection-types .

Using Custom Types

56/74

Integrating QML with C++

Declaring the List Property

In the chartitem.h le:
class BarItem; class ChartItem : public QQuickPaintedItem { Q_OBJECT Q_PROPERTY(QQmlListProperty<BarItem> bars READ bars NOTIFY barsChanged) public: ChartItem(QQuickItem *parent = 0); void paint(QPainter *painter); ...

Dene the bars property

in theory, read-only but with a notication signal in reality, writable as well as readable

Using Custom Types

57/74

Integrating QML with C++

Declaring the List Property

In the chartitem.h le:
... QQmlListProperty<BarItem> bars(); signals: void barsChanged(); private: static void append_bar(QQmlListProperty<BarItem> *list, BarItem *bar); QList<BarItem*> m_bars; };

Dene the getter function and notication signal Dene an append function for the list property

Using Custom Types

58/74

Integrating QML with C++

Dening the Getter Function

In the chartitem.cpp le:
QQmlListProperty<BarItem> ChartItem::bars() { return QQmlListProperty<BarItem>(this, 0, &ChartItem::append_bar); }

Denes and returns a list of BarItem objects

with an append function

Using Custom Types

59/74

Integrating QML with C++

Dening the Append Function

void ChartItem::append_bar(QQmlListProperty<BarItem> *list, BarItem *bar) { ChartItem *chart = qobject_cast<ChartItem *>(list->object); if (chart) { bar->setParent(chart); chart->m_bars.append(bar); chart->barsChanged(); } }

Static function, accepts

the list to operate on each BarItem to append

When a BarItem is appended

emits the barsChanged() signal

Using Custom Types

60/74

Integrating QML with C++

Summary of Custom Property Types

Dene classes as property types:
declare and implement a new QObject or QQuickItem subclass declare properties to use a pointer to the new type register the item with qmlRegisterType

Use enums as simple custom property types:

use Q_ENUMS to declare a new enum type declare properties as usual

Dene collections of custom types:

using a custom item that has been declared and registered declare properties with QQmlListProperty implement a getter and an append function for each property read-only properties, but read-write containers read-only containers dene append functions that simply return

Using Custom Types

61/74

Integrating QML with C++

Default Property
One property can be marked as the default
class ChartItem : public QQuickPaintedItem { Q_OBJECT Q_PROPERTY(QQmlListProperty<BarItem> bars READ bars NOTIFY barsChanged) Q_CLASSINFO("DefaultProperty", "bars") ...

Allows child-item like syntax for assignment

Chart { width: 120; height: 120 Bar { color: "#a00000"; value: -20 } Bar { color: "#00a000"; value: 50 } Bar { color: "#0000a0"; value: 100 } }

Using Custom Types

62/74

Integrating QML with C++

Module: Integrating QML with C++

Declarative Environment Exporting C++ objects to QML Exporting Classes to QML
Exporting Non-GUI Classes Exporting QPainter based GUI Classes Exporting Scene Graph based GUI Classes

Using Custom Types Plug-ins

Plug-ins

63/74

Integrating QML with C++

Creating Extension Plugins

Declarative extensions can be deployed as plugins

using source and header les for a working custom type developed separately then deployed with an application write QML-only components then rewrite in C++ use placeholders for C++ components until they are ready

Plugins can be loaded by the qmlscene tool

with an appropriate qmldir le

Plugins can be loaded by C++ applications

some work is required to load and initialize them

Plug-ins

64/74

Integrating QML with C++

Dening an Extension Plugin

#include <QQmlExtensionPlugin> class EllipsePlugin : public QQmlExtensionPlugin { Q_OBJECT Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QQmlExtensionInterface/1.0") public: void registerTypes(const char *uri); };

Create a QQmlExtensionPlugin subclass

add type information for Qt's plugin system only one function to reimplement

Plug-ins

65/74

Integrating QML with C++

Implementing an Extension Plugin

#include "ellipseplugin.h" #include "ellipseitem.h" void EllipsePlugin::registerTypes(const char *uri) { qmlRegisterType<EllipseItem>(uri, 9, 0, "Ellipse"); }

Register the custom type using the uri supplied

the same custom type we started with

Plug-ins

66/74

Integrating QML with C++

Building an Extension Plugin

TEMPLATE CONFIG QT HEADERS = lib += qt plugin += quick += ellipseitem.h \ ellipseplugin.h SOURCES += ellipseitem.cpp \ ellipseplugin.cpp DESTDIR = ../plugins

Ensure that the project is built as a Qt plugin QtQuick module is added to the Qt conguration Plugin is written to a plugins directory

Plug-ins

67/74

Integrating QML with C++

Using an Extension Plugin

To use the plugin with the qmlscene tool:
Write a qmldir le
include a line to describe the plugin stored in the standalone directory

Write a QML le to show the item

ellipse9s.qml

The qmldir le contains a declaration:

plugin ellipseplugin ../plugins

plugin followed by
the plugin name: ellipseplugin the plugin path relative to the qmldir le: ../plugins

Plug-ins

68/74

Integrating QML with C++

Using an Extension Plugin

In the ellipse9s.qml le:
import QtQuick 2.0 Item { width: 300; height: 200 Ellipse { x: 50; y: 50 width: 200; height: 100 } }

Use the custom item directly No need to import any custom modules
qmldir and ellipse9s.qml are in the same project directory Ellipse is automatically imported into the global namespace

Plug-ins

69/74

Integrating QML with C++

Loading an Extension Plugin

To load the plugin in a C++ application:
Locate the plugin
(perhaps scan the les in the plugins directory)

Load the plugin with QPluginLoader

QPluginLoader loader(pluginsDir.absoluteFilePath(fileName));

Cast the plugin object to a QQmlExtensionPlugin

QQmlExtensionPlugin *plugin = qobject_cast<QQmlExtensionPlugin *>(loader.instance());

Register the extension with a URI

if (plugin) plugin->registerTypes("Shapes");

in this example, Shapes is used as a URI

Plug-ins

70/74

Integrating QML with C++

Using an Extension Plugin

In the ellipse9s.qml le:
import QtQuick 2.0 import Shapes 9.0 Item { width: 300; height: 200 Ellipse { x: 50; y: 50 width: 200; height: 100 } }

The Ellipse item is part of the Shapes module A different URI makes a different import necessary; e.g.,
plugin->registerTypes("com.nokia.qt.examples.Shapes");

corresponds to
import com.nokia.qt.examples.Shapes 9.0

Plug-ins

71/74

Integrating QML with C++

Summary of Extension Plugins

Extensions can be compiled as plugins
dene and implement a QQmlExtensionPlugin subclass dene the version of the plugin in the extension build a Qt plugin project with the quick option enabled

Plugins can be loaded by the qmlscene tool

write a qmldir le declare the plugin's name and location relative to the le no need to import the plugin in QML

Plugins can be loaded by C++ applications

use QPluginLoader to load the plugin register the custom types with a specic URI import the same URI and plugin version number in QML

Plug-ins

72/74

Integrating QML with C++

LAB: Chat Program

The handout contains a partial solution

for a small chat program.

One side of the chat will be a server

(using QTcpServer) and the other end connect to it.

The TCP communication is already

implemented in C++
The GUI is implemented in QML Missing: Is the glue which makes the two parts work together. STEPS are available in the le readme.txt.
Lab qml-cpp-integration/lab-tcp-connection .

Plug-ins

73/74

Integrating QML with C++

 Digia Plc. Digia, Qt and the Digia and Qt logos are the registered trademarks of Digia Plc. in Finland and other countries worldwide.

Plug-ins

74/74

Integrating QML with C++