Calling a function in one qml file which is defined in another qml file.

JennyAug13

I have my function called

secondContractionButtonEndPoints();

inside my button.qml file.

And i want to call this function inside another qml file called Control.qml.

Here is the code present in my Control.qml file.

```

ActionButton {
id: secondContractionButton
iconSource: Theme.icons.secondContraction

                checkable: true
                checked:   contractionModel ? contractionModel.contractionCount === 2 : false
                visible:   contractionModel ? contractionModel.supportedContractionCount === 2 : false

                color: checked ? Theme.palette.success : Theme.palette.button

                onCheckedChanged: {
                    if(contractionModel)
                    {
                        if (checked) {
                            if(contractionModel.contractionCount !== 2)
                                contractionModel.contractionCount = 2;

                                Button.secondContractionButtonEndPoints();
                            }
                            else {
                                if(contractionModel.contractionCount !== 1)
                                    contractionModel.contractionCount = 1;
                            }
                        }
                    }
                }

But when i run the code, it is giving following error called ReferenceError: Button is not defined. How can i call a function defined in another qml file into this qml file.

JennyAug13

Yes, found a way.

Here is the solution.

Control.qml file

signal secondContractionButtonClicked()

                ActionButton {
                    id: secondContractionButton
                    iconSource: Theme.icons.secondContraction

                    checkable: true
                    checked:   contractionModel ? contractionModel.contractionCount === 2 : false
                    visible:   contractionModel ? contractionModel.supportedContractionCount === 2 : false

                    color: checked ? Theme.palette.success : Theme.palette.button

                    onCheckedChanged: {
                        if(contractionModel)
                        {
                            if (checked) {
                                if(contractionModel.contractionCount !== 2)
                                    contractionModel.contractionCount = 2;
                                    secondContractionButtonClicked();
                            }
                            else {
                                if(contractionModel.contractionCount !== 1)
                                    contractionModel.contractionCount = 1;
                            }
                        }
                    }
                }

Inside my Button.qml file

Connections{
        target: contractionPlayer
        onSecondContractionButtonClicked:{
            secondContractionButtonEndPoints();
        }
    }

function secondContractionButtonEndPoints()
    {
       ..........some stuff
    }

ODБOï

Hi @JennyAug13 ,

Button.secondContractionButtonEndPoints();

You can't do this,

if you want to call a function that is defined in a qml component you have to create/instanciate the Component

note : please don't use Button.qml as component name, because in qml there is already a type called Button

//MyFucntionButton.qml

Item{
  function secondContractionButtonEndPoints(){
  console.log("function called")
 }
}

//main.qml
MyFunctionButton{
 id:btn
}
...
Component.onCompleted : btn.secondContractionButtonEndPoints()

You also have possibility to create your function in javascript file and import it to use the functions : http://doc.qt.io/qt-5/qtqml-javascript-imports.html

Singleton may interest you also : https://wiki.qt.io/Qml_Styling

Prajwal

This might help! here