Qtquick qml : How to seperate Logic from UI in Qtquick UI Application?

Question

Suppose, I want to seperate Logic code from UI code as myApp.qml and myAppForm.ui.qml.

ui.qml does not support javascript logic, for example,mouse events.

Suppose, the following problem.

//myAppForm.ui.qml
import QtQuick 2.4

Item {

Rectangle {
    id: rectangle1
    color: "#a0ebfb"
    anchors.fill: parent
        MouseArea {
            id: mouse1
            anchors.fill: parent
        }
    }
}

The above is the UI code. I need to separate the logic code as,

//myApp.qml
import QtQuick 2.4

myAppForm {
    mouse1{
        onClicked: { 
            rectangle1.color = 'red' 
        } 
    }
}

Obviously, the above does not work. I am asking how to do something similar.

Thanks.

score 1 · Accepted Answer · answered Sep 13 '16 at 11:05

You can extend the mouse area using alias property. Here is modified code.

//myAppForm.ui.qml
Item {
Property alias rectMouseArea: mouse1
Rectangle {
    id: rectangle1
    color: "#a0ebfb"
    anchors.fill: parent
       MouseArea {
            id: mouse1
            anchors.fill: parent
        }
    }

}

//myApp.qml
import QtQuick 2.4

myAppForm {
   //mouse1{
        rectMouseArea.onClicked: { 
            rectangle1.color = 'red' 
    } 
    //}
}

Qtquick qml : How to seperate Logic from UI in Qtquick UI Application?

1 Answers1