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.
  • p3c0P Offline
    p3c0P Offline
    p3c0
    Moderators
    wrote on last edited by
    #4

    It should be accessible through model property. i.e for eg. model.euro

    157

    1 Reply Last reply
    0
    • 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

                                          • Login

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