How to remember the previous selected item in this example

raghava.chinnappa

This is the simple ListView Example code. Here I need to achieve Highlight the selected/clicked item and de-select the previous highlighted item.
Can someone help me achieve this. I couldn’t find the way to remember the previously selected item. Will the Javascript help to achieve this?

Thanks in advance
~ Raghava

@import Qt 4.7
Rectangle {
width: 360
height: 640
ListModel{
id: lisModelExample
ListElement{ name: 'Apple'}
ListElement{ name: 'Ball'}
ListElement{ name: 'Cat'}
ListElement{ name: 'Doll'}
}
ListView{
id: listViewExample
width: 360
height: 640
model: lisModelExample
delegate: delegateExample
}
Component{
id: delegateExample
Rectangle{
id: listItem
width: 360
height: 40
MouseArea {
anchors.fill: parent
onClicked: listItem.state == 'highlight' ? listItem.state = "" : listItem.state = 'highlight';
}
states: State {
name: "highlight"
PropertyChanges {
target: listItem
color: "#fbf70a"
}
}
Text{
x: 10
y: 10
text: model.name
}

     }
 }

}@

andre

Why are you creating the highlight like that?

The QML view elements have a build in capability of creating a highlight for the current item. What's more, you are explicitly warned not to store state in a delegate. That is exactly what you are doing.

raghava.chinnappa

Hi Andre,

Do you any link where I can read more about these built-in capabilities in view elements. I couldn't able to find one on documentation.

andre

Well, the "QML ListView Element documentation":http://doc.qt.nokia.com/4.7/qml-listview.html would be a good start. Especially the documentation on members that start with the word "highlight" would be relevant, I'd say.

raghava.chinnappa

Thanks for your input. It helps my requirements.

Kxyu

i don't like built-in highlight. You can do this:

@import Qt 4.7
Rectangle {
width: 360
height: 640
ListModel{
id: lisModelExample
ListElement{ name: 'Apple'}
ListElement{ name: 'Ball'}
ListElement{ name: 'Cat'}
ListElement{ name: 'Doll'}
}
ListView{
id: listViewExample
width: 360
height: 640
model: lisModelExample
delegate: delegateExample
}
Component{
id: delegateExample
Rectangle{
id: listItem
width: 360
height: 40
MouseArea {
anchors.fill: parent
onClicked: listViewExample.currentIndex=index
}
states: State {
name: "highlight"
when:index==listViewExample.currentIndex
PropertyChanges {
target: listItem
color: "#fbf70a"
}
}
Text{
x: 10
y: 10
text: model.name
}

     }
 }

}@

raghava.chinnappa

Kxyu, yeah you're code worked quite well. Thanks for that

Andre, I'm wondering why even after using the "hightlight" property in the ListView didn't work out for me. I just used the sample code and followed the steps as mentioned in the documentation.

@import Qt 4.7
Rectangle {
id: body
width: 360
height: 640

 ListModel{
     id: lisModelExample
     ListElement{ name: 'Apple'}
     ListElement{ name: 'Ball'}
     ListElement{ name: 'Cat'}
     ListElement{ name: 'Doll'}
 }

 ListView{
     id: listViewExample
     width:  360
     height:  640
     model: lisModelExample
     delegate: delegateExample
     highlight: highLightItem
     focus: true
 }

 Component{
     id: delegateExample
     Text{
         id: textLabel
         x: 10
         y: 10
         text:  model.name
     }
 }

 Component {
     id: highLightItem
     Rectangle {
         width: 180; height: 20
         color: "lightsteelblue"; radius: 5
         y: listViewExample.currentItem.y
         Behavior on y {
             SpringAnimation {
                 spring: 3
                 damping: 0.2
             }
         }
     }
 }

}@

raghava.chinnappa

Hmm.. Interesting. If I navigate using Keyboard, the Highlight is working fine. But not with the mouse click on the item.

Added MouseArea in the delegate-item to make it work. Is that right way to do?

@ Component{
id: delegateExample
Text{
id: textLabel
x: 10
y: 10
text: model.name

         MouseArea{
             anchors.fill : parent
             onClicked: {
                 listViewExample.currentIndex = index;
             }
         }
     }
 }

@

mbrasser

[quote author="raghava.chinnappa" date="1294696961"]Added MouseArea in the delegate-item to make it work. Is that right way to do?
[/quote]

Yes, that's correct -- the QML views do not automatically set the currentIndex/currentItem by mouse; it is up to the developer to decide how they want to handle that (unfortunately, this doesn't seem to be well documented at the moment; we'll add additional docs for this moving forward).

Regards,
Michael