Friday, September 17, 2010

Preselection in SelectManyCheckBox



Guys today I want to share something very simple but yet will haunt your precious time while you deal with it. While implementing <h:selectManyCheckBox> ,i found that the selected values are easily available in the managed bean specifically in a list variable. But it was weird when I say the component was not loaded with previously selected values. This session basically aims at loading the above component with pre selected values as I have achieved success in resolving it.

Prerequisites:

1) richfaces-api-3.3.0.GA

2) richfaces-impl-3.3.0.GA

3) richfaces-ui-3.3.0.GA

4) Following taglibs should be included at the top of the page to get ajax and richfaces support.


<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>


JSF Page:



<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:subview id="manyCheck">
<h:form>
<h:selectManyCheckbox id="contact" value="#{echoBean.contact}">
<f:selectItem itemLabel="All" itemValue="All" />
<f:selectItem itemLabel="Phone" itemValue="Phone" />
<f:selectItem itemLabel="Mob" itemValue="Mob" />
<f:selectItem itemLabel="Email" itemValue="Email" />
<f:selectItem itemLabel="Fax" itemValue="Fax" />
<a4j:support event="onchange" action="#{echoBean.saveManyCheckBox}" reRender="as"/>
</h:selectManyCheckbox>
</h:form>
</f:subview>
<f:subview id="manyCheck1">
<a4j:form id="as">
<h:selectManyCheckbox id="contact1" value="#{echoBean.resultList}" rendered="#!{echoBean.resultList}">
<f:selectItem itemLabel="All" itemValue="All" />
<f:selectItem itemLabel="Phone" itemValue="Phone" />
<f:selectItem itemLabel="Mob" itemValue="Mob" />
<f:selectItem itemLabel="Email" itemValue="Email" />
<f:selectItem itemLabel="Fax" itemValue="Fax" />
</h:selectManyCheckbox>
</a4j:form>
</f:subview>




Explanation:

The above jsf code has got two selectManyCheckBox component. First one will accept the user input and the second one will display the user selection using AJAX tag i.e <a4j:support>. On change of the first component saveManyCheckBox() method will be invoked.

The value of the list is interchanged with another list i.e resultList which is responsible for populating the subsequent component.
Instead of <h:form>, I have used <a4j:form> so as to render the portion of the page through AJAX.


Managed Bean:(EchoBean.java)



private List contact;

private List resultList;

// Setters & Getters to be created

public void saveManyCheckBox() {

System.out.println("In saveManyCheck");
System.out.println("Before List Values:" + contact);
String str = this.list2String(this.contact);
System.out.println("STR Values:" + str);
resultList = this.string2List(str);
System.out.println("ResultList Values:" + resultList);

}


public List string2List(String str) {
List list = new ArrayList();
String str1 = str.replaceAll("[\\]\\[]", "");
StringTokenizer tokens = new StringTokenizer(str1, ",");
int i = 0;
while (tokens.hasMoreTokens()) {
String f = tokens.nextToken();
list.add(f.trim());
i++;
}
return list;
}

public String list2String(List list) {
String str = null;
str = list.toString();
return str;
}



Explanation:

The saveManyCheckBox() accepts the inputed value from contact(List) and then transforms it to String in the list2String().

The second method i.e string2List() is responsible for chopping the string “[x,y,z]” into segregated values called as tokens like x y z and then adding it to the resultList(List). This resultList is responsible for displaying the user selected values instantly.

Before making the above example work properly you have to make some configuration changes for your deployment descriptor(WEB.XML) for AJAX and Rich Faces.
I hope you can figure that out.

3 comments: