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

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



  • 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)



  • 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 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"
     }
    }
    


  • 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"
            }
    ...
    


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



  • 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!



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


Log in to reply