In this article I will demonstrate JSF 1.2 Select Many Listbox with example. In case you run with any problem please drop your comment.
Tutorial – JSF 1.2 Select Many Listbox with example
Describing Example :
1. Select Many Listbox (h:selectManyListbox) in JSF allows multiple selection from a listbox or list of values. In this example we will demonstrate how to work with Select Many Listbox in JSF 1.2. We will take one example to see Select Many Listbox (h:selectManyListbox) in JSF.
2. Let us take an example suppose we are creating our user account on any Job Portal website like monster.com. In monster.com we have one field to select preferred location for working. There may be more than one location where user will prefer to work. So user should be allowed to select one or more than one value from the list box. In this case we use Select Many Listbox(h:selectManyListbox).
3. We have these files while doing this example
- selectWorkLocation.jsp
- showSelectedWorkLocations.jsp
- JSFSelectManyListboxManagedBean.java
- SelectManyListboxView.java
- faces-config.xml
- web.xml
4. Eclipse image for this project :
|
|
| Eclipse Image for Select Many Checkbox |
In this JSF-1.2 – Select Many Listbox(h:selectManyListbox) example we will show list of locations in Select Many Listbox in one page and in the next page we will display the values selected by user. This value can be one or more than one.
This is the image of Select Many Listbox. Please see the below image how Select Many Listbox looks in User Interface.
|
|
| Select Many Listbox in UI |
Please follow these procedures to do this Example :
1. Creating a dynamic web application :
In this step we have to create a dynamic web application with name “jsfSelectManyListboxExample”.
2. Create JSP Pages :
Now we have to create two JSP pages.
- selectWorkLocation.jsp – In this page we will show list of locations in Select Many Listbox JSF component. List values are “New York”, “Los Angeles”, “Chicago”, “San Francisco”, “Detroit”, “Dallas”, “Jacksonville”, “San Jose”.
- showSelectedWorkLocations.jsp – This page would be shown when user will select values in Select Many Listbox and click on “Show Selected Locations” command button. In this page we will display the locations preferred by the user.
selectWorkLocation.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 Listbox h:selectManyListbox JSF-1.2 Example</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGrid>
<h:outputText value="Your Preferred Working Location :"></h:outputText>
<h:selectManyListbox
value="#{jsfSelectManyListboxMBean.selectManyListboxView.selectedLocationsList}">
<f:selectItems value="#{jsfSelectManyListboxMBean.selectManyListboxView.workingLocationList}"/>
</h:selectManyListbox>
</h:panelGrid>
<h:commandButton value="Show Selected Locations" action="#{jsfSelectManyListboxMBean.showSelectedLocations}"></h:commandButton>
</h:form>
</f:view>
</body>
</html>showSelectedWorkLocations.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 Listbox h:selectManyListbox JSF-1.2 Example</title>
</head>
<body>
<f:view>
<h:panelGrid>
<h:outputText value="Your Preferred Working Locations : "></h:outputText>
<h:dataTable border="1"
value="#{jsfSelectManyListboxMBean.selectManyListboxView.selectedLocationsList}"
var="location">
<h:column>
<f:facet name="Location">
</f:facet>
<h:outputText value="#{location}" style="color:blue"></h:outputText>
</h:column>
</h:dataTable>
</h:panelGrid>
</f:view>
</body>
</html>Points Of Discussion About JSP’s :
Value Binding In JSF :
In the JSP pages you can see value attributes like “#{jsfSelectManyListboxMBean.selectManyListboxView.workingLocationList}”
“jsfSelectManyListboxMBean” is managed bean in this example. It is representing JSFSelectManyListboxManagedBean.java class. Please see faces-config.xml file to see manged bean configuration. We will configure this managed bean in faces-config.xml file inside .
“selectManyListboxView” is representing View Model. In this example SelectManyListboxView.java is View Model. View Model is used to get & set values of the form field attribute. “selectManyListboxView” has been declared as an instance variable in JSFSelectManyListboxManagedBean.java class.
“workingLocationList” and “selectedLocationsList” are variables which have been declared in SelectManyListboxView.java. We have get and set methods for these attributes in SelectManyListboxView.java. We can get attribute value by calling get method and we can assign value to the attribute by using set methods of corresponding attributes.
Method or Action In JSF (Page Submit) :
In selectWorkLocation.jsp you can see this action call
action=”#{jsfSelectManyListboxMBean.showSelectedLocations}”
“showSelectedLocations” is an action method has been written in JSFSelectManyListboxManagedBean.java class. When user will click on “Show Selected Locations” command button on first output screen then “showSelectedLocations” method will be invoked. Please see this method carefully. The return type of this method is String. If the process executed successfully this method will return a string “showSelectedLocations”.
“showSelectedLocations” string will be returned to faces-config.xml. When our faces-config.xml will receive “showSelectedLocations”. It will look into
tag. It will look for page need to render for outcome “showSelectedLocations”. In faces-config we are returning page showSelectedWorkLocations.jsp for outcome “showSelectedLocations”.
3. Create Managed Bean For this Example :
In JSF faces-config.xml receives all the request made by user and send it to Managed Bean for execution. So Managed Bean in JSF works as a Servlet Controller in JSF. In this example our managed bean is JSFSelectManyListboxManagedBean.java. Please see faces-config.xml file to see how can we configure managed bean in JSF framework. Please find the code for managed bean below.
JSFSelectManyListboxManagedBean.java
package com.sitenol.selectManyListbox;
public class JSFSelectManyListboxManagedBean {
private SelectManyListboxView selectManyListboxView;
public SelectManyListboxView getSelectManyListboxView() {
if(selectManyListboxView == null)
selectManyListboxView = new SelectManyListboxView();
return selectManyListboxView;
}
public void setSelectManyListboxView(SelectManyListboxView selectManyListboxView) {
this.selectManyListboxView = selectManyListboxView;
}
public String showSelectedLocations(){
return "showSelectedLocations";
}
}4. Create View Model For this Example :
Inside Managed Bean JSFSelectManyListboxManagedBean.java you can see
private SelectManyListboxView selectManyListboxView;
Please find the code for SelectManyListboxView.java
SelectManyListboxView.java
package com.sitenol.selectManyListbox;
import java.util.ArrayList;
import java.util.List;
import javax.faces.model.SelectItem;
public class SelectManyListboxView {
private List<String> selectedLocationsList;
private List<SelectItem> workingLocationList;
public List<String> getSelectedLocationsList() {
return selectedLocationsList;
}
public void setSelectedLocationsList(List<String> selectedLocationsList) {
this.selectedLocationsList = selectedLocationsList;
}
public List<SelectItem> getWorkingLocationList() {
if(workingLocationList == null || workingLocationList.size() == 0){
workingLocationList = new ArrayList<SelectItem>();
workingLocationList.add(new SelectItem("New York", "New York"));
workingLocationList.add(new SelectItem("Los Angeles", "Los Angeles"));
workingLocationList.add(new SelectItem("Chicago", "Chicago"));
workingLocationList.add(new SelectItem("San Francisco", "San Francisco"));
workingLocationList.add(new SelectItem("Detroit", "Detroit"));
workingLocationList.add(new SelectItem("Dallas", "Dallas"));
workingLocationList.add(new SelectItem("Jacksonville", "Jacksonville"));
workingLocationList.add(new SelectItem("San Jose", "San Jose"));
}
return workingLocationList;
}
public void setWorkingLocationList(List<SelectItem> workingLocationList) {
this.workingLocationList = workingLocationList;
}
}Point of Discussion about attributes in SelectManyListboxView.java:
We can see attributes “selectedLocationsList” and “workingLocationList” in SelectManyCheckboxView.java.
“selectedLocationsList” is List type. The reason behind this is we have multiple selection so we are getting the selected value in the first screen as a list. Later we are showing this value using Data Table.
Please remember in JSF accepts a list of javax.faces.model.SelectItem. So “workingLocationList” is a list of javax.faces.model.SelectItem.
5. Create faces-config.xml file :
Please see below code for the faces-config.xml file for example “Tutorial – Select Many Listbox(h:selectManyListbox) 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>jsfSelectManyListboxMBean</managed-bean-name>
<managed-bean-class>com.sitenol.selectManyListbox.JSFSelectManyListboxManagedBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/selectWorkLocation.jsp</from-view-id>
<navigation-case>
<from-outcome>showSelectedLocations</from-outcome>
<to-view-id>/showSelectedWorkLocations.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 Listbox() 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>jsfSelectManyListboxExample</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 jsfSelectManyListboxExample.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/jsfSelectManyListboxExample/selectWorkLocation.faces”.
So now we can see output of our Select Many Listbox(h:selectManyListbox) in JSF-1.2.
Out put screen will be like this
First Screen
 |
| First Output screen Select Many Listbox |
In this screen we have to options (“New York”, “Los Angeles”, “Chicago”, “San Francisco”, “Detroit”, “Dallas”, “Jacksonville”, “San Jose”.) to select. We can select more than one option as per applicable. After that we can click on “Show Selected Locations” button.
We will receive output screen like Second Screen.
Second Screen
 |
| Final Output Image showing selected values |
Second Screen is showing the value of the attributes selected in First Screen using JSF Data Table component (h:dataTable)
Need with the update code for select Many List boxes, saving till its ok but while updating how to update the select many list box could you please send that example.
Hi Anand.Sure, I will send you code.