Vaadin 7 UI Design By Example Beginner's Guide

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 ...