Reading ComboBox currentText from a Button signal handler

[gabor53]

Hi,
I have a ComboBox. The onAccepted handler reads the editText property. I would like to read the editText property from a Button onClicked handler. How can I do that?
My code:
WhatCombo.qml:

import Felgo 3.0
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.12
import "Code.js" as JS
import "Setup.js" as ST

ComboBox {
    id: whatCombo
    height: dp(35)
    width: backgrnd.width / 2.4
    signal sendSigWhat(string szam)

    property string whatValue: ""
    ToolTip.visible: hovered
    ToolTip.text: qsTr("Press Enter when done.")
    ToolTip.timeout: 3000

    editable: true
    textRole: "what"

    //Displaying empty entry area.
    currentIndex: -1

    model: ListModel {
        id: listModel
    }

    delegate: ItemDelegate {
        width: whatCombo.width
        height: whatCombo.height

        //Defines the items in the dropdown list.
        Text {
            id: txt
            leftPadding: 20
            text: model.what
            font.pixelSize: 18
            color: ST.listColor()
            anchors.verticalCenter: parent.verticalCenter
        }
        onClicked: whatCombo.currentIndex = index
        highlighted: whatCombo.highlightedIndex === index
    }

    contentItem: TextInput {
        id: myInput
        leftPadding: 20
        rightPadding: whatCombo.indicator.width + whatCombo.spacing
        font.pixelSize: 18

        text: whatCombo.hovered ? "" : whatCombo.displayText
        color: whatCombo.pressed ? ST.comboPressed1() : ST.comboPressed2()
        verticalAlignment: Text.AlignVCenter
        layer.enabled: true
    }

    //Black X in the TextInput box
    IconButton {
        icon: IconType.close
        anchors.verticalCenter: myInput.verticalCenter
        anchors.right: myInput.right
        color: "black"
        onClicked: {
            myInput.clear()
        }
    }

    background: Rectangle {
        id: rect
        width: backgrnd.width / 2.4
        implicitHeight: 80
        color: ST.editBackground()
        border.color: whatCombo.pressed ? ST.comboPressed1(
                                              ) : ST.comboPressed2()
        border.width: whatCombo.visualFocus ? 2 : 1
        radius: 30
    }

    onAccepted: {
        console.log("Entered onAccepted. CurrentIndex: " + currentIndex)

        if (find(editText) === -1) {
            listModel.append({
                                 "what": editText
                             })

            console.log("editText: " + editText)

            var newItem = editText
            console.log("newItem: ", newItem)

            console.log("whatValue in WhatCombo: ", whatValue)

            JS.dbInsertWhat(newItem)
        }
    }

    //Reading list from db
    Component.onCompleted: {
        JS.dbInit()
        JS.dbGetWhatList()
    }
}

AddToDb.qml:

import QtQuick 2.0
import Felgo 3.0
import QtQuick.LocalStorage 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick 2.9
import "Setup.js" as ST
import "Code.js" as JS
import "ErrorPopup.js" as EP

//Background rectangle.
Rectangle {
    id: backgrnd
    anchors.fill: parent
    color: ST.pageColor()

    property int newID: 22 // JS.getLastID()
    //    Component.onCompleted: newFriendID.text = JS.getLastID() + 1
    //    property Text whatTxt: WhatCombo.currentText
    //Title
    Text {
        id: title
        text: qsTr("Add a Friend to the Database")
        font.bold: true
        font.pointSize: 20
        color: ST.textColor()
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        //        anchors.topMargin: 30
        anchors.topMargin: parent.height * 0.02
    }

    //ID line (ID plus calculated Friend ID)
    Text {
        id: id
        text: qsTr("ID: ")
        anchors.top: title.bottom
        anchors.topMargin: 30
        anchors.left: parent.left
        anchors.leftMargin: 25
        font.bold: true
        font.pointSize: 18
        focus: false
        visible: true
    }

    Text {
        id: newFriendID
        text: newID
        anchors.bottom: id.bottom
        anchors.left: id.right
        anchors.leftMargin: 20
        font.bold: true
        font.pointSize: 18
        color: ST.idColor()
        focus: false
        visible: true
    }

    //Getting the Friend's name.
    AppTextField {
        id: getName
        width: backgrnd.width / 2.4

        height: dp(35)
        placeholderText: "Enter the Friend's name."
        placeholderColor: ST.placeHColor()
        showClearButton: true
        radius: 30
        textColor: ST.txtColor()
        cursorColor: ST.cursorClr()
        font.pixelSize: 15
        anchors.top: id.bottom
        anchors.topMargin: 15
        anchors.left: id.left
        backgroundColor: ST.editBackground()

        selectionColor: ST.selectionColor()
        borderColor: ST.borderClr()
        borderWidth: 2

        onEditingFinished: {
            if (getName.text.length < 2) {
                var popup = EP.createMsg(backgrnd, {
                                             "text": "The Friend's name must be at least 2 characters long."
                                         })
            }
        }
    }

    //What combo instruction
    Text {
        id: comboInstruct
        text: qsTr("What is the Friend?")
        font.pixelSize: 18
        color: ST.placeHColor()
        anchors.top: getName.bottom
        anchors.topMargin: 10
        anchors.left: getName.left
    }

    //Getting What
    Rectangle {
        id: root
        color: ST.rootColor()
        focus: false
        anchors.top: comboInstruct.bottom
        anchors.topMargin: 10
        anchors.left: comboInstruct.left
        WhatCombo {
        }
    }

    //Getting the image.
    AppButton {
        id: button
        anchors.horizontalCenter: imageViewer.horizontalCenter
        anchors.bottom: imageViewer.top
        radius: dp(20)
        text: "Choose Image"

        backgroundColor: button.hovered ? ST.btnHovered1() : ST.btnHovered2()
        onClicked: {
            nativeUtils.displayImagePicker("Choose the Friend's Image")
        }
    }

    //Imageviewer frame
    Rectangle {
        id: imageViewer

        width: parent.width * 0.4
        height: parent.width * 0.4
        anchors.left: getName.right
        anchors.leftMargin: 15
        anchors.top: id.bottom
        border.color: ST.borderClr()
        border.width: dp(2)

        //Enlarge mouse area above image thumbnail.
        MouseArea {
            id: enlarge
            anchors.fill: imageViewer
            enabled: false
            onClicked: {
                PictureViewer.show(app, image.source)
            }

            AppImage {
                id: image

                onStatusChanged: if (image.status == Image.Ready)
                                     enlarge.enabled = true

                anchors.fill: parent
                width: 250
                height: 250
                autoTransform: true
                fillMode: Image.PreserveAspectFit
            }
        }

        Connections {
            target: nativeUtils

            onImagePickerFinished: {
                if (accepted) {
                    var path
                    image.source = path
                    console.log("The path in main.qml: ", path)
                    ImgCoding.code = path //invokes code::setCode()"
                    enlrgIcon.visible = true
                }
            }
        }
        //Enlarge icon in image.
        Image {
            id: enlrgIcon
            source: "qrc:/icons/zoom.png"

            width: dp(40)
            height: dp(20)
            anchors.top: parent.top
            anchors.right: parent.right
            visible: false
        }
    }

    //Submit button
    StyledButton {
        id: submit
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        style: ButtonStyle {
            background: Rectangle {
                implicitHeight: 30
                implicitWidth: 100
                border.width: submit.activeFocus ? 2 : 1
                border.color: ST.borderClr()

                radius: 4
                gradient: Gradient {
                    GradientStop {
                        position: 0
                        color: submit.pressed ? ST.sbmtClr1() : ST.sbmtClr2()
                    }
                    GradientStop {
                        position: 1
                        color: submit.pressed ? ST.presssed1() : ST.pressed2()
                    }
                }

                Label {
                    text: "Submit"
                    anchors.centerIn: parent
                    font.pixelSize: 20
                    color: "#000000"
                }
                visible: true
            }
        }

        onClicked: {
            console.log("submit clicked.")
            //Creating variables for the add function
            var myName = getName.text
            var myImage = ImgCoding.code
            console.log("myID: ", newID) //this is not cool
            console.log("The Friend's name: ", myName)
            console.log("The Friend's image: ", myImage)

            //            JS.dbInsert(newID, myName, myWhat, myImage)
        }
    }
}

Thank you for your help.

[jsulm]

@gabor53 Like

whatCombo.currentText

?

[gabor53]

Hi @jsulm ,
Yes, but for some reason it comes back as undefined.

[jsulm]

@gabor53 I guess because you're doing it in another QML file where whatCombo does not exist

[gabor53]

@jsulm
Is there a way to do it this way or I have to move the ComboBox code into the same file?

[J.Hilk]

@gabor53 your WhatCombo instance has no ID, give it one and you should be able to access the current text like usual

Rectangle {
        id: root
        color: ST.rootColor()
        focus: false
        anchors.top: comboInstruct.bottom
        anchors.topMargin: 10
        anchors.left: comboInstruct.left
        WhatCombo {
              id:whatCombo
        }
    }

The issue is, inside WhatCombo.qml you gave the root element the ID whatCombo. that id is only valid inside WhatCombo.qml and can not be accessed from outside. So you WhatCombo instance has no id -> Failure to access it by it!

[gabor53]

Hi @J.Hilk ,
I tried but it still doesn't work. On the other hand even if I copy whatCombo ComboBox to AddToDb.qml I still can't access currentText.

[gabor53]

@J.Hilk
I think I solved it. After deleting the Rectangle (id: root) it works perfectly.