Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Vaadin With Scala

DZone's Guide to

Vaadin With Scala

Vaadin's Scala documentation doesn't include a full example, so here's how to get your app up and running from start to finish.

· Java Zone
Free Resource

Just released, a free O’Reilly book on Reactive Microsystems: The Evolution of Microservices at Scale. Brought to you in partnership with Lightbend.

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.

Image title

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

Image title


Strategies and techniques for building scalable and resilient microservices to refactor a monolithic application step-by-step, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:
scala ,vaadin ,maven ,tutorial ,java

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}