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:

Binding property to a component

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 two editors) will have its own tab.
    public class Editor extends TabSheet {…}
  3. Our HTML page will be stored in an instance of the ObjectProperty class. We call it htmlPage and we set the type of the value to String. Next, we add constant of tab page height.
      private ObjectProperty<String> htmlPage = 
         new ObjectProperty<String>(
    "<h1>Vaadin</h1><p>is a <b>Java framework</b> for 
             building modern web applications.</p>");
  private static final int HEIGHT = 300;
  4. In the constructor, we create tabs. Each tab will be created in separated methods. In the first, we insert a preview of the HTML page. In the second will be plain text area with HTML editor and in the last tab we insert Vaadin's component Rich text editor.
      public Editor() {
    addTab(createPreview());
    addTab(createHtmlEditor());
    addTab(createRichEditor());    
  }
  5. The Preview tab is created through the createPreview() method. In all tabs, vertical layout is used. To clarify the code, we move the creation of this layout to the createLayout() method. The Preview tab consists of only one component. It is a Label that has set the shared property named htmlPage.
      private Layout createPreview() {
    Layout layout = createLayout("Preview");
    Label label = new Label("", ContentMode.HTML);
    label.setPropertyDataSource(htmlPage);
    layout.addComponent(label);
    return layout;
  }
  6. The next tab is the HTML editor. It also has a vertical layout and consists of a simple text area with a set property htmlPage.
      private Layout createHtmlEditor() {
    Layout layout = createLayout("HTML editor");
    TextArea editor = new TextArea();
    editor.setSizeFull();
    editor.setPropertyDataSource(htmlPage);
    layout.addComponent(editor);
    return layout;
  }
  7. The last tab is the Rich text editor. Here we use a nice Vaadin component RichTextArea. It has also a set property htmlPage.
      private Layout createRichEditor() {
    Layout layout = createLayout("Rich text editor");
    RichTextArea editor = new RichTextArea();
    editor.setSizeFull();
    editor.setPropertyDataSource(htmlPage);
    layout.addComponent(editor);
    return layout;
  }
  8. In the common method for creating layout, we set the caption and height of the vertical layout which is used in all tabs. This caption is automatically used for the tab's name.
      private Layout createLayout(String caption) {
    Layout layout = new VerticalLayout();
    layout.setCaption(caption);
    layout.setHeight(HEIGHT, Unit.PIXELS);
    return layout;
  }
  9. Now we can use our created Editor class in the main UI class Demo.
    public class Demo extends UI {
  @Override
  protected void init(VaadinRequest request) {
    setContent(new Editor());
  }
}

We run the server and open the created application in the web browser.

How it works...

We created a simple HTML editor. The HTML source code is stored in an instance of the ObjectProperty<String> class. The ObjectProperty class is a simple data object containing one typed value. In our case, it is a String type. This property is bound with all three sections of our editor by the setPropertyDataSource(Property) method. If the user makes any changes in one of the editors, these changes are propagated into the other sections through ValueChangeEvent.

There's more...

In Vaadin, we can use other implementations of the Property interface. Some of them are described in the following table:

Name of class

Description

AbstractProperty

An abstract base class for Property implementations. Handles listener management for ValueChangeListeners and ReadOnlyStatusChangeListeners.

MethodProperty

Proxy class for creating properties from pairs of getter and setter methods of a Bean property. Accessing the object through the Property interface directly manipulates the underlying field.

ObjectProperty

A simple data object containing one typed value.

TextFileProperty

Property implementation for wrapping a text file. Supports reading and writing of a file from/to String.

TransactionalPropertyWrapper

(new in Vaadin 7)

Wrapper class that helps implement two-phase commit for a non-transactional property. When accessing the property through the wrapper, getting and setting the property value take place immediately.

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.223.108.105