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 »

I received some emails asking how to setup and run gwtXP examples in IDEs.

This post shows how to do it in Eclipse. I recommend to use Google Plugin for Eclipse during developing GWT applications.

Create a Hello project

In your Eclipse IDE, select File – New

- Type in the project name and the package
- Select “Use Google Web Toolkit” check box and click Finish button.

Configure project’s Run/Debug settings

• Open project properties dialog: Right-click on Hello project and select Properties from pop-up menu
• Go to Run/Debug Settings section
• Click on the “Hello” launch configuration and click Edit button

  

• In the Edit Configuration dialog, click on Arguments tab and change the Working directory option from “Other” to “Default”

  

• Click OK
• Go to Java Build Path section, click on “Add External JARs” and select the gwtXP.jar you downloaded from http://www.gdevelop.com/w/downloads/
• Click OK

Read full article »