Changing Label to TextField by double-clicking

We will create an editable Label class. It will be possible to edit this Label, because after double-clicking on it, the Label will become a TextField. After losing focus, it again becomes a Label. But how to add click listener to the Label or to a similar component that doesn't support such a listener? In those cases we can use LayoutClickListener. This listener is added to the layout in which the component is placed. It's called whenever the user clicks inside the layout.

How to do it...

Carry out the following steps to create an editable Label:

1. We create a Vaadin project with a main UI class called Demo as follows:

   public class Demo extends UI {…}

2. Next, we create the EditableLabel class. It extends VerticalLayout.

   public class EditableLabel extends VerticalLayout {…}

3. Firstly, we need two variables: label and textField.

      private Label label = new Label();
      private TextField textField = new TextField();

4. Then, we create a simple constructor. Through...