Approach for designing View in vaadin 7

Question

I am newbie to vaadin. I have to develop PoC on vaadin. Service layer is already written using spring. As a part of Poc I have to develop a screen below.

When request comes to my UI class, it will call my View using navigator. This view consists of one tabsheet and each tab have its own functionality and depends on other tab values too. First tab is search tab. It displays all the records came from db in the tab content area(Table/Grid addon. I dont know what to use). Each record have access to other two tabs. The other two tabs has fields to map each record's property. As of now, i have taken dummy data to display.

I wrote the view like this . But I am confused weather this approach is correct or not.

@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", "[email protected]", "1"));
    users.addBean(new User("sridhar", "[email protected]", "2"));
    users.addBean(new User("ranga", "[email protected]", "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) {

}
}

I haven't implemented pagination also. Before going forward, I would like to know any other best approaches to go ahead.

Any suggestions would help me very much. Thanks in advance.

Anybody.. please help me out. I am going blindly with my appproach

Answer 1

Here is what I do in such cases: Use the Blackboard event bus to fire events. These events carry a payload that essentially is the id of the record clicked/selected. The other tabs or views are registered as a listener of this event. When the event is fired, the listeners extract the record/entity id from the payload, fetch the entity object from the back-end, and display it accordingly.

This approach ensures loosely-coupled components.

I hope it helps.