Table of Contents
Introduction
gwtXP uses JFace data binding (with modifications) and Expression Language concepts to allow you declare binding expression like <g:textBox text="${user.userId}"/>.
This post shows how to use data binding (property binding, list binding and table binding) in gwtXP to build gwt applications. It also shows how to build a scrollable table. See the demo.
Data model
We use following bound bean during this post. See the examples page for complete source code.
public class User{
private transient PropertyChangeSupport changeSupport = new PropertyChangeSupport(this);
private String userId;
private String fullName;
private Date dob;
private String email;
private int numberOfWrongPassword;
private String password;
private Boolean enabled;
...
// getter and setter methods
}
Basic binding
Bind a bean’s property to a GWT widget’s property. gwtXP supports most of common widgets such as Label, TextBox, PasswordTextBox, CheckBox, RadioButton, Button, etc.
Below shows some basic binding examples:
Bind to Label text
<g:label text="${user.userId}"/>
Bind to TextBox text
<g:textBox text="${user.userId}"/>
If you require the build-in user ‘admin’ can not be changed, you can disable the text box for userId value of ‘admin’:
<g:textBox text="${user.userId}" enabled="${user.userId != 'admin'}"/>
Bind to PasswordTextBox’s text and enabled properties
For example, you require the admin can set new password for enabled user only, e.g the password text box will be enabled if user.enabled is true.
<g:passwordTextBox text="${user.password}" enabled="${user.enabled}"/>
Bind to CheckBox value
<g:checkBox value="${user.enabled}"/>
Data Conversion
The data binding has build-in data converter which converts one object to another object, for example from Date to String, Number to String, etc and vice versa. Some converter requires additional ‘pattern’ attribute. The ‘pattern’ attribute describe how a converter format/parse data. If no ‘pattern’ specified, the converter uses the default one.
In gwtXP, simply add ‘pattern’ attribute to the tag as below:
<g:textBox text="${user.dob}" pattern="MM/dd/yyyy"/>
The converter also validate user input against the specified pattern.
Custom Data Validation
You can declare the validator which validate the user input as below:
<g:textBox text="${user.email}" validator="${emailValidator}"/>
The validator must implement the IValidator interface.
Validation Status
When the validating the data, validator will report a status (whether OK or error). By default, when error occurs during validation process, we add an ‘error’ style to the widget. To display the error message, we use a special errors tag as below:
<g:errors errorMessage="There was errors during validating your data."/>
Of course, you can internationalize the error message as below:
<g:errors errorMessage="${constants.multipleErrors}"/>
Read full article »
