In this tutorial you will learn about the JSF 2 f:selectItem tag.
JSF 2 selectItem Tag
In this tutorial you will learn about the JSF 2 f:selectItem tag.
This tag is used for adding a child UISelectItem component for the UIComponent which is closely linked with the parent UIComponent custom action.
- binding : This is not a required attribute. This attribute is used to bound the backing bean property to the component instance.
- id : This is not a required attribute. This attribute is used as an identifier of UISelectItem component.
- itemDescription : This attribute is not a required attribute. This attribute is used to give the description of the option.
- itemDisabled : This is not a required attribute. Expression
of this attribute is evaluated a boolean value. The boolean value 'true'
specifies that the created option will disabled. Default value of this attribute
is 'flase'.
- itemLabel : This is not a required attribute. This attribute is used to show the label of the corresponding option.
- escape : This attribute is not a required attribute.
Expression of this attribute is evaluated boolean value. The boolean value
'true' specifies that the sensitive characters of the attribute itemLabel value
must be escaped. Default value of this attribute is 'true'.
- itemValue : This is not a required attribute. This attribute is used to set the value of the option and if the option is selected then the selected option value is sent to the server.
- value : This is not a required attribute. This attribute is used to bind the value of the SelectItem instance that keeps this option information.
- noSelectionOption : This is not a required attribute. This attribute is evaluated by the boolean expression. 'true' value of this attribute specifies that the option created by this component is 'no selection' option. Default value of this attribute is 'false'.
Example :
A simple example given below demonstrate you about how to use the JSF 2 f selectItem tag. In this example I have created a simple Java Bean class to set the value through user and get it when a form is submitted. Then created JSF pages. In the inputPage.xhtml I have used the multiple <f:selectItem> tag to assign the multiple options in the list box. And in the outputPage.xhtml page I have used the <h:outputText> to show the output of the selected option form the dropdown list box. At then changed the welcome-file-list of auto generated web.xml file as <welcome-file>jsfPages/inputPage.xhtml</welcome-file>.
Directory Structure
JsfSelectItem.java
package devmanuals;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="selectItem")
@RequestScoped
public class JsfSelectItem {
public String fruit;
public String getFruit() {
return fruit;
}
public void setFruit(String fruit) {
this.fruit = fruit;
}
}
inputPage.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>JSF selectItem Tag</title>
</head>
<body>
<h:form>
<p>Select fruit from the given list :</p>
<h:selectOneListbox value="#{selectItem.fruit}">
<f:selectItem itemValue="Apple" itemLabel="Apple" />
<f:selectItem itemValue="Mango" itemLabel="Mango" />
<f:selectItem itemValue="Grapes" itemLabel="Grapes" />
<f:selectItem itemValue="Guava" itemLabel="Guava" />
</h:selectOneListbox>
<br/><br/>
<h:commandButton value="submit" action="outputPage" />
</h:form>
</body>
</html>
outputPage.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title></title>
</head>
<body>
<f:view>
<h:outputText value="You have selected : #{selectItem.fruit}" />
</f:view>
</body>
</html>
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_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsfSelectItem</display-name> <welcome-file-list> <welcome-file>jsfPages/inputPage.xhtml</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> <url-pattern>*.jsf</url-pattern> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <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> <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name> <param-value>resources.application</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> </web-app>
How to Run
Use this URL http://localhost:8080/jsfSelectItem/jsfPages/inputPage.jsf in the address bar of your web browser after starting your web server.
Output :
When you will execute this example then the output will be as follows :
And when you will select the option form the dropdown list and click on the button named submit then the output will be as follows :
[ 0 ] Comments