MeeGo Qt Components: ContextMenu for a ListView item?



  • 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?


  • Moderators

    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.



  • 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! :)


  • Moderators

    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.



  • 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")}
    }
    }
    }@



  • 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.



  • 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()}}}
    }@
    }


Log in to reply
 

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