In this tutorial I will demonstrate JSF 1.2 Select Many Checkbox with example.
Tutorial – JSF 1.2 Select Many CheckBox
Describing Example :
1. In this example we will demonstrate how to work with Select Many checkboxes (h:selectManyCheckbox) in JSF 1.2. This is a basic example to demonstrate using select many checkbox (h:selectManyCheckbox) in JSF.
2. Suppose we are creating our user account on any social website like facebook.com. There will be field to select our technical skills. If we know more than one technology then we would like to select more than one options. In this case we use Select Many Checkbox (h:selectManyCheckbox) in JSF.
3. We have these files while doing this example.
- selectTechnologies.jsp
- showTechnologiesSelected.jsp
- JSFSelectManyCheckboxManagedBean.java
- SelectManyCheckboxView.java
- faces-config.xml
- web.xml
4. Eclipse image for this project.
 |
| Project Hierarchy in Eclipse |
In this Select Many Checkbox(h:selectManyCheckbox) eaxmple in JSF-1.2 we will show multiple check boxes at first page. User will be able to check or select one or more than one checkboxes. In the next page we will display the selected result on the next page. Please see the image given below.
 |
| Screen showing select many checkbox in UI |
This image is showing How Select Many Checkbox(h:selectManyCheckbox) looks on UI.
Please follow these steps to do this Example :
1. Creating a dynamic web application :
In this step we have to create a dynamic web application with name “jsfSelectManyCheckboxExample”.
2. Create JSP Pages :
Now we have to create two JSP pages.
- selectTechnologies.jsp – In this page user will be shown check boxes with names “Java/J2EE”, “PHP”,”.Net”, “C-language” and “C++”.
- showTechnologiesSelected.jsp – In this page we will show the technologies selected or checked in the selectTechnologies.jsp page by user.
selectTechnologies.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Select Many Checkbox Menu (h:selectManyCheckbox) in JSF Example</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGrid>
<h:outputText value="Please Select Technologies :"></h:outputText>
<h:selectManyCheckbox
value="#{JSFSelectManyCheckboxMBean.selectManyCheckboxView.knownTechnologies}">
<f:selectItems
value="#{JSFSelectManyCheckboxMBean.selectManyCheckboxView.technologiesList}" />
</h:selectManyCheckbox>
</h:panelGrid>
<h:commandButton value="Show Technologies"
action="#{JSFSelectManyCheckboxMBean.showKnownTechnologiesList}"></h:commandButton>
</h:form>
</f:view>
</body>
</html>
showTechnologiesSelected.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Select One Menu (h:selectManyCheckbox) in JSF Example</title>
</head>
<body>
<f:view>
<h:panelGrid>
<h:outputText value="You know these technologies : "></h:outputText>
<h:outputText
value="#{JSFSelectManyCheckboxMBean.selectManyCheckboxView.technologyString}">
</h:outputText>
</h:panelGrid>
</f:view>
</body>
</html>
Points Of Discussion About JSP’s :
Value Bindings In JSP’s :
In the JSP pages you can see value attributes like “#{JSFSelectManyCheckboxMBean.selectManyCheckboxView.technologiesList}”
“JSFSelectManyCheckboxMBean” is managed bean. It is representing “JSFSelectManyCheckboxManagedBean.java” class. Please see faces-config.xml file to see how we have configure this managed bean inside tags .
“selectManyCheckboxView” is representing View Model. In this example “SelectManyCheckboxView.java” is View Model. View Model is used to get & set values of the form field attribute. “selectManyCheckboxView” has been declared as an instance variable in JSFSelectManyCheckboxManagedBean.java class. Please see JSFSelectManyCheckboxManagedBean.java class.
“knownTechnologies”, “technologiesList” and “technologyString” are variables which have been declared in SelectManyCheckboxView.java. We have get and set methods for these attributes in SelectManyCheckboxView.java. We can get attribute value by calling get method and we can assign value to the attribute by using set methods.
Method or Action In JSF (Page Submit) :
In selectTechnologies.jsp you can see this action call
action=”#{JSFSelectManyCheckboxMBean.showKnownTechnologiesList}”
“showKnownTechnologiesList” is an action method has been written in JSFSelectManyCheckboxManagedBean.java class. When user will click on “Show Technologies” command button on first output screen, “showKnownTechnologiesList” method will be executed. Please see this method carefully. The return type of this method is String. If the process executed successfully this method will return a string “showTechnologies”.
“showTechnologies” string will be returned to faces-config.xml. When our faces-config.xml will receive “showTechnologies”. It will look into
tag. For outcome “showTechnologies” we have configured our faces-config.xml to render page showTechnologiesSelected.jsp.
3. Create Managed Bean For this Example :
In JSF faces-config.xml send every request to Managed Bean. Managed Bean works as controller. In this example our managed bean is JSFSelectManyCheckboxManagedBean.java. Please see faces-config.xml file to see how can we configure managed bean in JSF framework tags .
Please find the code for managed bean below.
JSFSelectManyCheckboxManagedBean.java
package com.sitenol.selectManyCheckbox;
public class JSFSelectManyCheckboxManagedBean {
private SelectManyCheckboxView selectManyCheckboxView;
public SelectManyCheckboxView getSelectManyCheckboxView() {
if(selectManyCheckboxView == null)
selectManyCheckboxView = new SelectManyCheckboxView();
return selectManyCheckboxView;
}
public void setSelectManyCheckboxView(
SelectManyCheckboxView selectManyCheckboxView) {
this.selectManyCheckboxView = selectManyCheckboxView;
}
public String showKnownTechnologiesList(){
String [] knownTechnologiesArray = this.getSelectManyCheckboxView().getKnownTechnologies();
StringBuffer displayTechnology = new StringBuffer();
int size = knownTechnologiesArray.length;
if(knownTechnologiesArray != null && size > 0){
for(int i=0; i<= size; i++){
if(i <= knownTechnologiesArray.length-1){
displayTechnology.append(knownTechnologiesArray[i]).append(i == (knownTechnologiesArray.length-1) ? "." :", ");
}
}
}else{
displayTechnology.append("You have not Selected any Technologies.");
}
this.selectManyCheckboxView.setTechnologyString(displayTechnology.toString());
return "showTechnologies";
}
}
4. Create View Model For this Example :
Inside Managed Bean JSFSelectManyCheckboxManagedBean.java you can see
private SelectManyCheckboxView selectManyCheckboxView;
Please find the code for SelectManyCheckboxView.java
SelectManyCheckboxView.java
package com.sitenol.selectManyCheckbox;
import java.util.ArrayList;
import java.util.List;
import javax.faces.model.SelectItem;
public class SelectManyCheckboxView {
private String [] knownTechnologies;
private List<SelectItem> technologiesList;
private String technologyString;
public String[] getKnownTechnologies() {
return knownTechnologies;
}
public void setKnownTechnologies(String[] knownTechnologies) {
this.knownTechnologies = knownTechnologies;
}
public List<SelectItem> getTechnologiesList() {
if(technologiesList == null || technologiesList.size() == 0){
technologiesList = new ArrayList<SelectItem>();
technologiesList.add(new SelectItem("Java/J2EE", "Java/J2EE"));
technologiesList.add(new SelectItem("PHP", "PHP"));
technologiesList.add(new SelectItem(".Net", ".Net"));
technologiesList.add(new SelectItem("C-language", "C-language"));
technologiesList.add(new SelectItem("C++", "C++"));
}
return technologiesList;
}
public void setTechnologiesList(List<SelectItem> technologiesList) {
this.technologiesList = technologiesList;
}
public String getTechnologyString() {
if(technologyString == null)
technologyString = new String();
return technologyString;
}
public void setTechnologyString(String technologyString) {
this.technologyString = technologyString;
}
}
Point of Discussion about attributes in SelectManyCheckboxView.java:
We can see three attributes “knownTechnologies”, “technologiesList” and “technologyString” in
SelectManyCheckboxView.java.
“knownTechnologies” is an String [ ] type. The reason behind this is we have multiple selection option so we are getting the selected value in the first screen as an array. Later we are iterating knownTechnologies array in “public String showKnownTechnologiesList()” method.
accepts a list of javax.faces.model.SelectItem. So “technologiesList” is a list of javax.faces.model.SelectItem.
“technologyString” is a simple String type. Please see “public String showKnownTechnologiesList()” method in JSFSelectManyCheckboxManagedBean.java.
In this method you can see that we are iterating variable “knownTechnologiesArray” to create “technologyString”. We are displaying the technologies selected in String format. “knownTechnologiesArray” is the value of attribute “knownTechnologies”.
5. Create faces-config.xml file :
Please see below code for the faces-config.xml file for example – Tutorial – Select Many Check Boxes() in JSF-1.2.
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>JSFSelectManyCheckboxMBean</managed-bean-name>
<managed-bean-class>com.sitenol.selectManyCheckbox.JSFSelectManyCheckboxManagedBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/selectTechnologies.jsp</from-view-id>
<navigation-case>
<from-outcome>showTechnologies</from-outcome>
<to-view-id>/showTechnologiesSelected.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
6. Create web.xml file :
Please find the web.xml file code for example “Tutorial – Select Many Check Boxes() in JSF-1.2”.
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>jsfSelectManyCheckboxExample</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<description>
This parameter tells MyFaces if javascript code should be allowed in
the rendered HTML output.
If javascript is allowed, command_link anchors will have javascript code
that submits the corresponding form.
If javascript is not allowed, the state saving info and nested parameters
will be added as url parameters.
Default is 'true'</description>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>
If true, rendered HTML code will be formatted, so that it is 'human-readable'
i.e. additional line separators and whitespace will be written, that do not
influence the HTML code.
Default is 'true'</description>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>
If true, a javascript function will be rendered that is able to restore the
former vertical scroll on every request. Convenient feature if you have pages
with long lists and you do not want the browser page to always jump to the top
if you trigger a link or button action that stays on the same page.
Default is 'false'
</description>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
</web-app>
7. Deploy Application and Run Server :
In this step you we have to deploy jsfSelectManyCheckboxExample.war file to server after proper deployment we have to start the server.
8. Run The Application :
After successfully war deployment. Please start the server. After that open Internet Explorer and hit this “http://localhost:8080/jsfSelectManyCheckboxExample/selectTechnologies.faces”.
So now we can see output of our Select Many Check Boxes() in JSF-1.2.
Out put screen will be like this
First Screen
 |
| Screen where user can select multiple checkboxes |
In this screen we have to options (“Java/J2EE”, “PHP”, “.Net”, “C-language”, “C++”) to check. We can select options as per applicable. After that we can click on “Show Technologies” button.
We will receive output screen like Second Screen.
Second Screen
 |
| Screen showing the selected values in the first screen |
This screen is showing the value of the attributes selected or checked in First Screen.
