Introduction

Vaadin provides a comprehensive set of User Interface components. UI components are configurable, reusable elements that make up the user interface. We will show some of them.

Vaadin gives many alternatives for selecting one or more items from a list, using drop-down and regular lists, radio button and checkbox groups, tables, trees, and so on. We will learn how to use the ListSelect component and we will also briefly mention differences in some other selection components. A very important component is a Table. In this book, it is used in various examples. In this chapter, we will learn how to generate an additional column in the Table.

We will show how to visualize data by using Flot chart and Highcharts libraries. Both chart libraries are written in JavaScript, which runs in the client browser. We will show how to integrate them with Vaadin server-side code.

Drag-and-drop is a very useful and practical feature. Users can simply grab an object with the mouse and drag it to a different location. It is possible to create drag-and-drop components for every component in Vaadin. We will use this feature for our custom file uploader.

The Joda-Time library provides better classes for work with dates in Java. We will show how to display a DateTime type inside a Vaadin form.

Next, we will describe the Slider component. It's a very useful component when we need to select a value between a minimum and maximum range.

Vaadin 7 comes with built-in support for SASS (Syntactically Awesome Stylesheets), which is an extension of CSS3. Finally, we will learn how to use CSS styles to restrict buttons in the RichTextArea and how to the change the style of components.