About accessing a component's root level properties

Stan Huang

Below is a QML module, ClickableImage.qml:

// ClickableImage.qml
// Simple image which can be clicked
import QtQuick 2.5
Image {
id: root
signal clicked
MouseArea {
anchors.fill: parent
onClicked: root.clicked()
}
}

Then, another module calling this ClickableImage:

import QtQuick 2.5
Item {
// set width based on given background
width: bg.width
height: bg.height
Image { // nice background image
id: bg
source: "assets/background.png"
}
MouseArea {
.....
}
ClickableImage {
id: circle
x: 84; y: 68
source: "assets/circle_blue.png"
antialiasing: true
onClicked: {
// increase the x-position on click
x += 20
}
}
....
}

But I found a section of text "It is important to know, that only the root
level properties can be accessed from outside this file by other components."

I found no property defined at ClickableImage.qml which can be accessed at Transportation.qml. Besides, in Transportation.qml, inside ClickableImage, the properties, such as 'x', 'y' and 'source' are not defined at root level of Image at ClickableImage.qml.
How come?

CKurdu

@Stan-Huang said in About accessing a component's root level properties:

ClickableImage

You can use "property alias" feature to open ClickableImage props to outside.

//Transportation.qml
import QtQuick 2.5
Item {
        id:root
        property alias ci_x: circle.x
        property alias ci_y: circle.y
        property alias ci_source: circle.source
        // set width based on given background
        width: bg.width
        height: bg.height
        Image {
            // nice background image
            id: bg
            source: "assets/background.png"
            MouseArea {
            }
        }
        ClickableImage {
                    id: circle
                    x: 84
                    y: 68
                    source: "assets/circle_blue.png"
                    antialiasing: true
                    onClicked: {
                        // increase the x-position on click
                        x += 20
                    }
                }

}

J.Hilk

@Stan-Huang said in About accessing a component's root level properties:

But I found a section of text "It is important to know, that only the root
level properties can be accessed from outside this file by other components."
I found no property defined at ClickableImage.qml which can be accessed at Transportation.qml. Besides, in Transportation.qml, inside ClickableImage, the properties, such as 'x', 'y' and 'source' are not defined at root level of Image at ClickableImage.qml.
How come?

The root item itself has a bunch of properties that can be accessed from outside.
The root item of ClickableImage is a Image therefore all properties of image are also accessible for ClickableImage.

You can see what properties a QML Item has, from the documentation:
https://doc.qt.io/qt-5/qml-qtquick-image.html

and since Image inherits from Item as well, are all Item properties also part of the Image
https://doc.qt.io/qt-5/qml-qtquick-item.html