Building a web UI in plain Java using Vaadin CDI

A video version of this tutorial.

There are many Java developers who’d love to build web apps, but hesitate to start as web development usually contains lot of different programming languages (Java, HTML, CSS, JavaScript), complex client-server development model and buggy browser environment. Vaadin Framework is an Apache 2.0 licensed open source library for exactly those developers. This tutorial shows how to get started with Vaadin and how to use CDI to bind into your existing Java service, that you might already be running on SAP Cloud Platform. It will give you an overview of Vaadin development and a basis for further experiments.

A couple of years ago I already prepared a Vaadin + SAP HANA example, based on the official Java example by SAP. At that time I had some issues with Vaadin CDI and CloudPlatform, but many things has improved since. Now we can use CDI to clean our UI code easily with the TomEE based Java EE 7 runtime and also use Java 8 in the app. Naturally, you can customize the whole execution environment if you use CloudFoundry buildpacks, but for the sake of simplicity we’ll be using the standard Java EE 7 runtime provided by SAP Cloud Platform in this tutorial.

How to build your first Vaadin CDI application

Create a project using archetype

There isn’t a Vaadin CDI archetype available yet, but the plain servlet archetype is really to convert into a CDI (Java EE 7) project. Start by creating a project using vaadin-archetype-application in your favorite IDE. If you need help for this, follow the part 1 in Vaadin Tutorial.

Update dependencies

Next, change the servlet API into java-ee-web and add vaadin-cdi dependency. As Jetty project provides only basic servlet container, it is better also switch to for example tomee-maven-plugin, if you want to test your app via Maven (mvn package tomee:run). So go to your pom.xml file do following steps:

1. Locate servlet-api and replace that with javax:javaee-web-api:7.0 dependency.
2. Add com.vaadin:vaadin-cdi dependency. Version declaration is not required as vaadin-bom contains one.
3. If you want to test the project using Maven command, replace the jetty plugin with org.apache.tomee.maven:tomee-maven-plugin:7.0.4. To deploy to the context root, you can add a configuration section with ROOT.

See the full changeset.

Remove the manual servlet declaration and annotate the UI

With Vaadin CDI you don’t need to declare the servlet manually. Instead, a context listener seeks the classpath for @CDIUI annotated classes and tackles deployment configuration automatically. So add a @CDIUI(“”) annotation to the MyUI class and remove the obsolete servlet declaration (inner class in the MyUI class).

See the full changeset.

Extract the “business logic” into a CDI bean

As a final step, to give an example how you’ll start to integrate to your services, let’s extract the “business logic”, the string concatenation, into a CDI bean and use that from your the UI object. Create a class called HelloService, annotate that with @ApplicationScoped and move the String concatenation into a function in that class. Then use the @Inject annotation to get a reference of a HelloService into the MyUI object, without instantiation the object yourself, and use it from the UI code.

See the full changeset.

Now you have a trivial CDI based web app ready. In a real world application you’ll inject more complex services to UI classes and you can also use many CDI helpers, like CDI events, to create more maintainable structure to your UI code.

Run the project locally

You can test now the project using the tomee-maven-plugin or by deploying the project to any Java EE 7 server directly from your IDE. Alternatively, if you have the SAP tooling installed to your Eclipse, you can deploy the app directly using “Run as –> Run on server”.

mvn package tomee:run

Using your browser, you can now navigate to http://localhost:8080/ to see your application.

Deployiong to SAP Cloud Platform

There are many ways how you can deploy your Java EE application to SAP Cloud Platform. Command line tools are probably best if you want to automate your workflow, but in this example, let’s use the web UI to deploy your war file.

Log on cloudplatform.sap.com

Log on to cloudplatform.sap.com. If you don’t yet have an account, you can create a free trial account.

Once you have logged in, choose a Neo environment near you. Neo environment provides Java EE 7 runtime, which we’ll use to run our app. If you have an existing Neo environment, you can of course use that.

From the Overview screen, choose Java and you’ll see a listing of your existing applications and a Deploy Application button. Click that.

On the next screen, browse the war file built to your projets target directory. Once file is chosen, Application name is automatically generated, but you can also explicitly set that to something else. The runtime still defaults to Java EE 6 Web Profile, which is bit ancient for our usage, so choose Java EE 7 Web Profile TomEE 7 instead. Also make sure you have JVM 8 selected. Then hit deploy and your war file is sent to for the Cloud Platform.

The upload may take a while, depending on your network. Once done, click Start button to actually start your web app. While the virtual machine and runtime is starting up, you can navigate from the Overview to your web app and see what is happening. Once the app has started up, the details view shows a link to your application.

If you click the link, you should see the same app in your web browser as you saw in your local deployment.

Next steps

Here are some pointers to learn more about Vaadin development:

• Vaadin Tutorial – You can actually continue from here and adapt the project to use CDI style deployment and even use for example CDI events for communication between views.
• Directory – The Directory service contains hundreds of extensions to Vaadin. UI Components, themes, helper libraries etc.

If you have any questions regarding Vaadin development in Cloud Platform, use the commenting session below and let’s see if I can answer.