@Momo007 I figured out how to add the function in Qt Design Studio. I will explain it for anyone else who ends up here. Apologies in advance if any of this is wrong or bad practice, but there was nothing else to go by.
Say your ui file is Main.ui.qml and it has a button, and you want to trigger a function with the onClick.
Now you need to switch things around because you want this:
MainForm.ui.qml = UI code
Main.qml = Override with anything that can't go in the ui file
Technically the 'MainForm' name can be anything you want except for 'Main' so long as it is referenced by Main, but I think it is a good naming standard for clarity. So the first step is to rename your Main.ui.qml file to MainForm.ui.qml.
Now you need to create a QML file that will hold all your logic. I couldn't find a way to create a blank QML file in desginer really. I suppose I could have gone into the terminal and touched the file. What I did was just use File->New File..->QML Files->listModel. Name it Main.qml. Then when the component editor comes up just delete all the code keeping in mind to leave the import or add any others you need, and add:
MainForm {
id: mainRoot
}
Inside this object is where you put all your functions and any other things that go with the functionality of the UI. Note that you are instantiating the form component with all the real QML and anything you add to here will override that component. Moving along...
Now you need to manually add the onClick handler and the function.
So add the function to your Main component:
MainForm {
id: formMainRoot
function handleClicked() {
console.log("HANDLE CLICKED");
}
}
After I added the function I did not see it in the 'Connections' selection for the button until after I manually edited the button with it, though it may have appeared with time. It did appear after I made the setting in the code, don't know what magic happens in the background.
So you also need to modify the handler in the button manually as below:
Button {
id: button
text: qsTr("Button")
Connections {
target: button
onClicked: formMainRoot.handleClicked()
}
}
This worked for me in the executed version.
My preferred way to do it though will be switched up, because it keeps all the manual editing out of the UI file which is the main intent, I think. To do it this way you need to make the button visible to the parent Main component which will allow it to modify the button.
Select your button in the 2D editor and click on the @ to the right of the id field. This will create an alias at the top of the component, thus making the button visible. I found that I had to do this through the UI rather than adding the alias code or the compile wouldn't work.
Now instead of modifying the MainForm file, just put it all in the Main component:
MainForm {
id: formMainRoot
function handleClicked() {
console.log("HANDLE CLICKED");
}
Connections {
target: button
onClicked: handleClicked()
}
}
I hope this unconfuses some people. I pieced this together through many bits I found on the internet. I do not know why this is not explained anywhere. Obviously you could adapt this to do basically anything you wanted.
It's quite a nice way to separate things, but at a cost of having to flip between two files all the time as well as flipping from 2D to code tabs, to get essentially one thing done.
