在vaadin 7中设计View的方法

时间:2014-08-07 07:11:29

标签: vaadin vaadin7 vaadin4spring

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

enter image description here

当请求来到我的UI类时,它将使用导航器调用我的View。此视图由一个选项卡组成,每个选项卡都有自己的功能,并且还依赖于其他选项卡值。第一个选项卡是搜索选项卡它显示来自选项卡内容区域中的数据库的所有记录(表格/网格插件。我不知道要使用什么)。每条记录都可以访问其他两个标签。其他两个选项卡包含用于映射每个记录属性的字段。截至目前,我已经采用虚拟数据进行显示。

我写了这样的观点。但我很困惑天气这种方法是否正确。

@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

1 个答案:

答案 0 :(得分:0)

以下是我在这种情况下所做的事情: 使用Blackboard事件总线发起事件。这些事件带有有效载荷,该有效载荷基本上是单击/选择的记录的id。 其他选项卡或视图将注册为此事件的侦听器。触发事件时,侦听器从有效内容中提取记录/实体ID,从后端获取实体对象,并相应地显示它。

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

我希望它有所帮助。