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 6.5k 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
    #1

    Hi,

    I need to access a model from another qml component. My model holds four strings:

    • deviceImage
    • euro
    • kwh
    • time

    @
    //...

    Row {
    id: deviceRow
    spacing: 20

         Repeater {
                          id: deviceRepeater
                          model: *timeslotmodel*
    
                          Button {id: deviceImageButton; anchors.verticalCenter: parent.verticalCenter; iconSource: *deviceImage*; width: 100; height: 100; }
    
                            }
                        }
                    }
                }
            }
    
    
            TimelineDeviceDetail {}
    

    //...
    @

    And I need to access "euro, kwh, time" in TimelineDeviceDetail:

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

        Text {
            id: kwhText
            *text: kwh*
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    
        Text {
            id: timeText
            *text: time*
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 20
            font.pixelSize: 12
        }
    

    //...
    @

    How can I do this? How can I delegate them to TimelineDeviceDetail?

    Thanks

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

      Hi,

      Since you are using a Repeater and Repeater can have delegate, you can assign TimelineDeviceDetail as a delegate to Repeater and thus
      TimelineDeviceDetail will have access to all the model roles.
      Is this what you are looking for ?

      157

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

        Thanks for your replay.

        I add a delegate to my repeater:

        @
        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 }
        

        @

        But I still get a ReferenceError:

        @
        qrc:///TimelineDeviceDetail.qml:21: ReferenceError: euro is not defined
        qrc:///TimelineDeviceDetail.qml:31: ReferenceError: kwh is not defined
        qrc:///TimelineDeviceDetail.qml:40: ReferenceError: time is not defined
        @

        Any suggestions?

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

                                          • Login

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