[Qt-qml] Problems with signals and signal handlers

[simo.bergman at nokia.com]

Hi,

I try to learn QML doing some very simple UI elements. Currently, I'm trying to learn, how to deal with signal and signal handlers. So, I wrote following a code:

Rectangle {
    id: textField
    property alias labelText: label.text
    //property string labelText: "label"
    width: 640
    height: 50
    color: "lightblue"
    border.color: "lightblue"
    radius: 5
    Text {
        id: label
        text: "label"
        font.bold: true; font.pointSize: 10
        anchors.left: parent.left; anchors.leftMargin: 5
        anchors.top: parent.top; anchors.topMargin: 5
    }
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: { console.log("mouse entered"); parent.focusGained() }
        onExited:  { console.log("mouse exited"); parent.focusRemoved() }
        onClicked: { console.log("mouse button clicked"); parent.textFieldClicked() }
    }
    signal textFieldClicked()
    onTextFieldClicked: {
        console.log("Got textFieldClicked")
        color = "red"
    }
    signal focusRemoved()
    onFocusRemoved:{
        console.log("Got removed")
        color = "lightblue"
        }
    signal focusGained()
    onFocusGained:{
        console.log("Got focusGained")
        color = "white"
        }
}

And somehow there is no logic, how my signal handlers are called with this code. E.g. when I move my mouse out from the rectangle, I get onExit to the MouseArea, but focusGained signal handler is called. I would of course expect onFocusRemoved to be called.

If I change my code to look like this:

Rectangle {

    id: textField

    //property alias labelText: label.text

    property string labelText: "label"

    width: 640

    height: 50

    color: "lightblue"

    border.color: "lightblue"

    radius: 5

    Text {

        id: label

        text: parent.labelText

        font.bold: true; font.pointSize: 10

        anchors.left: parent.left; anchors.leftMargin: 5

        anchors.top: parent.top; anchors.topMargin: 5

    }

    MouseArea {

        anchors.fill: parent

        hoverEnabled: true

        onEntered: { console.log("mouse entered"); parent.focusGained() }

        onExited:  { console.log("mouse exited"); parent.focusRemoved() }

        onClicked: { console.log("mouse button clicked"); parent.textFieldClicked() }

    }

    signal textFieldClicked()

    onTextFieldClicked: {

        console.log("Got textFieldClicked")

        color = "red"

    }

    signal focusRemoved()

    onFocusRemoved:{

        console.log("Got removed")

        color = "lightblue"

        }

    signal focusGained()

    onFocusGained:{

        console.log("Got focusGained")

        color = "white"

        }

}

Everything seems to work quite ok.
So it seems to be that property alias somehow causes unexpected signal handlers to be called.
(Row: property alias labelText: label.text)

Is this an issue with the QML or am  I doing something wrong here?
I'm using the latest Qt SDK on windows. (The Qt web pages talks Qt 4.7.1 but according to the SDK files it is Qt 4.7 SDK.)

Thanks for your help
-Simo

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20101125/88f5634e/attachment.html