Friday, December 12, 2008

Gwt UI Component with Fluent Interface Pattern

Fluent Interface pattern Fluent Interface is come from Martin Fowler. These types of design pattern are often utilized to create configurations for your objects but can progress into an internal Domain Specific Language or DSL.

I will use GWT as a sample to point out the issue of Swing like development with HTML\tag style for UI programming. In GWT/Swing like coding style, have you found out that the number of line of code is much more than tag style. Look at the following explanation.

Gwt Button with out Fluent Design
Button disabledButton = new Button();
disabledButton.ensureDebugId("cwBasicButton-disabled");
disabledButton.setEnabled(false);
disabledButton.setWidth("11");
disabledButton.setHeight("11");
disabledButton.setTitle("Disable Button");
disabledButton.setFocus(true);
//Come on!!! still set again.. :( ..How many line already!!! that is just one UI component...
.....
...
..
.

HTML / Tag style
All the properties can be in one line and optional.
< button title="Disable Button" width="11" focus=" true" height=" 11" enabled=" false" ensuredebugid="cwBasicButton-disabled" />

Gwt Button with Fluent Design
Button disabledButton = new Button()
.ensureDebugId("cwBasicButton-disabled").setEnabled(false).setWidth("11").setHeight("11").setTitle("Disable Button").setFocus(true) ;

Fluent like coding style is something like tag/annotation style of code. It is good to configure an object.

Constructor way of coding
No wait a minute, We can use Constructor to passin the properties so it can be in one line of code.
Maybe you can create constructor for the Button object with all the properties but how many combination of properties you can create. Bad design because it is not easy to read.
Button disabledButton = new Button("cwBasicButton-disabled", true, true); //what is the true true for? Which one is enabled? Which one is focus?

public Button ( String ensureDebugId, boolean enabled, boolean focus){...}
public Button ( String ensureDebugId, boolean enabled, String title ){...}
public Button ( String ensureDebugId, boolean enabled, boolean focus){...}
// you can create somemore for other properties...if you are hardworking.

Make Button with Fluent Interfaces Design Pattern
So in order for GWT/Swing like coding style to solve all this issues and to minimise the number of line of code and readability. Fluent interfaces pattern has to be implemented.
All the UI component should be coded in the following way. All setters have to return this own for the subsequent statement to call again.

Button SetTitle(String title){
this.title= title;
return this;
}
Button SetEnabled(boolean enabled){
this.enabled= enabled;
return this;
}
...
..// for all the setter of the properties

Button with Java5 Annotation
With the Java5 Annotation support, you can easily configure an object in Attribute Oriented Programming way. But do you think gwt support annotation in runtime mode? The answer is no. But we can use it via gwt generator wich mean in the compile time.
@ButtonProperties( ensureDebugId="cwBasicButton-disabled", enabled= false, width=11, height=11, title="Disable Button", focus=true )
Button button = new Button();

Fluent Interfaces Pattern in SQL
let see how it can be in Sql.
Query = q = new Query()
.select("name","age").from("Student").where("age").between(12,20).where("gender").is("M")
This can be easily refactor and avoid typo error. Sound good right!!!


Finally, i hope our programming trend is going to attribute oriented programming and fluent Interfaces Pattern. THE WORLD IS JUST CONFIGURE

No comments: