Add jQuery to a Vaadin 7 application

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

1. 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:
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

   import javax.servlet.ServletException;   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) {}             });          }       });    } }

2. Add the reference to the servlet in your web.xml or annotate the class with the @WebServlet annotation.
3. Create your jQuery snippet and invoke it using the JavaScript class, for example:
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   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);    } }

   

You can download a complete example here.