Webinar: Vaadin FieldGroups

embedyoutube=aq_OXCVqvFI

What are FieldGroups and how do you build forms in Vaadin? How do you do validation and what different strategies are there for binding data to you forms? Join the live webinar today Thursday May 15th 2014 @ 3 PM CET to find out more.

Ask your questions here in this thread before and during the webinar.

If you have any questions about FieldGroup we’ll be monitoring this thread and answer your questions asap. The source code will also be made available here.

Hi and thanks for the presentation!
This is a bit off subject, but I allow myself to ask anyway…

I have POJOs of different types. Say for the example a Building and a Room. Each has different properties, but they have a hierarchical relationship (ie. Buildings contains Rooms).
I want to show the hierarchy in a Tree, and allow editing of each POJO through a form, when selected in the Tree. For the Tree, I guess I have to use a Container which can hold the corresponding Items, and when selected, extract the Item and use a BeanFieldGroup to bind a form to the Item.
My problem is, that BeanItemContainer, when it builds BeanItems from the POJOs, reduces the properties to the ones given as a model in the Container’s constructor.
Can you recommend a Container to use or another way forward?

The tree might look like:

Building1
| Room 1
| Room 2
Building 2
| Room 3
| Room 4

When a Building is selected, the form should show properties of a Building POJO
When Room is selected, the form should show properties of Room POJO

Hi, thanks for the presentation. Is the source code of the last example available somewhere?

Source code will be made public early next week. I’ll post a link here then.

BeanItemContainer is basically just an IndexedContainer which autopopulates the properties based on the bean. I often use IndexedContainer in favor over BeanItemContainer when I want to show something else than exactly the properties in one bean. That would work nicely for you as well.

Here is some code written directly into the browser so there might be typos in there.

IndexedContainer container = new IndexedContainer();
container.addContainerProperty("name", String.class, null);
container.addContainerProperty("size", Int.class, null);
container.addContainerProperty("streetAddress", Int.class, null);
/* More similar properties */
for(Building building : buildings){
  Item buildingItem = container.addItem(building);
  buildingItem.getProperty("name").setValue(building.getName());
  buildingItem.getProperty("size").setValue(building.getSize());
  buildingItem.getProperty("streetAddress").setValue(building.getStreetAddress());
  for(Room room : building.getRooms()){
    Item roomItem = container.addItem(room);
    roomItem.getProperty("name").setValue(room.getName());
    roomItem.getProperty("size").setValue(room.getSize());
  }
}

In this example I put two “shared” properties and one that is only relevant for a building. A bit more code than just initializing a BeanItemContainer but you get exactly the end result that you want.

If you want to actually show these in a tree with a hierarchy, just switch the IndexedContainer into a HierarchicalContainer and within the room-loop set the parents for the room pointing at the building. The method is something like container.setParent(childItem, parentItem); not sure on the order of parameters or if it wants the id (as in the object itself) or the items. :slight_smile:

Dear Jens

Thanks for your answer. What I like about BeanItemContainer is, that it links the fields to the setters and getters (changes in the UI reflect directly in the bean).
So I finally rolled my own Container by extending AbstractBeanContainer. I (just so slightly) modified the createBeanItem() method.
Normally it creates the BeanItems with

new BeanItem<BEANTYPE>(bean, model); but in my version it does

new BeanItem<BEANTYPE>(bean); No model! So BeanItems are created with all properties, and I can reuse the same BeanItems in the Tree and in the Form.
Thanks anyway. Philipp

The
source code for the FieldGroup demo
is now available on GitHub.