Event propagation in overlaping "layers"

hyperborean72

Hello Gentlemen,

sorry for the newbie question which might have been already discussed here.
I did not find a proper discussion on this board.

The problem is:
if I have several elements lying on top of one another how I might prohibit event propagation to the "not-top-elements".

I mean that when I click the top element, the onClick event handler for the bottom element is called in addition to the handler for the top element.

How to prohibit such behavior?

Thank you in advance.

vishwajeet

you should look at Qt's Event Filters if that helps

andre

Vishwajeet: that does not help, this is QML we're talking about.

vishwajeet

ohh i am really sorry, i did not read carefully.

shullw

This might not help at all, but I would take a look at setting the z attribute.
@
z: 3
@
for your top most one might help this out. It would set it out atop of the rest. Then if you need a lower one to come up just have your click reset the z value for the underlying layers. Sorry in advance if this totally ridiculous. I am new to all of this as well.

mbrasser

Hi,

Could you post a small QML snippet demonstrating the problem? In general only one handler should be called -- for example in the following code, clicking on the green rectangle should only output the message "clicked green".

@
import QtQuick 1.0

Rectangle {
width: 400; height: 400

MouseArea {
    anchors.fill: parent
    onClicked: console.log("clicked white")
}

Rectangle {
    color: "green"
    width: 100; height: 100
    anchors.centerIn: parent
    MouseArea {
        anchors.fill: parent
        onClicked: console.log("clicked green")
    }
}

}
@

Regards,
Michael

hyperborean72

[quote author="shullw" date="1298912546"]This might not help at all, but I would take a look at setting the z attribute.
@
z: 3
@
for your top most one might help this out. It would set it out atop of the rest. Then if you need a lower one to come up just have your click reset the z value for the underlying layers. Sorry in advance if this totally ridiculous. I am new to all of this as well.[/quote]

Thank you for your wish to help, my dear friend.
Alas, this does not help.

hyperborean72

[quote author="mbrasser" date="1298938937"]Hi,

Could you post a small QML snippet demonstrating the problem? In general only one handler should be called -- for example in the following code, clicking on the green rectangle should only output the message "clicked green".
Michael[/quote]

Hello Michael,
your snippet indeed works fine.

But here is mine (quite complex but I tried to strip it down):

Main scene is quite complex but can be stripped down to the TitleBar (user created) and Item elements. The last one contains instances of different scenes changed by varying their visibility.

@Rectangle {
id: main
width: 360
height: 640

    TitleBar {
        id: titleBar
        height: 42
        opacity: 0
    }

    Item {
        id: scenes
        height: parent.height-titleBar.height            
        LoginScene {
           id: loginScene
        }
        CreateAccountScene {
           id: createAccountScene
       }
       MainScene {
           id: mainScene
       }
       FriendListScene {
          id: friendListScene
       }
   }

}@

TitleBar contains semitransparent drop-down menu (id: dropdownList) which is initially hidden (y is set to -640).
By clicking some control in TitleBar dropdownList moves down:

@Item {
id: titleBar
z: 100
y: 0
property string title
Rectangle {
id: dropdownList
width: parent.width
height: 640
y: -640
opacity: 0.9@

This item (dropdownList) contains list of menu options:

@ListView {
id: dropdownListView
width: parent.width
height: 50 * dropdownListModel.count
model: dropdownListModel
delegate: menuDelegate
highlight: menuHighlighter
focus: true
}@

And surely clicking a menu item “redirects” to some other screen:

@Component {
id: menuDelegate
Item {
height: 50
Text {
text: qsTr(name)
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
dropdownListView.currentIndex = index
dropdownListView.currentItem.focus = true
}
onClicked: redirect(dropdownListView.model.get(index));
}
function redirect(item){
switch(item.name) {
case "Help":
break;
case "Exit":
Qt.quit();
}
}
}
}@

The problem is that whenever I select any option from the drop-down menu, in parallel action on some control on the scene beneath is activated (whichever it is now - Login or FriendList or any).

I would appreciate any help.
And thank you in advance, Michael.

mbrasser

With the above code it does look like the Titlebar (and associated menu) would be below the various scenes. Are you manipulating the z value in any way?

Regardless, there should only be one click handler called -- are you able to reduce this to a runnable example (preferably attached to a bug report on http://bugreports.qt.nokia.com)?

Thanks,
Michael