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.

score 3 · Accepted Answer · edited Feb 01 '22 at 18:46

3

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:
_{(source: doc.qt.io)}

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()
}

edited Feb 01 '22 at 18:46

Glorfindel

21,988
13
81
109

answered Jul 17 '17 at 12:13

derM - not here for BOT dreams

13,081
4
49
89

Thanks for your answer. Please see my edit. I am not sure what I have missed. The issue is that the event I am trying is on a MouseArea of the Image object. – Luca Jul 17 '17 at 13:13
I think in your edit, you messed it up some more. You can/should add the `MouseArea` in the form. You export it in the form as a property. When you instantiate/use the form, you can handle the signal by accessing the `MouseArea` through the affore created property. – derM - not here for BOT dreams Jul 17 '17 at 13:33
Ok, I got it. The thing is that the export had to be done at the top level level so not inside the `Image` component but outside it. Thanks for your help! – Luca Jul 17 '17 at 13:43
1

Yeah, you can/should always only access properties of the root node of a component. – derM - not here for BOT dreams Jul 17 '17 at 13:45

Adding business logic on components in the ui.qml files

1 Answers1

Linked