Access model in another qml component

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.

morker

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

morker

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
@

p3c0

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.

morker

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

p3c0

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?

morker

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.

morker

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

morker

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