QT/QML Business logic separated from the UI

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"

score 1 · Accepted Answer · edited Nov 05 '17 at 18:41

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

QT/QML Business logic separated from the UI

1 Answers1