JSF 2 SelectManyCheckbox Example

The selectManyCheckBox component is one of the major components that provided by JSF 1 and included in the JSF 2 with some extra flavors. The selectManyCheckbox simply renders a set of checkboxs and corresponding representation of each individual checkbox in the selectManyCheckbox component by means of HTML is <input type=”checkbox”/>. The main attribute of that component is a value that could be associated (binded) with a list of object as you would bee seeing in the next coming while.

JSF 2 provides additional attributes for selectManyCheckbox, those added attributes are mainly related to the styles and the way that the data is displayed within it; enabledClass, disabledClass, selectedClass, unSelectedClass, hideNoSelectionOption and collectionType are the main newly attributes that added since JSF 2 has took place.

Also Read:

1. Managed Bean

SelectManyCheckboxBean.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 SelectManyCheckboxBean {

	private List<Tutorial> tutorials = new ArrayList<Tutorial>();

	private List<String> selectedTutorials = new ArrayList<String>();

	public SelectManyCheckboxBean() {
		this.tutorials.add(new Tutorial(1,"JSF 2"));
		this.tutorials.add(new Tutorial(2,"EclipseLink"));
		this.tutorials.add(new Tutorial(3,"HTML 5"));
		this.tutorials.add(new Tutorial(4,"Spring"));
	}

	public String register() {
		return "register";
	}

	public List<Tutorial> getTutorials() {
		return tutorials;
	}

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

	public List<String> getSelectedTutorials() {
		return selectedTutorials;
	}

	public void setSelectedTutorials(List<String> selectedTutorials) {
		this.selectedTutorials = selectedTutorials;
	}

}

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;
	}
}

2. The Views

selectManyCheckbox.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="SelectManyCheckbox Example" />
	</h2>
	<h:outputText value="Select Tutorials:" />
	<h:selectManyCheckbox
		value="#{selectManyCheckboxBean.selectedTutorials}">
		<f:selectItems value="#{selectManyCheckboxBean.tutorials}" var="tutorial"
				itemValue="#{tutorial.tutorialId}" itemLabel="#{tutorial.tutorialDescription}"/>
	</h:selectManyCheckbox>
	<h:commandButton value="Register"
		action="#{selectManyCheckboxBean.register}"></h:commandButton>
</h:form>
</html>

register.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="SelectManyCheckbox Example" /></h2>
		<h:form>
			<h:outputText value="Selected Tutorials: "/>
			<br/>
			<ui:repeat var="tutorial" value="#{selectManyCheckboxBean.selectedTutorials}">
				<h:outputText value="Tutorial Id : #{tutorial}"/>
				<br/>
			</ui:repeat>
		</h:form>
	</f:view>
</html>

3. JSF 2 SelectManyCheckbox Demo

The below snapshots show you the complete example of using selectManyCheckbox component.

JSF 2 SelectManyCheckbox Example 1

JSF 2 SelectManyCheckBox Example 2

Comments

comments

About Amr Mohammed

Speak Your Mind

*