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

suppose, want seperate logic code ui code myapp.qml , myappform.ui.qml.

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

suppose, 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 ui code. need separate logic code as,

//myapp.qml import qtquick 2.4  myappform {     mouse1{         onclicked: {              rectangle1.color = 'red'          }      } } 

obviously, above not work. asking how similar.

thanks.

you can extend mouse area using alias property. here 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'      }      //} }