QML component scope puzzle

Question

Take this code:

import QtQuick 1.1

Rectangle {
    width:  100
    height: 100

    property color fromColor: \"red\"
    property color toColor:   \"blue\"

           


        

Answer 1

This certainly doesn't look intuitive at first glance, but comment out fromColor and toColor in the component root item and the reason becomes apparent. From the QML Scope docs you can see that the scope includes:

• all of the id's defined within the Component.
• local properties
• the properties of the root object of the Component

A GradientStop {} in the example above has no local properties defined. The root component does, and they are the properties that fromColor and toColor resolve to. The properties in Gradient {} are not in the scope of the GradientStop {} at all.

Answer 2

Also see this:

import QtQuick 1.1

Item {
    property string s: "outer"

    Item {
        property string s: "middle"

        property Item it: Item {
            property string dummy: function() { console.log("(5) s: "+s); "" }()
            Component.onCompleted: console.log("(1) s: " + s)
        }

        Item {
            property string dummy: function() { console.log("(4) s: "+s); "" }()

            function f() {
                console.log("(2) s: " + s)
            }

            Component.onCompleted: {
                console.log("(3) s: " + s)
                f()
            }
        }
    }
}

this code outputs:

(5) s: outer
(4) s: outer
(3) s: outer
(2) s: outer
(1) s: outer

Note, that however (to the Children property or not) and whatever (an Element or a javascript code snippet) we bind, the "middle" property is never found.

The name lookup thus is:

1. id's defined within the Item or Component (see 3)
2. Local properties
3. Top-level Item's properties (or Component, in case it's defined inline, even when the "Component" name is omitted, like when delegates are conveniently defined).

Also, when a property is referenced within the component, but not defined within it, it still can be introduced within the "customized" component, and be seen:

//OverrideInner.qml
import QtQuick 1.1

Item {
    Component.onCompleted: console.log(s)
}

.

//OverrideOuter.qml
import QtQuick 1.1

Item {
    property string s: "overriden-outer"

    Item {
        property string s: "overriden-middle"

        OverrideInner {
            property string s: "overriden-inner"
        }
    }
}

Running "OverrideOuter.qml" produces:

overriden-inner

Again, see Martin's comments and the docs to clarify the matter. The relevant docs are:

• Declarative Scope
• Property Binding