Vaadin 8 + Scala 2.12

This post is about running the Vaadin 8 Hello World with Scala 2.12 and Jetty.

Following my frustrated attempt to Dockerise an Ionic 3 application for web browser, I went back to Vaadin in order to get a UI quickly working for my Akka project.
I found the following Vaadin+Scala documentation which is a good start but it doesn’t show how to actually run it using the Maven Jetty plugin.

Execute the Maven archetype below to get a Hello World app:

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

Now add the Scala dependencies to your pom.xml:

<project>
<dependencies>
  <dependency>
   <groupId>org.scala-lang</groupId>
   <artifactId>scala-library</artifactId>
   <version>2.12.1</version>
  </dependency>
 </dependencies>
 <plugins>
  <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>${scala.version}</scalaVersion>
   </configuration>
  </plugin>
 </plugins>
</project>

Finally, create you UI class in Scala:

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 {
}

@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
Advertisements