Hi am trying to implement a little game using vaadin (just for fun).
So I need to have buttons display as a chess board.
That is to say: a square of 8x8 buttons in the middle of the page.
How could I do that with layouts of vaadin 11 ?
Hi am trying to implement a little game using vaadin (just for fun).
So I need to have buttons display as a chess board.
That is to say: a square of 8x8 buttons in the middle of the page.
How could I do that with layouts of vaadin 11 ?
Here a untested snipped:
PlainVerticalLayout lines = new PlainVerticalLayout();
PlainHorizontalLayout line;
int width = 8;
int counter = 0;
for(int i=0;i<width;++i) {
line = new PlainHorizontalLayout();
for(int j=0;j<width;++j) {
if(counter % 2 == 0) {
line.add(new BlackButton());
} else {
line.add(new WhiteButton());
}
++counter;
}
lines.add(line);
}
add(lines);
Plain___Layout means no padding, no margin, no spacing.
Greetz
(I don’t have much help to offer, only some observations, sorry.)
A game board with Layouts is a pretty tricky case. Layout components typically have an undefined amount of self-contained children in a one-dimensional list. All of these defining characteristics (undefined amount, self-contained children and one-dimensional list) are not great for a game board - in the typical case, a board has a fixed amount of rows and columns, so a defined amount of children in a two-dimensional array.
You can simulate an array with nested layouts by creating a horizontal “row” layout with a fixed number of child nodes (each representing a cell on the game board), and then repeating row layouts enough times to have a full board. This approach is not great for several reasons. Just from the top of my head:
If I had to do it, I’d probably start with a plain old html <table>
element with a fixed amount of rows and columns inside a PolymerTemplate. You still have a lot of things to manage there, but at least you won’t need to spend a ton of effort with the neat positioning of the rows and the columns.
-Olli