Prepare for Vaadin, an extremely powerful Java framework for enterprise web

In a client-server architecture, Java applications are most often located on the server side, and web interfaces are created by separate groups of front-end developers using JavaScript. Java does not provide any useful tools to develop modern Web interfaces (Do you still remember what Java applets look like?) — neither in terms of design, nor in terms of the client-server interaction. But what if the entire client-server application was developed using Java? Why not to make the client part “native” to the browser in compliance with the most modern usability concepts?

Figure 1. Vaadin logo

Vaadin (by the way, this word means “deer” in Finnish) supports all common browsers for traditional PCs, as well as mobile devices and tablets. Developers utilize only Java, but the Java code is executed on the server, the client uses “pure” JavaScript.

Vaadin includes the following components: server API; client API; a set of user interface components on both sides; a subsystem user interface themes; a data model allowing to bind server components directly to the data. Two basic development models can be used: on the server side and on the client (browser) side.

Figure 2. Vaadin's architecture

Figure 2 contains basic architectural components of a web application created with the help of Vaadin.

Server-centric development model

Optimized for high performance

Server-centric development model is the basic model for Vaadin, it allows you to create finished applications without a single line of code on the client side. AJAX-based Vaadin Client-Side Engine is used to generate user interface in the browser.
Server-side approach allows you to develop user interface for your web application in almost the same way as the interface of traditional Java applications with direct access to data and services on the server. In this case, the server-side part of Vaadin will take care of the user interface in the browser, and the AJAX interaction between the browser and the server. Vaadin engine renders the user interface of the server-side application in the browser and takes care of all the aspects of the client-server communications.

Server part of the application is executed as a traditional Vaadin servlet of the Java application server. It is a pure Java in a JAR file that can be added to any traditional web application, this JAR file is executed in any servlet or portlet container — from Tomcat to Oracle WebLogic. The servlet receives HTTP requests from the client and interprets them as events of the specific user session. Events are associated with components of the user interface and delivered to event listeners defined in the application. When components of the user interface on the server side are changed by the logic of the user interface, the servlet renders those changes to be displayed in the web browser and generates a response. The client-side engine receives the response and uses it to show the changes on the webpage loaded into the browser.

Client-centric development model

Optimized for effective monitoring

Client-centric model enables the development of widgets and applications with the help of Java. A JavaScript compiler – Vaadin Compiler – that is based on Google Web Toolkit (GWT) is used to compile the widgets and applications in order to make them executable in the browser. JavaScript itself can also be used. It provides full access to the DOM structure and allows you to have maximum control over the browser.

Preparing the development environment

Principles of using Vaadin in the NetBeans 8.0.2 environment (version of the Vaadin Plugin for NetBeans — 1.1.3) are described below; in the sidebar, you can find links to video tutorials for IntelliJ IDEA and Eclipse (the plugin for Eclipse includes an editor for the graphical user interface).

To get started with NetBeans IDE, it is necessary to install the plugin: in the Tools -> Plugins -> Available Plugins menu, enter “vaadin” in the Search field, check “Vaadin Plugin for NetBeans” and click “Install,” and then answer “Yes” to all the prompts.

A new category — Vaadin — is now available when creating new projects (File -> New Project). Select Vaadin Web Application Project, click Next and enter a name for the new project, for example “myvaadin.”

13. Project Structure

Upon clicking “Finish,” the default project group for the Vaadin application is created. The main file with the minimum example of the Vaadin application source code is located in the “myvaadin-ui” project in the following file: /Source Packages/com.mycompany.myvaadin/; its main part looks as follows (“package” and “import” instructions are omitted):

In this simple project, the MyUI class that is an heir to the UI class is declared. The init() method is overridden in it. Inside it, a vertical layout (VerticalLayout) is generated with enabled margin. In addition, a new button is created with a click handler that adds a Label component with a text string. Then, the button is added to the layout by calling the addComponent() method. The @Theme(“mytheme”) directive defines the theme to be used (the themes will be described later in this article).

Prior to the first launch, we must rebuild all the projects (right click on ‘myvaadin – myvaadin-parent’ -> Build)

To run in debug mode, you can use the Jetty plugin or GlassFish Server integrated into NetBeans.
Right click on the project -> Debug –> Select Deployment Server (select GlassFish Server from the drop-down list).

After all the interdependencies are defined and all the application components are recompiled, the servlet is launched and a browser window is automatically opened.

Minimal project

Themes and styles

Let’s see what a button on our form looks like directly in the Inspector or Firebug (Fig. 5).

Button Click Me-styles

All styles of the button are retrieved from the styles.css file. This file is located in the /Web Pages/VAADIN/themes/mytheme/ section of the myvaadin-ui project, the file is generated using the SASS files (styles.scss, mytheme.scss and addons.scss) in the same directory. SASS files use the basic style called Valo (the previous version of this style — Reindeer — is still sometimes referred to in the documentation). Click here to read more about Valo, or use this link to get examples for all the components.

Basic parameters of the theme can be customized with the help of the corresponding variables. By simply setting several parameters, you can completely change the appearance of your application. For example, the font color is automatically defined taking into account the background color. The background color itself is set in the $v-background-color variable. To change it, let’s add the following line to the beginning of the file mytheme.scss:

Then right-click on the myvaadin-ui project and select Vaadin -> Compile Widgetset and Theme or Compile Theme, and refresh the page in your browser.
Most of the elements in the project will change their background color to black, and the font color will also be changed automatically.

Using such an approach, it is enough to write two dozen lines of code to override the variables in order to completely change the application’s appearance, for example, in accordance with the flat style Metro. The styles themselves remain unchanged. You can find the resulting page here (select the Metro theme in the upper right corner). The original text is here:

You can also override the style directly. For example, to change the color of the label on the button, you can add the following lines to the mytheme.scss file (under the “// Insert your own theme rules here” line):

Then, you should recompile the themes and refresh the page in your browser.

Instead of creating your own theme, you can use one of the existing ones by changing the name (mytheme) to one of the following: valo, runo, reindeer, chameleon, liferay.

Click here to learn more about the themes.

Creating a browser-based file manager

To demonstrate the elegance of the approach offered by Vaadin, let’s create a prototypal file manager.

Displaying the file system — let’s get acquainted with TreeTable and containers

Container is an interface of Vaadin which is a source of tabular or hierarchical data. Click here to learn more about the containers. SQLContainer is used to access the SQL database. There is also a ready-to-use container for the file system (FilesystemContainer), which is suitable for this project.

You can set the container as a data source for elements of the following types: Table (tabular data), Tree or TreeTable (hierarchical data) and others.

First, let’s create a new project and give it a name: fileman. Then we’ll add a method to create and initialize TreeTable in MyUI class. TreeTable will display the directory structure (if the line is highlighted in red in the source code, it means that this class does not have a corresponding “import” line; to add it, you can press and select “Add import for…” It should be noted that that must be selected from the proposed options for the File class):

Let’s add a method to get new data for the TreeTable from the FilesystemContainer

We also need a method to determine the default project directory.

Let’s create a new “initAll” method by adding the calls to the methods declared above:

In the “init()” method, delete everything associated with the “button” button and add a call to the new “initAll()” method, so that the “init()” is as follows:

Add “unfinished” functions for

Let’s save the file and execute the application in debug mode. If the application is already running, it is enough to refresh your browser after you save the file and complete the deployment.

TreeTable events handling

Let’s add a handler for single and double mouse clicks at the end of the “initFileTree” method:

Let’s add methods to handle user actions into the MyUI class

From this moment, double-clicking allows to open a lower-level directory.

Let’s add the main menu with “Refresh” and “Up Level” options in the “File” submenu — similar to horizontal menus in traditional applications:

These methods must be called in the first line of the “InitAll()” method, otherwise the menu is displayed below all other elements:

and in the “updateInfo()”:

Top and bottom panels

Then, let’s add a top panel with buttons and information on the current path / name of the selected file, as well as a bottom panel to display information about the file. Add the following into the MyUI class:

Initialization of the bottom panel with information on the file

These methods must be called in the “InitAll()” method, the method itself will be as follows:

and in the “updateInfo()” method, which will be as follows:

After saving and refreshing the page in your browser, the file manager will contain a menu, a toolbar and a status bar.

Preview and splitter — the HorizontalSplitPanel and Embedded components

Let’s add a panel to preview image files in our file manager. Then, using this example, it would be easy to make a preview for text files in the TextArea component.

Let’s add the “initMainPanels()” method into the “InitAll()” method instead of the “initFileTree()” method for initialization of the file tree, since it is now called from the “initMainPanels”:

Add the following line in the “updateInfo()”:

Do not forget to copy the image to the default directory (/fileman/fileman-ui/target/fileman-ui-1.0-SNAPSHOT

That’s all. Our file manager allows you to navigate through the file system, as well as preview files and their properties.

We have created a client-server application for browsers without writing a single line in JavaScript or spending time to implement AJAX interaction. Moreover, we do not take into account the peculiarities of web development at all.

12. Application


In general, the framework leaves a very good impression, it is well thought-out and documented. In addition, there are many examples of source code on GitHub. The Hacker magazine (author of this article, editor and chief editor) recommends that you use it, including ingest and in unlimited quantities!

3 Responses to “Prepare for Vaadin, an extremely powerful Java framework for enterprise web”

  1. Alex Punen

    Vaadin is a mistake that we made in our large enterprise by some projects; It is good in its defaults, but changing theme , both look and feel , as well as slight customization became a pain very soon. Plus sluggish UI response, Java developers having no idea about basic web development hammering away production code meant to run on the web, on different browsers, relying purely on the strength of the framework , is scary. Plus all the reasons you read here by real users;

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">