JSF 2 SelectOneMenu Example

JavaServer Faces (JSF 2) provides a number of user interfaces components that cover the most common requirements, one of the most important component is a <h:selectOneMenu/> component. The selectOneMenu is a component that been used for making selection. The using of selectOneMenu component can be achieved by means of using an inline selection values or by using a list of options defined in the managed bean.

Also Read:

JSF 2 Tutorials

JSF Tutorials

Introduction to JSF

1. Managed Bean

SelectOneMenuBean.java

[code lang=”java”]
package net.javabeat.jsf;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.model.SelectItem;

@ManagedBean
@SessionScoped
public class SelectOneMenuBean {

public SelectOneMenuBean(){
this.options.add(new SelectItem(1,"JSF Tutorial"));
this.options.add(new SelectItem(2,"JSF 2 Tutorial"));
this.options.add(new SelectItem(3,"JPA Tutorial"));
this.options.add(new SelectItem(4,"Maven Tutorial"));
}

private List<SelectItem> options = new ArrayList<SelectItem>();
private String selectedTutorial = "";
private String selectedLevel = "";

public List<SelectItem> getOptions() {
return options;
}

public void setOptions(List<SelectItem> options) {
this.options = options;
}

public String getSelectedTutorial() {
return selectedTutorial;
}

public void setSelectedTutorial(String selectedTutorial) {
this.selectedTutorial = selectedTutorial;
}

public String getSelectedLevel() {
return selectedLevel;
}

public void setSelectedLevel(String selectedLevel) {
this.selectedLevel = selectedLevel;
}

public String submitTraining(){
return "selectedOptions";
}

}
[/code]

2. Java Class

The provided example depends on the Tutorial type (class) for making an options. This is a third type of making a selections instead of using inline options.

Tutorial.java

[code lang=”java”]
package net.javabeat.jsf;

public class Tutorial {
private int tutorialId;
private String tutorialDescription;

public Tutorial(int id, String desc){
this.tutorialId = id;
this.tutorialDescription = desc;
}

public int getTutorialId() {
return tutorialId;
}
public void setTutorialId(int tutorialId) {
this.tutorialId = tutorialId;
}
public String getTutorialDescription() {
return tutorialDescription;
}
public void setTutorialDescription(String tutorialDescription) {
this.tutorialDescription = tutorialDescription;
}

}
[/code]

3. The Views

Next coming scenario shows you a sample view that displays the Training Tutorial and level of the training, once the trainee has submitted these selections by using Submit Training action, the JSF implementation navigation handler will direct the trainee into another view to show it the submitted values.

selectOneMenu.xhtml

[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:form>
<h1>
<h:outputText value="JavaBeat JSF 2.2 Examples" />
</h1>
<h2>
<h:outputText value="SelectOneMenu Example" />
</h2>
<br />
<h2>
<h:outputText value="JavaBeat Center Provides Training" />
</h2>
<br />
<h:outputText value="Select Training :" />
<h:selectOneMenu value="#{selectOneMenuBean.selectedTutorial}">
<f:selectItems value="#{selectOneMenuBean.options}" />
</h:selectOneMenu>
<br />
<h:outputText value="Select The Level" />
<h:selectOneMenu value="#{selectOneMenuBean.selectedLevel}">
<f:selectItem itemValue="1" itemLabel="Level A" />
<f:selectItem itemValue="2" itemLabel="Level B" />
<f:selectItem itemValue="3" itemLabel="Level C" />
</h:selectOneMenu>
<br />
<h:commandButton value="Submit Training"
action="#{selectOneMenuBean.submitTraining}">
</h:commandButton>
</h:form>
</f:view>
</html>
[/code]

selectedOptions.xhtml

4. The Deployment Descriptor

web.xml

[code lang=”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" metadata-complete="true">
<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.faces.application.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>
[/code]

5. JSF 2 SelectOneMenu Demo

The below snapshots show you the running scenario of using selectOneMenu by providing the selectOneMenu component an inline values or by using the SelectItem value binding.

[wpdm_file id=3]