Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] Sucessive events
Forum Updated to NodeBB v4.3 + New Features

[Solved] Sucessive events

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 2 Posters 2.2k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    ReshmaS
    wrote on last edited by
    #1

    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
    
    }
    

    }@

    Reshma

    1 Reply Last reply
    0
    • R Offline
      R Offline
      ReshmaS
      wrote on last edited by
      #2

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

      Reshma

      1 Reply Last reply
      0
      • B Offline
        B Offline
        beemaster
        wrote on last edited by
        #3

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

        ...
        @

        1 Reply Last reply
        0
        • R Offline
          R Offline
          ReshmaS
          wrote on last edited by
          #4

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

          Reshma

          1 Reply Last reply
          0
          • B Offline
            B Offline
            beemaster
            wrote on last edited by
            #5

            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
            
            }
            

            }

            @

            1 Reply Last reply
            0
            • R Offline
              R Offline
              ReshmaS
              wrote on last edited by
              #6

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

              Reshma

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved