QML radio button enable disable panel component

[Prasad_Socionext]

Hi

I have a radio button group one radio button for serial panel and other for tcpip panel in the UI_connect_top.qml
serial and tcpip panel are defined in separate qml.files and are used as components in UI_connect_top.qml

I have made property alias for tcip_panel and serial_panel for enable.

when I click on the radio buttons the enable and disable of panels does not work. here is my code

UI_connect_top.qml

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

Item {
id: ui_connect_top_item
width: 1200
height: 800

UI_serial{
//title: qsTr ("Serial ports(%1)").arg(index)
id:panel_serial
y: 0
width: 470
height: 70
anchors.leftMargin: 10
anchors.left: serial_radio.right
serial_en: true
Component.onCompleted: console.log("----Serial Panel populated!")
}

UI_tcp_ip{
//title: qsTr ("Serial ports(%1)").arg(index)
y:86
id:panel_tcpip
anchors.right: parent.right
anchors.rightMargin: 700
anchors.left: tcpip_radio.right
anchors.leftMargin: 10
tcpip_en: false
Component.onCompleted: console.log("----Tcp/ip Panel populated!")
//anchors.left: panel_connect.Right
}

UI_log{
//title: qsTr ("Serial ports(%1)").arg(index)
id:panel_log
y: 0
anchors.right: parent.right
anchors.rightMargin: 5
anchors.left: panel_serial.right
anchors.leftMargin: 10
anchors.top: panel_serial.Bottom;
Component.onCompleted: console.log("----Log Panel populated!")
}

UI_info{
//title: qsTr ("Serial ports(%1)").arg(index)
id:panel_info
x: 515
y: 86
width: 670
height: 270
Component.onCompleted: console.log("----Info Panel populated!")
//anchors.top: panel_log.Bottom;
}

RadioButton {
id: serial_radio
checked: true
y: 30
width: 20
height: 20
text: qsTr("")
anchors.verticalCenterOffset: 5
anchors.verticalCenter: panel_serial.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
onCheckableChanged: checked? panel_serial.serial_en=true:panel_tcpip.tcpip_en=false
}

RadioButton {
id: tcpip_radio
checked: false
y: 150
width: 20
height: 20
text: qsTr("")
anchors.verticalCenterOffset: 10
anchors.verticalCenter: panel_tcpip.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
onCheckableChanged: checked? panel_serial.serial_en=false:panel_tcpip.tcpip_en=true
}
}

UI_serial.qml

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

Item {
id: serial_panel_item
width: 470
height: 70

property alias serial_en: serial_port_group.enabled


GroupBox {
        id: serial_port_group
        x: 0
        y: 0
        width: 470
        height: 70
        clip: true
        enabled: serial_en
        transformOrigin: Item.BottomLeft
        contentHeight: 30
        title: qsTr("Serial ports")

        Switch {
            id: serial_connect_id
            x: 306
            y: -1
            width: 140
            height: 30

            text: checked? qsTr("Connected"):qsTr("Disconnected")
            checked: false
            indicator: Rectangle {
                    implicitWidth: 48
                    implicitHeight: 26
                    x: serial_connect_id.leftPadding
                    y: parent.height / 2 - height / 2
                    radius: 13
                    color: serial_connect_id.checked ? "#00ff00" : "#ff0000"
                    border.color: serial_connect_id.checked ? "#17a81a" : "#cccccc"

                    Rectangle {
                        x: serial_connect_id.checked ? parent.width - width : 0
                        width: 26
                        height: 26
                        radius: 13
                        color: serial_connect_id.down ? "#cccccc" : "#ffffff"
                        border.color: serial_connect_id.checked ? (serial_connect_id.down ? "#17a81a" : "#21be2b") : "#999999"
                    }
                }

            onCheckedChanged:connect_serial_port.callback_connect(serial_port_list_id.currentText,serial_connect_id.text,serial_connect_id.checked)
        }

        Button {
            id: serial_scan_id
            x: 242
            y: -2
            width: 50
            height: 30
            text: qsTr("Scan")
            onClicked: connect_serial_port.scan_for_ports()
        }

        ComboBox {
            id: serial_port_list_id
            x: -5
            y: -2
            model: connect_serial_port.port_list
            width: 235
            height: 30
            currentIndex: -1
            onAccepted: {
                 if (editableCombo.find(currentText) === -1) {
                     model.append({text: editText})
                     currentIndex = editableCombo.find(editText)
                 }
             }

        }
    }

}

UI_tcp_ip.qml

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

    Item {
id: tcpip_panel_item
width: 470
height: 120
property alias tcpip_en: tcpip_port_group.enabled
GroupBox {
        id: tcpip_port_group
        x: 0
        y: 0
        width: 470
        height: 120
        clip: true
        enabled: tcpip_en
        transformOrigin: Item.BottomLeft
        contentHeight: 30
        title: qsTr("TCP/IP client")

        Text {
            id: server_name_txt_id
            x: 0
            y: 10
            width: 100
            height: 30
            text: qsTr("Server name")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignLeft
            font.pixelSize: 12
        }

        TextField {
            id: server_name_id
            x: 106
            y: 10
            text: qsTr("rk2_2018002.eu.socionext.com")
            width: 340
            height: 30
        }

        Text {
            id: server_port_txt_id
            x: 0
            y: 51
            width: 100
            height: 30
            text: qsTr("Server port")
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 12
        }

        TextField {
            id: server_port_id
            x: 106
            y: 50
            width: 192
            height: 30
            text: qsTr("12345")
            horizontalAlignment: Text.AlignHCenter
        }

        Switch {
            id: tcpip_connect_id
            x: 306
            y: 50
            width: 140
            height: 30

            text: checked? qsTr("Connected"):qsTr("Disconnected")
            anchors.right: parent.right
            anchors.rightMargin: -3
            anchors.bottom: parent.bottom
            anchors.bottomMargin: -4
            checked: false
            indicator: Rectangle {
                color: tcpip_connect_id.checked ? "#00ff00" : "#ff0000"
                    implicitWidth: 48
                    implicitHeight: 26
                    radius: 13
                    border.color: tcpip_connect_id.checked ? "#17a81a" : "#cccccc"

                    Rectangle {
                        x: tcpip_connect_id.checked ? parent.width - width : 0
                        width: 26
                        height: 26
                        radius: 13
                        color: tcpip_connect_id.down ? "#cccccc" : "#ffffff"
                        border.color: tcpip_connect_id.checked ? (tcpip_connect_id.down ? "#17a81a" : "#21be2b") : "#999999"
                    }
                }

            onCheckedChanged:tcpip_client.tcpConnect(server_name_id.text,server_port_id.text,tcpip_connect_id.checked);
        }

}
}

[ODБOï]

@Prasad_Socionext hi,

you are doing your conditionnal operations if ''checkableChanged()" signal is emitted, do it on clicked() or onCheckedChanged()

RadioButton {
id: tcpip_radio
checked: false
y: 150
width: 20
height: 20
text: qsTr("")
anchors.verticalCenterOffset: 10
anchors.verticalCenter: panel_tcpip.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
//onCheckableChanged: checked? panel_serial.serial_en=false:panel_tcpip.tcpip_en=true 
onClicked : checked ? panel_serial.serial_en=false : panel_tcpip.tcpip_en=true 
//or onCheckedChanged
}
}

Note : also your conditional function leaves me skeptical, what it must do ?
For now if you check panel_serial.serial_en will be unvisible
if you uncheck panel_tcpip.tcpip_en will be visible
So i don't realy understand this

[Prasad_Socionext]

thanks worked !