Howto bind a POJO to a table with a button?

Vaadin 6 / 7 / 8 Framework Data Binding
1

Hi,

my goal is a non-editable table with a POJO (or POJO-like object) binding. I tried the BeanContainer and BeanItemContainer. Works great …
… until I want to have a button(“+”) column that adds 1 to a field in the POJO which results in an update of the table. (similar to the JSpinner in Swing)
It would be nice to enable filtering in the table, so I’m using the IndexedContainer (and because I don’t know how to add a button column to the BeamContainer).

Currently I have this code, but the click listener is never called, I think I’m totally wrong:


        IndexedContainer cont = new IndexedContainer(); 
        cont.addContainerProperty("Name", String.class, null);
        cont.addContainerProperty("Ranks", Integer.class, null);
        cont.addContainerProperty("+", Button.class, null);
        for (Skill skill : character.getSkills()) {
        	Item row = cont.addItem(skill);
        	row.getItemProperty("Name").setValue(skill.getName());
        	row.getItemProperty("Ranks").setValue(skill.getRanks());
        	row.getItemProperty("+").setValue("+");
        }
        Table table = new Table("Skills", cont);
        table.setSelectable(true);
        table.setTableFieldFactory(new DefaultFieldFactory() {
			private static final long serialVersionUID = 1L;

			@Override
            public Field createField(Container container, final Object itemId, Object propertyId, Component uiContext) {
				if ("+".equals(propertyId)) {
					Button bt = new Button("+", new Button.ClickListener() {
						
						@Override
						public void buttonClick(ClickEvent event) {
							log.fine("clicked "+event.getSource());
							((Skill)itemId).increaseRank();
						}
					});
					bt.setData(itemId);
					return bt;
				}
                return null;
            }
        });
        table.setEditable(true);
        layout.addComponent(table );
2

You can combine BeanItemContainer, and create the button column with Table.addGeneratedColumn(). You can even specify an existing property name, which is then displayed instead of the actual property. Remember that the table wont update any values that you have changed directly in the Pojo; these changes need to go through the property. So something like myprop.setValue(myprop.getValue()+1) will automatically update the table values as well.

3

Thanks, that works fine.