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. Access model in another qml component
Forum Updated to NodeBB v4.3 + New Features

Access model in another qml component

Scheduled Pinned Locked Moved QML and Qt Quick
29 Posts 2 Posters 7.1k Views 1 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.
  • M Offline
    M Offline
    morker
    wrote on last edited by
    #5

    I removed the delegate:

    @
    //...
    Repeater {
    id: deviceRepeater
    model: timeslotmodel

                                Button {id: deviceImageButton; anchors.verticalCenter: parent.verticalCenter; iconSource: deviceImage; width: 100; height: 100; onClicked: setVisibleEffect(detailRectangle, deviceItem); style: TimelineDeviceButtonStyle{} }
    
                            }
                        }
                    }
                }
            }
    
            TimelineDeviceDetail {
                id: detailRectangle }
    

    //...
    @

    ... and add the model to my TimelineDeviceDetail view:

    @
    /...
    Text {
    id: euroText
    Component.onCompleted: console.log("euro: " + timeslotmodel.euro)
    text: timeslotmodel.euro
    anchors.top: parent.top
    anchors.topMargin: 20
    anchors.left: parent.left
    anchors.leftMargin: 20
    font.pixelSize: 12
    }

        Text {
            id: kwhText
             Component.onCompleted: console.log("kwh: " + kwh)
            text: timeslotmodel.kwh
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    
        Text {
            id: timeText
            text: timeslotmodel.time
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 20
            font.pixelSize: 12
        }
    

    /...
    @

    Error:

    @
    qrc:///TimelineDeviceDetail.qml:22:19: Unable to assign [undefined] to QString
    @

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

      That was expected as TimelineDeviceDetail wouldn't know which model item to fetch.
      Why not assign TimelineDeviceDetail as a delegate to Repeater ?
      Did you try
      @
      text: model.euro
      @

      as suggested earlier ?

      157

      1 Reply Last reply
      0
      • M Offline
        M Offline
        morker
        wrote on last edited by
        #7

        Same code as in my last post and I add

        @
        delegate: TimelineDeviceDetail {}
        @

        to my repeater.

        I still get the same error

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

          and how TimelineDeviceDetail body looks like now ?

          157

          1 Reply Last reply
          0
          • M Offline
            M Offline
            morker
            wrote on last edited by
            #9

            This is my complete code:

            TimelineVertical:

            @
            import QtQuick 2.0
            import QtQuick.Controls 1.2

            Rectangle {
            id: timelineRectangle
            anchors.fill: parent

            //background
            Image {
                id: timelineImage
                anchors.rightMargin: 0
                anchors.bottomMargin: 0
                anchors.leftMargin: 0
                anchors.topMargin: 0
                anchors.fill: parent
                z: 0
                source: "content/image/background/background.png"
            }
            
            ListView {
                id: timelineListView
                clip: false
                spacing: 70
                anchors.fill: parent
                anchors.margins: 50
                model: timelineModel
                delegate: Item {
                    id: deviceItem
                    anchors.right: parent.right
                    anchors.rightMargin: 0
                    anchors.left: parent.left
                    anchors.leftMargin: 0
                    height: 220
            
                    Row {
                        id: timeslotRow
                        width: 0
                        spacing: 0
            
                        //date
                        Rectangle {
                            id: dateRectangle
                            width: 220
                            height: 220
                            color: "#16A085"
                            radius: 100
                            border.width: 8
                            border.color: "#2ABF3C"
            
                            TimelineTextStyle {
                                id: dateText
                                text: date
                                width: 130
                                height: 150
                                wrapMode: Text.WordWrap
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.centerIn: parent
                            }
                        }
            
                        //vertical line
                        Rectangle {
                            id: verticalLineRectangle
                            height: 10
                            width: 60
                            radius: 0
                            anchors.verticalCenterOffset: 0
                            color: "#16A085"
                            anchors.verticalCenter: dateRectangle.verticalCenter
                        }
            
                        //devices
                        Rectangle {
                            id: timeslotRectangle
                            width: 780
                            anchors.verticalCenter: timeslotRow.verticalCenter;
                            height: 150
                            color: "#FFFFFF"
                            radius: 4
                            opacity: 0.70
            
                            ScrollView {
                                id: timeslotScrollview
                                anchors.fill: parent
                                clip: true
                                flickableItem.flickableDirection: Flickable.HorizontalFlick
            
                                Row {
                                    id: deviceRow
                                    spacing: 20
            
                                    Repeater {
                                        id: deviceRepeater
                                        model: timeslotmodel
                                        delegate: TimelineDeviceDetail {}
            
                                        Button {id: deviceImageButton; anchors.verticalCenter: parent.verticalCenter; iconSource: deviceImage; width: 100; height: 100; onClicked: setVisibleEffect(detailRectangle, deviceItem); style: TimelineDeviceButtonStyle{} }
            
                                    }
                                }
                            }
                        }
                    }
            
                    TimelineDeviceDetail {
                        id: detailRectangle }
            

            // // property alias euroValue: euro
            // // property alias kwhValue: kwh
            // // property alias timeValue: time

            // // property string euroValue: euro
            //// property string kwhValue: "0,20 kwh"
            // // property string timeValue: deviceImageButton.iconSource
            // }

                    //horizontal line
                    Rectangle {
                        id: timelineLineRectangle
                        width: 10
                        height: 400
                        color: "#16a085"
                        radius: 1
                        z: -1
                        anchors.left: parent.left
                        anchors.leftMargin: 105
                        anchors.top: parent.top
                        anchors.topMargin: 215
                    }
                }
            }
            
            TimelineFilter {}
            
            function setVisibleEffect(detailRectangle, deviceItem) {
                console.log("detailRectangle.visible:" + detailRectangle.visible)
            
                if(detailRectangle.visible === false) {
                    detailRectangle.visible = true
                    deviceItem.height = 400;
                } else {
                    detailRectangle.visible = false
                    deviceItem.height = 220;
                }
            }
            

            }
            @

            1 Reply Last reply
            0
            • M Offline
              M Offline
              morker
              wrote on last edited by
              #10

              and my TimelineDeviceDetail:

              @
              import QtQuick 2.0

              //detail
              Rectangle {
              id: rectangle2
              width: 0
              height: 200
              color: "#FFFFFF"
              radius: 4
              anchors.right: parent.right
              anchors.rightMargin: 100
              opacity: 0.70
              anchors.left: timelineLineRectangle.right
              anchors.leftMargin: 165
              anchors.top: timeslotRow.bottom
              anchors.topMargin: 0
              visible: true //debugging: make it false

                  Text {
                      id: euroText
              

              // Component.onCompleted: console.log("euro: " + timeslotmodel.euro)
              text: timeslotmodel.euro
              anchors.top: parent.top
              anchors.topMargin: 20
              anchors.left: parent.left
              anchors.leftMargin: 20
              font.pixelSize: 12
              }

                  Text {
                      id: kwhText
              

              // Component.onCompleted: console.log("kwh: " + timeslotmodel.kwh)
              text: timeslotmodel.kwh
              anchors.top: parent.top
              anchors.topMargin: 20
              anchors.horizontalCenter: parent.horizontalCenter
              font.pixelSize: 12
              }

                  Text {
                      id: timeText
                      text: timeslotmodel.time
                      anchors.top: parent.top
                      anchors.topMargin: 20
                      anchors.right: parent.right
                      anchors.rightMargin: 20
                      font.pixelSize: 12
                  }
              
              
              Rectangle {
                  id: rectangle1
                  height: 2
                  color: "#34495e"
                  anchors.top: parent.top
                  anchors.topMargin: 60
                  anchors.right: parent.right
                  anchors.rightMargin: 0
                  anchors.left: parent.left
                  anchors.leftMargin: 0
              
              }
              

              }
              @

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

                So here, instead of
                @
                text: timeslotmodel.euro
                @

                try
                @
                text: model.euro
                @

                157

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  morker
                  wrote on last edited by
                  #12

                  I changed it but still same error:

                  @
                  qrc:///TimelineDeviceDetail.qml:42:19: Unable to assign [undefined] to QString
                  @

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

                    That's strange. Is it for all 3 or just time ?

                    157

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

                      Also I see
                      @
                      TimelineDeviceDetail {
                      id: detailRectangle }
                      @

                      after the Repeater. Remove it. The error could be because of that too. Since it is not is scope of Repeater, it will also attract those errors.

                      157

                      1 Reply Last reply
                      0
                      • M Offline
                        M Offline
                        morker
                        wrote on last edited by
                        #15

                        Yes, for all three. I removed the TimelineDeviceDetail.

                        I get no errors but how can I include the TimelineDeviceDetail back to my TimelineVertical after I deleted:

                        @
                        TimelineDeviceDetail {
                        id: detailRectangle }
                        @

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          morker
                          wrote on last edited by
                          #16

                          I want the TimelineDeviceDetail exactly at the position where I deleted it.

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

                            So you have TimelineDeviceDetail.qml file. You can assign an id there.

                            157

                            1 Reply Last reply
                            0
                            • M Offline
                              M Offline
                              morker
                              wrote on last edited by
                              #18

                              ... I don't get it, can you make a quick example? In my opinion the "delegate" just delegate the model to TimelineDeviceDetail and to make TimelineDeviceDetail visible I have to declare it somewhere in TimelineVertical...

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

                                From your earlier posts i assume that you have a separate TimelineDeviceDetail.qml file. So define an id here.
                                @
                                import QtQuick 2.0

                                Rectangle {
                                // id: rectangle2
                                id: detailRectangle
                                width: 0
                                height: 200
                                color: "#FFFFFF"
                                radius: 4
                                anchors.right: parent.right
                                ...
                                @

                                and it will be accessible as before.

                                Edited

                                157

                                1 Reply Last reply
                                0
                                • M Offline
                                  M Offline
                                  morker
                                  wrote on last edited by
                                  #20

                                  Yes thats correct I have a separate file: TimelineDeviceDetail.qml

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

                                    So just define an id (detailRectangle) there and it will be accessible. See my earlier edited post.

                                    157

                                    1 Reply Last reply
                                    0
                                    • M Offline
                                      M Offline
                                      morker
                                      wrote on last edited by
                                      #22

                                      So you mean:

                                      in TimelineDeviceDetail.qml

                                      @
                                      //detail
                                      Rectangle {
                                      id: detailRectangle
                                      width: 0
                                      height: 200
                                      color: "#FFFFFF"
                                      radius: 4
                                      anchors.right: parent.right
                                      anchors.rightMargin: 100
                                      opacity: 0.70
                                      anchors.left: timelineLineRectangle.right
                                      anchors.leftMargin: 165
                                      anchors.top: timeslotRow.bottom
                                      anchors.topMargin: 0
                                      visible: true //debugging: make it false

                                          Text {
                                              id: euroText
                                      

                                      // Component.onCompleted: console.log("euro: " + timeslotmodel.euro)
                                      text: model.euro
                                      anchors.top: parent.top
                                      anchors.topMargin: 20
                                      anchors.left: parent.left
                                      anchors.leftMargin: 20
                                      font.pixelSize: 12
                                      }

                                          Text {
                                              id: kwhText
                                      

                                      // Component.onCompleted: console.log("kwh: " + timeslotmodel.kwh)
                                      text: model.kwh
                                      anchors.top: parent.top
                                      anchors.topMargin: 20
                                      anchors.horizontalCenter: parent.horizontalCenter
                                      font.pixelSize: 12
                                      }

                                          Text {
                                              id: timeText
                                              text: model.time
                                              anchors.top: parent.top
                                              anchors.topMargin: 20
                                              anchors.right: parent.right
                                              anchors.rightMargin: 20
                                              font.pixelSize: 12
                                          }
                                      

                                      //...
                                      @

                                      and int TimelineVertical.qml:

                                      @
                                      Repeater {
                                      id: deviceRepeater
                                      model: timeslotmodel
                                      delegate: TimelineDeviceDetail {}
                                      // Component.onCompleted: console.log("euroValueTest: " + timeslotmodel.euro)
                                      Button {id: deviceImageButton; anchors.verticalCenter: parent.verticalCenter; iconSource: deviceImage; width: 100; height: 100; /onClicked: setVisibleEffect(detailRectangle, deviceItem);/ style: TimelineDeviceButtonStyle{} }

                                                              }
                                                          }
                                                      }
                                                  }
                                              }
                                      
                                               TimelineDeviceDetail {} //set the view where I need it
                                      

                                      @

                                      But than I get the same error as before:

                                      qrc:///TimelineDeviceDetail.qml:22:19: Unable to assign [undefined] to QString
                                      qrc:///TimelineDeviceDetail.qml:33:19: Unable to assign [undefined] to QString
                                      qrc:///TimelineDeviceDetail.qml:42:19: Unable to assign [undefined] to QString

                                      1 Reply Last reply
                                      0
                                      • M Offline
                                        M Offline
                                        morker
                                        wrote on last edited by
                                        #23

                                        I put the code from TimelineDeviceDetail.qml back to TimelineVertical.qml to make it simple. It turned out that it's even there not accessible...

                                        @
                                        Row {
                                        id: deviceRow
                                        spacing: 20

                                                                Repeater {
                                                                    id: deviceRepeater
                                                                    model: timeslotmodel
                                                                    delegate: detailRectangle
                                        
                                                                    Button {id: deviceImageButton; anchors.verticalCenter: parent.verticalCenter; iconSource: deviceImage; width: 100; height: 100; onClicked: setVisibleEffect(detailRectangle, deviceItem); style: TimelineDeviceButtonStyle{} }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                        
                                                Rectangle {
                                                    id: detailRectangle
                                                    width: 0
                                                    height: 200
                                                    color: "#FFFFFF"
                                                    radius: 4
                                                    anchors.right: parent.right
                                                    anchors.rightMargin: 100
                                                    opacity: 0.70
                                                    anchors.left: timelineLineRectangle.right
                                                    anchors.leftMargin: 165
                                                    anchors.top: timeslotRow.bottom
                                                    anchors.topMargin: 0
                                                    visible: false //debugging: make it false
                                        
                                                    Text {
                                                        id: euroText
                                                        text: model.euro
                                                        anchors.top: parent.top
                                                        anchors.topMargin: 20
                                                        anchors.left: parent.left
                                                        anchors.leftMargin: 20
                                                        font.pixelSize: 12
                                                    }
                                        
                                                    Text {
                                                        id: kwhText
                                                        text: model.kwh
                                                        anchors.top: parent.top
                                                        anchors.topMargin: 20
                                                        anchors.horizontalCenter: parent.horizontalCenter
                                                        font.pixelSize: 12
                                                    }
                                        
                                                    Text {
                                                        id: timeText
                                                        text: model.time
                                                        anchors.top: parent.top
                                                        anchors.topMargin: 20
                                                        anchors.right: parent.right
                                                        anchors.rightMargin: 20
                                                        font.pixelSize: 12
                                                    }
                                        
                                        
                                                    Rectangle {
                                                        id: rectangle1
                                                        height: 2
                                                        color: "#34495e"
                                                        anchors.top: parent.top
                                                        anchors.topMargin: 60
                                                        anchors.right: parent.right
                                                        anchors.rightMargin: 0
                                                        anchors.left: parent.left
                                                        anchors.leftMargin: 0
                                        
                                                    }
                                                }
                                        

                                        @

                                        @
                                        Unable to assign [undefined] to QString
                                        @

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

                                          If you define delegate in same file then you will need to encapsulate it in Component.

                                          Going to the previous, you have again added TimelineDeviceDetail there. Please remove it or you will get the same errors. Please refer my earlier posts.
                                          TimelineDeviceDetail will be accessible using its id even if it is specified in separate file.

                                          157

                                          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