Wednesday, June 4, 2014

GWT UiBinder Technique (Spring Project)

binders
 
    The UiBinder technique is also known as “Declarative Layout”. This means that the UIBinder provides a declarative way of defining User Interface and in general, it is similar to what JSP is to Servlets. It is designed in order to separate Functionality and View of the UI and make them loosely coupled. Practically it separates the program logic from UI. Developers can build gwt applications as HTML pages with GWT widgets configured throughout them. It also makes the collaboration with UI designers easier, since they are more comfortable with XML, HTML and CSS than Java source code.

PART 1

The basic setup is taken form a Spring project with GWT integration(for designing the UI).
In src/main/java:

BASIC SETUP:

VIEW(Interface)
package helloworld.client.view;
import com.google.gwt.user.client.ui.IsWidget;
import gr.planetek.saps.helloworld.client.presenter.Presenter;
public interface View extends IsWidget {
 void setPresenter(Presenter presenter);
}

PRESENTER (Interface)
package helloworld.client.presenter;

import com.google.gwt.user.client.ui.HasWidgets;

public abstract interface Presenter {
 void go(final HasWidgets container);
}

HELLOWORLD (Entry point class)
package helloworld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;

/**
 * Entry point classes define onModuleLoad().
 */
public class HelloWorld implements EntryPoint {
 @Override
 public void onModuleLoad() {
  AppController appViewer = new AppController();
  appViewer.go(RootPanel.get("gwtContainer"), new HeaderViewImpl());
   }
}
*In HTML page there is a div with this id:
id="gwtContainer"

APP CONTROLLER(Class)
  
    public class AppController implements ValueChangeHandler {
    private HasWidgets container;
    public AppController() {
        bind();
    }

    /**
     * #1 Implementing the History Management 
     * #1^Binding events to actions in the code 
     * #2 Handling history changes  
     **/

    private void bind() {
        // TODO ..
        History.addValueChangeHandler(this); // #1
    }
    /******** Event & History Management ***************/

    @Override
    public final void onValueChange(ValueChangeEvent event) { // #2
        String token = event.getValue(); // #2
        if (token != null) {             // #2
            if (token.startsWith("Home")) {
                displaySearch(token);    // #2
            }   
        }
    }

    private void displaySearch(String token) { // #3
        container = RootPanel.get("gwtContainer");
        container.clear();
        SearchPresenter presenter = null;
        SearchView searchView = new SearchViewImpl();
        presenter = new SearchPresenter(searchView);
        presenter.go(container);
    }

    public final void go(final HasWidgets container, Widget widget) {
        this.container = container;
        container.add(widget);

        if ("".equals(History.getToken())) {
            History.newItem("Home");
        } else {
            History.fireCurrentHistoryState();
        }
    }
}
This was the basic setup. In part 2 we implement a View using UiBinder.

No comments:

Post a Comment