在vaadin 7中设计视图的方法

Question

我是vaadin的新手。我必须在vaadin上开发PoC。服务层已经使用spring编写。作为Poc的一部分，我必须在下面开发一个屏幕。

​

​

当请求到达我的UI类时，它将使用navigator调用我的视图。该视图由一个选项卡表组成，每个选项卡都有自己的功能，并且还依赖于其他选项卡值。第一个选项卡是搜索选项卡。它在选项卡内容区域(表/网格附件)中显示来自数据库的所有记录。我不知道该用什么)。每条记录都可以访问其他两个选项卡。另外两个选项卡具有映射每条记录的属性的字段。到目前为止，我已经获取了要显示的虚拟数据。

我写的视图是这样的。但我对这种方法是否正确感到困惑。

@VaadinView(UserView.NAME)
public class UserView extends VerticalLayout implements View {

public static final String NAME = "user";

public UserView(){

    // For Tabs
    TabSheet tabs = new TabSheet();

    // first tab component
    VerticalLayout layout = new VerticalLayout();

    // for search fields
    HorizontalLayout searchArea = new HorizontalLayout();
    FormLayout searchAreaName = new FormLayout();
    TextField name = new TextField("name");
    FormLayout searchAreaEmail = new FormLayout();
    TextField email = new TextField("email");
    searchAreaName.addComponent(name);
    searchAreaEmail.addComponent(email);
    searchArea.addComponent(searchAreaName);
    searchArea.addComponent(searchAreaEmail);

    // for search table
    BeanContainer<String, test.User> users = new BeanContainer<String, User>(
            User.class);
    users.setBeanIdProperty("userId");
    users.addBean(new User("sudheer", "sudheer@kewil.com", "1"));
    users.addBean(new User("sridhar", "sridhar@kewil.com", "2"));
    users.addBean(new User("ranga", "ranga@kewil.com", "3"));

    Table table = new Table("", users);
    table.setSizeFull();
    table.setPageLength(6);

    layout.addComponent(searchArea);
    layout.addComponent(table);
    Tab tabOne = tabs.addTab(layout, "User Search", null);

    // second tab component
    VerticalLayout userLayout = new VerticalLayout();
    userLayout.addComponent(new TextField("user name"));
    userLayout.addComponent(new TextField("email"));
    tabs.addTab(userLayout, "main details", null);

    // tab change event

    addComponent(tabs);
    tabs.setHeight("50%");
    tabs.setWidth("50%");
    setComponentAlignment(tabs, Alignment.MIDDLE_CENTER);
}

@Override
public void enter(ViewChangeEvent event) {

}
}

我也没有实现分页。在继续之前，我想知道还有没有其他最好的方法。

任何建议都会对我有很大帮助。提前谢谢。

任何人..。请帮帮我。我的做法是盲目的。

Answer 1

下面是我在这种情况下所做的:使用Blackboard事件总线来触发事件。这些事件携带一个有效负载，该负载本质上是所单击/选择的记录的id。其他选项卡或视图将注册为此事件的侦听器。当事件被触发时，监听器从有效负载中提取记录/实体id，从后端获取实体对象，并相应地显示它。

这种方法确保了组件的松散耦合。

我希望它能帮上忙。