How-tos

With Vaadin Framework, create stunning Web UIs with plain Java

Share this post:

Vaadin Framework is a tool to build good looking Web apps without working with low-level Web technologies. The framework itself contains all the logic to create the modern Web app while you concentrate on the UI itself, using a familiar component based approach, almost like you’re building a traditional desktop app. In this article, we’ll look at two alternatives, along with really trimmed down examples, and a how-to-get-started with Java Web apps in Bluemix from scratch.

Screen shot collage of Vaadin Framework DashboardThe screenshot above is from the Dashboard demo.

Vaadin apps can be run in Bluemix easily, as Vaadin basically just requires a servlet container, like the WebSphere Liberty Profile which is available in Bluemix. We have previously covered using the Vaadin boilerplate application example, which builds on Java EE architecture, uses EJBs and JPA to access a traditional relational database. But not all apps need that kind of “enterprise grade” architecture.

Let’s get started!

Using the Vaadin Maven archetype

Vaadin logoThe first thing you will need to do is register for Bluemix, if you don’t already have an account. There is a 30-day free trial you use for the purposes of this blog article.

All IDE integrations in Vaadin are now based on Maven archetypes, which practically create for you the basic build scripts to create a war file and a simple “hello world” example code. The first step is to create such a project using our getting started instructions. Feel free to use either command line in the Maven or IDE approach.

Once you have the project ready and you have built the war file, you’ll need to push the WAR file to Bluemix. An easy way to do is with the Bluemix/CloudFoundry CLI tools. Unless you have already done it, follow the instructions on how to install and login to your account. Then, after the login, you can just apply the following command from the projects root directory:

cf push your-server-name -p target/*.war

Note that if you are using Windows, replace the star character with the exact name of the generated war file.

If you want to simplify the subsequent push commands to update your app, create a manifest.yml file with the following content:

applications:
– name: your-server-name
path: target/your-war-file-name.war

Then, updating the app simply happens with the “cf push” command.

Starting with start.spring.io

Spring Boot is a new and interesting approach to building Java web applications. With it, you’ll not only create a traditional war file (at least by default), but a jar file which embeds the Web server as well. So instead of feeding Bluemix with a war file, which is then given to a Java Web server, you’ll push that jar file. The “buildpack” in Bluemix is smart enough to handle both war files and jar files.

To create and deploy a Spring Boot-powered Vaadin app to Bluemix, first create a project using start.spring.io, create a simple Vaadin UI and build the jar file. See the beginning of this introduction webinar if you need more help to get started with Spring Boot and Vaadin.

Once you have the project built, the command to deploy and update the app is almost the same as with war packaged web apps:

cf push your-server-name -p target/*.jar

When Bluemix receives the jar file, it automatically figures out it should launch this file using “java -jar your-app.jar” command, instead of creating a Liberty server and deploying the app there. Naturally, you can create a similar manifest file as with war files to simplify the process.

What next?

Now you have the basics set, the rest is just plain Java development. If you want to learn more Vaadin development, the best resource is the Vaadin tutorial. Then just use your Java skills and the huge amount of available Java libraries to implement the application of your dreams.

Sign up for Bluemix and get started with Vaadin apps. It’s free!

More How-tos Stories

Running Go Programs as IBM Cloud Functions

IBM Cloud Functions is a functions-as-a-service platform that is powered by Apache OpenWhisk. It is a readily extensible serverless platform that supports functions authored in various programing languages including Node.js,Python, Swift, Java, and PHP. A feature of IBM Cloud Functions that has been around for some time but not well documented is support for native binaries: any executable that is binary compatible […]

Continue reading

Build and deploy a MEAN stack application on IBM Cloud

MEAN is a collection of JavaScript-based technologies — MongoDB, Express.js, AngularJS, and Node.js — used to develop web applications. From the client and server sides to databases, MEAN is a full-stack development toolkit. This tutorial walks you through the creation of a web application using the popular MEAN stack. It is composed of a Mongo DB, Express web framework, Angular front-end framework and a Node.js runtime.

Continue reading

A hybrid Cordova mobile app with Push and Analytics in minutes

As promised while introducing "Tutorials to get your mobile development up and running", we are continuing our efforts to add more mobile solution tutorials. After quickly scaffolding a native iOS-Swift and Android mobile app with Push and Analytics, it's time to bring in the hybrid mobile app development flavor to the game with Cordova - Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development.

Continue reading