[solved] invoke a function defined on ListElement



  • There is a way to invoke a function defined on ListElement from ListView delegate?

    How I can invoke "action" from "ListViewDelegate" ?

    @
    ListModel {
    id: menuModel
    ListElement {
    title: "Item1";
    focus: true
    Keys.onPressed: {
    console.log("ListElement Captured:", event.text);
    }
    function action(){
    console.log("log-2")
    }
    }
    ListElement {
    title: "Item2";
    function action(){
    console.log("log-2")
    }
    }
    }

    ListView {
        id: list1
        orientation: "Horizontal"
        width: menuModel.count * 120
        anchors.centerIn: parent
        model: menuModel
        cacheBuffer: 200
        delegate: ListViewDelegate {}
        focus: true
    
        Behavior on x {
            NumberAnimation { duration: 600; easing.type: Easing.OutQuint }
        }
    }@


  • First thing is that ListElement is not a displayable element, so you don't get keys.onPressed in it.

    And I don't think you can have a function inside ListElement, is it valid syntactically. Don't you get run time error if you do that??
    You can not call these functions as you don't have a way to reference them, ListElement does not have id or something like that..

    what is your use-case, why do you want to do this??



  • I want use a ListView to implement a main menu.

    ListElement is displayable by an ListViewDelegate, but from it I can view only properties like "title".

    I'd like associate an function to every ListElement ad call it from the ListViewDelegate

    es:
    @
    Item {
    id: container
    width: 120 ; height: 120;
    anchors.leftMargin: 20; anchors.rightMargin: 20
    focus: true

    Keys.onPressed: {
        if ( event.key == Qt.Key_Return )
        {
            // can I invoke here a method defined on listElement ?
            event.accepted = true
        }
    }
    
    Text {
        id: label
        width: parent.width
        horizontalAlignment: Text.AlignHCenter
        anchors.top: icon.bottom
        color: Qt.darker("#FFFFFF", 2)
        text: title
        font.pixelSize: 14
        font.bold: true
    }
    
    
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        focus: true
        onClicked: {
            ListView.view.currentIndex = index
            container.forceActiveFocus()
            console.log("onClicked ...")
        }
    }
    
    states: State {
        name: "active"; when: container.activeFocus
        PropertyChanges { target: label; font.pixelSize: 16 }
        PropertyChanges { target: label; color: "#FFFFFF" }
    }
    
    transitions: Transition {
        NumberAnimation { properties: "scale"; duration: 100 }
    }
    

    }
    @



  • No you can not do that..

    One more way you can try is to use VisualItemModel, have a .qml file which defines the component for your delegate of your VisualItemModel and try it out.



  • thanks you, I solve my problem.



  • How did you solve it.. can you post your solution here...



  • Yes, sorry :

    I define IconButton like that
    @
    Item {
    property alias title: label.text
    property string imgFocus: ""
    property string imgNoFocus: ""

    id: container
    width: 120 ; height: 120;
    anchors.leftMargin: 20; anchors.rightMargin: 20
    focus: true
    signal activity
    
    Keys.onPressed: {
        if ( event.key == Qt.Key_Return )
        {
             activity()
             event.accepted = true
        }
        else
            console.log( " onPressed " + event.key + " Qt.Key_Back: " + Qt.Key_Delete + " Qt.Key_0: " + Qt.Key_0);
    
    }
    
    Image { id: icon;
        width: 120;
        height: 120;
        anchors.rightMargin: 0;
        anchors.bottomMargin: 11;
        anchors.fill: parent;
        source: imgNoFocus;
        smooth: true
    }
    
    Text {
        id: label
        width: parent.width
        horizontalAlignment: Text.AlignHCenter
        anchors.top: icon.bottom
        color: Qt.darker("#FFFFFF", 2)
        font.pixelSize: 14
        font.bold: true
    }
    
    
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        focus: true
        onClicked: {
            console.log("onClicked ...")
        }
    }
    
    states: State {
        name: "active"; when: container.activeFocus
        PropertyChanges { target: label; font.pixelSize: 16 }
        PropertyChanges { target: label; color: "#FFFFFF" }
        PropertyChanges { target: icon; source: imgFocus }
    }
    
    transitions: Transition {
        NumberAnimation { properties: "scale"; duration: 100 }
    }
    

    }
    @

    and use it into a VisualItemModel as you suggest :

    @

    VisualItemModel {
        id: mainMenuModel
        IconButton {
            title: "Tv";
            imgFocus: "themes/watch_big.png";
            imgNoFocus: "themes/watch_small.png"
            onActivity: {
                console.log(title)
                list1.model = tvMenuModel
            }
        }
    

    }

    ListView {
        id: list1
        orientation: "Horizontal"
        model: mainMenuModel
        width: model.count * 120
        anchors.centerIn: parent
        cacheBuffer: 200
        focus: true
    
        Behavior on x {
            NumberAnimation { duration: 600; easing.type: Easing.OutQuint }
        }
    }
    

    @



  • ListModel and (I guess) ListElement are somehow special and limited in functionality. See http://bugreports.qt.nokia.com/browse/QTBUG-19763 for a discussion.

    It seems that you currently (Qt Quick < 2.0) should not use ListModel or ListElements for anything else than declaring a data model.



  • Ok great.. VisualItemModel solves the problem :).


Log in to reply
 

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