Functions are not supported in a qt quick ui form (take 2)

Jensa

Hi all,
I'm quite new to Qt, developing a simple UI for a microcontroller project. I want elements in my QML to trigger actions in the C++ part of my application (for Serial Communication). The core application is working well, but my main problem that the Qt Quick documentation is confusing.

This help page on using Javascript in QML is clearly mixing functions into the layout code as if that's something one should do. If I do that, I'll get the error:

Functions are not supported in a Qt Quick UI form (M222)

This forum post indicates that one should use a "Code-behind" file that has the same name as the UI file. My problem is that I cannot find any explanation of how to setup and use this code behind file that is actually working.

I try adding a new file to my project using Add New -> Qt -> QML file (Qt Quick 2). I then try setting up aliases manually as in the forum post mentioned above. This is the content of my code-behind file saved as PageOneUI.qml

import QtQuick 2.4
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.1

Item {
    label1 {
        text: "Label text"
    }
}

The alias is setup in the UI file PageOneUI.ui.qml:

import QtQuick 2.4
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.1

Page {
    id: pageOne
    width: 540
    height: 940

    property alias label1: label1
    Label {
        id: label1
    }
}

This will just return the error 'Invalid property name "label1' (M16)" in my PageOneUI.qml and it will not map to the PageOneUI.ui.qml in any way.

I have so many questions here:

Is there a definitive guide to using Qt Quick with separate code-behind files
somewhere?
Do I have to connect/map the .qml file to the .ui.qml file in some way or this based on names?
If this is how it's supposed to be done - is there an example project I can learn from?
Is there a better name for this than "code-behind"-file?

Any pointers in the right direction would be much appreciated!

I'm using Qt Creator 4.13 on OSX with Qt 5.15.0 (Clang 11 (Apple), 64 bit)

Jensa

Oh my. The devil is always in the details...

I should not be using BananaForm in my main.qml. I should be using Banana.qml like this:

main.qml

...
        Banana {
            width: 100
            height: 50
        }
...

The reason is that Banana.qml already includes BananaForm.ui.qml since it is using the BananaForm object as it's root container!

ODБOï

@Jensa hi
add a new QtQuick Ui file to your QtQuick project called "MyUiComponent"
QtCreator will automatically create 2 files MyUiComponent.ui.Qml and MyUiComponent.qml

// MyUiComponent.ui.qml ( edit with designer, no functions)
import QtQuick 2.4

Item {
    width: 400
    height: 400
    property alias myTextElement: element
    Text {
        id: element
        text: qsTr("Text")
        anchors.centerIn: parent
    }
}

//MyUiComponent.qml
MyUiComponentForm {
   myTextElement.text: "Test"
}

// main.qml
Window{
// [EDIT] //MyUiComponentForm{ 
MyUiComponent{
    myTextElement.text: "Something else"
 }
}

Jensa

Thanks for replying @LeLev ! I have tried this, but still cannot get it to work. I added a new QtQuick Ui file as you said. These are my files:

Banana.ui.qml

import QtQuick 2.4
import QtQuick.Controls 2.5

Page {
    width: 400
    height: 400

    property alias myLabelAlias: myLabel
    Label {
        id: myLabel
        width: 100
        height: 50
        font.pixelSize: Qt.application.font.pixelSize * 1
    }
}

Banana.qml

import QtQuick 2.4
import QtQuick.Controls 2.5

BananaForm {
    myLabelAlias.text: "Banana label"
}

main.qml

...
        BananaForm {
            width: 100
            height: 50
        }
...

Unfortunately, this does not change the label. I have included the form in my main form. I occludes another object, so I can see that it renders but the label is not set. If I change the label inside the UI component in Banana.ui.qml, it renders as expected. Setting the text in main.qml (as in the below example) also works as it should, though that's not ideal and also does not follow the documentation linked above.

Any pointers as to what I'm missing here? Why is it only working from main.qml and not the related Banana.qml file?

setting myLabelAlias in main.qml works fine

...
        BananaForm {
            width: 100
            height: 50
            myLabelAlias.text: "Main Banana"
        }
...

ODБOï

@Jensa hi,
sry i made a misstake in my first post, i have corrected,
in your main.qml you should create Banana{} not BananaForm{}

Jensa

Oh my. The devil is always in the details...

I should not be using BananaForm in my main.qml. I should be using Banana.qml like this:

main.qml

...
        Banana {
            width: 100
            height: 50
        }
...

The reason is that Banana.qml already includes BananaForm.ui.qml since it is using the BananaForm object as it's root container!

Jensa

lol. we double-posted :)
I grasped it and wrote just as you posted.
Thanks @LeLev !