Getting Started with the Vaadin Framework

Vaadin is a framework for creating rich internet applications in pure Java language. Unlike other frameworks that rely on technologies such as JavaScript, HTML, Ajax, and so on explicitly, Vaadin is implicit in this regard and uses similar technologies but behind the scene. Programmers can simply work with pure Java code and do not worry about these technologies while coding. Vaadin is a server-centric architecture; that means most logic is processed on the server side. These event-driven, widget-based JavaScript libraries provide a programming model similar to Swing. And, for client-side rendering of the web content, Vaadin relies on the GWT (Google Web Toolkit) framework. Here, we’ll consider more on what of Vaadin, found here in Wikipedia, is like.

Initiating Vaadin

All the concepts are of no value unless one can run a simple application. In fact, I believe it is the first step to learn any framework. So, to start with, here are the details of libraries and other requirements we shall use down the line.

• Eclipse IDE for EE developers
• Java SDK
• Vaadin Framework
• Apache Tomcat

Install the Java SDK and Eclipse, and set up a Tomcat server in Eclipse IDE. The Unzip Vaadin library in a suitable location. It is recommend that you use the Vaadin plugin for Eclipse or use maven repository or something similar to create a Vaadin project and use its libraries. This is quite a convenient way to set up the environment and start a Vaadin project. But here, we’ll try to do everything manually from scratch without using any third-party convenience.

Setting Up the Library in Eclipse

Open Eclipse. Choose Windows → Preference, and then User Libraries under Java → Build Path. Click the New… button, give a User library Name, and click OK.

Figure 1: Creating the user library

Now, select the library name given a while ago from the defined user libraries section and click Add External JARs… Navigate to the unzipped location and include all the jars in the directory, including everything in the lib directory as well. Note that all the jars are not always needed in every project, but for now we’ll not go into those intricacies and include everything. Once this is done, we are ready to go. The advantage of creating a user library is that we can include it any time in our project as needed.

Starting a Project

Open Eclipse if not already opened, and then select File → New, Dynamic Web Project. Give a Project Name and then click Finish. Right-click the Project Name just created from Project Explorer Pane, and then select Properties. The Project Properties window will appear; select Java Build Path and highlight the Libraries tab. Click the Add Library… button.

Figure 2: Setting up project properties

Select User Library from Add Library window → Next. Select a Vaadin library to add to the class path → Finish.

Figure 3: Adding a user library to the project

Before clicking OK and closing the Project Properties window (refer to Figure 2), select Deployment Assembly click the Add… button and select Vaadin library from Java Build Path entries. Your web deployment assembly should include some jars of the Vaadin library to render the client content in the browser. As mentioned earlier, the jar requirement for the client side is very minimal, but we’ll not go into the details and include all for convenience. Refer to the Vaadin libraries overview for more information on these intricacies.

Figure 4: Setting up Web Deployment Assembly

Starting the Java Code

The following code is pretty simple and straightforward. A Vaadin application typically extends the UI class. Contents are added to the UI class in a tree structure. Here, we have created a hierarchy of components, such as Panel, that contain a layout called FormLayout, which in turn contains two components: a DateField and a Button. The event for the button is defined through an anonymous class. Thus, the click event of the button contains logic for finding the age from a given date of birth through DateField.

//...import statments

public class AgeCalculator extends UI {
   private static final long serialVersionUID = 1L;
   private DateField bdate =
      new DateField("Enter your Date of Birth");
   private Button button = new Button("Find Age");

   @WebServlet(value = "/*", asyncSupported = true)
   @VaadinServletConfiguration(productionMode =
      false, ui = AgeCalculator.class)
   public static class Servlet extends VaadinServlet {
      private static final long serialVersionUID = 1L;
   }

   @Override
   protected void init(VaadinRequest request) {
      Panel panel=new Panel();
      panel.setSizeUndefined();
      panel.setCaption("Age Calculator");
      FormLayout form = new FormLayout();
      form.setMargin(true);
      form.addComponent(bdate);
      form.addComponent(button);
      form.setSizeUndefined();
      button.addClickListener(new Button.ClickListener() {
      private static final long serialVersionUID = 1L;
      @Override
      public void buttonClick(ClickEvent event) {
         Calendar cal = Calendar.getInstance();
         cal.setTime(bdate.getValue());
         LocalDate dob = LocalDate.of(cal.get(Calendar.YEAR),
            cal.get(Calendar.MONTH),
            cal.get(Calendar.DATE));
         Period p = Period.between(dob, LocalDate.now());

         Notification.show("Today you are " +
            p.getYears() + " year(s)"+
            p.getMonths() + " month(s)"+
            p.getDays() + "day(s) old.");
         }
      });
      panel.setContent(form);
      setContent(panel);
   }
}

Figure 5: Application output in a browser

Conclusion

The best part of Vaadin is that it has almost a flat learning curve, especially for those who worked with the Swing framework. Developers get a respite from wavering between technologies such as JavaScript to XML to Ajax to Java. However, Vaadin is yet to mature and has a long way to go before being readily accepted as a stable framework in the enterprise arena. Otherwise, creating RIA through the Vaadin framework is quite enjoyable.