Recommended way to expose properties

Gustavo Serra

Hello!

What is the preferable way to expose a property of a reusable component?

Suppose a message dialog in which the caller set the message.

Caller code:

Window {
    width: 640
    height: 480
    visible: true

    MyDialog {
        message: "My custom message"
    }
}

I could implement MyDialog as:

Item {
    property alias message: inner.text
    Text { id: inner }
}

Or:

Item {
    property string message
    Text {
        id: innerText
        text: message
    }
}

The way I see it, the second approach creates an extra binding but we preserve hierarchy (the parent doesn't depend on its children).

lemons

@Gustavo-Serra
I prefer the alias method, if I only need the property in a single location.

As soon as I need to access the property in multiple locations within the component, I prefer option 2, as don't like binding nested objects to other objects if it isn't required.
This way I can easily remove parts, without breaking the main component.

E.g.

Item {
    property color fontColor: "lime"
    Text { id: title; color: fontColor }
    Text { id: subtitle; color: fontColor }
}

// I don't like this approach, as I couldn't remove 
// the title without effecting the subtitle
Item {
    property alias fontColor: title.color
    Text { id: title; color: "lime" }
    Text { id: subtitle; color: title.color }
}

johngod

@Gustavo-Serra
I would use the first approach with the alias, I fail to see why not preservinh hierarchy would be a problem

Gustavo Serra

@johngod thank you!

lemons

@Gustavo-Serra
I prefer the alias method, if I only need the property in a single location.

As soon as I need to access the property in multiple locations within the component, I prefer option 2, as don't like binding nested objects to other objects if it isn't required.
This way I can easily remove parts, without breaking the main component.

E.g.

Item {
    property color fontColor: "lime"
    Text { id: title; color: fontColor }
    Text { id: subtitle; color: fontColor }
}

// I don't like this approach, as I couldn't remove 
// the title without effecting the subtitle
Item {
    property alias fontColor: title.color
    Text { id: title; color: "lime" }
    Text { id: subtitle; color: title.color }
}

Gustavo Serra

@lemons
It makes sense. I thought you should always do it in a certain way, but I can see now that it is a matter of preference or situation. Thank you.