Introduction

This tip introduces how you can integrate Vaadin 7 and your custom Javascript or any JavaScript library like jQuery, jQuery UI, etc. I will also demonstrate how you can use your custom style with Vaddin Framework.

Background

A basic understanding of Vaddin framework is required for using this code sample.

Details

To add jQuery (or any other JavaScript library) to a Vaadin 7 application, follow these easy steps:

First create a Vaadin project either using your favorite IDE or the vaadin maven archetype (or both). Create a new class that extends from VaadinServlet, and override the servletInitialized method:

import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import com.vaadin.server.ServiceException;
import com.vaadin.server.SessionInitEvent;
import com.vaadin.server.SessionInitListener;
import com.vaadin.server.VaadinServlet;

public class TestJqueryVaadinServlet extends VaadinServlet {
   @Override
   protected void servletInitialized() throws ServletException {
      super.servletInitialized();
      getService().addSessionInitListener(new SessionInitListener() {
         @Override
         public void sessionInit(SessionInitEvent event) throws ServiceException {
            event.getSession().addBootstrapListener(new BootstrapListener() {
               @Override
               public void modifyBootstrapPage(BootstrapPageResponse response) {
                  // With this code, Vaadin servlet will add the line:
                  //
                  // <script type="text/javascript" 
                  // src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
                  //
                  // as the first line inside the document's head tag in the generated html document
                  response.getDocument().head().prependElement("script").attr("type", 
                  "text/javascript").attr("src", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
               }

               @Override
               public void modifyBootstrapFragment(BootstrapFragmentResponse response) {}
            });
         }
      });
   }
}

Then add the reference to the servlet in your web.xml or annotate the class with the @WebServlet annotation.

And then create your jQuery snippet and invoke it using the JavaScript class, for example:

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

      Label label = new Label("This will fade-out once you click the button");

      Button button = new Button("Hide Label");
      button.addClickListener(new Button.ClickListener() {
         public void buttonClick(ClickEvent event) {
            JavaScript.getCurrent().execute("$('.v-label').animate({opacity: 0.0}, 3000);");
         }
      });
      layout.addComponent(label);
      layout.addComponent(button);
   }
}

Including style sheets or JavaScript files in your add-ons or as a part of your application can now be done by adding a @StyleSheet or @JavaScript annotation to a Component or Extension class. Each annotation takes a list of strings with URLs to the resources that should be loaded on the page before the framework initializes the client-side Component or Extension.

The URLs can either be complete absolute URLs (e.g."https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js") or relative URLs (e.g. "redbutton.css"). A relative URL is converted to a special URL that will download the file from the Java package where the defining class is located. This means that e.g. @StyleSheet({"redbutton.css"}) on the class com.example.RedButton will cause the file com/example/redbutton.css on the classpath to be loaded in the browser. @JavaScript works in exactly the same way.

#!java
@StyleSheet("redbutton.css")
public class RedButton extends NativeButton {
    public RedButton(String caption) {
        super(caption);
        addStyleName("redButton");
    }
}

In this simple example, the RedButton component just adds a...

redButton

...style name to a normal

NavigationButton

... .redbutton.css is located in the same folder as RedButton.java and has this content:

#!css
.redButton {
    background-color: red;
}

This new mechanism makes it very easy to include style sheet or JavaScript files with add-ons and automatically load them in the browser when the add-on is used.

Second and my favorite way:

You can also use the @Stylesheet and @Javascript annotations. It's much simpler.

@StyleSheet({
/*
* JQuery UI
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/css/ui-darkness/jquery-ui-1.9.2.custom.min.css",
})

@JavaScript({
/*
* JQuery
*/
"vaadin://jquery/jquery-1.11.1.min.js",

/*
* JQuery UI
*/
"vaadin://jquery/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js",
})

public class MyUI extends UI {
...
}

Points of Interest

Now you can use your custom JavaScript and CSS with Vaadin UI anywhere and anytime. Happy coding!