Vaadin With Scala

This post shows a fully working 'Hello World' application in Vaadin 8 with Scala 2.12 running on Jetty.

Following my frustrated attempt to Dockerize an Ionic application as the Web UI of my petty Akka project, I started evaluating the latest version of Vaadin.

I followed the "Using Vaadin with Scala" documentation to create a 'Hello World', but the documentation doesn't contain a fully working example. So I've put the steps below to help others who might be in the same situation as I was.

Getting Started

Run the Maven archetype below to get a simple app created.

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=8.0.5 -DgroupId=com.pany -DartifactId=ui -Dversion=1.0-SNAPSHOT -Dpackaging=war

This archetype will generate a Java project. Since we are doing Scala, delete the java directory in ${project_home}/src/main/ and create an empty scala directory in the same place. 

Add the Scala dependency and plugin to the pom.xml

<dependency>
    <groupId>org.scala-lang</groupId>
    <artifactId>scala-library</artifactId>
    <version>2.12.1</version>
</dependency>

<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>scala-maven-plugin</artifactId>
    <version>3.2.2</version>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
                <goal>testCompile</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <scalaCompatVersion>2.12</scalaCompatVersion>
        <scalaVersion>2.12</scalaVersion>
    </configuration>
</plugin>

Create the following class inside the new scala directory. 

import java.util.Date
import javax.servlet.annotation.WebServlet

import com.vaadin.annotations. {
    Theme,
    VaadinServletConfiguration
}
import com.vaadin.server. {
    VaadinRequest,
    VaadinServlet
}
import com.vaadin.ui.Button. {
    ClickEvent,
    ClickListener
}
import com.vaadin.ui._

@WebServlet(urlPatterns = Array("/*"), name = "MyScalaUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = classOf[MyScalaUI], productionMode = false)
class MyScalaUIServlet extends VaadinServlet {
    /* 
     * This servlet is missing in the 
     * "Using Vaadin with Scala" documentation
     */
}

@Theme("mytheme")
class MyScalaUI extends UI {

    override def init(request: VaadinRequest): Unit = {
        val content: VerticalLayout = new VerticalLayout
        setContent(content)

        val label: Label = new Label("Hello, world!")
        content addComponent label

        // Handle user interaction
        content addComponent new Button("Click Me from Scala!",
            new ClickListener {
                override def buttonClick(event: ClickEvent): Unit =
                    Notification.show("The time is " + new Date)
            })
    }
}

Now just execute:

mvn clean package jetty:run -Dvaadin.productionMode=true

There should be something similar to the below in the logs. The important information here is that Jetty is running on port 8080.

Go to localhost:8080 from the web browser and the page should be working.