QT/QML Business logic separated from the UI - qt

Question

I'm trying to put the business logic in Main.qml and the UI in MainForm.ui.qml but I can't connect both by widget id.
MainForm.ui.qml:
import QtQuick 2.8
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Page {
id: page
header: TabBar { ... }
StackLayout {
id: stack
Pane {
Flow {
TextField {
id: theText
}
property alias sendBtn: sendBtn
Button {
id: sendBtn
}
}
}
}
}
Main.qml:
import QtQuick 2.8
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MainForm {
anchors.fill: parent
sendBtn {
onClicked: backend.sendTextToServer( theText.text )
}
}
}
Qt Creator says : Invalid property name "sendBtn" (M16)
Running failed with the following messages:
QQmlApplicationEngine failed to load component
qrc:/Main.qml:12 Cannot assign to non-existent property "sendBtn"

Answer 1

when you put property alias sendBtn: sendBtn inside Pane is interpreted as being a Pane property so you can not access it that way, it is correct to place it in the context of Page.
import QtQuick 2.8
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Page {
id: page
property alias sendBtn: sendBtn
property alias theText: theText
header: TabBar { ... }
StackLayout {
id: stack
Pane {
Flow {
TextField {
id: theText
}
Button {
id: sendBtn
}
}
}
}
}