Urthas
30th January 2013, 17:11
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
}
}
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()
}
}
}
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: { ... }
}
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.
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
}
}
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()
}
}
}
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: { ... }
}
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.