Vaadin and Grails, part I., "Hello world, with DB!"

Welcome to the first tutorial called "Hello world, with DB!".

We are going to make simple application that is:

• Rich Internet Application (Vaadin 6)
• Fetching data from "in-memory" database (Grails GORM) 

2 things must be done in order to setup your development environment.

1. Eclipse STS 
• Go to the link mentioned above, accept licence terms and go to the download page
• Install it to e.g. C:\EclipseSTS in case you are developing on windows, because there might be problems with Grails plugin installation if  you put it to e.g. "C:\Program Files\EclipseSTS"
2. Groovy and Grails plugins 
• 3 plugins need to be installed. Open your Eclipse STS, go to Dashboard and click on Extensions tab.
• Select "Grails (current production release)", "Grails Support" and "Groovy Eclipse" and click on Install button. 

That is all you need for this tutorial and maybe also for development of your Vaadin / Grails applications. 

Let's create a project called "vaadin-grails-hello-world". It is going to be Grails project. 

Dependencies and plugins are downloaded after we click on Finish button. It can take a while... and this is how a new Grails project looks like in Eclipse: 

Firstly, we need is to install Grails Vaadin plugin that will allow us to use Vaadin in Grails environment. Actually, we just open plugins window and click on the refresh button (so you get the list of latest plugins).

In case you don't see latest version in the plugins window, you can download the plugin from github and run this command. 

We should get this text in Eclipse console as the relsut of the successful instalation: 

| Loading Grails 2.0.1

| Configuring classpath.

| Environment set to development.....

| Installing zip vaadin-1.5.3.zip.....

| Installed plugin vaadin-1.5.3

| Resolving plugin JAR dependencies.....

| Plugin installed.

and VaadinConfig.groovy file should appear.

If that is not working, here is a good tutorial how to install that plugin: https://github.com/ondrej-kvasnovsky/grails-vaadin-plugin/wiki.  

Now, 4 simple steps are needed to get our Vaadin application working.

1. Set grails-app\vaadin folder as a source folder

2. Create your Vaadin application class. Let's call it HelloWorldApplication.groovy in "helloworld" package. 

3. Make a note about HelloWorldApplication to VaadinConfig.groovy: 

applicationClass = "helloworld.HelloWorldApplication"

4. Remove content of mappings field in UrlMappings.groovy.

Good job if you came that far! As a reward, let's write some code in Vaadin. The first thing we could do is to make an empty page, where only a title is going to be set.

package helloworld
import com.vaadin.Application
import com.vaadin.ui.Window
class HelloWorldApplication extends Application {
@Override
public void init() {
Window w = new Window("Hello world!")
setMainWindow(w)
}
}

Let's test it. Click on Grails icon in your eclipse and write the following command that will run your application in development environment: dev run-app

This is how your application should look like:

Well, our Vaadin application is running but we want to connect it with database and display some data. It is pretty simple in Grails. Just create a domain class e.g. helloworld.User and put there a variable called name.

What we have done? We have made User class which is connected to database via Hibernate. If you wish to change database setting, go to DataSource.groovy (you don't have to, it is going to work by default setting).

Let's insert dome users before the application is started. This has to be done only when running the application in development mode. Here is the way how to do it (BootStrap.groovy):

Let's display these users in our application (HelloWorldApplication.groovy).

Let's start the application and see if the users are displayed...

Congratulations if that works! Just little note: if you make some little changes in your code then your code is recompiled and you don't have to restart the server (just refresh the web page ;-) ).

What now? You can go to see Vaadin sampler, read Vaadin book and start coding your Vaadin application.

You can get source codes on github.

TextLab for Mac

Ultimate application to validate, clean and format JSON, XML, SQL, HTML.