Tuesday, July 16, 2024

Create a Vaadin Mobile App Project in Eclipse

It used to be that you’d have to develop your Web apps for all of the different browser vendors. In particular, the Mozilla and Microsoft products were clearly at odds with each other. So much has changed since then. Now there are even more vendors! Thankfully, third-party frameworks have stepped in to ease our coding plight by allowing the same code to be run in multiple browsers. That same story is once again being played out in the arena of mobile applications, where differences are even greater because each vendor runs its devices on its own operating system. To get over that hurdle, you need a really powerful framework. One such framework is called Vaadin. It’s a web application framework designed for creating rich and interactive applications in Java that run in the browser, without any additional plug-ins. Vaadin is comprised of a server-side and a client-side component. The server-side runs as a persistent Java Servlet session in the application server (f.e. Glassfish Server) and contains the control logic and the business logic of the web application. The client-side engine runs in the browser as JavaScript, rendering the user interface and sending browser information to the server. In today’s article, we’ll install the Vaadin Framework and create an Eclipse project for an application that will manage a library of fitness exercises.

The Fitness Library Application in More Detail

The application that we’ll be building manages a collection of fitness exercises – something that all of us desk jockeys are in dire need of! New exercises may be added using a GUI form. All of the stored exercises will be listed below the input fields. If that sounds familiar to you, it’s because it’s the same app that we began constructing as a Java Enterprise Application in the Create a Java EE Web Application using the Glassfish Server article and subsequent follow-up, Persistence in Java EE Applications. And why not? It’s precisely the kind of app that you’d want to make available to your mobile devices.

Developing with Vaadin

There are several installation options available to you. The Vaadin team is partial to using Maven, but they also provide plug-ins for Eclipse and NetBeans, for those of us who don’t use maven. Finally, there is an all-in-one archive file that contains everything you need. This option is suitable for those who want maximum control over the installation process and would rather manage the files manually.

My preferred option is the Eclipse plug-in because it’s my go-to IDE. This version of Vaadin makes use of the Google Web Toolkit (GWT) for rendering the user interface in the browser. GWT programs are written in Java, but compiled into JavaScript, so we the developers never have to code in JavaScript and/or other browser technologies directly. Vaadin is equally adept at implementing complex client-side components (or widgets as they’re more commonly known) as server-side application logic, making it a very well rounded framework.

What You’ll Need

The software that you’ll need for this tutorial is almost exactly the same as for the two Java EE articles referenced above, except of course for the addition of the Vaadin plug-in:

Getting up-and-running in Eclipse

If you happen to be running Eclipse Indigo, you’re in luck because the Eclipse Plugin page has an icon that can be dragged directly into your workspace to start the installation. For the rest of us, I would go with Eclipse’s excellent Install New Software feature. Here’s how:

  1. Select Install New Software… from the Help menu
  2. Add one of the following URLs for the update site:
    Eclipse 3.5 and newer: http://vaadin.com/eclipse
    Eclipse 3.4: http://vaadin.com/eclipse/3.4
    Note that Visual Designer is not available in the Eclipse 3.4 version.
  3. Select the features you want to install and click Next to continue with the installation.

You can also install the Vaadin Plug-in directly from the Eclipse Marketplace or alternatively, you can download an offline installation package for Vaadin 6 from the server.

By the way, there is a serious bug (#445122) in Eclipse LUNA SR1 (4.4.1) that affects not only Vaadin, but many other projects as well! Since that it exactly the version that I am running, I am going to go over how to apply the hotfix:

  1. Select Help -> Install New Software from the main menu
  2. Select “The Eclipse Project Updates” in the Work with dropdown
  3. Check the “Patch for 445122” box
  4. Leave the defaults in the “Install Remediation Page”
  5. Restart Eclipse when prompted

If you encounter any difficulties, you might want to check out the video instructions on Youtube.

Creating a Vaadin Project

Once you’ve got the Vaadin plug-in all set up, you’re ready to create a Vaadin project via File > New > Other… from the main menu.

On the Select a wizard dialog, expand the Vaadin folder and select “Vaadin 7 Project”.

Click Next >.

The next screen is where you configure your project settings.

Give your project a name of “ExercisesMobileApp”.

If you haven’t yet configured your Glassfish runtime environment, you’ll need to do that now. Follow the instructions in the Setting the Target Runtime section of the Create a Java EE Web Application using the Glassfish Server article.

Pick your Glassfish 4 runtime as the Target Runtime and keep all of the other defaults.

Click Finish to create the project.


We are now ready build our app! In next month’s article, we’ll begin with the coding of the User Interface (UI).

Rob Gravelle
Rob Gravelle
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles