In this post I’m going to show you how to integrate a Scaladin project into an Eclipse-generated Vaadin setup. The demo I’ll be using is a small but impressive one: it uses Vaadin’s Atmosphere-powered “server-push” and Akka-Actors (disclaimer: I don’t take credit, since I did not write the demo).

I like Scala, Vaadin, and find the idea of Scaladin excellent (to be able to code for Vaadin using idiomatic Scala). There is a SBT plugin for Scaladin, which integrates very well with this build tool. On the other side, the benefits of the Vaadin plugin and IDE integration are lost: like debugging in Eclipse, for example.

What I set up to do was modify the IDE-generated Vaadin project until:

  • Scala was supported
  • Scaladin was supported

As an excercise I “ported” (actually more like “copy-pasting”) the existing “Scaladin Chat demo” to the IDE-generated default setup.

scaladin-chat-eclipse

Here’s what I did…

First, I followed the official instructions on how to get started with a Scala Vaadin project (this includes adding the “Scala nature” to the project!).

However, I did not add the scala-library.jar as instructed there. Instead, I added it as an Ivy dependency to the ivy.xml file:

<!-- Scala Runtime Library -->      
<dependency org="org.scala-lang" name="scala-library" rev="2.10.4"/>

At that point I had a Scala-capable Vaadin project. Then I added Scaladin:

<!-- Scaladin -->
<dependency org="org.vaadin.addons" name="scaladin" rev="3.0.0" />

Since I didn’t know how to bootstrap Scaladin from a Scala class, I left the Java bootstraping class for the moment. Instead, I wrote a Scala class that would provide the main component:

package com.example.vaadindemo

import vaadin.scala.VerticalLayout
import vaadin.scala.Button
import vaadin.scala.Notification

class SomeScalaClass {

  def content: com.vaadin.ui.Component = {
    val scaladinComponent = new VerticalLayout {
      margin = true
      components += Button(caption = "Click Button!", {
        println("Button clicked (Server)")
        Notification.show("Hello via Scaladin!")
      })
    }

    // return the "real" wrapped Vaadin component
    scaladinComponent.p
  }

}

Here you can see that I’m returning a normal Vaadin UI component, not a Scaladin one. Although I am using Scaladin’s “magic” (the nice DSL which wraps over Vaadin) at the end of the day I return the wrapped Vaadin component. Which is the one “consumed” by the Java bootstrapping class:

package com.example.vaadindemo;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.UI;

@SuppressWarnings("serial")
@Theme("vaadindemo")
public class VaadindemoUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = VaadindemoUI.class, widgetset = "com.example.vaadindemo.widgetset.VaadindemoWidgetset")
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
    SomeScalaClass scalaInstance = new SomeScalaClass();
        setContent(scalaInstance.content());
    }

}

Note how the Java part consumes the component instantiated on the Scala part. This is a very nice setup to profit from Vaadin’s annotations, which makes using a web.xml file unnecessary. More on that in a moment.

Debugging works as expected, which I tested by placing a breakpoint on Scala’s println().

But of course having Java code lying around didn’t make me happy… I wanted to see if I could integrate the “Scaladin Chat demo” into this project setup. In other words: if I could also bootstrap the Vaadin application from Scala.

First thing I did was to check if I satisfied the dependencies… These are the dependencies listed in the project’s build.sbt:

libraryDependencies ++= Seq(
  "com.vaadin" % "vaadin-server" % "7.1.3",
  "com.vaadin" % "vaadin-themes" % "7.1.3" % "container",
  "com.vaadin" % "vaadin-client-compiled" % "7.1.3" % "container",
  "com.vaadin" % "vaadin-push" % "7.1.3",,
  "vaadin.scala" %% "scaladin" % "3.0-SNAPSHOT",
  "com.typesafe.akka" %% "akka-actor" % "2.2.1",
  "org.eclipse.jetty" % "jetty-webapp" % "8.1.12.v20130726" % "container",
  "org.eclipse.jetty" % "jetty-websocket" % "8.1.12.v20130726" % "container"
)

What’s obviously missing is akka-actor. I assumed that the jetty components were used by the sbt-plugin and not needed in my case (I was using Tomcat). So I added the missing dependency to my Ivy file:

<!-- Akka Actors -->
<dependency org="com.typesafe.akka" name="akka-actor_2.10" rev="2.2.1"/>

After that I copy-pasted the Scala classes / files directly under “src”:

  • com/example/scaladinchat/ScaladinChatUI.scala
  • com/example/scaladinchat/chat.scala

The IDE-generated Vaadin project has only “src”; it does not have “main/scala” or “main/java”. For sake of brevity I will not reproduce the contents of these Scala files, which can be found on the original project.

Now comes a very important point. The Scaladin project makes use of (needs?) web.xml. On the original project this is found under src/main/webapp/WEB-INF. This file, on the IDE-generated project is to be put under WebContent/WEB-INF.

I really don’t know why Scaladin’s version needs the web.xml whereas the official Vaadin code does not seem to. If any reader can enlighten me, I will be very grateful.

Part of what the annotations used to cover in the original Java code is then found on the web.xml file, like:

  • the servlet path
  • the servlet class (auto-discovered)
  • the production mode

Other info covered by the annotations can be passed as initialization parameters to the main Scaladin UI component. I modified the ScaladinChatUI construction to look like this:

class ScaladinChatUI extends UI(
  theme = "vaadindemo",
  widgetset = "com.example.scaladinchat.widgetset.VaadindemoWidgetset")
    with ChatClient { app =>

I had changed the path of the widgetset file. As a last step, I deleted my two previous files VaadindemoUI.java and SomeScalaClass.scala.

Finally, after all these changes, I had very nice Vaadin demo, using server-push (powered by Atmosphere) and Akka-Actors, written exclusively in Scala!

Credits

Many thanks go to Henri Kerola for his contributions! Henri works at Vaadin and created practically everything Scala+Vaadin related: from the chat-demo used as illustration here, to the SBT-plugin, to Scaladin itself. Be sure to check out his github repositories, where you can find other Scaladin demos, integration of Vaadin into Play, Akka-related projects, etc.