vaadin7中视图的设计方法

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

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

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

@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) {

}
}

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

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

---

任何人。。请帮帮我。我盲目地使用appproach，以下是我在这种情况下的做法： 使用黑板事件总线触发事件。这些事件携带的有效负载本质上是单击/选择的记录的id。 其他选项卡或视图已注册为此事件的侦听器。触发事件时，侦听器从负载中提取记录/实体id，从后端获取实体对象，并相应地显示它

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

---

我希望这会有所帮助。

我通常使用子窗口来显示/编辑表记录详细信息，而不是选项卡。您好，Vikrant，我希望此过程将增加到后端的往返次数。不是吗？正在两个视图中检索同一记录。1。黑板事件在服务器本身上触发，而不是在客户端浏览器上触发。在浏览器和服务器之间来回移动的只是鼠标和按钮的点击，以及使用JSON的一个或多个记录的域数据。服务器上存在任何繁重的处理，因此没有繁重的往返。2.不需要两次获取同一记录。您可以将记录实体实例本身作为黑板事件的负载传递。3.您可以在此处查看一个工作演示：[链接]向我发送电子邮件以获取凭据webVikrant@gmail.com