Easy To Use UI Binder in your GWT

July 3, 2011 at 3:25 pm Leave a comment

UI Binder was introduced in GWT 2.0 . I had noted the new functionality in an earlier post.

#1 reason to use it: UiBinder can also make your app more efficient

public class SimpleEntryPoint implements EntryPoint {

  public void onModuleLoad() {

	  HelloWidgetWorld h = new HelloWidgetWorld();  

    RootPanel.get().add(h);
  }
}

You must declare access to UiBinder. Here is HelloWidgetWorld.java:

 public class HelloWidgetWorld extends Composite{
        interface MyUiBinder extends UiBinder<
HTMLPanel, HelloWidgetWorld
> {}
	private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

	@UiField
	ListBox listBox;

	public HelloWidgetWorld(){
		initWidget(uiBinder.createAndBindUi(this));
		listBox.addItem("Willie Mays");
	}

}

UiBinder<U, O> interface declares two parameter types:

  • HtmlPanel = U is the type of root element declared in the ui.xml file, returned by the createAndBindUi call
  • HelloWorld = O is the owner type whose @UiFields are to be filled in.

HelloWidgetWorld.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <g:HTMLPanel>
    Hello, <g:ListBox ui:field='listBox' visibleItemCount='1'/>.
  </g:HTMLPanel>

</ui:UiBinder>
Advertisements

Entry filed under: Uncategorized.

Developer Sharing June Edition MVP plus Activity/Places

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


@davidmbloom

Error: Twitter did not respond. Please wait a few minutes and refresh this page.


%d bloggers like this: