Working with interdependent listboxes: A tutorial.

Question

Working with interdependent listboxes in Creator.
I have an application with several listboxes that are interdepoendant of one another. That is to say, that when one entry gets selected, the value on one or more other listboxes gets updated.
When I first coded up a solution for this, I was having trouble with some errors thrown internally to the components. After a lot of digging and with the help of Sun, I was able to cure this problem, so I am writing up this brief tutorial to help others do something similar.
Let me tart of with what the application looks like:
The GUI
In this application we have three listboxes and some 2D and 3D images that get loaded based on the values selected in those listboxes.
When the first listbox is changed, then the second and third listboxes automatically get changed based on the value selected in the first. In other words, the value selected in listbox1 will be retrieved and then that value will be used to retrieve data (in my case from a database) to be used in populating the second and third listboxes.
Let�s also say that we want to automatically select the listbox entry if only one item exists.
What Creator Does Today
In Creator 1, when you drop a listbox on a page a defaultListboxItems list gets created for you in the backing page bean. This is what you would normally expect to add items to fill your listbox.
Of course, this data gets reset for every refresh of that page. In our case, when we select an item on on of the listboxes the page will be refreshed (Submitted). Because of this, you might place a list in the session bean and retrieve it in the page bean�s constructor (which of course gets called for each page refresh) and use that list to rebuild your defaultListboxItems list.
That however, as I found out, is probably not the best way to do it.
The �Right� Way
As mentioned above, we need a way to keep the values of the listboxes saved off in between page refreshes.
The way to do this is to place that into the session bean and only there. In other words, you will not be using the defaultListboxItem list that Creator set up for you inside the page bean. Instead, you will create your own which will look something like this (again, this code will go inside of the session bean):
    private DefaultSelectItemsArray defaultListbox1Items = new DefaultSelectItemsArray();
    private DefaultSelectItemsArray defaultListbox2Items = new DefaultSelectItemsArray();
    private DefaultSelectItemsArray defaultListbox3Items = new DefaultSelectItemsArray();You will also want to create lists that hold the raw data like this:
private List listbox1;
private List listbox2;
private List listbox3;In addition, you want to save the currently selected index so:
private String list1SelectedIndex;
private String list2SelectedIndex;
private String list3SelectedIndex;You will then use the �setters� to these lists to fill your default items doing any conversion you need to perform. For example:
public void setList1(List list1)
        //Build the defaultPatientListboxItems entries
        defaultListbox1tems.clear();
        Iterator listIterator = list1.iterator();
        while (list1Iterator.hasNext())
            String entry = (String)list1Iterator.next();
            SelectItem selectItem = new SelectItem(entry, entry);
            defaultListbox1Items.add(selectItem);
        this.list1 = list1;
    }Now to let JSF know that you are using the session bean to hold your data rather than the default list that Creator built, we will need to go in and modify the JSP (note that I think this step is being included in Creator 2�s IDE as something you will no longer have to code by hand).
Here is example of how that will look:
<h:selectOneListbox binding="#{PageName.listbox1}" id="listbox1" immediate="true" onchange="this.form.submit();"
                                size="5" style="height: 184px; width: 234px" styleClass="centeredPageStyle" value="#{SessionBean1.listbox1SelectedIndex}" valueChangeListener="#{PageName.listbox1_processValueChange}">
                                <f:selectItems binding="#{PageName.listbox1SelectItems}" id="listbox1SelectItems" value="#{SessionBean1.defaultListbox1Items}"/> Note in particular the value = SessionBean1.listbox1SelectedIndex and the value = SessionBean1.defaultListbox1Items.
The first one is saying what the current selected entry is and the other is saying that the list that backs the listbox is called.
Remember when I said that we wanted to autoselect an entry if only one entry existed inside of the listbox? Well, that is why we set the value = SessinBean1.listbox1SelectedIndex. Along with this, we need to modify a �getter� in our session bean to look something like this:
public String getListbox1SelectedIndex()
        if(list1 != null && list1.size() == 1)
     //DO ANY CONVERSION NEEDED HERE
//IN OTHER WORDS, IF YOUR LIST DOES NOT
//HOLD STRINGS, THEN READ THEN OBJECT
//FROM THE LIST AND GET THE STRING VALUE
//FROM THAT OBJECT YOU USED TO ENTER
//INTO THE LISTBOX
            ImageSet imageset = (ImageSet)list1.get(0);
            return imageset.getSetName();
        return this.list1SelectedIndex;
    }Now we have all of the data we need stored off, all we need to do is make sure that when the page bean�s constructor gets called, we �prime� the pump to make sure everything gets auto-selected.
We can do that with something like this (placed inside of the page bean�s constructor):
List listbox1List = sessionBean1.getPatientList();
if (listbox1List != null && listbox1List.size() == 1)
               String listbox1Value = (String)listbox1List.get(0);
               sessionBean1.setListbox1SelectedIndex(listbox1Value);  //This does it
               processListbox1Change();  //Do whatever you need to do in this case here
}Well, that's all there is to it. Hope this helps!

Answer 1

Hi Darrin,
This is fantastic!!!
A sample application by name "CoordinatedDropdowns" is also available. I am sure the sample application and your tutorial will be of great help to many Creator users.
Cheers
Giri