JSF 2 SelectManyMenu 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:selectManyMenu/> component. The selectManyMenu is a component that been used for making multiple selection. The using of selectManyMenu component can be achieved by means of using an inline selection values or by using a list of options defined in the managed bean. This tutorial explains how to use this tag with simple example.

Also Read:

JSF 2 Tutorials

JSF Tutorials

Introduction to JSF

1. Managed Bean

SelectManyMenuBean.java

package net.javabeat.jsf;

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

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

@ManagedBean
@SessionScoped
public class SelectManyMenuBean {

	public List tutorials;
	public List selectedTuorials;

	public SelectManyMenuBean(){
		this.tutorials = new ArrayList();
		this.tutorials.add(new Tutorial(1, "JSF 2"));
		this.tutorials.add(new Tutorial(2, "JPA"));
		this.tutorials.add(new Tutorial(3, "Maven"));
	}

	public List getTutorials() {
		return tutorials;
	}

	public void setTutorials(List tutorials) {
		this.tutorials = tutorials;
	}

	public List getSelectedTuorials() {
		return selectedTuorials;
	}

	public void setSelectedTuorials(List selectedTuorials) {
		this.selectedTuorials = selectedTuorials;
	}

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

}

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 and SelectItem as you’ve seen at the SelectOneMenu example. This use is also applicable for selectOneMenu. Tutorial.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;
	}

}

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.

selectManyMenu.xhtml

<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">
	<h:form>
	<h1><h:outputText value="JavaBeat JSF 2.2 Examples" /></h1>
	<h2><h:outputText value="SelectManyMenu Example" /></h2>
	<h:selectManyMenu value="#{selectManyMenuBean.selectedTuorials}">
		<f:selectItems value="#{selectManyMenuBean.tutorials}" var="tutorial"
				itemValue="#{tutorial.tutorialId}" itemLabel="#{tutorial.tutorialDescription}">
		</f:selectItems>
	</h:selectManyMenu>
	<h:commandButton value="Submit Training" action="#{selectManyMenuBean.submitTraining}"></h:commandButton>
	</h:form>
</html>

selectedTraining.xhtml

<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>
		<h1><h:outputText value="JavaBeat JSF 2.2 Examples" /></h1>
		<h2><h:outputText value="SelectManyMenu Example" /></h2>
		<h:form>
			<h:outputText value="Selected Tutorials: "/>
			<br/>
			<ui:repeat var="tutorial" value="#{selectManyMenuBean.tutorials}">
				<h:outputText value="#{tutorial.tutorialDescription}"/>
				<br/>
			</ui:repeat>
		</h:form>
	</f:view>
</html>

4. The Deployment Descriptor (web.xml)

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" 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>

5. JSF 2 SelectManyMenu Demo

The below snapshots that you would be seeing provide you a running sample of using SelectManyMenu.

[wpdm_file id=5]

1. Managed Bean

2. Java Class

3. The Views

4. The Deployment Descriptor (web.xml)

5. JSF 2 SelectManyMenu Demo

About Amr Mohammed