setting a custom, visual property

[Urthas]

Hello,

Just for fun I set out to make a super-duper, absurdly simple Chess ui in pure QML. There is no computer opponent, not even move validation, but two human players can move pieces around the board -- if no one tries to cheat, it works great. I came across a bit of a puzzler while doing it though.

Consider the following:

/* Chessman.qml */
 
Item {
    id: root
 
    property string symbol
    property color faction
 
    anchors.centerIn: parent
 
    Text {
        text: symbol
        color: faction
        anchors.centerIn: parent
    }
}

/* Chessman.qml */

Item {
    id: root

    property string symbol
    property color faction

    anchors.centerIn: parent

    Text {
        text: symbol
        color: faction
        anchors.centerIn: parent
    }
}

To copy to clipboard, switch view to plain text mode 

and

/* Square.qml */
 
Rectangle {
    id: root
 
    signal clicked()
 
    property Chessman occupant
 
    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.debug(occupant ? occupant.symbol : "No occupant!")
            root.clicked()
        }
    }
}

/* Square.qml */

Rectangle {
    id: root

    signal clicked()

    property Chessman occupant

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.debug(occupant ? occupant.symbol : "No occupant!")
            root.clicked()
        }
    }
}

To copy to clipboard, switch view to plain text mode 

Now, what I tried to do for a given square of the board was this (here, the starting, A8 Rook):

Square {
    id: a8
    width: board.squareW
    height: board.squareH
    color: "white"
    occupant: Chessman {
        symbol: "R"
        faction: "red"
    }
    onClicked: { ... }
}

Square {
    id: a8
    width: board.squareW
    height: board.squareH
    color: "white"
    occupant: Chessman {
        symbol: "R"
        faction: "red"
    }
    onClicked: { ... }
}

To copy to clipboard, switch view to plain text mode 

But I could not see my Chessman. I went Googling and found something in the Qt docs that concerned parenting VS properties, and indeed, if I insert "parent: a8" into a8's Chessman code, then voila.

So, my questions are:
1) Is there a better way to do this? Not on a grand scale, I mean to do this particular intended thing. For example, please don't tell me that perhaps the set of squares should populate a model and be shown in a GridView.
2) The real question: given my experience with Chessman, why does the gradient property of Rectangle work the way it does? I thought I was patterning my Chessman property in Square accordingly, but you can SEE the gradient in the parent rectangle after setting it in the same way. Is there something magical going on? Any insight appreciated.

[wysota]

1) Is there a better way to do this? Not on a grand scale, I mean to do this particular intended thing.

There are many possible solutions. One would be to use onOccupantChanged signal and set the parent of the piece there. However personally I don't think the piece should be a child of the square. They should rather be siblings, at least in my opinion.

2) The real question: given my experience with Chessman, why does the gradient property of Rectangle work the way it does? I thought I was patterning my Chessman property in Square accordingly, but you can SEE the gradient in the parent rectangle after setting it in the same way. Is there something magical going on? Any insight appreciated.

I cannot answer that question without seeing what you get. You didn't post any code related to this question.