Chapter 2: Connecting to C++ Methods and Signals

Files:

• declarative/tutorials/extending/chapter2-methods/app.qml
• declarative/tutorials/extending/chapter2-methods/piechart.cpp
• declarative/tutorials/extending/chapter2-methods/piechart.h
• declarative/tutorials/extending/chapter2-methods/main.cpp
• declarative/tutorials/extending/chapter2-methods/chapter2-methods.pro

Suppose we want PieChart to have a "clearChart()" method that erases the chart and then emits a "chartCleared" signal. Our app.qml would be able to call clearChart() and receive chartCleared() signals like this:

 import Charts 1.0
 import QtQuick 1.0

 Item {
     width: 300; height: 200

     PieChart {
         id: aPieChart
         anchors.centerIn: parent
         width: 100; height: 100
         color: "red"

         onChartCleared: console.log("The chart has been cleared")
     }

     MouseArea {
         anchors.fill: parent
         onClicked: aPieChart.clearChart()
     }

     Text {
         anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
         text: "Click anywhere to clear the chart"
     }
 }

To do this, we add a clearChart() method and a chartCleared() signal to our C++ class:

 class PieChart : public QDeclarativeItem
 {
     ...
 public:
     ...
     Q_INVOKABLE void clearChart();

 signals:
     void chartCleared();
     ...
 };

The use of Q_INVOKABLE makes the clearChart() method available to the Qt Meta-Object system, and in turn, to QML. Note that it could have been declared as as a Qt slot instead of using Q_INVOKABLE, as slots are also callable from QML. Both of these approaches are valid.

The clearChart() method simply changes the color to Qt::transparent, repaints the chart, then emits the chartCleared() signal:

 void PieChart::clearChart()
 {
     setColor(QColor(Qt::transparent));
     update();

     emit chartCleared();
 }

Now when we run the application and click the window, the pie chart disappears, and the application outputs:

 The chart has been cleared

Try out the example yourself with the updated code in Qt's examples/tutorials/extending/chapter2-methods directory.