O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required