RadioButtons with TextSwitch and Signal/Slot

[KeineAhnung]

Hi there,

I am writing an App for Sailfish OS. Currently radio buttons are not available and I hope to rebuild their functionality with TextSwitches and signals but I am doing something wrong.

SilicaListView {
        width: parent.width
        height: parent.height - header.height
        anchors.top: header.bottom
        spacing: Theme.paddingLarge
        VerticalScrollDecorator {}
 
        model: playlistModel
 
        delegate: ListItem {
            height: 50
            width:  parent.width
 
            TextSwitch {
                id: playlistSwitch
                property string tempUrl: url
 
                signal gotChecked (string plName)
 
                text: playlistName
                onCheckedChanged: {
                    if(checked){
                        m_url = tempUrl
                        m_playlistName = text
                        gotChecked(playlistName)
                    }else{
                        tempUrl = ""
                        m_playlistName = ""
                    }
                }
                onGotChecked: {
                    if(plName !== text)
                        checked = false
                }
            }
        }
    }

SilicaListView {
        width: parent.width
        height: parent.height - header.height
        anchors.top: header.bottom
        spacing: Theme.paddingLarge
        VerticalScrollDecorator {}

        model: playlistModel

        delegate: ListItem {
            height: 50
            width:  parent.width

            TextSwitch {
                id: playlistSwitch
                property string tempUrl: url

                signal gotChecked (string plName)

                text: playlistName
                onCheckedChanged: {
                    if(checked){
                        m_url = tempUrl
                        m_playlistName = text
                        gotChecked(playlistName)
                    }else{
                        tempUrl = ""
                        m_playlistName = ""
                    }
                }
                onGotChecked: {
                    if(plName !== text)
                        checked = false
                }
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

It looks like the signal is emitted but only heard within the TextSwitch that send the signal. How can I get the other TextSwitches within my listview to listen?

Thanks

[anda_skoa]

You are only using the signal locally, within one instance.

Put the signal into the list view or a any other object addressable from the delegates or use a property in that object, e.g. a "current item/index" indicator.

Cheers,
_

[KeineAhnung]

I already tried that. If I put the signal gotChecked (string plName) directly under ListView nothing happens. I think the signal is not emitted. Also if I type onGo Qt Creator does not autocomplete for me. Did I declare the signals wrong?

Thanks for helping!

[anda_skoa]

Not sure what you mean with not emitted, in JavaScript a signal is called like a function, see your current code.

To react to a signal outside the current instance you can use a Connections element:

ListView {
    id: view
    signal gotChecked(string name);
 
    delegate: Switch {
        Connections {
            target: view
            onGotChecked: ....
        }
    }
}

ListView {
    id: view
    signal gotChecked(string name);

    delegate: Switch {
        Connections {
            target: view
            onGotChecked: ....
        }
    }
}

To copy to clipboard, switch view to plain text mode 

But a "current selected index" property of some kind would likely be way more declarative

Cheers,
_

[KeineAhnung]

Hi _,

I tried your code but got a ReferenceError: gotChecked is not defined

I have no clue what you mean by current selected index. Does a ListView always have an index?

[wysota]

If you want a list of items where only one item can be selected then the usual approach is to keep the index of the selected item in the view and update that index from within an item:

ListView {
  id: view
  model: ...
  property int selected: -1
 
  delegate: Rectangle {
    id: delegateRoot
    width: view.width
    height: 50
    color: index === view.selected ? "red" : "white"
    MouseArea {
      anchors.fill:parent
      onClicked: view.selected = delegateRoot.index
    }
  }
}

ListView {
  id: view
  model: ...
  property int selected: -1

  delegate: Rectangle {
    id: delegateRoot
    width: view.width
    height: 50
    color: index === view.selected ? "red" : "white"
    MouseArea {
      anchors.fill:parent
      onClicked: view.selected = delegateRoot.index
    }
  }
}

To copy to clipboard, switch view to plain text mode 

[KeineAhnung]

Thanks for the time you spent helping!
I tried your approach but I get stuck at line 13. Error: Cannot assign [undefined] to int
The index is a number I logged that so I really do not understand why this does not run...

[edit]
Sorry index is undefined!

[wysota]

If it doesn't work directly then first assign index to a local property and then use that in the mouse area.

Rectangle {
  id: delegateRoot
  property int myIndex: index
  MouseArea {
    onClicked: view.selected = delegateRoot.myIndex
  }
}

Rectangle {
  id: delegateRoot
  property int myIndex: index
  MouseArea {
    onClicked: view.selected = delegateRoot.myIndex
  }
}

To copy to clipboard, switch view to plain text mode 

[KeineAhnung]

Hello wysota,

thanks again for helping me out! I finally got it working. The problem was not assigning the index but binding the TextSwitch checked property to the selected index. Here is my final working code:

SilicaListView {
        id: myListView
        width: parent.width
        height: parent.height - header.height
        anchors.top: header.bottom
        spacing: Theme.paddingLarge
        VerticalScrollDecorator {}
 
        model: playlistModel
 
        property int selected: -1
 
        delegate: TextSwitch {
            id: playlistSwitch
            height: 50
            width:  parent.width
            property string tempUrl: url.slice(7)
            property bool isChecked: (index === myListView.selected? playlistSwitch.checked = true:playlistSwitch.checked = false)
 
            text: playlistName
 
            onClicked: {
                if(playlistSwitch.checked){
                    m_url = tempUrl
                    m_playlistName = playlistName
                    myListView.selected = index
                }else{
                    tempUrl = ""
                    m_playlistName = ""
                }
            }
        }
    }

SilicaListView {
        id: myListView
        width: parent.width
        height: parent.height - header.height
        anchors.top: header.bottom
        spacing: Theme.paddingLarge
        VerticalScrollDecorator {}

        model: playlistModel

        property int selected: -1

        delegate: TextSwitch {
            id: playlistSwitch
            height: 50
            width:  parent.width
            property string tempUrl: url.slice(7)
            property bool isChecked: (index === myListView.selected? playlistSwitch.checked = true:playlistSwitch.checked = false)

            text: playlistName

            onClicked: {
                if(playlistSwitch.checked){
                    m_url = tempUrl
                    m_playlistName = playlistName
                    myListView.selected = index
                }else{
                    tempUrl = ""
                    m_playlistName = ""
                }
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

I tried your code but got a ReferenceError: gotChecked is not defined

The solution with the property is way better, but for future reference: did you specifiy the view's id when "emitted/called" the signal?

view.gotChecked(...);

view.gotChecked(...);

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[KeineAhnung]

Yes, I think I tried all combinations of positioning the code and adding ids.