5 Replies Latest reply on Jan 15, 2014 3:50 AM by Babur Duisenov

    Errai UI @DataField Binding for HTML SELECT

    Charles Odili Apprentice

      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.

        • 1. Re: Errai UI @DataField Binding for HTML SELECT
          Max Barkley Expert

          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.

          1 of 1 people found this helpful
          • 2. Re: Errai UI @DataField Binding for HTML SELECT
            Charles Odili Apprentice

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

            • 3. Re: Errai UI @DataField Binding for HTML SELECT
              Charles Odili Apprentice

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

              • 4. Re: Re: Errai UI @DataField Binding for HTML SELECT
                Charles Odili Apprentice

                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();
                
                
                
                • 5. Re: Errai UI @DataField Binding for HTML SELECT
                  Babur Duisenov Newbie

                  the following code works with 3.0.snap-M3

                   

                  @Inject

                      @DataField

                      private ListBox rank;

                   

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