Adding business logic on components in the ui.qml files

Question

I have a QML Quick Form where I have an image and an associated mouse area as follows:

// StatusBarForm.ui.qml
Image {
    id: exitButton
    width: 24
    height: 24
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    source: "images/exit.png"

    MouseArea {
        id: exitButtonMouseArea
        anchors.fill: parent
    }
}

Now, according to the docs I should separate the business logic and the designer created a StatusBar.qml form and I added:

exitButtonMouseArea.onClicked: {
    Qt.quit()
}

Now the thing is I tested it with Qt 5.9 on a mac and it worked (although the Qt creator highlighted the onClicked handler complaining that exitButtonMouseArea identifier was not valid . I also tried exitButton.exitButtonMouseArea.onClicked:

Now I tried it with Qt 5.8 on Linux and the application does not initialize. if I remove the event handler it's fine except of course I cannot interact with the image.

So, my question is how can I provide the business logic outside of the UI file in my case.

EDIT Following @derM answer, I did the following:

// StatusBarForm.ui.qml
Image {
    id: exitButton
    width: 24
    height: 24
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    source: "images/exit.png"    
}

// StatusBar.qml
StatusBarForm {
    property alias exitButton: exitButton

    Image {
        id: exitButton
        MouseArea {
            id: exitButtonMouseArea
            anchors.fill: parent
            onClicked: {
                Qt.quit()
            }
        }
    }
}

While my component initializes, I never get the onClicked event.

Answer 1

The problem is, that you can access objects by their id only within the same file or crawling up in the object tree.

If you read this carefully, you will find, that they don't access the button by it's id , but they export the button as a property

This is done by this line:

property alias button: button

Once exported, you can access it from the outside by using the property name.

---

From the documentation:

The property alias exports the button to the QML code that uses the form. You can use the (Export) button in the Navigator to export an item as a property :

---

In your code this would look like this:

// StatusBarForm.ui.qml

Image {
    id: exitButton
    width: 24
    height: 24
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    source: "images/exit.png"

    // export the MouseArea as a property here
    property alias exitButtonMouseArea: exitButtonMouseArea

    MouseArea {
        id: exitButtonMouseArea
        anchors.fill: parent
    }
}

//main.qml

StatusBarExitForm {
    // access the MouseArea via the property here
    exitButtonMouseArea.onClicked: Qt.quit()
}