在 Vaadin 中为同一视图中的两个或多个实体执行 UI 有哪些方法？

Question

我有以下 excel table 印在纸上，代表一个月的出勤表，我应该把它带到网上。

第一列是所有参与者的姓名。如果此人当天在场，将检查其他列，如果不在场，则为空。因为第 header 列将是该月的第几天。

后端是用 Spring Data/JPA

制作的

在 Vaadin 中执行 UI 有哪些选项？

对我来说第一个冲动是 Vaadin 网格，但如果你仔细看是不可能的，因为在网格中每个网格只能有一个实体。

第二种可能性是 Polymer 3 with TemplateModel

您还有其他想法吗？

非常感谢。

Answer 1

您可以只创建 person/user 类型的 Grid，并为每个事件添加列，示例代码如下。您的 classes 可能有所不同，但希望您明白了。请注意，实际创建网格的代码只有 8 行。

您还可以按照 Simon Martinelli 的建议将所有数据封装在视图模式中 class，例如EventGridModel 包含与会者、事件、人员，可能还有一些实用功能。

@Route
public class MainView extends VerticalLayout {

    public MainView() {
        Person[] persons = new Person[]{
                new Person(0, "Foo", "Bar"),
                new Person(1, "John", "Doe"),
                new Person(2, "Scala", "JVM"),
                new Person(3, "Jeht-Phuel", "Steelbeam"),
                new Person(4, "Ilike", "Turtles")
        };
        Event[] events = new Event[] {
                new Event(0, Arrays.asList(persons[0], persons[1], persons[2], persons[4]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[0], persons[1], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[1], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[0], persons[2], persons[3]), LocalDate.of(2019, 9, 5)),
                new Event(0, Arrays.asList(persons[1], persons[2], persons[3], persons[4]), LocalDate.of(2019, 9, 5)),
        };

        Grid<Person> grid = new Grid<>();
        grid.addColumn(person -> person.getFirstName() + " " + person.getLastName()).setHeader("Name");
        for (Event event: events) {
            grid.addColumn(person -> event.getAttendees().contains(person) ? "X" : "")
                    .setHeader(event.getDate().toString());
        }
        grid.setItems(persons);
        add(grid);
    }

    class Person {
        private final Integer id;
        private final String firstName;
        private final String lastName;

        Person(Integer id, String firstName, String lastName)  {
            this.id = id;
            this.firstName = firstName;
            this.lastName = lastName;
        }

        public Integer getId() {
            return id;
        }

        public String getFirstName() {
            return firstName;
        }

        public String getLastName() {
            return lastName;
        }

        @Override
        public boolean equals(Object other) {
            return other instanceof Person && Objects.equals(((Person) other).getId(), id);
        }
    }

    class Event {
        private final Integer id;
        private final List<Person> attendees;
        private final LocalDate date;

        Event(Integer id, List<Person> attendees, LocalDate date) {
            this.id = id;
            this.attendees = attendees;
            this.date = date;
        }

        public Integer getId() {
            return id;
        }

        public List<Person> getAttendees() {
            return attendees;
        }

        public LocalDate getDate() {
            return date;
        }

        @Override
        public boolean equals(Object other) {
            return other instanceof Event && Objects.equals(((Event) other).getId(), id);
        }
    }
}

在 Vaadin 中为同一视图中的两个或多个实体执行 UI 有哪些方法？

Which ways exist to do the UI in Vaadin for two or more Entitys in the same view?

vaadin

polymer

vaadin-grid

vaadin-flow