In this section we will learn about the JSF 2 f:selectItems tag.
JSF 2 f selectItems Tag
In this section we will learn about the JSF 2 f:selectItems tag.
<f:selectItems> tag is used to add the UISelectItems component for the closest UIComponent. This tag is used for adding the multiple items (Collection) in the dropdown box.
Attributes of JSF 2 f:selectItems
- 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 a UISelectItems component identifier.
- value : This is not a required attribute. This attribute
evaluates the java.lang.Object using javax.el.ValueExpression. This Object
points to a Collection or Array.
- var : This is not a required attribute. This attribute is used to specify the variable name that can be used by the javax.el.ValueExpression.
- itemValue : This is not a required attribute. This attribute is used to evaluate the Collection, Map, or array that may contains the items value to show.
- itemLabel : This is not a required attribute. This
attribute is used to show the label for items to in the dropdown box. This
attribute evaluates the java.lang.String value.
- itemDescription : This is not a required attribute. This attribute is used to show the description of the item. This attribute evaluates the java.lang.String.
- itemDisabled : This is not a required attribute. This
attribute evaluates the boolean value, the true value specifies that the item is
not selectable and the false specifies the item is selectable.
Example :
Here an example is being given for you which will demonstrate about how to use the JSF 2 f:selectItems. Since the f:selectItems evaluates to a Collection, Map or array so, I have created a Java Bean class with the property fruit and its setter getter method also kept the items into a Map. This Map contains the String value for the items label and the Object is for the items value. Here a getter method for the Map is also created to get the items label and value. Then created JSF pages inputPage.xhtml for displaying the dropdown box to select the item and the outputPage.xhtml for displaying the selected item's value.
Directory Structure
JsfSelectItems.java
package devmanuals;
import java.util.Map;
import java.util.LinkedHashMap;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="selectItems")
@RequestScoped
public class JsfSelectItems {
public String fruit;
public String getFruit() {
return fruit;
}
public void setFruit(String fruit) {
this.fruit = fruit;
}
private static Map<String,Object> fruitName;
static{
fruitName = new LinkedHashMap<String,Object>();
fruitName.put("Apple", "Apple");
fruitName.put("Mango", "Mango1");
fruitName.put("Guava", "Guava");
fruitName.put("Grapes", "Grapes");
fruitName.put("PineApple", "PineApple");
}
public Map<String,Object> getFruitName() {
return fruitName;
}
}
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="#{selectItems.fruit}">
<f:selectItems value="#{selectItems.fruitName}"/>
</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 : #{selectItems.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>jsfSelectItems</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
At first start your web server then use this link http://localhost:8080/jsfSelectItems/jsfPages/inputPage.jsf in the address bar of your web browser.
Output :
When you will execute this example you will get the output as follows :
When you will select the item from the dropdown box as above and clicked on button named submit then the output will be as follows :
[ 0 ] Comments