Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Qtquick qml : How to seperate Logic from UI in Qtquick UI Application?
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 2.0k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    kalpa93
    wrote on last edited by
    #1

    I am using Qt quick UI Forms.

    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.

    Now, 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.

    1 Reply Last reply
    1
    • p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      @kalpa93

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

      That's not true.

      To separate logic part you can try following 2 ways:

      • Create a separate javascript file and import it in your QML. This js contains all your logic.
      • Create a separate QML component in which individual components have their own logic. Then access this component in your other QML files by its name.

      157

      1 Reply Last reply
      0
      • K Offline
        K Offline
        kalpa93
        wrote on last edited by kalpa93
        #3

        I have solved this problem.
        The Documentation section is here : http://doc.qt.io/qtcreator/creator-quick-ui-forms.html

        To access any object outside the .qml file or ui.qml file in which it is defined in it has to be "exported" like in many other languages.

        All qml files are accessible from other qml files. "Item" qml type properties are accessible by default. Other types and properties must be alias-ed to make it accessible.

        One can also use the "Connection" qml type to add signals and handlers. See the documentation here : http://doc.qt.io/qt-5/qtqml-syntax-signals.html

        Qt has excellent documentation but alas one must persevere through them. Qt 5.7 qml videos are rare.
        I wish someone could make qt 5.7 qml videos in the near future.

        Thanks.

        Here's how the above code works.

        //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' 
            } 
            //}
        }
        
        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved