MouseArea problem



  • Hi guys. I am learning QML. I wrote some codes but i have a problem.

    I am learing QML Components now. There are qml files below. I create 6 color boxes. I want that, when i click one of color boxes, hello world text's color changed and some animations occur. But i cant do that. MouseArea doesn't work in Colorbox.qml, only MouseArea works in main.qml. Why doesn't it work?

    Colorbox.qml
    @import QtQuick 1.1

    Rectangle {
    id: colorBox
    width: 35
    height: 35
    color: "red"

         property alias cellColor: colorBox.color
    
        //signal clicked(color cellColor)
    
    MouseArea {
        id: colorBoxMouseArea
        anchors.fill: parent
    
            onClicked: {
                console.log(cellColor + " clicked")
            }
    }
    

    }
    @

    main.qml
    @import QtQuick 1.1

    Rectangle {
    id: page
    width: 360
    height: 360
    color: "lightgrey"

    Text {
        id: helloText
        text: qsTr("Hello World")
        anchors.centerIn: parent
        font.pointSize: 24; font.bold: true
        color: "black"
    }
    
    Column {
        y: page.height - 72
        spacing: 2
    
        Row{
            spacing: 2
    
            Colorbox { color: "red" }
            Colorbox { color: "green" }
            Colorbox { color: "blue" }
        }
        Row{
            spacing: 2
    
            Colorbox { color: "yellow" }
            Colorbox { color: "steelblue" }
            Colorbox { color: "black" }
        }
    }
    
    states: State {
        name: "down"; when: colorBoxMouseArea.pressed == true
        PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
    }
    
    transitions: Transition {
        from: ""; to: "down"; reversible: true
            ParallelAnimation {
            NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
            ColorAnimation { duration: 500 }
            }
    }
    
    MouseArea {
        id: mouseArea
        anchors.fill: parent
    
            onClicked: {
                console.log("Main window clicked")
            }
    }
    

    }@


  • Moderators

    colorBoxMouseArea id is not visible in main.qml. Ids are local and do not exceed file bounds.



  • [quote author="sierdzio" date="1354469197"]colorBoxMouseArea id is not visible in main.qml. Ids are local and do not exceed file bounds.[/quote]

    I didnt know that. So is colorBoxMouseArea in main.qml? How can i do that? How can i do global variable?


  • Moderators

    You are creating 6 different colour boxes. How would this global variable work?

    There are many ways to solve this, I don't want to force any on you, nor do I want to interfere with your learning process too much. I'll list some possibilities, you can experiment with them or others. Ask if anything is unclear or you need more help.

    Give a separate id to every Colorbox component in main.qml. Then, in your state handling, refer to those ids (if (childAt(x, y) == idOfTheFirstBox) idOfTheFirstBox.color = Qt.red; etc.)

    Move state handing to the Colorbox.qml component and handle it there - your mouse area's ID will be visible there.

    Use signals and slots to emit a signal from Colorbox.qml into main.qml to indicate which box was interacted with (you would need to add some index property to the colour boxes to keep track).

    Ah, I've missed the mouse area in main.qml. It blocks input to other components, because the event "clicked" is accepted. Either remove the mouse area if you don't need it, or add this line to "onClicked":
    @
    event.accepted = false;
    @

    It will propagate the signal further down the parent-child hierarchy.



  • I did 2 and 3. I am working on 1. I have a question that Should i delete MouseArea in main.qml every examples? I mean, Do developers delete MouseArea to develop games or programs or what do they do?

    [quote author="sierdzio" date="1354475335"]You are creating 6 different colour boxes. How would this global variable work?

    There are many ways to solve this, I don't want to force any on you, nor do I want to interfere with your learning process too much. I'll list some possibilities, you can experiment with them or others. Ask if anything is unclear or you need more help.

    Give a separate id to every Colorbox component in main.qml. Then, in your state handling, refer to those ids (if (childAt(x, y) == idOfTheFirstBox) idOfTheFirstBox.color = Qt.red; etc.)

    Move state handing to the Colorbox.qml component and handle it there - your mouse area's ID will be visible there.

    Use signals and slots to emit a signal from Colorbox.qml into main.qml to indicate which box was interacted with (you would need to add some index property to the colour boxes to keep track).

    Ah, I've missed the mouse area in main.qml. It blocks input to other components, because the event "clicked" is accepted. Either remove the mouse area if you don't need it, or add this line to "onClicked":
    @
    event.accepted = false;
    @

    It will propagate the signal further down the parent-child hierarchy.[/quote]


  • Moderators

    I did not mean to force you into implementing all 3 solutions. But if you are fine with it, so be it.

    About the MouseArea in main - it all depends. Sometimes it is needed, sometimes it is not. It also depends on the programmer. I prefer to place MouseAreas only where I need them, with no or little "global" ones. This is a bit easier to handle in implementation but sometimes results in them overlapping. A global mouse area usually means you need to search children with childAt() and keep adding logic to click handlers, which produces complicated and lengthy code.



  • [quote author="sierdzio" date="1354698146"]I did not mean to force you into implementing all 3 solutions. But if you are fine with it, so be it.

    About the MouseArea in main - it all depends. Sometimes it is needed, sometimes it is not. It also depends on the programmer. I prefer to place MouseAreas only where I need them, with no or little "global" ones. This is a bit easier to handle in implementation but sometimes results in them overlapping. A global mouse area usually means you need to search children with childAt() and keep adding logic to click handlers, which produces complicated and lengthy code.[/quote]

    Thank you sierdzio for help, I understand :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.