Click here to Skip to main content
15,867,308 members
Articles / Web Development
Tip/Trick

Vaadin7 jQuery UI Integration

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
10 Jan 2015CPOL2 min read 17.7K   1   1
Vaadin7 jQuery UI integration

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:

Java
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:

Java
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
#!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...

Java
redButton

...style name to a normal

Java
NavigationButton

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

CSS
#!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.

Java
@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!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Ardites Bangladesh Ltd.
Bangladesh Bangladesh
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionhave you consider to post this as a tip? Pin
Nelek10-Jan-15 8:41
protectorNelek10-Jan-15 8:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.