[Interest] QML id

[Igor Mironchik]

Hi,

I've found solution better...

Row {
         id: top
         height: offset

         // top letters
         Item { width: offset; height: offset; }
         Repeater {
             model: [ "A", "B", "C", "D", "E", "F", "G", "H" ]
             delegate: Text {
                 width: cellWidth
                 height: offset
                 text: modelData
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
             }
         }
         Item { width: offset; height: offset; }
     }

     Column {
         y: top.y + top.height

         Repeater {
             model: 8

             delegate: Text {
                 width: offset
                 height: cellHeight
                 text: 8 - index
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
            }
         }
     }

     Grid {
         id: grid
         rows: 8
         columns: 8
         x: offset
         y: top.y + top.height

         Repeater {
             model: chessBoard

             delegate: Cell {
                 cellColor: model.CurrentPieceColor
                 chessX: index % 8
                 chessY: index / 8
                 onClicked: board.clicked( x, y )
                 onHovered: board.hovered( x, y )
                 objectName: "c"+ chessX + chessY
                 width: cellWidth
                 height: cellHeight
                 source: model.CellImageSource
             }
         }
     }

     Column {
         y: grid.y
         x: grid.x + grid.width

         Repeater {
             model: 8

             delegate: Text {
                 width: offset
                 height: cellHeight
                 text: 8 - index
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
            }
         }
     }

     Row {
         id: bottom
         height: offset
         y: grid.y + grid.height

         // top letters
         Item { width: offset; height: offset; }
         Repeater {
             model: [ "A", "B", "C", "D", "E", "F", "G", "H" ]
             delegate: Text {
                 width: cellWidth
                 height: offset
                 text: modelData
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
             }
         }
         Item { width: offset; height: offset; }
     }

On 11.04.2016 17:06, Gian Maxera wrote:
>> On 11 Apr 2016, at 14:49, Igor Mironchik <igor.mironchik at gmail.com> wrote:
>>
>> Hello,
>>
>> Thank you.
>>
>> I successfully drawn chess board. Nice.
>>
>> Column {
>>          spacing: 0
>>          Row {
>>              // top letters
>>              Item { width: offset; height: offset; }
>>              Repeater {
>>                  model: [ "A", "B", "C", "D", "E", "F", "G", "H" ]
>>                  delegate: Text {
>>                      width: cellWidth
>>                      height: offset
>>                      text: modelData
>>                      horizontalAlignment: Text.AlignHCenter
>>                      verticalAlignment: Text.AlignVCenter
>>                  }
>>              }
>>              Item { width: offset; height: offset; }
>>          }
>>          // Rows with cells
>>          Repeater {
>>             model: 8
>>             delegate: Row {
>>                 id: row
>>                 property int rowIndex: index
>>                 // number
>>                 Text {
>>                      width: offset
>>                      height: cellHeight
>>                      text: 8 - index
>>                      horizontalAlignment: Text.AlignHCenter
>>                      verticalAlignment: Text.AlignVCenter
>>                 }
>>                 // first row of chess board
>>                 Repeater {
>>                      model: 8
>>                      delegate: Cell {
>>                          cellColor: ( row.rowIndex % 2 === 0
>>                              ? ( index % 2  === 0 ? "white" : "lightgray" )
>>                              : ( index % 2  === 0 ? "lightgray" : "white" ) );
>>                          chessX: index; chessY: row.rowIndex;
>>                          onClicked: board.clicked( x, y );
>>                          onHovered: board.hovered( x, y );
>>                          objectName: "c"+ chessX + chessY;
>>                          width: cellWidth;
>>                          height: cellHeight;
>>                      }
>>                 }
>>                 // number
>>                 Text {
>>                      width: offset
>>                      height: cellHeight
>>                      text: 8 - index
>>                      horizontalAlignment: Text.AlignHCenter
>>                      verticalAlignment: Text.AlignVCenter
>>                 }
>>             }
>>          }
>>          Row {
>>              // top letters
>>              Item { width: offset; height: offset; }
>>              Repeater {
>>                  model: [ "A", "B", "C", "D", "E", "F", "G", "H" ]
>>                  delegate: Text {
>>                      width: cellWidth
>>                      height: offset
>>                      text: modelData
>>                      horizontalAlignment: Text.AlignHCenter
>>                      verticalAlignment: Text.AlignVCenter
>>                  }
>>              }
>>              Item { width: offset; height: offset; }
>>          }
>>      }
>>
>> But now I need place pieces on board.
>>
>> In my old code I used
>>
>> Figure {
>>          source: "qrc:/img/pawn-white.png"
>>          x: c06.x
>>          y: c06.y
>>          objectName: "pawn-white-1"
>>          width: cellWidth
>>          height: cellHeight
>>      }
>>
>> Where c06 is id. Is it possible to bind x to x property of Cell by objectName?
> I think so, but instead of bind x and y … I’ll try to change the parent. There is also ParentAnimation for animate the changing.
> And then, you can use the anchors for center the Figure in the parent.
>
> Figure {
>      anchors.centerIn: parent
> }
>
> But I don’t know if QML got some built-in to find an object by name.
>
>
>> Thank you.
>>
>> On 11.04.2016 16:02, Gian Maxera wrote:
>>> Column {
>>>      spacing: 0
>>>      Row {
>>>          // top letters
>>>          EmptyItem { // use fixed width here so you can align the text }
>>>          Repeater {
>>> 	    model: [“A”, “B”, … “H”]
>>>              delegate: DisplayTheLetter { … }
>>>          }
>>>          EmpyItem { }
>>>      }
>>>      // Rows with cells
>>>      Repeater {
>>>         model: 8
>>>         delegate: Row {
>>>             // number
>>>             Text {
>>>                  // use fixed width and align left the text
>>>                  // vertical alignment with anchors
>>>                  anchors.verticalCenter: parent.verticalCenter
>>>                  text: index+1
>>>             }
>>>             // first row of chess board
>>>             Repeater {
>>>                  model: chessBoardModel[index]
>>>                  delegate: ASingleCellOfChessBoard { … }
>>>             }
>>>         }
>>>      }
>>>      Row {
>>>          // bottom letters
>>>          EmptyItem { }
>>>          Repeater {
>>> 	    model: [“A”, “B”, … “H”]
>>>              delegate: DisplayTheLetter { … }
>>>          }
>>>          EmpyItem { }
>>>      }
>>> }