Wednesday, 4 July 2012

Separating Look/Feel from View/Presenter

Here's a demo of a working iPad-style on-off switch that I wrote in SVG and Javascript (GWT).

SVG seems to work pretty consistently across platforms – including the iPad, iPhone and all modern desktop browsers, astonishingly even IE 9. The only unfortunate exception is Android where, apparently, SVG support was actively removed to reduce the browser footprint (by a measly 1MB). You can work around it by installing Android Firefox which supports SVG though not multi-touch.

As I developed the on-off switch control, I separated out two distinct interfaces that I called: View and Look. To give them a proper namespace, without too much clutter, I nested the interfaces inside an outer interface for the OnOffSwitch something like this:

public interface OnOffSwitch {

interface View {

void setOn(boolean on);

boolean isOn();

HandlerRegistration addValueChangeHandler(
ValueChangeHandler<Boolean> handler);

interface Look {

void knobDown();

void knobUp();

* @param position
* A value between zero and one (0 = OFF, 1 = ON)

void setKnobPosition(double position);

The Look is called by a Feel object that translates mouse-clicks and touches. The View is called by the application code. My SVGOnOffSwitch widget implements both Look and View interfaces and hooks itself up to a default Feel object. Testing the Feel object was easy to do by passing it a mock Look.

It's always hard coming up with good names for interfaces and objects. I thought I'd post this because I was pleased with the way the code ended up.

No comments: