Time for action – creating a widget

We are going to develop a custom widget to show a marquee. Follow these steps to create your first widget:

1. Create a new Vaadin project with the name myfistwidget using your IDE.

2. Create a new class for the client side widget myfirstwidget.client.MarqueeLabelWidget:

   package myfirstwidget.client;
   
   import com.google.gwt.dom.client.Style.Position;
   import com.google.gwt.dom.client.Style.Unit;
   import com.google.gwt.user.client.Element;
   import com.google.gwt.user.client.Timer;
   import com.google.gwt.user.client.ui.Label;
   
   public class MarqueeLabelWidget extends Label {
     
   // ...
   
     public MarqueeLabelWidget() {
       final Element element = getElement();
       element.getStyle().setPosition(Position.RELATIVE);
   
       Timer timer = new Timer() {
         private int left = 0;
   
         @Override
         public void run() {
           element.getStyle().setLeft(left, Unit.PX);
           left++;
         }
       };
   
       timer.scheduleRepeating(100);
     }
   }

3. Create a new myfirstwidget.client.MarqueeLabelState...