vaadin - 在 Vaadin Grid 中右对齐列内容？

Question

在新的 VaadinGrid小部件（替代 venerable Table）中，如何右对齐列中的数字或其他内容？

Answer 1

我能想到的最简单的方法是定义自己的 CSS 类和样式生成器，这与我在处理表格时所做的非常相似。

@Theme("mytheme")
@Widgetset("com.matritza.MyAppWidgetset")
public class MyUI extends UI {

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
        // meh, default stuff
    }

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        // create a grid
        Grid grid = new Grid("Grid test");

        // create a specific container for the grid to hold our persons
        BeanItemContainer<Person> container = new BeanItemContainer<>(Person.class);
        grid.setContainerDataSource(container);

        // define our own style generator
        grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {
            @Override
            public String getStyle(Grid.CellReference cellReference) {
                if ("age".equals(cellReference.getPropertyId())) {
                    // when the current cell is number such as age, align text to right
                    return "rightAligned";
                } else {
                    // otherwise, align text to left
                    return "leftAligned";
                }
            }
        });

        // generate some dummy data
        for (int i = 0; i < 10; i++) {
            container.addItem(new Person("Name " + i, "Surname " + i, i));
        }

        layout.addComponent(grid);
    }


    // basic class to populate the grid in a fast & simple way
    public class Person {
        private String name;
        private String surname;
        private int age;

        private Person(String name, String surname, int age) {
            this.name = name;
            this.surname = surname;
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getSurname() {
            return surname;
        }

        public void setSurname(String surname) {
            this.surname = surname;
        }

        public int getAge() {
            return age;
        }

        public void setAge(int age) {
            this.age = age;
        }
    }
}

以及基本的 CSS 样式

@mixin mytheme {
    @include valo;

    // Insert your own theme rules here
    .leftAligned {
      text-align: left;
    }

    .rightAligned {
      text-align: right;
    }
}

你应该看到类似的东西

顺便说一句，在 Java 8 及更高版本中，该样式生成器的新 Lambda 语法将是：

grid.setCellStyleGenerator(( Grid.CellReference cellReference ) -> {
    if ( "age".equals( cellReference.getPropertyId() ) ) {
        // when the current cell is number such as age, align text to right
        return "rightAligned";
    } else {
        // otherwise, align text to left
        return "leftAligned";
    }
});

Answer 2

也可以使用已经存在的样式，如 v-align-right、v-align-middle 等。只需查看 Valo 等主题已经包含哪些内容，并仅在需要时扩展现有主题。

这是一个简单的示例，如何使用正则表达式实现单元生成器（根据字段名称匹配一个或多个字段）

public class RegexpCellStyleGenerator implements CellStyleGenerator {

private String regex = ".*"; // defaults all
String style = "v-align-right"; // default is here just as example

// special version useful only when one wants to style all fields inside grid
public RegexpCellStyleGenerator(String style) {
    super();
    this.style = style;
}

public RegexpCellStyleGenerator(String regex, String style) {
    super();
    this.regex = regex;
    this.style = style;
}

@Override
public String getStyle(CellReference cellReference) {
    String propertyId = cellReference.getPropertyId().toString();
    if (propertyId.matches(regex)) {
        return style;
    }
    return null;
}

并且这只是部分有用，因为大多数网格都有多个字段，复合生成器可能很方便

public class CompositeCellStyleGenerator implements CellStyleGenerator {

List<CellStyleGenerator> generators = new ArrayList<>();

public CompositeCellStyleGenerator() {}

public void addCellStyleGenerator(CellStyleGenerator generator) {
    generators.add(generator);
}

@Override
public String getStyle(CellReference cellReference) {
    List<String> styles = new ArrayList<>();
    for (CellStyleGenerator generator : generators) {
        String style = generator.getStyle(cellReference);
        if (style != null) {
            styles.add(style);
        }
    }
    if (!styles.isEmpty()) {
        return styles.stream().collect(Collectors.joining(" "));
    }
    return null;
}

复合生成器将所有样式连接在一起，可以这样使用。如果一列有多种样式，则两者都适用。

    RegexpCellStyleGenerator yearGenerator = new RegexpCellStyleGenerator("yearOfFoundation", "v-align-right");
    RegexpCellStyleGenerator nameGenerator = new RegexpCellStyleGenerator("name", "v-align-center");
    RegexpCellStyleGenerator nameGenerator2 = new RegexpCellStyleGenerator("name", "v-label-huge");

    CompositeCellStyleGenerator compositeGenerator = new CompositeCellStyleGenerator();

    compositeGenerator.addCellStyleGenerator(yearGenerator);
    compositeGenerator.addCellStyleGenerator(nameGenerator);
    compositeGenerator.addCellStyleGenerator(nameGenerator2);

    grid.setCellStyleGenerator(compositeGenerator);

请注意，复合生成器可以使用通用生成器，例如具有正则表达式定义的生成器和更复杂的用例特定生成器。

希望这可以帮助那些试图找到简单方法来设置单元格样式的人。快乐的实验。