[solved] invoke a function defined on ListElement

[muchasuerte]

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 }
    }
}@

[thisisbhaskar]

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

[muchasuerte]

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 }
}

}
@

[thisisbhaskar]

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.

[muchasuerte]

thanks you, I solve my problem.

[thisisbhaskar]

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

[muchasuerte]

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 }
    }
}

@

[njeisecke]

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.

[thisisbhaskar]

Ok great.. VisualItemModel solves the problem :).