Christmas Tree in Grid

Anyone has any idea on how to implement the so-called Christmas Tree effect on
Grid
?

The Christmas Tree is a now (in)famous article published by Sun many years ago. It details how you in Swing’s JTable can implement an effect so that cells will “light up” for a short while after they have been updated. Hence the name Christmas Tree.

In the context of Vaadin this is particular useful together with Server Push. Without this effect it is difficult for the user to see that something has actually updated.

My question is if someone has attempted to implement anything similar on Vaadin Grid ?

There are many ways to implement this (server-side or client-side, batched or non-batched, etc) but whatever the solution there’s a need for timer that gets started on cell update and fires when cell highlight should be turned off. Typically this is after 2 secs. If you don’t do it right you can end up with one timer per cell which probably won’t fly. Some optimization can be done because there’s obviously no need for the feature on cells that are not in view.

Peter

Hi Peter

That’s actually a great idea for an addon :slight_smile: If I wanted to implement it, I would probably use GWT’s AnimationScheduler.

Thanks Mac.
I agree that it probably should be done on the client side. Dunno if GWT’s AnimationScheduler is the right one as it seems to be for something which is repeated/ongoing. The timer I’m looking for is a one-time event.

At the lowest level, Javascript, I’m guessing it would be something like
window.setTimeOut()
that would do the trick but I must admit I really don’t know what I’m talking about here as my strength is Java and not any GWT nor Javascript.

I gave it some thought recently. I was enlightened – it’s best to use whatever we have in the browser already; in that case I would resort to using CSS animations. This would have two benefits: first of all, I believe this would be the most optimal performance-wise and second, this approach would save from the hassle of maintaining timers etc.

Thanks Peter, now I have something to tinker with in my free time :slight_smile:

Hi Mac,
Only shows how little I know of CSS. Now that you mentioned I did some reading on CSS Animations which I had never looked into before. I now understand what you mean: A CSS Animation
automatically changes back to its original state once the animation is over
. Exactly what we want. I fully agree this seems like the perfect “tool” to solve the problem.

I believe this effect/feature will be an excellent selling point for Vaadin Grid and Vaadin in general. It looks amazing in demos. Besides that it has real value.

I’ve been able to do it, at least partly. I’m putting the values that need the “blink” effect into a column that uses
HtmlRenderer
. The actual value I then put inside a [font=courier new]

[/font] element using a [font=courier new] PropertyValueGenerator [/font].

This can put a blink effect on the value itself. However what you really want to is to put a blink effect on the cell (in html terms that would be the enclosing [font=courier new]

[/font] element), [u] not [/u] on the value inside the cell. I cannot figure out how to do this and don't think there's a way. So I have to settle for the effect on the value, not the cell.