Binding property to a component

Through the Property interface, we can easily bind a single data object with a component. This property can be shared between multiple components. Changes in the property in one component are immediately visible in the other components. The Property interface is the base of the Vaadin Data Model. It provides a standardized API for a single data object that can be read (get) and written (set). In this recipe, we will work with one ObjectProperty that will store a string of an HTML page. We will create a simple editor of this page. It will consist of three tabs: a preview of a page, an HTML editor, and a Rich text editor as depicted in the following screenshot:

How to do it...

Carry out the following steps to create a simple HTML editor by binding property to a component:

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

   public class Demo extends UI {…}

2. We create a class named Editor that extends TabSheet as follows. Each section (preview and...