Animation on mouse entered event

Hello

I would like to animate a button when the mouse is entering it. I think I have to use the Animator add-on of Jouni.
Could anyone give me an example please ?

Thanks in advance,
Kevin.

Actually, I don’t want a server side processing when there is mouse over event. I just want my button to grow.

You just answered you question partly: you need to do client side programming (GWT) in order to achieve this. So extend the Button and VButton classes, and do necessary modifications to the VButton class (sink mouse move events, extend onBrowserEvent method etc.).

Thank you Jouni for your answer.
Would you have a simple example of this ? I have never made Vaadin widget.
But what I don’t understand is how to make my button growing (it means how to animate) my Button in the widget java code ?

There’s a chapter in the Book about making widgets. Sometimes the GWT API offers way to control widget sizes, sometimes you have to manipulate the HTML DOM.

Notice that you can also do some things in CSS with the “hover” pseudo class, for example:

.v-button:hover {
  width:  100px;
}

That may have some problems and might not work well with Button.

That’s true, this won’t work in any other layouts than CssLayout and CustomLayout (other layouts will clip the content to the initial width). And this also won’t animate the size change, only change it instantly. CSS transitions will of course work in some browsers, and might be a good alternative to use (offer a simple size change to older browsers).

But how can I animate my button size change in my GWT code ? Could you give me an example please ?

You need to extend the Button and VButton classes, and override the onBrowserEvent method from VButton:


// Server side component
@ClientWidget(VAnimateButton.class)
public class AnimateButtton extends Button {

}

// Client side widget
public class VAnimateButton extends VButton {

  public void onBrowserEvent(Event event) {
    super.onBrowserEvent(event);
    if(DOM.eventGetType(event) == Event.ONMOUSEOVER) {
       // Start the animation here, use GWT’s Animation class as a helper
    }
  }

}

Then compile and use the new widgetset in your application.

That should get you started. You’ll find more detailed info on building custom components/widgets from the Book of Vaadin.

Thanks a lot Jouni. It perfectly works :wink: