Access model in another qml component

p3c0

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 ?

morker

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?

p3c0

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

morker

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
@

p3c0

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 ?

morker

Same code as in my last post and I add

@
delegate: TimelineDeviceDetail {}
@

to my repeater.

I still get the same error

p3c0

and how TimelineDeviceDetail body looks like now ?

morker

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

}
@

morker

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

}

}
@

p3c0

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

try
@
text: model.euro
@

morker

I changed it but still same error:

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

p3c0

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

p3c0

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.

morker

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

morker

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

p3c0

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

morker

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

p3c0

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

morker

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

p3c0

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