Errai UI @DataField Binding for HTML SELECT

[chaluwa]

Yes we can bind to texbox and simple fields, but how can I bind to a HTML <select>? I am basically trying to make a combo-box. Just like in the errai-tutorial demo, I was wondering if this can be handled with a ListWidget since it somehow follows the same idea.

[mbarkley]

Hi Charles,

I've looked into this a little and ListBox, the widget for html select inputs, does not work well with either of our binding setups. ListBox doesn't act like a Panel so it won't work well with the ListWidget, and it doesn't implement HasValue so it won't work with regular binding.

You could probably try and force the ListBox to work with DataBinding by subclassing it to implement HasValue, but I don't think it's worth the effort.

[chaluwa]

Hmmmm ... Thanks for the helpful response. But I am left wondering how to go about using drop-down boxes in an Errai UI app ?

[chaluwa]

Ok, another thought would be to try this with GWT's ValueListBox. What do you think.

[chaluwa]

I have been able to solve this by using GWT's ValueListBox, and this is how I did it:

// from HTML template
...
<select name="bundlelist" data-field="bundlelist" class="form-control"></select>
...

And then the view component that uses the HTML template

@Page(path="putmesubjects")
@Templated("putmesubjects.html#root")
@Singleton
public class PutmeSubjectsView extends Composite{

  ...
   
  @DataField
  private ValueListBox<PutmeSubjectBundle> bundlelist = new ValueListBox<PutmeSubjectBundle>(new AbstractRenderer<PutmeSubjectBundle>() {
       @Override
       public String render(PutmeSubjectBundle bndl) {
            return (bndl == null ? "" : bndl.getName());
       }
  }, new ProvidesKey<PutmeSubjectBundle>() {
       @Override
       public Object getKey(PutmeSubjectBundle item) {
            return (item == null) ? null : item.getId();
       }
  });

  ...

}

And the component can be used normally thus :

bundlelist.setAcceptableValues(list);
// and
bundlelist.getValue();

[gant]

the following code works with 3.0.snap-M3

@Inject

    @DataField

    private ListBox rank;

<select id="rank" data-field="rank"></select>