在Vaadin Grid中右对齐列内容？

Question

在新的Vaadin Grid小部件(替代古老的小部件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已经包含的主题,并仅在需要时扩展现有主题.

这里有一个简单的例子,说明如何使用regexp实现单元格生成器(根据字段名称匹配一个或多个字段)

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);

请注意,复合生成器可以使用通用生成器,例如具有regexp定义和更复杂的特定于用例的生成器.

希望这有助于那些试图找到简单方法来细胞的人.快乐的实验.