5.5.11.1. Using WebJars

This method allows you to use various JS libraries packaged into JAR files and deployed on Maven Central. The following steps are required to use a component from a WebJar in your application:

  • Add dependency to the compile method of web module:

    compile 'org.webjars.bower:jrcarousel:1.0.0'

  • Create the web-toolkit module.

  • Create a client-side GWT widget class and implement the native JSNI method for creating the component.

  • Create a server-side component class with @WebJarResource annotation.

    This annotation should be used only with ClientConnector inheritors (which are classes of UI components from the web-toolkit module usually).

    The value of the @WebJarResource annotation, or the resource definition, should follow one of the two possible templates:

    1. <webjar_name>:<sub_path>, for example:

      @WebJarResource("pivottable:plugins/c3/c3.min.css")

    2. <webjar_name>/<resource_version>/<webjar_resource>, for example:

      @WebJarResource("jquery-ui/1.12.1/jquery-ui.min.js")

    The annotation value can have one or more (String array) WebJar resource String definitions:

    @WebJarResource({
        "jquery-ui:jquery-ui.min.js",
        "jquery-fileupload:jquery-fileupload.min.js",
        "jquery-fileupload:jquery-fileupload.min.js"
})
public class CubaFileUpload extends CubaAbstractUploadComponent {
    ...
}

    Specifying the WebJar version is not required, as due to Maven version resolution strategy the WebJar with the higher version will be used automatically.

    Optionally, you can specify a directory inside VAADIN/webjars/ from which the static resources will be served. Thus you can override WebJar resources by placing new versions of resources in this directory. To set the path, use the overridePath property of the @WebJarResource annotation, for example:

    @WebJarResource(value = "pivottable:plugins/c3/c3.min.css", overridePath = "pivottable")

  • Add new component to the screen.