[Solved] Sucessive events
-
Hello, I have a program which displays the xml List elements. onClikcing them another small text appears. I want to have tat text only once in the entire window. Ex. if i click on user 1 it should display its contents, on clikcing user 2, user1 should go back to its original state and user2 text should appear.
Alternative idea was to disable the onclick event when the small text is displayed.
Here is my code.
@import QtQuick 1.1
Rectangle{
width:400 height:width function sortModel() { var n; var i; for (n=0; n < listModel.count; n++) for (i=n+1; i < listModel.count; i++) { if (listModel.get(n).id> listModel.get(i).id) { listModel.move(i, n, 1); n=0; } } } function fillListModel() { var n; listModel.clear(); for (n=0; n < xmlModel.count; n++) { listModel.append({"title": xmlModel.get(n).title, "pubDate":xmlModel.get(n).pubDate, "id":xmlModel.get(n).id, "param":xmlModel.get(n).param}) } } XmlListModel { id: xmlModel source:"example_grouping.xml" query: "/rss/channel/item" XmlRole { name: "id"; query: "id/string()" } XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "pubDate"; query: "pubDate/string()" } XmlRole { name: "param"; query: "param/string()" } onStatusChanged: if (status === XmlListModel.Ready) { console.log("xml read: ", count); fillListModel(); sortModel(); } } GridView{ id:lst width: 180; height: 300 model: xmlModel delegate: Text { text:title+ ": " + pubDate+param } visible:false } ListModel { id: listModel } Component { id: sectionHeading Rectangle { width: 50 height:18 color: "lightsteelblue" Text { text: section font.bold: true } } } Component { id: mainDelegate Item { id: shortview property real detailsOpacity : 0 width: 100 height: 20 Text { text:param } MouseArea { anchors.fill: parent onClicked: if(shortview.state === 'Details') shortview.state= 'small' else shortview.state= 'Details' } Item { id: details x: 10; width: 100 height:40 opacity:0 Text { text:title+id+pubDate //nt.bold: true; font.pointSize: 16 } } states: [State { name: "Details" PropertyChanges { target: details; opacity:1;x:35;height:40 } }, State { name: "small" PropertyChanges { target: details; opacity:0;x:25;height:20 } }] transitions: Transition { from: ''; to: "Details"; reversible: true ParallelAnimation { NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" } } }} } ListView{ model:listModel width: 180; height: 300 delegate: mainDelegate section.property: "param" section.criteria: ViewSection.FullString section.delegate: sectionHeading }
}@
-
"Atttached a project file for your ease":http://www.2shared.com/file/prG7QsjQ/xml.html
I appreciate your help. Thanks in advance.
I saw a similar post but could not find a solution yet. I will be more than happy if anybody could help me out with this.
-
You can store previous selected item in a property variable. When new item is clicked, you update previous item:
@
...
property variant previousItem
Component {
id: mainDelegateItem { id: shortview property real detailsOpacity : 0 width: 100 height: 20 Text { text:param } MouseArea { anchors.fill: parent onClicked: { if (previousItem != null && previousItem != shortview) { previousItem.state = 'small' } if(shortview.state === 'Details') shortview.state= 'small' else shortview.state= 'Details' previousItem = shortview } }
...
@ -
Full source:
@import QtQuick 1.1
Rectangle{
width:400 height:width function sortModel() { var n; var i; for (n=0; n < listModel.count; n++) for (i=n+1; i < listModel.count; i++) { if (listModel.get(n).id> listModel.get(i).id) { listModel.move(i, n, 1); n=0; } } } function fillListModel() { var n; listModel.clear(); for (n=0; n < xmlModel.count; n++) { listModel.append({"title": xmlModel.get(n).title, "pubDate":xmlModel.get(n).pubDate, "id":xmlModel.get(n).id, "param":xmlModel.get(n).param}) } } XmlListModel { id: xmlModel source:"example_grouping.xml" query: "/rss/channel/item" XmlRole { name: "id"; query: "id/string()" } XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "pubDate"; query: "pubDate/string()" } XmlRole { name: "param"; query: "param/string()" } onStatusChanged: if (status === XmlListModel.Ready) { console.log("xml read: ", count); fillListModel(); sortModel(); } } GridView{ id:lst width: 180; height: 300 model: xmlModel delegate: Text { text:title+ ": " + pubDate+param } visible:false } ListModel { id: listModel } Component { id: sectionHeading Rectangle { width: 50 height:18 color: "lightsteelblue" Text { text: section font.bold: true } } } property variant previousItem Component { id: mainDelegate Item { id: shortview property real detailsOpacity : 0 width: 100 height: 20 Text { text:param } MouseArea { anchors.fill: parent onClicked: { if (previousItem != null && previousItem != shortview) { previousItem.state = 'small' } if(shortview.state === 'Details') shortview.state= 'small' else shortview.state= 'Details' previousItem = shortview } } Item { id: details x: 10; width: 100 height:40 opacity:0 Text { text:title+id+pubDate //nt.bold: true; font.pointSize: 16 } } states: [State { name: "Details" PropertyChanges { target: details; opacity:1;x:35;height:40 } }, State { name: "small" PropertyChanges { target: details; opacity:0;x:25;height:20 } }] transitions: Transition { from: ''; to: "Details"; reversible: true ParallelAnimation { NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" } } }} } ListView{ model:listModel width: 180; height: 300 delegate: mainDelegate section.property: "param" section.criteria: ViewSection.FullString section.delegate: sectionHeading }
}
@