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:
1 2 3 4 5 6 7 | <!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;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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
Worked perfectly.. thanks for posting this – you saved me some frustration!
Thanks.
I echo the above. Thanks for writing this.
thanks for writing this. I’m surprised at how little Google has documented UiBinder. thanks a lot.
I agree. Hopefully they will release more info after Google I/O.
All of your tutorials have been very helpful, thanks!
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
Good example of flag provided
thanks