Edit Table cell: how to make edit widget disappear without flickering

Hi everybody,

here’s a newbie’s question: Im trying to create a Table where you can edit a single cell on double click.

Checking the docs and the forum as well, it was no problem to make the edit-widget appear in the cell that received the double click. The problem is how to make that newly created edit widget disappear as soon as the user clicked on any other cell/row.

Here’s my FieldFactory:


private final class ItemFieldFactory extends DefaultFieldFactory {
	@Override
	public Field createField(Container container, Object itemId,
			Object propertyId, Component uiContext) {
		if (selectionEvent != null) {
			if ((selectionEvent.getItemId().equals(itemId))
					&& (selectionEvent.getPropertyId()
							.equals(propertyId))) {
				return super.createField(container, itemId, propertyId,
						uiContext);
			}
		}
		return null;
	}
}

The
selectionEvent
is stored by the listener:


items.addListener(new ItemClickEvent.ItemClickListener() {
	@Override
	public void itemClick(ItemClickEvent event) {
		if (event.isDoubleClick()) {
			selectionEvent = event;
			items.setEditable(true);
		} else {
			// TODO: next line properly makes the edit widget disappear
			// but creates unwanted flickering
			items.setEditable(false);
		}
	}
});

I tried various other statements in the else case but non of them made the edit widget disappear without side effects. So can I get the desired behavior?

Any help appreciated
Dan

Hi Daniel,

I tried out your code in a small test application and didn’t see any flickering. I tested on Firefox, Safari and Chrome browsers in OS X and used Vaadin 6.4.1.

Do you get the flickering on all browsers? Are you using the latest Vaadin version?

  • Teemu

He Teemu,

thanx for your quick answer. So I’ll provide some more specifics:

Vaadin Version:

  • I was using Vaadin 6.4.2.nightly-20100730-c14360. Now I checked with 6.4.1 and 6.4.2.nightly-20100811-c14455.

OS:

  • OS X 10.6.4

Browser:

  • Safari 5.0.1
  • Firefox 3.6.8

I tried all three Vaadin versions with both browsers - the flickering always stayed.

Here’s a short, detailed sample scenario:
user interaction

  • Edit column Lastname of “Mustermann7”
  • Click on row “Max9…”

Reaction (no more user interaction)

  • Blue selection bar goes to row Max9 as supposed
  • Selection bar quickly jumps back to previously selected row Max7
  • Selection bar jumps again to newly selected row Max9
  • Focus somehow stays on Max7
    → when now pressing the Up-Arrow the selection bar will be placed on Max6

Note:
As written in the
TODO
: Removing the
items.setEditable(false)
in the
else
of the ItemClickListener makes the flickering disappear…

If you’re not using a kind of super fast computer, I have no idea about why you don’t see the same thing happening. I have a MacBookPro with a 2.4 GHz Intel Core 2 Duo, 6 GB Ram - not that slow I’d say. On the other side I did all my tests in debug mode, running tomcat 6 within Eclipse Galileo…

So let’s hope you have further ideas in mind :wink:
Dan

Hi again,

I was now able to reproduce the flickering problem. At first I didn’t have the
Table
in selectable mode, so the problem obviously didn’t occur. :slight_smile:

Anyway I was able to find a workaround for the problem. Seems that the current value for the
Table
is not correctly updated in this case, which probably is a bug in Vaadin. I changed the
itemClick
method like in the following code snippet and was able to get rid of the flickering. The main change here is the explicit
setValue
call.


@Override
public void itemClick(ItemClickEvent event) {
    if (event.isDoubleClick()) {
        selectionEvent = event;
        items.setEditable(true);
    } else if (items.isEditable()) {
        items.setEditable(false);
        items.setValue(event.getItemId());
    }
}

I’ll notify the Vaadin development team so that they can further investigate if this is a bug in the Vaadin
Table
component.

  • Teemu

Created a ticket
#5427
for the Vaadin development team.

He Teemu,

works like a charm now! Among others I already had searched for the method that tells the table where to put to focus :wink:

Thanx a lot for helping me out that fast
-Dan

Ps.: I’ll keep an eye on that ticket

Hi Daniel and Teemu.

I am new to vaadin, however, I can understand most of your code except selectionEvent, where do you declare it?, is this selectionEvent an ItemClickEvent or an actual SelectionEvent. This is another newbie´s question I know but I hope you can help me, this would make my life a lot easier, thank you both.