How to buid "Mouse click event" on the ListElement, ListView, ListModel

Dang Vu

Good evening every one! I'm Vu and I'm VietNammese. I'm newbie only, i learning QML languages and i hope you help me to solve my problem.
Today i read a topic which talks about" SmartHome" wrote by BasysKom( the link in below)

http://share.basyskom.com/demos/smarthome_src.tar.gz

To run the program, you must to coppy folder" qml" from folder smarthome to folder which it's made after you build by QT, in my computer folder name"

build-smarthome-Desktop_Qt_5_7_0_GCC_64bit-Debug"

In case, i don't know how to change icon property of"ListElement", when Click on ListElement, QML will call C++ function And C++ function will call back QML to change ListElement icon turns light or turns off, code about ListElement:

Item {
    id: turnLight
    property alias lightModel: light
    property alias heatingModel: heating
    property alias blindModel: blind
    property alias windowModel: window


    /**
    * A model for all lights in the house that can be controlled
    */
    ListModel {
        id: light
        
        ListElement {
            name: "Bedroom"
            iconOn: "pics/icons/light_on.png"
            iconOff: "pics/icons/light_off.png"
            on: true
            startTimeHours: 7
            endTimeHours: 14
            startTimeMinutes: 00
            endTimeMinutes: 45
            lowestLux1: 50
          

        }

        ListElement {
            name: "Hall"
            iconOn: "pics/icons/light_on.png"
            iconOff: "pics/icons/light_off.png"
            on: false
            startTimeHours: 7
            endTimeHours: 8
            startTimeMinutes: 00
            endTimeMinutes: 45
            lowestLux: 50
        }



        ListElement {
            name: "Bathroom"
            iconOn: "pics/icons/light_on.png"
            iconOff: "pics/icons/light_off.png"
            on: false
            startTimeHours: 6
            endTimeHours: 18
            startTimeMinutes: 00
            endTimeMinutes: 45
            lowestLux: 4
        }
    }

my pictuture example:

http://s44.photobucket.com/user/VuDang2/media/Screenshot%20from%202017-02-18%2022-51-11_zpsbxcd0crh.png.html

when i click to the" Bedroom" which i want to turns off icon!
when i click to the" Hall" which i want to turns on icon! thanks for read!

dheerendra

Do you want to replace this item iconOn: "pics/icons/light_on.png" ?

You can look at Qt Documentation ListModel setProperty function. It can be something like following

light.setProperty(1,"iconOn","pics/icons/light_on.png")

Dang Vu

@dheerendra said in How to change a Icon of ListView, ListModel?:

light.setProperty(1,"iconOn","pics/icons/light_on.png")

thanks for your reply, it's good working....Beside i want to click on the ListElemt which it's will call C++ function( simily "onClick" of "MouseArea"). The focus of the article about" how to buid "Mouse click event" on the ListElement, ListView! Thanks

p3c0

@Dang-Vu ListElement is part of model. Models just hold the data. Thus it does not deal with such events. It can only be done in delegates. So you need to add a MouseArea inside your delegate and capture mouse click events.

dheerendra

In addition to prevpost list model is non visual entity. So mousearea is applicable to visual entity. So as suggested by previous post work with delegates to make your use cas work

Dang Vu

@p3c0 it's you means like here:

  ListModel {
        id: light
        
        ListElement {
            name: "Bedroom"
            iconOn: "pics/icons/light_on.png"
            iconOff: "pics/icons/light_off.png"
            on: true
            startTimeHours: 7
            endTimeHours: 14
            startTimeMinutes: 00
            endTimeMinutes: 45
            lowestLux1: 50
          


            delegate: Component
                    {
                        Rectangle
                        {
                           x: 350
                           y: 350
                           width: 100
                           height: 50
                           Text { text: name ; anchors.centerIn: parent }

                           MouseArea
                           {
                              anchors.fill: parent
                              onClicked: console.log("sadfasd")
                           }
                        }
                    }

        }
}

But i encountered error:

ListElement: cannot contain nested elements 
                 delegate: Component 
                           ^

you can help me fix it?

dheerendra

Delegate is not a property of listmodel. Move the delegate code to listview. Please look at list view documentation. It has nIce example of how do u associate listview, model and delegate. That example should help you on where to place delegate.