JSF 2.0 - Ajaxification of listboxes and menus

[Christopher Sharp]

OK, so far so good, I've made quite a lot of progress with JSF 2.0, but now I'm getting to a particularly important part involving Ajax, which I'm having trouble understanding.

The code without using Ajax works, but it causes irritating page "flips" and messes up the display, and I wish to use Ajax to get rid of that.

The relevant part of the xhtml file is as follows:

h:selectOneMenu id="abundanceSet0" value="#{abundance.abunSet0}" style="height:25px; width:180px;">    <!-- a -->
  <f:selectItems value="#{abundance.abunSetMap}"/>                                                     <!-- a -->
</h:selectOneMenu>
<h:outputText value="   " escape="true"/>					
<h:commandButton value="Select Set" actionListener="#{abundance.selectSet0}"/>                         <!-- A -->
<br/><br/>
<h:outputText value="Specify the abundances of individual elements:"/>
<h:panelGrid columns="3" cellpadding="2">
  <h:selectOneListbox id="abundances0" size="10" style="width:15em" value="#{abundance.element0}" enabledClass="itemEnabled" disabledClass="itemDisabled"> <!-- c -->
    <f:selectItems value="#{abundance.items0}"/>						                                     <!-- c -->
  </h:selectOneListbox>
  <h:panelGrid columns="1" style="text-align:center;">
    <h:button value="Readme" onclick="openPopup(400,400,'htmlPopup/expAbundances')" style="width:145px;"/> <!-- B -->
    <h:inputText id="update0" size="4" value="#{abundance.updateAbun0}"/>					                 <!-- c -->
    <h:commandButton value="Update Abundance" actionListener="#{abundance.update0}" style="width:145px;"/> <!-- C -->
  </h:panelGrid>
        
  <ui:include src="abunExplain.xhtml"/> <!-- Explanetary text that is inserted -->
          
</h:panelGrid>

where I specify a menu where you can select one out of several options. Once you have decided which option you want, you click <h:commandButton> "Select Set", which fires
an action listener that then downloads from an external file the data you want, which is then used to set up a second menu. The reason why I have chosen to use a command
button once you have selected an option is because a file is downloaded, and I don't want a file to be downloaded every time you change the selection, only when you
specifically want it. <h:commandButton> comment A controls the values given by comments a, but I would like this to be done by Ajax.

Once you have downloaded data, it appears in a second menu in <h:selectOneListbox>, and you can make changes to selected values by inputting text in <h:inputText>, then
<h:commandButton> "Update Abundance" will copy the value in <h:inputText> to the selected place in <h:selectOneListbox>, i.e. <h:commandButton> comment C controls comments c.
Again I would like this to use Ajax.

Finally <h:button> "Readme", comment B, displays a popup using JavaScript, and does not have any associated code in a bean, but also causes an irritatiing page flip.

The code in my bean is as follows, where "a", "A", "c" and "C" correspond to the code in the xhtml file:

@ManagedBean(name="abundance")
@SessionScoped
public class MyAbundanceBean implements Serializable {

// private variables etc.

	/**
	 * Constructor - Initializes the input path to the folder holding the data.
	 */
	public MyAbundanceBean() {

	// Initialization code

	}


	// Various getters, setters and private methods etc.

	// a
	public String getAbunSet0() {
		return abunSet[0];
	}

	// a
	public Map<String,String> getAbunSetMap() {
		return abunSetMap;
	}

	// A
	public void selectSet0(ActionEvent e) {
		initSelectedAbundances(abunSet[0], 0);
	}
	// This calls:
	// private void initSelectedAbundances(String filename, int set) {
	//
	// }
	// which reads in data from a file and performs initialization.



	// c
	public String getElement0() {
		return element[0];
	}
	
	// c
	public void setElement0(String element) {
		this.element[0] = element;
	}

	// c
	public String getUpdateAbun0() {
		return updateAbun[0];
	}

	// c
	public void setUpdateAbun0(String updateAbun) {
		this.updateAbun[0] = updateAbun;
	}

	// C
	public void update0(ActionEvent e) {
		update(0);
	}
}

The basic question is how to "Ajaxify" the code in a suitable way. Any ideas and suggestions would be most appreciated.

[Bin Smith]

Hello Christopher!

I don't think it is good to put so long code and many questions in one post. Better understandable is to put simple question or a few easy to answer questions.
Because the long time should be spent to realize something and I stiil don't understand all your post

As I see you want to do similar to what I did a few weeks ago. As abundanceSet0 is selected corresponding list for abundances0 is constructed.
Together with Tim Holloway I did:

<h:panelGroup id="countryGroup" layout="block" class="registerGroup">
                    <h:outputLabel class="regLabel" for="registerForm:countryMenu" value="My country:"/>
                    <h:panelGroup class="fieldMessage">
                        <h:selectOneMenu id="countryMenu" value="#{registerBacking.registerUser.country}" valueChangeListener="#{registerBacking.showRegions}"
                                         title="Type your country here" style="float: left;">
                            <f:selectItem itemValue="" itemLabel="Select Country"/>  
                            <f:selectItems value="#{registerBacking.countrySelectItems}" />
                            <f:ajax execute="@this" event="blur" render="registerForm:countryMsg" />
                            <f:ajax execute="@this" event="change" render="registerForm:regionGroup" />
                        </h:selectOneMenu>
                        <h:messages id="countryMsg" for="registerForm:countryMenu" errorClass="errorMessage" infoClass="infoMessage" layout="table" style="float: left;" />
                    </h:panelGroup>
                </h:panelGroup>
                <h:panelGroup id="regionGroup" layout="block" styleClass="registerGroup #{registerBacking.isRegionGroupDisplayed ? 'show' : 'hide'}">
                    <h:outputLabel class="regLabel" for="registerForm:regionMenu" value="My region:"/>
                    <h:panelGroup class="fieldMessage">
                        <h:selectOneMenu id="regionMenu" immediate="true" value="#{registerBacking.registerUser.region}" title="Type your region here" style="float: left;">
                            <f:selectItem itemValue="" itemLabel="Select Region"/>
                            <f:selectItems value="#{registerBacking.regionSelectItems}" />
                            <f:ajax execute="@this" event="blur" render="registerForm:regionMsg" />
                            <f:ajax execute="@this" event="change" render="registerForm:regionMsg" />
                        </h:selectOneMenu>
                        <h:messages id="regionMsg" for="registerForm:regionMenu" errorClass="errorMessage" infoClass="infoMessage" layout="table" style="float: left;" /> 
                    </h:panelGroup>
                </h:panelGroup>

In backing bean I have:

    private static SelectItem[] countrySelectItems = null;

    public static SelectItem[] getCountrySelectItems() {
        if (countrySelectItems == null) {
            //code to get list of all countries from database
            countrySelectItems = getSelectItems(cnames, false);
            return countrySelectItems;
        }
        return countrySelectItems;
    }
    private static SelectItem[] regionSelectItems = null;

    public static SelectItem[] getRegionSelectItems(User user) {
        if (regionSelectItems == null) {
            if (user.getCountry() != null && !user.getCountry().isEmpty()) {
              // code to get appropriate regions according to country from database
                regionSelectItems = getSelectItems(rnames, false);
            } else {
                //if user selects no country:
                return null;
            }
        }
        return regionSelectItems;
    }

    public static void showRegions() {
        //Forces to update regions based on new country
        regionSelectItems = null;
    }

When value of first selectonemenu 'countryGroup' changes this is working
<f:ajax execute="@this" event="change" render="registerForm:regionGroup" />
And this causes to work this
valueChangeListener="#{registerBacking.showRegions}"
After registerBacking.showRegions f:ajax renders registerForm:regionGroup which causes method getRegionSelectItems to look in database for new regions based on new country
Follow this approach. Probably it is what you need!

[Christopher Sharp]

Hello Volodymyr,

Many thanks indeed for your detailed reply, and I'm sure it will be very helpful, particularly as you gave me an example which is similar to my problem. I agree with you that I put in too much information at once, which may have caused some confusion, and should have asked a question about one specific problem at a time.

Basically, I wanted to get the application working without Ajax in the first instance, then put in Ajax to make it work much better. The original version of my code can be found by going first to:

http://phoenix.ens-lyon.fr/simulator/

then clicking "MODEL SPECTRA", then clicking "Continue" on the lower left. Most of this was originally written using JavaScript before I knew what server-side code to use, then later decided to use JSF 1.2. Because I already had a lot of JavaScript, I just "bolted in" JSF 1.2 using some additional buttons and hidden fields. Now I am completely rewriting this using JSF 2.0 and want to use as little JavaScript as possible.

I am also seriously thinking of using PrimeFaces, and have played around with some simple tests, but first I need to get some experience with Ajax.