[Solved] Sucessive events

ReshmaS

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 &lt; 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

}

}@

ReshmaS

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

beemaster

You can store previous selected item in a property variable. When new item is clicked, you update previous item:

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

...
@

ReshmaS

I implemented your code but Error i get is TypeError: Result of expression 'previousItem' [undefined] is not an object.

beemaster

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 &lt; 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

}

}

@

ReshmaS

Thank you so much for the code. I appreciate it. You made it work, am super happy!