3 Replies Latest reply on Jul 3, 2010 5:36 AM by Luis Tama

    Exasperated with inputs and selects

    Tanya Ruttenberg Expert

      Does anyone else feel that they spend an inordinate of time choosing between comboboxes, suggestionboxes, and other input/selects when constructing an application?  And does anyone feel exasperated about certain lack of consistency between those so that your choice is forced by available features that seem to be superficial and yet important enough to influences your decision?

       

      Example:
      I have a select list containing, say, a list of ranges.  It looks like this

       

      Num of Workstations ___________
                          1-50
                          51-300
                          301-750
                          750+

       

      This is what I want to display, but what I want to input is 1, 51, 301, and 750 respectively

       

      These are the components I have tried and none is completely satisfactory.

       

      ComboBox: f:selectItem itemLabel is ignored. Just to supply the value does not give the user enough information to choose. But I like how the comboBox looks. I think the arrow button is an intuitive way for a user to view the choices.

       

      SuggestionBox: Performance slower than comboBox and not really justifiable for such a short listing. However it might be acceptable in a production environment.  However again, I don't like that there is no easy way to put a skinnable arrow button onto this thing. (See a previous posting of mine).  It looks weird on a single page to have comboboxes that look like one thing and suggestionboxes that look completely different when from the users point of view these are exactly the same thing.  At least from this user's point of view.

       

      Inplace Select:  I don't like how different it looks from the comboBox.  When you have a form full of inputs with drop-down menus from which the user can select, I think it is supremely weird to the user to have all these superficially identical things look completely different from each other.  However, the show-stopper for the inplace select is that once I have put something in the field, I cannot delete it, ie make the field blank/empty again.  Maddening. Maybe if I make one of the selects a blank I can work around that last problem.

       

      JSF SelectOneMenu: This is probably my best choice here. Bonus if I skin it so it "fits in" with the rest of the app.  I haven't tried skinning this component yet so hopefully that won't be too painful.

       

      Comments?  Maybe it's just that I'm enough of a beginner that there are important aspects to this that I don't yet understand.  I'd be interested to hear how other people deal with this and make these decisions.

       

      TDR

        • 1. Re: Exasperated with inputs and selects
          Jay Balunas Master

          Hi Tanya,

           

          No, I don't think it is just you :-)  This is a side effect of a project evolution over the years.  It is also something we are closely reviewing for 4.0 so that components all behavior in similiar and expected way.  Consistency is one of key points with the changes we are making for 4.0.

           

          Regards,

          -Jay

          • 2. Re: Exasperated with inputs and selects
            Tanya Ruttenberg Expert

            I just want to follow-up on this because I am no longer exasperated. :-)

             

            Since I last posted I discovered the joy and ease of using a comboBox (which I like the look of) with a converter which gives the functionality I was missing with the comboBox.

             

            Example for the other neophytes who might be wondering how to do this.

             

            Here is the combobox:

             

                         <rich:comboBox value="#{devInterfaces.carrier}"
                            id="som39" converter="carrierConverter">
                            <f:selectItem itemValue="AT&amp;T"  />
                            <f:selectItem itemValue="Verizon"  />
                            <f:selectItem itemValue="Extranet/NDM"  />
                          </rich:comboBox>

             

             

            And here is the Converter:

             

            @Name("carrierConverter")
            @BypassInterceptors
            @Converter
            public class CarrierConverter implements javax.faces.convert.Converter {

             


                public Object getAsObject(FacesContext context, UIComponent component, String value) {
                   
                    if ((value == null) || (value.length()<1)) {
                        return null;
                    }
                    else if (value.startsWith("A")){
                        return "ATT";
                    }
                    else if (value.startsWith("V")){
                        return "VZN";
                    }
                    else if (value.startsWith("E")){
                        return "EBP";
                    }
                    return null;

             

                }

             

                public String getAsString(FacesContext context, UIComponent component, Object value) {
                    return (value==null || "0".equals(value.toString()))?"": value.toString();   
                }

             

            }

             

            Because I am us8ing seam, I can forget about this business of registering the converter that you will read in documentation. Just use the annotations above and you're on your way!

             

            This takes input from the comboBox and submits as a value to devInterfaces.carrier the return value from getAsObject.

             

            It works handily.

             

            TDR

            • 3. Re: Exasperated with inputs and selects
              Luis Tama Newbie

              Hi Tanya...

               

              That's a cool solution. I came up with something really different and more complex, but on the client-side (extending rich:comboBox JavaScript code), so I could display item labels as suggestions but get the related values.

               

              I needed to work with database ids corresponding to some text representation of the objects (labels), and didn't know I could do that Converter stuff. Maybe I should try it. But I guess that, as you have hard-coded your available options, I should also preload my labels and ids inside the Converter (maybe with a Map?), so I can prevent too many queries to the DB to do the conversion from labels to ids. What do you think?

               

              And here is an article I wrote with my approach. It would be great if you could tell me your point of view.

              Enhanced rich:comboBox: Values (not only Text) and RegExp Suggestions

               

              God bless you.

               

              Best regards,

              Luis Tama