[solved] How do I attach properties to a Component?

Kysymys

Hi there,

I am trying to understand the Component objects. So I've written two .qml files. Container.qml, which is a Rectangle that displays an arbitrary object (aThing). The other file (main.qml) is the application, which uses 'Container' to display the object that is defined within main.qml.

Now to my question: how do I attach properties (pass information) form from 'Container' to 'aThing'?

main.qml:
@import QtQuick 2.0

Rectangle {
width: 360; height: 360
color: "aliceblue"

Rectangle {
    anchors.centerIn: parent
    width: 300; height: 300
    border {color: "black"; width: 1 }

    Container {
        id: container
        anchors.margins: 1

        aThing: Rectangle {
            width: 50; height: 50;
            
            // I know, this does not work. But how can I get Component.qml 
            // to pass information to this 'aThing'
            color: Qt.darker(container.theColor, .5)
        }
    }
}

}@

Container.qml:
@import QtQuick 2.0

Rectangle {
property color theColor: "lightsteelblue"
property Component aThing: idDefaultComponent

Component {
    id: idDefaultComponent
    Rectangle { width: 100; height: 100; color: "red" }
}

anchors.fill: parent
color: theColor

Loader {
    id: thing
    anchors.centerIn: parent
    sourceComponent: aThing
}

}@

Kysymys

Yay! Found the solution.

It's actually pretty simple.
When creating an object with Loader you can add properties the same way you do with all other objects.
@Loader {
property color aNewProperty: "#ff8080"
sourceComponent: theComponentToCreate
}@

I wish this had been mentioned in the documentation to the Loader Element.

To be complete, here are the working sources.

main.qml:
@import QtQuick 2.0

Rectangle {
width: 360; height: 360
color: "aliceblue"

Rectangle {
    anchors.centerIn: parent
    width: 300; height: 300
    border {color: "black"; width: 1 }

    Container {
        anchors.margins: 1

        aThing: Rectangle {
            width: 100; height: 100;
            color: Qt.darker(parentColor, 1.5)

            border.color: "black"
            border.width: 1
        }
    }
}

}
@

Container.qml:
@import QtQuick 2.0

Rectangle {
id: root

property color theColor: "lightsteelblue"
property Component aThing: Item { }

anchors.fill: parent
color: theColor

Loader {
    property color parentColor: root.theColor
    anchors.centerIn: parent

    sourceComponent: aThing
}

}
@

Kudos to myself.

chrisadams

Hi,

I'm glad you found a solution! Just for information purposes, however, I'd like to explain what's actually going on here: basically, the "parentColor" property you've defined is actually a dynamic property of the Loader. When the expression "Qt.darker(parentColor, 1.5)" is evaluated in the child object, the property resolution code will "walk up the scope chain" to find the symbol - and it will resolve to the property of the Loader.

Another (more direct) way of achieving this, is to instantiate the object passing an "initial property values" map, as documented in QQmlComponent etc.

Cheers,
Chris.

Kysymys

Thank you for your input Chris,

the point about this post, as hinted in the title, is to pass information from the place where the Loader Element is used to instantiate an arbitrary object, to the created object. The information passed, serves no deeper purpose then to be passed.

It seems I've chosen a confusing example. Sorry about that.
Maybe this will clarify:

main.qml
@import QtQuick 2.0

Rectangle {
width: 360; height: 360
color: "aliceblue"

Rectangle {
    anchors.centerIn: parent
    width: 300; height: 300
    border {color: "black"; width: 1 }

    Container {
        anchors.margins: 1

        aThing: Rectangle {
            width: 200; height: 200;
            border {color: "black"; width: 1 }

            Text {
                anchors.fill: parent; anchors.margins: 3;
                text: passedInformation
                wrapMode: Text.WordWrap
            }
        }
    }
}

}
@

Container.qml:
@import QtQuick 2.0

Rectangle {
id: root

property Component aThing: Item { }

anchors.fill: parent
color: "lightsteelblue"

Loader {
    property string passedInformation: "some arbitrary information"
    anchors.centerIn: parent

    sourceComponent: aThing
}

}
@