Introduction to Vaadin Framework for GWT developers
Vaadin is a known framework to GWT developers. Vaadin used GWT to build a full fledged application framework. It is one of the main GWT based frameworks ( along with Errai framework) and provides some interesting capabilities like addons, themes, integrations with other Java frameworks such as Spring. Vaadin is based on the same idea as GWT: allowing to develop web application UIs declaratively from Java code. There are some key differences, nevertheless.
In any case, it does not really seem right to compare between GWT and Vaadin as Vaadin can be seen as an evolution or a derived framework of GWT. In this tutorial, we will provide a brief introduction to Vaadin framework with some GWT concepts in mind.
Initial project Set up:
To set up a Vaadin project, your can either use Vaadin’s plugin in your favorite IDE (IntelliJ, Eclipse, Netbeans), or you can use Maven archetype and import the project later. More information on IDE plugins can be found at: https://vaadin.com/tooling
In this tutorial, we are going to use a Maven archetype for quickly setting up our project. There are several available archetypes provided by Vaadin. In our project, we are going to use the vaadin-archetype-application which creates a single module application.
mvn -B archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.7.6 -DgroupId=com.gwidgets -DartifactId=vaadin-intro -Dversion=0.1
Similarities between GWT and Vaadin:
In GWT, a web application needs to implement the EntryPoint class:
In Vaadin, the equivalent is the UI class:
To be rendered properly, the MyUI class needs to be associated with a Servlet:
Another similarity between GWT and Vaadin is the concept of Widgets. Components in Vaadin are the equivalent of Widgets in GWT. They can be added to the main layout (equivalent to RootPanel in GWT), and they can be added to other Components. For example:
is the equivalent in GWT to :
Vaadin comes with a more complex and comprehensive set of themable Components than GWT.
As an example, let’s develop a simple Vaadin application that reads the submitted form data and prints the result in the system console.
Explanation: The @Theme annotation defines the general theme of the application components. Vaadin has some predefined themes, and offers the possibility to create custom themes. We have added our components to a layout and added the layout to the main layout using setContent() method. Finally, we have defined a inner class that extends VaadinServlet, so that we can associate our UI to a path.
Notice that we can use System.out directly in our application, since we are in the server side. In fact, we can use any Java library from our application, thing that was not possible all the time in GWT.
Vaadin is an interesting alternative to GWT. GWT developers, who has not yet invested time in learning Vaadin, should consider doing so. In this tutorial, we have provided a basic introduction to Vaadin, and we went through some core differences between GWT and Vaadin. We also went through some common concepts between GWT and Vaadin. At first glance, it seems that GWT developers have an edge over developers who have not used GWT before, so the learning process can be faster for GWT developers.
Example full source code available at: https://github.com/zak905/vaadin-intro