Hi,
I trying to build a comparison Tool, like compare car models.
If I add my car objects (list) to the Grid, then all cars are aligned vertical and you see the specifications horizontal.
Is there an easy way to change horizontal and vertical alignment of objects in a grid?
Or is there any better component which could achive such “comparison” layout?
Thank you
There is no out-of-the-box way for this. But it’s not very hard:
Create two classes:
public class Car {
private String type;
private String color;
private int year;
public Car(String type, String color, int year) {
this.type = type;
this.color = color;
this.year = year;
}
public String getType() {
return type;
}
public String getColor() {
return color;
}
public int getYear() {
return year;
}
}
public class CarSpecRow {
private String title;
private Function<Car, Object> specSupplier;
public CarSpecRow(String title, Function<Car, Object> specSupplier) {
this.title = title;
this.specSupplier = specSupplier;
}
public String getTitle() {
return title;
}
public Object getValue(Car car) {
return specSupplier.apply(car);
}
}
Now create the grid:
List<Car> cars = new ArrayList<>();
cars.add(new Car("Ford", "Red", 2000));
cars.add(new Car("Mazda", "Blue", 2007));
cars.add(new Car("De Lorean", "Yellow", 1980));
List<CarSpecRow> rows = new ArrayList<>();
rows.add(new CarSpecRow("Type", Car::getType));
rows.add(new CarSpecRow("Color", Car::getColor));
rows.add(new CarSpecRow("Year", Car::getYear));
Grid<CarSpecRow> grid = new Grid<>();
grid.addColumn(CarSpecRow::getTitle);
for (Car car : cars) {
grid.addColumn(carSpecRow -> carSpecRow.getValue(car));
}
grid.setItems(rows);
grid.setMinHeight("500px");
add(grid);
Thanks Chris, that was really helpfull.