Fancy UI

All About Crazy IT Stuff

How to Use GWT Editors with A Services oriented Backend

with one comment

I searched all the internet to find how can  I use GWT editors to populate and validate data on my views with plain classic Service oriented backend : DAO Layer, Service Layer using Spring. But all I find is ActiveRecord style with this approach there is no service layer but all data access methods are in the Entity (Think of Ruby On Rails ActiveRecord Pattern).

So after a lot of searching here and there I found a great way to use Editors with a Service oriented Backend. Below the code GWT Proxy of the Entity That I want to Edit :

public interface AccountProxy extends ValueProxy {
    public String getId();
    public void setId(String id);
    public String getUserId();
    public void setUserId(String userId);
    public String getName();
    public void setName(String name);
    public Double getBalance();
    public void setBalance(Double balance);
    public String getType();
    public void setType(String type);

On this example I want to save an instance of AccountProxy by calling the accountRequest.createAccount(), all of the boilerplate code to bind UI value to the my Object and vice versa is handled by the Editor.

To accomplish this I choose using a SimpleBeanRequestEditorDriver (It is a more clean solution because I use ValueProxy). To do so I just create a instance of AccountProxy using the method accountRequest.create(AccountProxy.class) of my Request Object and give it to myDriver.edit(). For more detail see the code below :

public class AccountActivity extends AbstractActivity {

    //My UI Presenter
    public IAccountDisplay extends Editor<AccountProxy> {
        HasClickHandler getAddButton();
        Widget asWidget();

    //My Driver Interface
    interface Driver extends SimpleBeanRequestEditorDriver<AccountProxy, IAccountDisplay> { }

    private final EventBus eventBus;
    private final MyRequestFactory requestFactory;
    private final IAccountDisplay display;

    private AccountProxy newAccount;
    private Driver driver;

    public AccountActivity(EventBus eventBus, MyRequestFactory requestFactory,
            IAccountDisplay display) {
        this.eventBus = eventBus;
        this.requestFactory = requestFactory;
        this.display = display;

    //The Initialization of the Driver Goes Here
    public void start(AcceptsOneWidget container, EventBus eventBus) {

        //Set up the Data Editor Driver
        driver = GWT.create(Driver.class);
        newAccount = requestFactory.getAccountRequest().create(AccountProxy.class);

        //Bind event on the presenter

    private void bind() {
        //Here Handle the event of the create Account Button
        //Here we call the editor to extract and validate from the UI to the Object
        //And then send the Data to server using a plain and simple Requestfactory Call
        display.getAddButton().addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                newAccount = driver.flush();
                //Check if there is some errors during the extraction
                if(!driver.hasErrors()) {
                            .fire(new Receiver<Void>(){
                        public void onSuccess() {
                            Window.alert("New Account Saved !!!");
                } else {
                    //Here the Code to do when there is errors...

This approach works very well, If there is a better way to do this please share the idea.


Written by imrabti

September 19, 2011 at 7:51 am

Posted in GWT

Tagged with , , ,

One Response

Subscribe to comments with RSS.

  1. Hi there! This is my 1st comment here so I just wanted to give
    a quick shout out and tell you I genuinely enjoy reading through your posts.
    Can you suggest any other blogs/websites/forums that go over the same subjects?
    Thanks a lot!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: