Recipes are community-created content. They are neither monitored nor endorsed by IBM. If you find inappropriate content, please use Report Abuse to let us know. For more information on community content, please refer to our Terms of Use.

Overview

Skill Level: Beginner

You should have a basic understanding of the Java language, and how to build and run Java applications.

This recipe shows you how to use Eclipse to build and run rich, responsive Graphical User Interface (GUI) applications using the Vaadin framework. You will also see how to build, deploy, and run them using WLP.

Step-by-step

Setup your development environment

You will need the JDK and Eclipse IDE installed to complete this recipe. I’ll assume you have some basic Java knowledge. If not, please check out the Intro to Java Programming learning path here at IBM developerWorks.

You will also need a working development environment. If you already have a Java development environment, skip to Step 2.

Otherwise, check out the Introduction to Java Programming learning path, Unit 2 for step-by-step instructions. There are videos in this section as well that can assist you if you need more help.

First, download and install the Java Development Kit (JDK), version 8, and install it on your machine. Please refer to the video below if you need help.

Next, install the Eclipse IDE to your computer. Please refer to the video below if you need help.

Once you have your development environment setup and ready to go, you can proceed to Step 2, where I’ll show you how to install the Vaadin 4.0 plugin for Eclipse.

Install the Vaadin 4.0 plugin for Eclipse

The Vaadin 4.0 plugin for Eclipse makes it so much simpler to develop Vaadin applications in Eclipse, so I recommend you install it. Please refer to the video below, where I show you how to install the plugin, and verify that it is working properly in your Eclipse IDE.

Download and install WLP

The WebSphere Liberty Profile is a robust application server that is easy to install, boots up quickly, and is JEE compliant.

Please refer to the video below, where I’ll show you how to install WLP and verify that it is working on your computer.

About Vaadin

There are lots of great Vaadin resources, and I’ll list some at the end of this recipe, but I think it’s worthwhile to give you a high level overview of the Vaadin architecture.

The user interacts with your Vaadin application through Javascript running in the browser. Because Vaadin uses Google Web Toolkit (GWT), a large number of browsers are supported right out of the box. This code is generated for you automatically, leaving you to concentrate on your application’s business logic.

The server side entry point for your Vaadin application is a Java servlet that communicates with backend services like databases and other business logic. Your application’s main UI class is an extension of the Vaadin framework class called, well, UI. The UI class is the view (called a view port using Vaadin terminoogy) for your application, and your application must provide at least one subclass of UI. A simple use of UI looks like this:

The look of your application is controlled through the use of themes, which build from a Base Theme as shown in the high-level architecture diagram. A Vaadin application separates the functionality of the application (think: business logic) from the way it appears to the user using Themes. You can learn more about Vaadin themes here.

Create the project

First, let’s create the project in Eclipse. Make sure Eclipse is open, and go to File > New Project..., expand the Vaadin tab, select Vaadin 8 Project, then click Next. The next screen looks like below:

Select the “CRUD Example” as shown above, then click Next. On the next screen just accept the defaults and click Finish to create the project.

The Vaadin 8 new project wizard creates several projects within your Eclipse workspace:

We will only concern ourselves with three of those for the sake of this recipe:

myapplication – the parent project, which we will use to build the entire project

myapplication-backend – the backend project, which is where you write business logic and other backend services, and corresponds to the BACKEND SERVICE tire from the architecture diagram from Step 4.

myapplication-ui – the GUI project, which is where the User Interface code resides, and corresponds to the USER INTERFACE tier from the architecture diagram from Step 4.

Note: If you want to learn more about the structure of the generated project, expand the myapplication parent project and open the README.mdMarkdown file. It explains the structure of the project, and how to build it in more detail. It also explains what the other projects are for.

Right-click on the myapplication project in Project Explorer and choose Run As > Maven Project, and when the Run Configurations dialog opens (it will only do this the first time), select the clean and install goals.

When the build finishes, you are ready to smoke test the generated application code, just to make sure it’s working. I’ll show you how to do that next.

Smoke test the generated application code

Before we go any further it’s probably a good idea to build and run the generated application code and make sure it works (what I’m calling the “smoke test”).

Run using Jetty, smoke test in the browser.

For this simple smoke test, you’ll use an embedded Jetty application server running within Eclipse. To start the server, right-click on the myapplication-ui project in Project Explorer and choose Run As > Maven Build, and enter clean jetty:run as the goals.

When the build finishes, you should see output like this:

[INFO] Started ServerConnector@11d422fd{HTTP/1.1}{0.0.0.0:8080}[INFO] Started @7544ms[INFO] Started Jetty Server[INFO] Starting scanner at interval of 2 seconds.

Just click the Login button (no password required), and you will be taken to the Product Inventory screen (the generated application is a sample product inventory system):

Congratulations! The app is up and running. In the next section, I’ll show you how to run the application under WLP, make changes to the application, and watch WLP auto-deploy your changes so you can test them.

Make sure and stop the Jetty server. To do so, click on the Stop icon in the Console window:

Develop and debug the application

I have created a video to show you how to do the following:

Build the project

Setup a new WLP server in the Servers View.

Deploy to the newly created WLP server.

Make a simple change and watch WLP auto-deploy those changes.

I will also show you in the video how to debug in Eclipse, and track down the bug in the code, just like you would do on a real project.

Steve Perry has been a professional software developer since 1991 using a variety of languages, but his favorite is Java. He is the author of Java Management Extensions (O'Reilly), Log4j Shortcut (O'Reilly) and has moderated the developerWorks Java Enterprise Open Source Application Architecture community. He has been a developerWorks contributor since 2009.
Steve is Principal Consultant for Makoto Consulting Group, Inc. in Little Rock, AR, USA.
When he isn't playing hockey or practicing yoga, Steve likes to make educational videos and post them on YouTube for Makoto TV. Check it out here and please subscribe!