Home → JSF

JSF 1.2 Select One Listbox (h:selectOneListbox)

|In: JSF|Last Updated:
Like Tweet Pin it Share Share Email

Tutorial JSF (1.2) – Learn Select One Listbox with example

Describing Example :
1. selectOneListbox in JSF allows single selection from a listbox or list of values. In this example we will demonstrate how to work with Select One Listbox in JSF 1.2. We will take one example to see Select One Listbox (h:selectOneListbox) in JSF.

2. Let us take an example suppose we are creating our user account on any Job Portal website like monster.com. There will be any field to select our the highest qualification. It means there will be more than one qualification list but user should be allowed to select one value from the list box. In this case JSF UI component – Select One Listbox h:selectOneListbox will be used.

3. We have these files while doing this example

  1.  qualificationForm.jsp
  2. showQualificationSelected.jsp
  3. JSFSelectOneListboxManagedBean.java
  4. SelectOneListboxView.javas
  5. faces-config.xml
  6. web.xml

4. Eclipse image for this project.

This example is showing the eclipse image of project

Simply in this Select One Listbox() in JSF-1.2 example we will show JSF- Select One Listbox in one page and in the next page we will display the value selected by user.
Please see the image of Select One Listbox on UI.

This image is showing how select one listbox looks on 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 “jsfSelectOneListboxExample”.

2. Create JSP Pages :
Now we have to create two JSP pages

  1.  qualificationForm.jsp – In this page we will show Select One List Box with values “B.Tech.”, “M.Tech.”, “PHD” and “Other”. User will be allowed to select one value of them.
  2. showQualificationSelected.jsp – In this page we will show the qualification values selected in the previous page.

qualificationForm.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 Listbox h:selectOneListbox JSF-1.2 Example</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGrid>
<h:outputText value="Please Select Your Qualification :"></h:outputText>
<h:selectOneListbox
value="#{jsfSelectOneListboxMBean.selectOneListboxView.qualificationSelected}">
<f:selectItems value="#{jsfSelectOneListboxMBean.selectOneListboxView.qualificationList}"/>
</h:selectOneListbox>
</h:panelGrid>
<h:commandButton value="Show Qualification" action="#{jsfSelectOneListboxMBean.showHighestQualification}"></h:commandButton>
</h:form>
</f:view>
</body>
</html>

showQualificationSelected.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 Listbox - h:selectOneListbox - JSF-1.2 Example</title>
</head>
<body>
<f:view>
<h:panelGrid columns="2" cellpadding="1" cellspacing="1">
<h:outputText value="Your Qualification is : "></h:outputText>
<h:outputText style="color:red;"
value="#{jsfSelectOneListboxMBean.selectOneListboxView.qualificationSelected}">
</h:outputText>
</h:panelGrid>
</f:view>
</body>
</html>

Points Of Discussion About JSP’s :

Value Binding In JSF :
In the JSP pages you can see value expressions like “#{jsfSelectOneListboxMBean.selectOneListboxView.qualificationList}”

“jsfSelectOneListboxMBean” is used for managed bean for this example.  It is representing  JSFSelectOneListboxManagedBean.java class. Please see faces-config.xml file to see this configuration. We will configure this managed bean in faces-config.xml file inside .

“selectOneListboxView” is representing View Model. In this example SelectOneListboxView.java is View Model. View Model is used to get & set values of the form field attribute. “selectOneListboxView” has been declared as an instance variable in  JSFSelectOneListboxManagedBean.java class. Please see  JSFSelectOneListboxManagedBean.java class.

“qualificationList” and “qualificationSelected” are variables which have been declared in SelectOneListboxView.java. We have get and set methods for these attributes in SelectOneListboxView.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 qualificationForm.jsp you can see this action  call
action=”#{jsfSelectOneListboxMBean.showHighestQualification}”

“showHighestQualification” is an action method has been written in  JSFSelectOneListboxManagedBean.java class. When user will click on “Show Qualification” command button on first output screen, “showHighestQualification” 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   showQualificationSelected.jsp.

3. Create Managed Bean For this Example :

In JSF, Managed Bean works as controller. In this example our managed bean is  JSFSelectOneListboxManagedBean.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.

JSFSelectOneListboxManagedBean.java

package com.sitenol.selectOneListbox;
public class JSFSelectOneListboxManagedBean {
private SelectOneListboxView selectOneListboxView;
public SelectOneListboxView getSelectOneListboxView() {
if(selectOneListboxView == null)
selectOneListboxView = new SelectOneListboxView();
return selectOneListboxView;
}
public void setSelectOneListboxView(SelectOneListboxView selectOneListboxView) {
this.selectOneListboxView = selectOneListboxView;
}
public String showHighestQualification(){
return "showQualification";
}
}

4. Create View Model For this Example :
Inside Managed Bean JSFSelectOneListboxManagedBean.java you can see
private SelectOneListboxView selectOneListboxView;

SelectOneListboxView.java

package com.sitenol.selectOneListbox;
import java.util.ArrayList;
import java.util.List;
import javax.faces.model.SelectItem;
public class SelectOneListboxView {
private String qualificationSelected;
private List<SelectItem> qualificationList;
public String getQualificationSelected() {
return qualificationSelected;
}
public void setQualificationSelected(String qualificationSelected) {
this.qualificationSelected = qualificationSelected;
}
public List<SelectItem> getQualificationList() {
if(qualificationList == null || qualificationList.size() == 0){
qualificationList = new ArrayList<SelectItem>();
qualificationList.add(new SelectItem("B.Tech.", "B.Tech."));
qualificationList.add(new SelectItem("M.Tech.", "M.Tech."));
qualificationList.add(new SelectItem("PHD", "PHD"));
qualificationList.add(new SelectItem("Other", "Other"));
}
return qualificationList;
}
public void setQualificationList(List<SelectItem> qualificationList) {
this.qualificationList = qualificationList;
}
}

5. Create faces-config.xml file :
Please see below code for the faces-config.xml file for example “Tutorial – Select One Listbox() 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>jsfSelectOneListboxMBean</managed-bean-name>
<managed-bean-class>com.sitenol.selectOneListbox.JSFSelectOneListboxManagedBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/qualificationForm.jsp</from-view-id>
<navigation-case>
<from-outcome>showQualification</from-outcome>
<to-view-id>/showQualificationSelected.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 One 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>jsfSelectOneListboxExample</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 jsfSelectOneListboxExample.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/jsfSelectOneListboxExample/qualificationForm.faces”.
So now we can see output of our Select One Listbox() in JSF-1.2.
Out put screen will be like this.
First Screen

This image is showing the first output screen

In this screen we have options (“B.Tech.”, “M.Tech.”, “PHD” and “Other”) for selection. We can select only one value from list.  After that we can click on “showHighestQualification” button.
We will get output screen like Second Screen.
Second Screen

this image is showing the final output screen

This screen is showing the qualification value selected on First Screen.

h:selectOneListbox - Select One Listbox (h:selectOneListbox) in JSF-1.2 jsf JSF examples

Recommended Posts for You

Comments (3)

  • I tried this example, But listbox is showing empty. It could not take any value .

    Reply

    • Hello Shubhangi, Please check if you have missed SelectOneListboxView.java file of this example. I have created getQualificationList() list inside SelectOneListboxView.java. Even though it is not working for you, I will send example code to your email id. Each and every example available on this website have been executed.

      Reply

  • I think you need to delete nborejpct/ folder and build.xml file and create new web application with existing sources. (to be on the save side, delete the stuff with the IDE not running)BTW in Maven it would mean changing packaging from “jar” to “war” for the most part.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *