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

    }@



  • "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: 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
                }
            }
    

    ...
    @



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



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

    }

    @



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


Log in to reply
 

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