How to capture a signal in QML?

Question

How I can send s signal from one qml component to another?

Below is an example:

Rectangle {
    id: main
    width: 360; height: 360
    signal clicked()

    Text {
        id: testStr
        anchors.centerIn: parent
        text: "Hello World"
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: { Qt.quit(); }
    }

    Component.onCompleted: clicked()
    onClicked:  testStr.text = "Demo"
}

How do I capture the signal in other Component?

Solution 1

You should use connect() method of component's signals (signals themselves are objects).

function clickHandler() {
    console.log('main clicked')
}
Component.onCompleted: {
    main.clicked.connect(clickHandler)
}

See http://developer.qt.nokia.com/doc/qt-4.8/qmlevents.html

Solution 2

In the other object, you simply add a on word followed by the signal name. EG:

Rectangle {
  YourQmlObject {
    onClicked: { ... }
  }
}

(clicked is somewhat a confusing signal name because it's common. But if you had called your signal orange, you'd make the binding onOrange:)

Solution 3

you can use QML connection element

 Connections {
 target: yourQmlObject 
 onClicked: foo(...)
 }