Vaadin7 jQuery UI integration

Question

Vaadin 7 supports custom javascript. But my question is if we want to integrate jQuery-ui with vaadin7, how can we add jQuery-ui css files. At the moment @Javascript supports adding javascript only. If we wanna add css, we have add that as sass style.

Answer 1

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

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

NativeButton

. 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. its 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 {
...
}