Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Custom QML Button Template: inheriting JS function when clicked. How?



  • Hello all!
    I am developing template button something like this:

    Item {
    
        property string iconSource: "qrc:/images/icons/noIcon.svg";
        **
        **property var onClickedFunction: {some functions on JS}**
        **
    
        signal clicked;
    
        id: root;
    
        Rectangle {
    
            id: background;
            color: "white";
            anchors.verticalCenter: root.verticalCenter;
            anchors.right: root.right;
        }
    
        Image {
    
            property real size: background.height * 0.55;
    
            id: icon;
            source: root.iconSource;
            anchors.verticalCenter: background.verticalCenter;
            anchors.right: background.right;
            anchors.rightMargin: background.radius * 1.7;
        }
    
        MouseArea {
    
            function buttonOnReleased() {
                console.log("OnReleased")
            }
    
            id: mouseArea;
            anchors.fill: parent;
            onPressed: {
                 console.log("OnPressed")
            }
            onReleased: {
                console.log("OnReleased")
            }
            onCanceled: {
                console.log("OnCanceled");
            }
            onClicked: {
                **
                **root.onClickedFunction();**
                **
                root.clicked();
            }
        }
    }
    

    The question is - how to add function to the root component (in this case Item) that will be performed like a part of onClicked() that is called from MouseArea component??? And add this function from the Custom Button component that going to be based on this template???



  • Solution found.
    The custom button component should have the function that will be called from template. In the template it's only mentioning like stub (something that will not affect whole application - might be log-message). If you will not be defining this function in custom component, the default function will be performed.

    CustomButton.qml

    CustomButton {
    	function fOnClicked() {
    		console.log("CustomButton: fOnClicked");
    	}
    }
    

    ButttomTemplate.qml

    Item {
    	id: root;
    
    	function fOnClicked() {
    		console.log("Root/Default: fOnClicked");
    	}
    	...
    	MouseArea {
    		id: mouseArea;
    		...
    		onClicked: {
    			...
    			fOnClicked();
    			...
    		}
    	}
    }
    


  • Hi @bogong , i dont know why you are using JS function,but there is also something called as signals in QML.

    Here is a sample code,please have a look:-

    CustomButton.qml

    Rectangle {
    id: root
    
    anchors.fill: parent
    color: "grey"
    
    signal buttonClicked();
    
    MouseArea {
        anchors.fill: parent
    
        onClicked: {
            root.buttonClicked()
        }
      }
    }
    

    main.qml

    CustomButton {
        anchors.fill: parent
    
        onButtonClicked: {
            console.log("Clicked")
        }
    }

Log in to reply