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.0k 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
    #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
                                • M Offline
                                  M Offline
                                  morker
                                  wrote on last edited by
                                  #25

                                  Ok thanks for that advise. Can you please tell my if I remove "TimelineDeviceDetail" from "TimelineVertical" how to include the TimelineDeviceDetail in TimelineVertical? Or can you make "will be accessible using its id..." a little bit more clear?

                                  Thanks

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

                                    Ok. Just revisited the posts. I too got confused. Lots of code here :)
                                    First Why would you want TimelineDeviceDetail outside the delegate as it has already been assigned as delegate to repeater ?

                                    Just created a small example related to above:
                                    @
                                    //TimelineDeviceDetail.qml
                                    import QtQuick 2.3
                                    Rectangle {
                                    id: detailRectangle
                                    y: index*40
                                    width: 300
                                    height: 40
                                    color: "lightgray"
                                    Text {
                                    anchors.centerIn: parent
                                    text: model.euro
                                    }
                                    }

                                    //main.qml
                                    import QtQuick 2.3
                                    Rectangle {
                                    width: 300
                                    height: 180

                                    ListModel {
                                        id: mymodel
                                        ListElement {
                                            euro: "3"
                                        }
                                        ListElement {
                                            euro: "6"
                                        }
                                    }
                                    
                                    Repeater {
                                        model: mymodel
                                        delegate: TimelineDeviceDetail {}
                                    }
                                    

                                    }
                                    @

                                    Here TimelineDeviceDetail is able to access the model role(euro).
                                    Now can you format your question and requirements according to above example so it will be easier for me to understand?

                                    157

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

                                      That's a good idea to simplify that. Did you compile the example?

                                      I get the following error:

                                      @
                                      qrc:///TestTimeline.qml:12: ReferenceError: model is not defined
                                      @

                                      Test.qml:

                                      @
                                      import QtQuick 2.3
                                      import QtQuick.Controls 1.2
                                      import QtQuick.Layouts 1.1

                                      Rectangle {
                                      id: rectangle1
                                      anchors.fill: parent

                                      Rectangle {
                                          width: 300
                                          height: 180
                                      
                                          ListModel {
                                              id: mymodel
                                              ListElement {
                                                  euro: "3"
                                              }
                                              ListElement {
                                                  euro: "6"
                                              }
                                          }
                                      
                                          Repeater {
                                              model: mymodel
                                              delegate: TestTimeline {}
                                      
                                              Text {
                                                  text: euro
                                              }
                                          }
                                      }
                                      

                                      }
                                      @

                                      TestTimeline.qml:

                                      @
                                      import QtQuick 2.3
                                      import QtQuick.Controls 1.2
                                      import QtQuick.Layouts 1.1

                                      Rectangle {
                                      id: detailRectangle
                                      width: 300
                                      height: 40
                                      color: "blue"
                                      Text {
                                      anchors.centerIn: parent
                                      text: model.euro
                                      }
                                      }
                                      @

                                      I made some little changes on your code.

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

                                        I set up a new project just to test this little example and the same here. Any suggestions?

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

                                          I fixed this with JavaScript, probably not this best way but it works for me...

                                          TimleineVertical.qml:

                                          @
                                          Row {
                                          id: deviceRow
                                          spacing: 20

                                                                  Repeater {
                                                                      id: deviceRepeater
                                                                      model: attributes
                                          
                                                                      Button {id: deviceImageButton;
                                                                          anchors.verticalCenter: parent.verticalCenter;
                                                                          iconSource: deviceImage;
                                                                          width: 100;
                                                                          height: 100;
                                                                          onClicked: setVisibleDetail(detailRectangle, deviceItem), setTest(euro, kwh, time, euroText, kwhText, timeText)
                                          
                                                                          style: TimelineDeviceButtonStyle{} }
                                          
                                                                  }
                                          

                                          @

                                          JavaScript to set the values from the model for the text element:

                                          @
                                          function setTest(euro, kwh, time, euroText, kwhText, timeText) {
                                          euroText.text = euro;
                                          kwhText.text = kwh;
                                          timeText.text = time;
                                          }
                                          @

                                          Text element:

                                          @
                                          Text {
                                          id: euroText
                                          anchors.top: parent.top
                                          anchors.topMargin: 30
                                          anchors.left: parent.left
                                          anchors.leftMargin: 20
                                          font.pixelSize: 12
                                          }
                                          @

                                          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