UiBinder with SuggestBox & MultiWordSuggestOracle

February 11th, 2010

I’ve been working on a somewhat large and complex GWT project using UiBinder over the past couple of weeks. I’ve built a number of widgets that use the SuggestBox and MultiWordSuggestOracle but I created a new UiBinder, populated the suggestions but they came up blank in the type-ahead. After about a half hour of scratching my head I looked back at some other code and figured it out. There are very few examples of the SuggestBox with UiBinder so I thought this might help someone out.

The UiBinder template (MyWidget.ui.xml) is fairly simple:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <g:HTMLPanel>
        <g:SuggestBox ui:field="mySuggestBox"/>
    </g:HTMLPanel>
</ui:UiBinder>

The owner class (MyWidget.java) is where you need to make sure you have things correct. On line #20 you need to ensure you have (provided = true) or your suggestions will not show in the type-ahead. You also need to create your SuggestBox before you initialize the UiBinder;

package com.jeffdouglas;
 
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
import com.google.gwt.user.client.ui.SuggestBox;
import com.google.gwt.user.client.ui.Widget;
 
public class MyWidget extends Composite {
 
  private static MyWidgetUiBinder uiBinder = GWT.create(MyWidgetUiBinder.class);
 
  interface MyWidgetUiBinder extends UiBinder<widget, MyWidget> {
  }
 
  private final MultiWordSuggestOracle mySuggestions = new MultiWordSuggestOracle();
 
  @UiField(provided = true) // MAKE SURE YOU HAVE THIS LINE
  SuggestBox mySuggestBox;
 
  public MyWidget() {
    mySuggestBox = new SuggestBox(mySuggestions);
    initWidget(uiBinder.createAndBindUi(this));
    getSuggestions();
  }
 
  private void getSuggestions() {
    // call some service to load the suggestions
    mySuggestions.add("Suggestion #1");
    mySuggestions.add("Suggestion #2");
    mySuggestions.add("Suggestion #3");
  }
 
}

Categories: Code Sample, GWT

13 Comments

Jason March 10th, 2010
Worked perfectly.. thanks for posting this – you saved me some frustration!
Ale March 12th, 2010
Thanks.
Shawn March 29th, 2010
I echo the above. Thanks for writing this.
Dustin April 6th, 2010
thanks for writing this. I’m surprised at how little Google has documented UiBinder. thanks a lot.
Jeff Douglas April 7th, 2010
I agree. Hopefully they will release more info after Google I/O.
Vickie April 8th, 2010
All of your tutorials have been very helpful, thanks!
Draško April 10th, 2010
I think the way how this should work is that:
- no need to provide your SuggestBox
- initilise the uiBinder
- use getSuggestOracle method

and than fill it up with your suggestions

HTH
berni June 1st, 2010
Good example of flag provided
thanks
saurabh January 11th, 2011
hi,
i just copied this code. but in my project its not working .. can you tell me the coding that i need to write in the entry class.
i m writing……
public void onModuleLoad() {

AutoSuggest autoSuggest = new AutoSuggest();
Document.get().getBody().appendChild(autoSuggest.getElement());

}

where AutoSuggest is my uibinder class.
slowpoison February 28th, 2011
Thanks! You saved me quite a bit of trouble.
Gizmo April 19th, 2011
Thank you! Exactly what I needed
I also learned what was this “provided = true” thing!
sachin taware April 20th, 2011
Hi this is good,can you post something which has aesthetic design with some links hooked to different pages populating data.I tried it using the Dockpanel but not successful as such in linking part.
Thanks
Dmitry Z. June 17th, 2011
You saved my day!
Thanks!