Creating a TextField with counter

In some cases, we need to use text fields with limited character length, usually for forms that submit data to database. It is nice to tell the user how many characters remain. For that case, we can create our custom text field with a counter, as shown in the following screenshot. In this recipe, we will show how to do it.

How to do it...

Carry out the following steps to create a TextField with a counter:

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

   public class Demo extends UI {…}

2. The easiest way to create a new component is to use Eclipse IDE. We open the context menu on the project and choose New | Other…. A wizard will open. In the wizard, we type vaadin. Then we select the item Vaadin Widget and click on the Next button, as shown in the following screenshot:

   

3. On the next page, we set some properties. Package will be com.packtpub.vaadin.widget. The name of our new component will be CountedTextField and as a superclass we set com.vaadin...