/ Vaadin Framework


Get started with the Vaadin Gradle Plugin (Part 1)

The Gradle Vaadin plugin has come a long way since I first wrote about it in the jasoft.fi blog. It is time to take another deeper look into how you can utilize Gradle with your Vaadin projects.

In the first part of this mini-series we are going to look at how we create a new project, run the project from the command line and prepare the project for importing it into eclipse.

Starting a new project

Lets first look at my initial build.gradle file:

apply from: 'http://plugins.jasoft.fi/vaadin.plugin'
apply plugin: 'eclipse-wtp'

vaadin {
    version '7.1.+'
    widgetset 'com.example.MyWidgetset'
}

If you previously have used the plugin you might have an idea what this does, but lets still take a quick look.

First we use apply from and give it the url to the plugin script. This script will act as a bootstrap for the Vaadin plugin and fetch the actual plugin jar and include it in the local project. As you see in the second line we also include the eclipse-wtp plugin in our script since I am going to be working in eclipse. Since the eclipse plugin comes bundled with the gradle distribution we don't need to provide a bootstrap url for it and can just say apply plugin directly instead of apply from we needed to use with the Vaadin plugin.

Now that we have the plugins sorted, we next define a vaadin closure where we can configure a lot of options about how the plugin will work.

We start by configuring the version of Vaadin we want to use in the project. I usually recommend that you specify an exact version (like 7.1.13) or then at least the latest of the minor version (as I have done above). By doing so you are making sure that no surprising API changes might occur when a new Vaadin version is released without you manually tweaking the version number.

The second configuration we have is the widgetset where we specify the location of the Widgetset (.gwt.xml) file. This file is used by the GWT compiler when we are adding new addons to the project or building our own components with client side implementations.

--

Now that we have our initial Gradle build file lets create a folder for it and get started with our project. So create a new folder where you would like the project to reside and add the build.gradle file above to the that folder.

Open a terminal and move to your project folder.

To create a project we are going to use the vaadinCreateProject task. I am going to call my project HelloGradle.

This is how it should look after you have run the task:

$ gradle vaadinCreateProject
Using Gradle Vaadin Plugin 0.8
> Building > :vaadinCreateProject
Application Name (MyApplication): HelloGradle
:vaadinCreateProject

BUILD SUCCESSFUL

Total time: 23.276 secs

And here is what the resulting file structure will look like:

.
|-- build.gradle
`-- src
    `-- main
        |-- java
        |   `-- com
        |       `-- example
        |           |-- HelloGradleServlet.java
        |           `-- HelloGradleUI.java
        |-- resources
        |   `-- com
        |       `-- example
        |           `-- MyWidgetset.gwt.xml
        `-- webapp
            `-- VAADIN
                `-- themes
                    `-- HelloGradle
                        |-- addons.scss
                        |-- hellogradle.scss
                        `-- styles.scss

12 directories, 7 files

As you can see it created your Servlet and UI java source files as well as your widgetset XML file. It also automatically created an application theme.

Running the project

Okay, so now that we have the project we want to run it to see if it works.

The plugin provides an embedded Jetty instance that can be used for running the application on. To use it you use the vaadinRun task which will launch the server and run the application.

Once you run the vaadinRun task the application classes, your widgetset and your theme will be compiled and packaged into a WAR archive which is then run on the embedded Jetty server.

Here is what the output looks like when you run the task:

$ gradle vaadinRun
Using Gradle Vaadin Plugin 0.8
:vaadinCompileThemes
Compiling /myproject/src/main/webapp/VAADIN/themes/HelloGradle/styles.scss...
:compileJava
:vaadinUpdateAddonStyles
:vaadinUpdateWidgetset
:processResources
:classes
:vaadinCompileWidgetset
Compiling module com.example.MyWidgetset
   Computing all possible rebind results for 'com.vaadin.client.metadata.ConnectorBundleLoader'
      Rebinding com.vaadin.client.metadata.ConnectorBundleLoader
         Invoking generator com.vaadin.server.widgetsetutils.ConnectorBundleLoaderFactory
            Populating eager bundle
               Visiting VerticalLayoutConnector with ConnectorInitVisitor
                  VerticalLayoutConnector will be in the eager bundle
               Will serialize class com.vaadin.shared.ui.orderedlayout.VerticalLayoutState as a bean
.... Compiler output omitted ....
Compiling 1 permutation
      Compiling permutation 0...
   Compile of permutations succeeded
Linking into /myproject/src/main/webapp/VAADIN/widgetsets/com.example.MyWidgetset
   Link succeeded
   Compilation succeeded -- 47.765s
:vaadinRun
Application running on http://0.0.0.0:8080 (debugger on 8000)
Press [Enter] to terminate server...
> Building > :vaadinRun

Once your server is running the default browser will be opened with the application URL and you should see the application running in the browser. You can terminate the server by either pressing [Ẹnter] or [Ctrl+C].

Prepping our project for Eclipse

Now that we know our project is working, lets prepare the project for Eclipse so we don't have to use Vim or Emacs as code editors from the console.

Remember that we added the eclipse-wtp plugin to the project? If the eclipse plugin is also added to the project the Vaadin plugin will automatically configure it to support the Vaadin Eclipse Plugin out of the box as well as configure the necessary dependencies for Vaadin.

For eclipse to recognize the project correctly we need to generate the correct Eclipse project files before we can import the project into eclipse.

To do that we use the eclipse task provided by the eclipse plugin.

$ gradle eclipse
Using Gradle Vaadin Plugin 0.8
:eclipseClasspath
:eclipseJdt
:eclipseProject
:eclipseWtpComponent
:eclipseWtpFacet
:eclipseWtp
:eclipse

BUILD SUCCESSFUL

Total time: 11.544 secs

As you see it creates the classpath and other files so Eclipse knows about all project dependencies and can run the project inside Eclipse with (WTP)[www.eclipse.org/webtools/‎].

Finally we are going to use the (Gradle Wrapper)[http://www.gradle.org/docs/current/userguide/gradle_wrapper.html] so everyone using our project don't need to install Gradle, but instead can use it directly from the project.

To enable the wrapper we simply run the wrapper task that is build into Gradle.

Running the wrapper task should simply output

$ gradle wrapper
Using Gradle Vaadin Plugin 0.8

:wrapper

BUILD SUCCESSFUL

Total time: 10.365 secs

It will add the wrapper files, namely gradlew, gradlew.bat and the gradle-folder to the project.

--

That is it for this part, we now have a fully working project ready for importing into eclipse and starting development.

In the next part we will look at what Eclipse plugins are worth using to better integrate with the Gradle build and we will look at the mostly used tasks and configurations the Vaadin plugin provides.