1

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

在此处输入图像描述

当请求来到我的 UI 类时，它将使用导航器调用我的视图。此视图由一个选项卡组成，每个选项卡都有自己的功能，并且还依赖于其他选项卡值。第一个标签是搜索标签。它在选项卡内容区域（表格/网格插件。我不知道该使用什么）中显示来自 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) {

}
}

我也没有实现分页。在继续之前，我想知道任何其他最佳方法。

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

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

4

1 回答 1

0

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

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

我希望它有所帮助。

于 2014-09-18T09:58:10.137 回答