title: QT5 QML-C++ binding and interaction: what am i doing wrong?
body: <p>I am trying to get how to show C++ variables on a QML window, and also how to hande C++ properties or call C++ functions from there.
  While i'm trying to follow various tutorials (most of them linked in other questions at this site) i can't get it work....</p>
  
  <p>The "big plan" is that i would like to have a class UI_Updater which will expose to the QML all the data i want to show, and have the "real" app working underline (it will gather data using a socket or a serial).</p>
  
  <p>Right now, all i want is to show 3 integers, changing them with a timer and/or by a couple of menu items.
  This is all my code and the errors i get:</p>
  
  <p><strong>ui_updater.h</strong></p>
  
  <pre><code>#ifndef UI_UPDATER_H
  #define UI_UPDATER_H
  
  #include &lt;QObject&gt;
  #include &lt;QtGui&gt;
  
  class UI_Updater : public QObject
  {
      Q_OBJECT
      Q_PROPERTY(int countEjT
                 READ getcountEjT
                 WRITE setcountEjT
                 NOTIFY countEjTChanged
      )
  
      Q_PROPERTY(int countEjF
                 READ getcountEjF
                 WRITE setcountEjF
                 NOTIFY countEjFChanged
      )
  
      Q_PROPERTY(int countEjFNC
                 READ getcountEjFNC
                 WRITE setcountEjFNC
                 NOTIFY countEjFNCChanged
      )
  
  public:
      explicit UI_Updater(QObject *parent = 0);
  
      int getcountEjT();
      int getcountEjF();
      int getcountEjFNC();
      void setcountEjT(int NewVal);
      void setcountEjF(int NewVal);
      void setcountEjFNC(int NewVal);
  
      Q_INVOKABLE void increment(int i);
  
  signals:
      void countEjTChanged();
      void countEjFChanged();
      void countEjFNCChanged();
  
  public slots:
      void testSlot();
  
  private:
      int _countEjT;
      int _countEjF;
      int _countEjFNC;
  
      QTimer *myTimer;
  
      void OnTimeout();
  };
  
  #endif // UI_UPDATER_H
  </code></pre>
  
  <p><strong>ui_updater.cpp</strong></p>
  
  <pre><code>#include "ui_updater.h"
  
  UI_Updater::UI_Updater(QObject *parent) :
      QObject(parent)
  {
      myTimer = new QTimer(this);
      myTimer-&gt;start(1000);
      connect(myTimer, SIGNAL(timeout()), this, SLOT(testSlot()));
  
      _countEjT = _countEjF = _countEjFNC = 0;
      emit countEjTChanged();
      emit countEjFChanged();
      emit countEjFNCChanged();
  
  }
  
  void UI_Updater::setcountEjT(int NewVal)
  {
      _countEjT = NewVal;
      emit countEjTChanged();
  }
  
  void UI_Updater::setcountEjF(int NewVal)
  {
      _countEjF = NewVal;
      emit countEjFChanged();
  }
  
  void UI_Updater::setcountEjFNC(int NewVal)
  {
      _countEjFNC = NewVal;
      emit countEjFNCChanged();
  }
  
  
  int UI_Updater::getcountEjT()
  {
      return _countEjT;
  }
  
  int UI_Updater::getcountEjF()
  {
      return _countEjF;
  }
  
  int UI_Updater::getcountEjFNC()
  {
      return _countEjFNC;
  }
  
  
  void UI_Updater::OnTimeout()
  {
      increment(0);
  }
  
  void UI_Updater::increment(int i)
  {
      if (i==0) {
          ++_countEjT;
      }else{
          _countEjT+=i;
      }
      emit countEjTChanged();
  
      if (_countEjT%2 == 0) {
          ++_countEjF;
          emit countEjFChanged();
      }
      if (_countEjF%4 == 0) {
          ++_countEjFNC;
          emit countEjFNCChanged();
      }
  
  }
  
  void UI_Updater::testSlot()
  {
      increment(2);
  }
  </code></pre>
  
  <p><strong>main.cpp</strong></p>
  
  <pre><code>#include &lt;QtGui/QGuiApplication&gt;
  #include &lt;QQmlApplicationEngine&gt;
  
  #include &lt;QtQml&gt;
  #include &lt;QtQuick/QQuickView&gt;   // Necessario per QQuickWindow
  
  #include "ui_updater.h"
  
  int main(int argc, char *argv[])
  {
      QGuiApplication app(argc, argv);
  
  
      qmlRegisterType&lt;UI_Updater&gt;("Phase.UI_Updater", 1, 0, "UI_Updater");
      QQmlApplicationEngine engine(QUrl("qrc:/qml/MainForm.qml"));
  
      QObject *topLevel = engine.rootObjects().value(0);
      QQuickWindow *window = qobject_cast&lt;QQuickWindow *&gt;(topLevel);
      if ( !window ) {
          qWarning("Error: Your root item has to be a Window.");
          return -1;
      }
      window-&gt;show(); // Evita di dover settare visible: true nel file qml
      return app.exec();
  }
  </code></pre>
  
  <p>The QML windows is meant to have multiple pages. I'll copy the code only of the relevant one:</p>
  
  <p><strong>MainForm.qml</strong></p>
  
  <pre><code>import QtQuick 2.1
  import QtQuick.Controls 1.0
  import QtQuick.Window 2.1
  import Phase.UI_Updater 1.0
  
  ApplicationWindow {
      id: screen
      width: 480
      height: 272
      //toolBar: {
  
      //}
      property int partition: height / 3
  
      title: qsTr("Main Screen")
  
      menuBar: MenuBar {
          Menu {
              title: qsTr("File")
              MenuItem {
                  text: qsTr("Exit")
                  onTriggered: Qt.quit();
              }
          }
          Menu {
              title: qsTr("Pages")
              MenuItem {
                  text: qsTr("Working")
                  onTriggered: currentPage = "pagWorking";
              }
              MenuItem {
                  text: qsTr("Graphics")
                  onTriggered: currentPage = "pagGraphics";
              }
              MenuItem {
                  text: qsTr("Setup")
                  onTriggered: currentPage = "pagSetup";
              }
              // These items should increment the variables....
              MenuItem {
                  text: qsTr("Add One")
                  onTriggered: UI_Updater.countEjT = UI_Updater.countEjT + 1;
              }
              MenuItem {
                  text: qsTr("Increment")
                  onTriggered: UI_Updater.increment(1);
              }
          }
      }
  
      // GESTIONE PAGINE ---------------------------------------------------------
      property variant pagesList: [
          "pagWorking",
          "pagSetup",
          "pagGraphics"
      ];
      property string currentPage: "pagWorking";
  
      Repeater {
          model: pagesList;
          delegate: Loader {
              id: pageLoader
              x: 0
              y: 0
              anchors.rightMargin: 0
              anchors.bottomMargin: 0
              anchors.leftMargin: 0
              anchors.topMargin: 0
              active: false;
              asynchronous: true;
              anchors.fill: parent;
              visible: (currentPage === modelData);
              source: "%1.qml".arg(modelData);
              onVisibleChanged: { loadIfNotLoaded(); }
              Component.onCompleted: { loadIfNotLoaded(); }
  
              function loadIfNotLoaded() {
                  // Carica la pagina la prima volta che ce n'è bisogno
                  if (visible &amp;&amp; !active) {
                      active = true;
                  }
              }
          }   // Fine Loader
      }
  
      UI_Updater {
          countEjT: 0;
          countEjF: 0;
          countEjFNC: 0;
      }
  
      // Fine GESTIONE PAGINE ------------------------------------------------
  }
  </code></pre>
  
  <p><strong>pagWorking.qml</strong></p>
  
  <pre><code>import QtQuick 2.0
  import QtQuick.Controls 1.0
  import Phase.UI_Updater 1.0
  
  Rectangle {
      id: pagBackground
      width: 400
      height: 250
      gradient: Gradient {
          GradientStop {
              position: 0
              color: "#010036"
          }
  
          GradientStop {
              position: 1
              color: "#08006b"
          }
      }
  
      Label {
          id: lPagTitle
          x: 0
          width: parent.width
          height: 20
          color: "#0e909c"
          text: "Working"
          font.bold: true
          font.pointSize: 12
          verticalAlignment: Text.AlignVCenter
          horizontalAlignment: Text.AlignHCenter
          anchors.top: parent.top
          anchors.topMargin: 0
      }
  
      GroupBox {
          id: group_box1
          x: 133
          width: 120
          height: 100
          anchors.top: parent.top
          anchors.topMargin: 20
          anchors.horizontalCenter: parent.horizontalCenter
  
          Text {
              id: tTachimetro
              x: 162
              y: 50
              width: 100
              height: 30
              color: "#d0d0ff"
              text: qsTr("000.0°")
              anchors.verticalCenterOffset: 5
              anchors.verticalCenter: parent.verticalCenter
              font.bold: true
              style: Text.Normal
              verticalAlignment: Text.AlignVCenter
              font.pixelSize: 25
              anchors.horizontalCenter: parent.horizontalCenter
              horizontalAlignment: Text.AlignHCenter
          }
  
          Text {
              id: labTach
              x: 149
              y: 30
              width: 100
              height: 20
              color: "#a0a0ff"
              text: qsTr("Position")
              anchors.verticalCenterOffset: -20
              anchors.verticalCenter: parent.verticalCenter
              anchors.horizontalCenterOffset: 0
              verticalAlignment: Text.AlignVCenter
              font.pixelSize: 15
              anchors.horizontalCenter: parent.horizontalCenter
              horizontalAlignment: Text.AlignHCenter
          }
      }
  
      GroupBox {
          id: group_box2
          x: 204
          width: 200
          height: 74
          anchors.horizontalCenterOffset: 100
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.top: parent.top
          anchors.topMargin: 120
  
          Text {
              id: tET
              x: 147
              y: 0
              width: 110
              height: 20
              color: "#ff8000"
              text: UI_Updater.countEjT.toString();
              anchors.right: parent.right
              anchors.rightMargin: 0
              anchors.top: parent.top
              anchors.topMargin: 0
              font.bold: true
              style: Text.Normal
              verticalAlignment: Text.AlignVCenter
              font.pixelSize: 16
              horizontalAlignment: Text.AlignRight
          }
  
          Text {
              id: labET
              x: 11
              width: 70
              height: 20
              color: "#a0a0ff"
              text: qsTr("Ej T")
              anchors.top: parent.top
              anchors.topMargin: 0
              anchors.right: parent.right
              anchors.rightMargin: 110
              verticalAlignment: Text.AlignVCenter
              font.pixelSize: 16
              horizontalAlignment: Text.AlignRight
          }
  
  
          Text {
              id: tEF
              x: 130
              y: 21
              width: 110
              height: 20
              color: "#ff8000"
              text: UI_Updater.countEjF.toString();
              anchors.top: parent.top
              font.bold: true
              font.pixelSize: 16
              verticalAlignment: Text.AlignVCenter
              style: Text.Normal
              anchors.rightMargin: 0
              anchors.right: parent.right
              anchors.topMargin: 21
              horizontalAlignment: Text.AlignRight
          }
          Text {
              id: labEF
              x: 60
              y: 21
              width: 70
              height: 20
              color: "#a0a0ff"
              text: qsTr("Ej F")
              anchors.top: parent.top
              font.pixelSize: 16
              verticalAlignment: Text.AlignVCenter
              anchors.rightMargin: 110
              anchors.right: parent.right
              anchors.topMargin: 21
              horizontalAlignment: Text.AlignRight
          }
  
          Text {
              id: tENCF
              x: 130
              y: 40
              width: 110
              height: 20
              color: "#ff8000"
              text: UI_Updater.countEjFNC.toString();
              anchors.top: parent.top
              font.bold: true
              anchors.rightMargin: 0
              style: Text.Outline
              verticalAlignment: Text.AlignVCenter
              font.pixelSize: 16
              anchors.right: parent.right
              anchors.topMargin: 42
              horizontalAlignment: Text.AlignRight
          }
  
          Text {
              id: labENCF
              x: 60
              y: 40
              width: 70
              height: 20
              color: "#a0a0ff"
              text: qsTr("Ej FNC")
              anchors.top: parent.top
              anchors.rightMargin: 110
              verticalAlignment: Text.AlignVCenter
              font.pixelSize: 16
              anchors.right: parent.right
              anchors.topMargin: 42
              horizontalAlignment: Text.AlignRight
          }
      }
  
      property bool shown: false;
  
      state: "NASCOSTO";
  
      onVisibleChanged:  {
          if (visible === false)
              pagBackground.state = "NASCOSTO"
          else if (visible === true)
              pagBackground.state = "VISIBILE"
      }
      states: [
          State {
              name: "VISIBILE"
              PropertyChanges { target: pagBackground; opacity: 1 }
          }
          ,
          State {
              name: "NASCOSTO"
              PropertyChanges { target: pagBackground; opacity: 0 }
          }
      ]
      //! [states]
  
      //! [transitions]
          transitions: [
              Transition {
                  to: "NASCOSTO"
                  NumberAnimation { properties: "opacity"; duration: 1500; easing.type: Easing.OutExpo }
              }
              ,
              Transition {
                  to: "VISIBILE"
                  NumberAnimation { properties: "opacity"; duration: 1500; easing.type: Easing.OutExpo }
              }
  
          ]
      //! [transitions]
  }
  </code></pre>
  
  <p>Now, it builds, but when i run i get:</p>
  
  <p><strong>TypeError: Cannot call method 'toString' to undefned</strong></p>
  
  <p>and clicking on the menu item "Increment i get</p>
  
  <p><strong>TypeError: object [object Object] has no method 'increment'</strong></p>
  
  <p>Now seems to me that my object UI_Updater was'nt really istanciated.... even if the editor sees it.</p>
  
  <p>What should i do?</p>
  
  <p>Thanks</p>