Viewing details of items in ListSelect

In this recipe, we will show the use of a ListSelect component. It's a list box that shows the selectable items in a vertical list. If the number of items exceeds the height of the component, a scrollbar is shown. We will use it for viewing details of contacts in a list as shown in the following screenshot. We'll create it as a custom component.

Our Contact viewer is based on the HorizontalSplitPanel that contains two components and lays them horizontally. On the left side, we will have list of full names and on the right side we will have details about the selected user. We will learn how to add items to the ListSelect component using the Container and how to work with the listener.

How to do it...

Carry out the following steps for viewing the details of items in the list:

1. We create a Vaadin project with the main UI class called Demo.

   public class Demo extends UI {

2. First, we need a bean called Contact. We create a simple bean with first name, last name...