Time for action – creating a JavaScript component

Follow these steps and see how easy is to incorporate an existing JavaScript component in Vaadin applications:

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

2. Create a new class for our custom JavaScript based component inside a javascriptspinner package:

   @JavaScript({ "spinner.js",
       "http://code.jquery.com/jquery-1.9.1.js",
       "http://code.jquery.com/ui/1.10.3/jquery-ui.js" })
   public class Spinner extends AbstractJavaScriptComponent {
   }

3. Place a new JavaScript file spinner.js beside the previous class:

   javascriptspinner_Spinner = function() {
     var e = this.getElement();
     e.innerHTML = "<input id='spinner' />";
     var spinner = $("#spinner").spinner();
   };

4. Use the component as you would with any other Vaadin UI component:

   public class JavascriptspinnerUI extends UI {
   
     protected void init(VaadinRequest request) {
       final VerticalLayout layout = new VerticalLayout();
       layout.setMargin(true);
       setContent...