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. Console showing Jetty Started

Go to localhost:8080 from the web browser and the page should be working. Browser screen showing a Hello World page with Vaadin

Post migrated from dzone.com

Updates