Custom Component in qml

Question

I am Using custom inputRow and MenuButton is placed Outside component when i try to print value of Val1 and Val2 it gives "ReferenceError: val1 is not defined", how can i access it Outside component.

InputRow {
    name:"Command"
    enabled: true
    filename: "qrc:/AutonomyPlatform/Images/Parameters.svg"
    
    component:  Column {
        spacing: 10
        Row{
            spacing: 50
            
            Text {
                text: "Val1"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
            TextInput {
                id:val1
                width: 5
                text: selectedModel ? "0" : ""
                font.pointSize: 10
                color: Colors.menuBodyTextInput
            }
            
            Text {
                text: "m"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
        }
        Row {
            spacing: 50
            
            Text{
                text: "Val2"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
            
            TextInput {
                id:val2
                width: 5
                text: selectedModel ? "0" : ""
                font.pointSize: 10
                color: Colors.menuBodyTextInput
            }
            
            Text {
                text: "m"
                color: Colors.menuBodyTextNormal
                font.pointSize: 10
            }
        }
    }                    //End of Column
    MenuButton {
        label: "Send"
        buttonHeight: 25
        buttonWidth: 35
        onMenuButtonClicked:
        {
            console.log("VAL1",val1.text)   //ReferenceError: val1 is not defined,
            console.log("VAL2",val2.text)
            console.log("SEND")
            
        }
    }
}

When i put Menubutton inside column component it prints as expected but when its outside component i get ReferenceError as mentioned above

This is because the component is a different variable scope, since it will be created somewhere else (probably a Loader, but it's not clear for me) — Amfasis, Jul 08 '20 at 10:15
If you use some lazy loading like `Loader` the scope is limited to the Components boundaries, there is nothing to do with that. But since QML is declarative language you have to build your apps logic in the declarative way. — folibis, Jul 08 '20 at 10:56

score 0 · Answer 1 · answered Jul 08 '20 at 11:13

0

As I mentioned above that could be done in a declarative style: For example:

Window {
    id: window
    visible: true
    width: 400
    height: 600
    title: qsTr("Test")

    property string str1: ""
    property string str2: ""

    onStr1Changed: printOut();
    onStr2Changed: printOut();

    function printOut()
    {
        console.log(str1, str2);
    }

    ColumnLayout {
        anchors.centerIn: parent
        Loader {
            id: loader1
            sourceComponent: TextInput {
                id: txt1
                text: "xxx"
                Binding {
                    target: window
                    property: "str1"
                    value: txt1.text
                }
            }
        }

        Loader {
            id: loader2
            sourceComponent: TextInput {
                id: txt2
                text: "xxx"
                Binding {
                    target: window
                    property: "str2"
                    value: txt2.text
                }
            }
        }
    }

    Component.onCompleted: {
        loader1.active = true;
        loader2.active = true;
    }
}

answered Jul 08 '20 at 11:13

folibis

12,048
6
54
97

Thanks for the response , i want component to look exactly how i made with multiple Text and Textinput with Menubutton , how can i use loader in that case , i wanted to print value only on SEND button clicked! – Sush Jul 08 '20 at 13:10
This is just an example to illustrate my idea. You can adopt it for your code as you want. – folibis Jul 08 '20 at 14:17
Is there any other way by using get() to access outside component? – Sush Jul 08 '20 at 14:29
what is `get()`? – folibis Jul 08 '20 at 15:00
I was looking at this link https://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html fruitModel.get(0).attributes.get(1).value; // == "green" – Sush Jul 08 '20 at 16:15

score 0 · Answer 2 · answered Jul 09 '20 at 05:48

Got a way to access this :

 InputRow{
       id: userForm
       property var userInput1
       property var userInput2

       component : 
           Column{
...
          TextInput {
                   id:val1
                   text: "777"
                   onTextChanged: userForm.userInput1 = text
                   Component.onCompleted : userForm.userInput1 = text 
               }
           }
MenuButton{
   onClicked : console.log(userForm.userInput1)
}

Custom Component in qml

2 Answers2