vaadin - Vaadin Grid で列の内容を右揃えにしますか?

Question

新しい VaadinGridウィジェット (由緒ある の代替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";
    }
});