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