4 Replies Latest reply on Jun 21, 2006 5:14 PM by David Bernard

    Newbie: Dynamic form fields

    Sean Blaes Newbie

      Hello all,

      I'm just learning Seam, and I must say I'm impressed and it looks very promising. I do have one question though, for an app I'm building right now. I need to provide similar functionality to the configuration screens on Dell.com when you configure a new computer. What I really need to do is to store the items that need to be configured, along with all the options, in the database, so that the items that can be configured, along with their options, can be changed at runtime.

      So, for instance, the configurable items might include the memory for a PC, then I need to store the options available. When found, that would cause a selection box to be rendered with the available memory configurations. Then, at runtime, we might want to add a new item to be configured of perhaps a name to be inscribed on a computer. The next time the options form renders, it would then need to render with a text box so that the user could enter this information.

      So, the trick is that it seems that the seam and JSF components must be coded into the JSP page. Then, for the backing session bean, you must declare an annotation for the component in order to inject its value into the bean. Since the fields will be determined dynamically at runtime, however, I don't think that will work for me. So, my question is, what would be the most graceful way to insert these dynamic form fields?

        • 1. Re: Newbie: Dynamic form fields
          Gavin King Master

          I'm not quite sure what you're trying to say. Perhaps code would be helpful.

          Does ui:repeat solve your problem?

          • 2. Re: Newbie: Dynamic form fields
            Sean Blaes Newbie

            ui:repeat might do the trick, I'm going to play with that this weekend to see if I can get it to do what I need. Let me see if I can take another hack at an explanation though...

            I'm sure we've all been on the Dell site and configured a computer. That's basically the UI I'm after. But, the main issue is that the options can't be hardcoded into the JSP page, because at coding time, I don't know what they are. So, in the database I'll store the available configurations and their options. So, for example, a configuration for a PC might be memory. The available options for that configuration might be 1 gig, 2 gig, etc. So, in my database, I'd have a configuration table like the following:

            table configuration
            field configuration_id int
            field name varchar(24)
            field type int

            id is an incrementing primary key, name is a name for the configuration, type would identify the type of ui element to show such as a select box, text box, radio buttons, etc.

            Then, I would have an options table that would look something like the following:

            table configuration_option
            field option_id int
            field configuration_id int
            field value

            option_id is the incrementing primary key, configuration_id is a foreign key to the first table, and value is the value to display.

            So, to render the form, I believe I could use ui:repeat to actually render the select boxes, text boxes, etc. while iterating over this info, looking at the type for the actual element to render. However, the thing I'm not sure about is then how to handle the data entered. Most of the examples I'm seeing for Seam have fairly fixed forms and fields in the JSP page. So they're able to use the cool annotation support to have the value from those fields injected directly into the session bean that is also the form bean. But, I'm not sure if I can take advantage of that in this situation. I'm hoping I can, but I'm just missing something, but if not, I'm having some trouble figuring out where to look to actually pull that info in another way from the form. I'm also not finding any examples of using ui:repeat for anything other than just text and image output, and links. For instance, I don't see any ui elements such as select boxes or text boxes nested inside ui:repeat, but maybe I'm just not looking in the right place. If you know of somewhere I can find some examples of something like this, let me know.

            Thanks for any help, and sorry for being a newbie... :) It's funny, I've been evangelizing Seam for about a couple of months, but I'm just now getting around to using it.

            • 3. Re: Newbie: Dynamic form fields
              Gavin King Master

              I have never used the Dell site, but yes, that is what you use ui:repeat or h:dataTable for.

              • 4. Re: Newbie: Dynamic form fields
                David Bernard Newbie

                If you use combobox or list of radio, you could simply declare <f:selectItems> tag with value get from Bean :

                <f:selectOneRadio id="sector" value="#{contractSelector.sector}" layout="pageDirection">
                 <f:selectItems value="#{sectorList.items}"/>
                </f:selectOneRadio>
                


                @SuppressWarnings("serial")
                @Stateless
                @Name("sectorList")
                public class SectorList implements ItemList, Serializable{
                
                 @PersistenceContext
                 public EntityManager em;
                
                 @SuppressWarnings("unchecked")
                 public List<SelectItem> getItems() throws Exception {
                 List l = em.createQuery("from Sector item order by item.name asc").getResultList();
                 List<SelectItem> back = new ArrayList<SelectItem>(l.size());
                 Iterator<Sector> it = l.iterator();
                 while (it.hasNext()) {
                 Sector item = it.next();
                 back.add(new SelectItem(item.getId(), item.getName()));
                 }
                 return back;
                 }
                
                 //@Destroy
                 //@Remove
                 public void destroy() throws Exception {
                 }
                }