MeeGo Qt Components: ContextMenu for a ListView item?

[Kypeli]

I'd like to show a popup menu or dialog when long-pressing on a ListView item, like you can in Symbian and the native apps (read: ones that are written in MeeGo Touch FW) on the N950 (for example Contacts list). I saw that there is a ContextMenu component available in the Qt Components for Harmattan MeeGo and the QmlComponentGallery is using this too (https://qt.gitorious.org/qt-components/qt-components/blobs/master/examples/meego/QmlComponentGallery/qml/DialogPage.qml#line344) but that doesn't seem to do what I'd like to do.

So can I add this kind of popup dialog/menu when I long-press on an item in a ListView?

[mlong]

Sure! In your delegate, create a MouseArea, and use the "onPressAndHold":http://doc.qt.nokia.com/4.7/qml-mousearea.html#onPressAndHold-signal signal. You can then use the coordinates of the mouse press to pop up any kind of item of your choosing.

[Kypeli]

Cool, thanks mlong! This is probably something I can use although the functionality I was looking for is not directly provided by platform components (?). But this should be sufficient! :)

[mlong]

No problem! That's one of the great things about QML is that so often if something's not provided, it's pretty simple and straightforward to accommodate it on your own.

[Reffy]

In contacts, the menu that pops up is the element "Menu". Below is an example of how this could work:

@Page {
id: page1

Button { text: "Press to Open Menu"; anchors.centerIn: parent; onClicked: myMenu.open()}

Menu { id: myMenu; visualParent: pageStack;
MenuLayout {
MenuItem { text: "Example Item"; onClicked: console.log("example clicked")}
}
}
}@

[Kypeli]

Thanks Reffy!

And instead of a Button where I call myMenu.open(), I could call my myMenu.open() in a MouseArea's onPressAndHold signal that is defined for the Item in its delegate? That is what I had in plans :) Then I can also utilize directly from the Delegate its data about which ListView item was actually tapped and pressed on and do my thing based on that.

[Reffy]

Kypeli

Yeah. You use the model's get method to acquire the information. You have to update the index manually by setting the View's current index to index. Code below:

@Page {

Menu { id: myMenu; visualParent: pageStack;
MenuLayout {
MenuItem { text: "Click to Print album name to console"; onClicked: console.log(exampleList.model.get(exampleList.currentIndex).albumName)
}
}

///////////////////////////////////////////////////////////////////////////
XmlListModel {
id: myModel
source: ""
query: "/subsonic-response/directory/child"
namespaceDeclarations: "declare default element namespace 'http://subsonic.org/restapi';"

    XmlRole { name: "albumName"; query: "@title/string()" }

///////////////////////////////////////////////////////////////////////////////

ListView { id: exampleList; model: myModel; delegate:

Rectangle { id: rect1; width: 480; height: 854; MouseArea{ anchors.fill: parent; onPressAndHold:{ exampleList.currentIndex = index; myMenu.open()}}}
}@
}