Code generation for Data Binding

gwtXP uses JFace Data Binding to bind bean’s property to GWT widget’s property. Below describes key concepts of JFace Data Binding from that we will see how gwtXP generate code for Data Binding.

In general, the JFace Data Binding architecture looks like:

The key concept of JFace Data Binding is Observable. The Binding is used to bind two Observable objects.

See JFace Data Binding and JFace Data Binding Introduction for full documentation.

You can also find a good presentation at EclipseCon 2008 – JFace Data Binding

Let start another example for demonstration purpose. Assume we have model class User as below

class User{
  private transient PropertyChangeSupport changeSupport =
    new PropertyChangeSupport(this);
  private String userName;
  ...

  public String getUserName(){
    return userName;
  }
  public void setUserName(String userName){
    String oldUserName = this.userName;
    this.userName = userName;
    changeSupport.firePropertyChange("userName", oldUserName, userName);
  }
}

The controller class

public class UserController{
  private User currentUser;
  ...

  public User getCurrentUser(){
    return currentUser;
  }
}

And the view is described by User.gwtxp.xml file

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp"
    controllerClassName="qualified_class_name">
  <verticalPanel>
    <textBox j_name="txtUserName" text="${currentUser.userName}"/>
    ...
  </verticalPanel>
</g:gwtxp>

We declare a TextBox in a VerticalPanel. The TextBox’s text is bound to currentUser’s name.

gwtXP will then generate following code for you

...
  __dbc__.bindValue(
    new TextBoxObservableValue(txtUserName)
    , new UserObservableValue(null, __this__.getCurrentUser(), "name")
    , new GWTUpdateValueStrategy()
    , new GWTUpdateValueStrategy()
  );
...

You see in the above snippet, gwtXP generates code for two Observables and code for binding them. The firs Observable is responsible for handling TextBox’s text change event, while the second is for change event in property name of current user object.
The result is depicted by below diagram

Note: ObservableValue is a subclass of Observable. Beside ObservableValue, gwtXP can also generate ObservableLists and bind them.