Databinding: A Custom Observable for a Widget

February 3, 2009 | 3 min Read

The introduction of the databinding framework in Eclipse 3.3 is with no doubt one of the most useful tools in the hands of the form developer. The ability to transform and validate user input in such a flexible and reusable way is a great enhancement. But where there is light, there is shadow. Sometimes there is just no IObservable available for your target or model object. This blog entry will demonstrate how easy it can be to create a custom IObservable for a DateTime widget.

The DateTime widget represents one value: a java.util.Date. This Date object is the one we want to get and set on the target (target being the UI widget). Therefore we wrap the DateTime in an IObservableValue by extending the AbstractObservableValue class. Essentially an IObservable* offers methods to get and set data, to determine the type of data and to register listeners to be notified of changes. The following code demonstrates a skeleton implementation of an IObservableValue. ```java public class DateTimeObservableValue extends AbstractObservableValue {

private final DateTime dateTime; Listener listener = new Listener() { … };

public DateTimeObservableValue(final DateTime dateTime) { this.dateTime = dateTime; this.dateTime.addSelectionListener(this.listener); }

@Override protected Object doGetValue() { // the utility method creates a Date from the DateTime return dateTimeToDate(); }

@Override protected void doSetValue(final Object value) { if (value instanceof Date) { // the utility method sets the date on the DateTime dateToDateTime((Date) value); } }

@Override public Object getValueType() { return Date.class; }

@Override public synchronized void dispose() { this.dateTime.removeSelectionListener(this.listener); super.dispose(); } } The implementation details are not very special. The _getValueType()_ method has to return the type represented by this _IObservableValue_ (which is the type _Date_). The do methods set and get the _Date_ value. Since the observable has to propagate changes in the _DateTime_ widget as soon as they ocurre, we attach a listener on the _DateTime_ widget to inform any registered _IValueChangeListener_ of the event. The listener implementation looks like the following:java Listener listener = new Listener() {

@Override public void handleEvent(final Event event) { Date newValue = dateTimeToDate();

if (!newValue.equals(DateTimeObservableValue.this.oldValue)) { fireValueChange(Diffs.createValueDiff(DateTimeObservableValue.this.oldValue, newValue)); DateTimeObservableValue.this.oldValue = newValue; } } }; ``` In the DateTime listener we inform any interested IValueChangeListener of our DateTimeObservableValue. In order to avoid unnecessary propagation of update events in the databinding context, we compare the last set Date in the IObservableValue with the new value. Next we create a ValueDiff from our new date value and fire the the value change event. The advantage of listening to the changes in the DateTime widget, is that we are able to fire events which are either invoked by the user changing the DateTime widget or by programmatic changes of the IObservableValue_s wrapped_Date.

You can download the full listing of the observable class here:

As we can see, it is quite easy to write a custom observable for any kind of widget or datastructure, represented by a single value…  So, how do you embed your data in custom observables? Any obstacles you had to overcome? Problems you faced? Share them with us. :)