[wp_ad_camp_5]

This post shows sample codes that uses JSF html:selectManyCheckbox that allows users to select one or more items before submitting the form or page.

Requirements

Stuff used in this post.

JSF 2.2
- javax.faces-2.2.8.jar
JDK 8

JSF Managed Bean

This is our managed bean is a Java class annotated with @ManagedBean. The 3 important piece of codes here are:

@ManagedBean
Default public no-arg constructor
Setter and getter methods

For this post, our class has only one property – a list of strings.

[wp_ad_camp_4]

package com.turreta.jsf.bean;

import java.util.List;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class MyBean {
	
	public MyBean() {}

	private List<String> manyLetters;

	public List<String> getManyLetters() {
		return manyLetters;
	}

	public void setManyLetters(List<String> manyLetters) {
		this.manyLetters = manyLetters;
	}
}

package com.turreta.jsf.bean;

import java.util.List;

import javax.faces.bean.ManagedBean;

@ManagedBean

public class MyBean {

public MyBean() {}

private List<String> manyLetters;

public List<String> getManyLetters() {

return manyLetters;

}

public void setManyLetters(List<String> manyLetters) {

this.manyLetters = manyLetters;

}

First Page – Request

The first page is where the checkboxes are displayed. Users selects one or more items and hits the Submit button to go to the response page.

[wp_ad_camp_3]

<!DOCTYPE html>
<html lang="en"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core">
	
	<h:head>
		<title>Please select one or more letters</title>
	</h:head>
	<h:body>
		<h:form>
			<h:selectManyCheckbox value="#{myBean.manyLetters}">
				<f:selectItem itemValue="a" itemLabel="A"/>
				<f:selectItem itemValue="b" itemLabel="B"/>
				<f:selectItem itemValue="c" itemLabel="C"/>				
			</h:selectManyCheckbox>
			<h:commandButton value="Submit" action="response"/>
		</h:form>
	</h:body>
</html>

<!DOCTYPE html>

<html lang="en"

xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

<title>Please select one or more letters</title>

</h:head>

<h:body>

<h:form>

<h:selectManyCheckbox value="#{myBean.manyLetters}">

<f:selectItem itemValue="a" itemLabel="A"/>

<f:selectItem itemValue="b" itemLabel="B"/>

<f:selectItem itemValue="c" itemLabel="C"/>

</h:selectManyCheckbox>

<h:commandButton value="Submit" action="response"/>

</h:form>

</h:body>

</html>

Second Page – Response

This page displays the selected letters from the first page.

[wp_ad_camp_2]

<!DOCTYPE html>
<html lang="en"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
	<h:head>
		<title>Please select one or more letters - Response</title>
	</h:head>
	<h:body>
		Your letters are <br/>
		<ui:repeat value="#{myBean.manyLetters}" var="letter" >
			#{letter}<br/>
		</ui:repeat>
	</h:body>
</html>