Primefaces Radio Button, Checkbox Example

Filed Under: JSF

Primefaces Radio Button and checkbox are select elements. Below are the primefaces components for different kinds of radio button and checkbox implementations.

  1. SelectBooleanButton
  2. SelectBooleanCheckbox
  3. SelectCheckboxMenu
  4. SelectManyButton
  5. SelectManyCheckbox
  6. SelectManyMenu
  7. SelectOneButton
  8. SelectOneListbox
  9. SelectOneMenu
  10. SelectOneRadio

Let’s explore these components thoroughly and see how can we leverage them into your application.

SelectBooleanButton Basic Info

SelectBooleanButton is used to select a binary decision with a toggle button.

TagSelectBooleanButton
Component Classorg.primefaces.component.selectbooleanbutton.SelectBooleanButton
Component Typeorg.primefaces.component.SelectBooleanButton
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectBooleanButtonRenderer
Renderer Classorg.primefaces.component.selectbooleanbutton.SelectBooleanButtonRenderer

SelectBooleanButton Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
converternullConverter/ StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethod ExprA method expression that refers to a method validationg the input
valueChangeListenernullMethod ExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
onchangenullStringCallback to execute on value change.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.
onLabelnullStringLabel to display when button is selected.
offLabelnullStringLabel to display when button is unselected.
onIconnullStringIcon to display when button is selected.
offIconnullStringIcon to display when button is unselected.

Getting Started With SelectBooleanButton

selectBooleanButton.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px">
	<p:growl id="message"></p:growl>
	<p:outputLabel value="Turn your system:"></p:outputLabel>
		<p:selectBooleanButton offLabel="On" onLabel="Off" value="#{selectBooleanButton.status}" ></p:selectBooleanButton>
		<p:separator></p:separator>
	<p:commandButton value="Display System Status" action="#{selectBooleanButton.displaySystemStatus}" update="message"></p:commandButton>
</h:form>
</html>

SelectBooleanButton.java


package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectBooleanButton {
	private boolean status;

	public boolean isStatus() {
		return status;
	}

	public void setStatus(boolean status) {
		this.status = status;
	}

	public String displaySystemStatus(){
		FacesContext.getCurrentInstance().addMessage(null,
				new FacesMessage("Your System Is: "+(status == true ? "Truned On":"Turned Off")));
		return "";
	}
}

Primefaces SelectBooleanButton - Turned Off View Primefaces SelectBooleanButton - Turned On View

SelectBooleanCheckbox Basic Info

SelectBooleanCheckbox is an extended version of the standard checkbox with theme integration.

TagSelectBooleanCheckbox
Component Classorg.primefaces.component.selectbooleancheckbox.SelectBooleanCheckbox
Component Typeorg.primefaces.component.SelectBooleanCheckbox
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectBooleanCheckboxRenderer
Renderer Classorg.primefaces.component.selectbooleancheckbox.SelectBooleanCheckbox Renderer

SelectBooleanCheckbox Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
converternullConverter/ StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
onchangenullStringCallback to execute on value change.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.
itemLabelnullStringLabel displayed next to checkbox.
tabindexnullStringSpecifies tab order for tab key navigation.

Getting Started With SelectBooleanCheckbox

selectBooleanCheckbox.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px">
	<p:growl id="message"></p:growl>
	<p:outputLabel value="Turn your system:"></p:outputLabel>
		<p:selectBooleanCheckbox value="#{selectBooleanCheckbox.status}" ></p:selectBooleanCheckbox>
		<p:separator></p:separator>
	<p:commandButton value="Display System Status" action="#{selectBooleanCheckbox.displaySystemStatus}" update="message"></p:commandButton>
</h:form>
</html>

SelectBooleanCheckbox.java


package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectBooleanCheckbox {
	private boolean status;

	public boolean isStatus() {
		return status;
	}

	public void setStatus(boolean status) {
		this.status = status;
	}

	public String displaySystemStatus(){
		FacesContext.getCurrentInstance().addMessage(null,
				new FacesMessage("Your System Is: "+(status == true ? "Truned On":"Turned Off")));
		return "";
	}
}

Primefaces SelectBooleanCheckbox - Turned Off View Primefaces SelectBooleanCheckbox - Turned On View

SelectBooleanCheckbox Client Side API

Widget: PrimeFaces.widget.SelectBooleanCheckbox

MethodParamsReturn TypeDescription
check()voidChecks the checkbox.
uncheck()voidUnchecks the checkbox.
toggle()voidToggles check state.
  • PF implicit object is used for controlling the component from the client side. The expression used is PF('WidgetVarValue')

SelectCheckboxMenu Basic Info

SelectCheckboxMenu is a multi select component that displays options in an overlay.

TagSelectCheckboxMenu
Component Classorg.primefaces.component.selectcheckboxmenu.SelectCheckboxMenu
Component Typeorg.primefaces.component.SelectCheckboxMenu
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectCheckboxMenuRenderer
Renderer Classorg.primefaces.component.selectcheckboxmenu.SelectCheckboxMenuRenderer

SelectCheckboxMenu Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
converternullConverter/ StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
onchangenullStringCallback to execute on value change.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.
scrollHeightnullIntegerHeight of the overlay.
onShownullStringClient side callback to execute when overlay is displayed.
onHidenullStringClient side callback to execute when overlay is hidden.
filterfalseBooleanRenders an input field as a filter.
filterMatchModestartsWithStringMatch mode for filtering, valid values are startsWith, contains, endsWith and custom.
filterFunctionnullStringClient side function to use in custom filtering.
caseSensitivefalseBooleanDefines if filtering would be case sensitive.
panelStylenullStringInline style of the overlay.
panelStyleClassnullStringStyle class of the overlay.
appendTonullStringAppends the overlay to the element defined by search expression. Defaults to document body.
tabindexnullStringPosition of the element in the tabbing order.

Getting started with SelectCheckboxMenu

selectCheckboxMenu.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:outputLabel value="Select wanted tutorials:"></p:outputLabel>
		<p:selectCheckboxMenu value="#{selectCheckboxMenu.selectedTutorials}">
			<f:selectItems value="#{selectCheckboxMenu.tutorials}" var="tutorial" itemLabel="#{tutorial}" itemValue="#{tutorial}"></f:selectItems>
		</p:selectCheckboxMenu>
		<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectCheckboxMenu.register}" update="message"></p:commandButton>
</h:form>
</html>

SelectCheckboxMenu.java


package com.journaldev.prime.faces.beans;

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

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectCheckboxMenu {

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

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

	public SelectCheckboxMenu(){

	}

	@PostConstruct
	public void init(){
		this.tutorials = new ArrayList<String>();
		this.tutorials.add("Primefaces");
		this.tutorials.add("Hibernate");
		this.tutorials.add("Spring");
	}

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

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

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

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

	public String register(){
		String message = "";
		for(String s : this.selectedTutorials){
			message = message + s + ",";
		}
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", message));
		return "";
	}
}

Primefaces SelectCheckboxMenu - Initial ViewPrimefaces SelectCheckboxMenu - Register View

SelectCheckboxMenu Filtering

It’s possible for you to make use some sort of filtering against your viewed list. This mechanism will help you got a fast reach into the desired wanted item easily. To make your component applicable to filter its result, just follow below steps:

  • Make sure filter attribute is set to true.
  • Setting your filter mode; startsWith (by default), endsWith and custom.
  • In case you’ve set custom as a mode of your filter you must provide filterFunction attribute which normally associated with a JavaScript function.

selectCheckboxMenu.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:outputLabel value="Select wanted tutorials:"></p:outputLabel>
		<p:selectCheckboxMenu value="#{selectCheckboxMenu.selectedTutorials}" filter="true">
			<f:selectItems value="#{selectCheckboxMenu.tutorials}" var="tutorial" itemLabel="#{tutorial}" itemValue="#{tutorial}"></f:selectItems>
		</p:selectCheckboxMenu>
		<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectCheckboxMenu.register}" update="message"></p:commandButton>
</h:form>
</html>

Primefaces SelectCheckboxMenu - Filter View

SelectCheckboxMenu Ajax Behavior Events

Most of Primefaces’ components have associated in with a lot of Ajax events. The way in which those events can be leveraged is discussed deeply at Ajax Behavior Tutorial where you can get back into. Here’s, a detailed list of Ajax events that you can use against SelectCheckboxMenu.

EventListener ParameterFired
toggleSelectorg.primefaces.event.ToggleSelectEventWhen toggle all checkbox changes

SelectManyButton Basic Info

SelectManyButton is a multi select component using button UI.

TagSelectManyButton
Component Classorg.primefaces.component.selectmanybutton.SelectManyButton
Component Typeorg.primefaces.component.SelectManyButton
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectManyButton
Renderer Classorg.primefaces.component.selectmanybutton.SelectManyButton

SelectManyButton Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
converternullConverter/ StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
onchangenullStringCallback to execute on value change.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.

Getting Started With SelectManyButton

selectManyButton.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:selectManyButton value="#{selectManyButton.selectedTutorials}">
		<f:selectItems value="#{selectManyButton.tutorials}"></f:selectItems>
	</p:selectManyButton>
	<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectManyButton.register}" update="message"></p:commandButton>
</h:form>
</html>

SelectManyButton.java


package com.journaldev.prime.faces.beans;

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

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectManyButton {
	private List<String> tutorials = new ArrayList<String>();

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

	@PostConstruct
	public void init(){
		this.tutorials = new ArrayList<String>();
		this.tutorials.add("Primefaces");
		this.tutorials.add("Hibernate");
		this.tutorials.add("Spring");
	}

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

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

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

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

	public String register(){
		String message = "";
		for(String s : this.selectedTutorials){
			message = message + s + ",";
		}
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", message));
		return "";
	}
}

Primefaces SelectManyButton - Initial ViewPrimefaces SelectManyButton - Register View

SelectManyCheckbox Basic Info

SelectManyCheckbox is an extended version of the standard SelectManyCheckbox with theme integration.

TagSelectManyCheckbox
Component Classorg.primefaces.component.selectmanycheckbox.SelectManyCheckbox
Component Typeorg.primefaces.component.SelectManyCheckbox
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectManyCheckboxRenderer
Renderer Classorg.primefaces.component.selectmanycheckbox.SelectManyCheckboxRenderer

SelectManyChcekbox Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
converternullConverter/St ringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
layoutlineDirectionStringLayout of the checkboxes, valid values are lineDirection, pageDirection and grid.
columns0IntegerNumber of columns in grid layout.
onchangenullStringCallback to execute on value change.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.

Getting Started With SelectManyCheckbox

selectManyCheckbox.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:selectManyCheckbox value="#{selectManyCheckbox.selectedTutorials}">
		<f:selectItems value="#{selectManyCheckbox.tutorials}"></f:selectItems>
	</p:selectManyCheckbox>
	<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectManyCheckbox.register}" update="message"></p:commandButton>
</h:form>
</html>

SelectManyCheckbox.java


package com.journaldev.prime.faces.beans;

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

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectManyCheckbox {

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

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

	public SelectManyCheckbox(){

	}

	@PostConstruct
	public void init(){
		this.tutorials = new ArrayList<String>();
		this.tutorials.add("Primefaces");
		this.tutorials.add("Hibernate");
		this.tutorials.add("Spring");
	}

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

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

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

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

	public String register(){
		String message = "";
		for(String s : this.selectedTutorials){
			message = message + s + ",";
		}
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", message));
		return "";
	}
}

Primefaces SelectManyCheckbox - Initial ViewPrimefaces SelectManyCheckbox - Register View

SelectManyMenu Basic Info

SelectManyMenu is an extended version of the standard SelectManyMenu.

TagSelectManyMenu
Component Classorg.primefaces.component.selectmanymenu.SelectManyMenu
Component Typeorg.primefaces.component.SelectManyMenu
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectManyMenuRenderer
Renderer Classorg.primefaces.component.selectmanymenu.SelectManyMenuRenderer

SelectManyMenu Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
onchangenullStringCallback to execute on value change.
onclicknullStringCallback for click event.
ondblclicknullStringCallback for dblclick event.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.
tabindexnullStringPosition of the input element in the tabbing order.
varnullStringName of iterator to be used in custom content display.
showCheckboxfalseBooleanWhen true, a checkbox is displayed next to each item.
filterfalseBooleanDisplays an input filter for the list.
filterMatchModenullStringMatch mode for filtering, valid values are startsWith (default), contains, endsWith and custom.
filterFunctionnullStringClient side function to use in custom filterMatchMode.
caseSensitivefalseBooleanDefines if filtering would be case sensitive.
scrollHeightnullIntegerDefines the height of the scrollable area
converternullConverter/StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s static text, it must refer to a converter id

Getting Started With SelectManyMenu

selectManyMenu.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:selectManyMenu value="#{selectManyMenu.selectedTutorials}">
		<f:selectItems value="#{selectManyMenu.tutorials}"></f:selectItems>
	</p:selectManyMenu>
	<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectManyMenu.register}" update="message"></p:commandButton>
</h:form>
</html>

SelectManyMenu.java


package com.journaldev.prime.faces.beans;

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

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectManyMenu {

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

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

	public SelectManyMenu(){

	}

	@PostConstruct
	public void init(){
		this.tutorials = new ArrayList<String>();
		this.tutorials.add("Primefaces");
		this.tutorials.add("Hibernate");
		this.tutorials.add("Spring");
	}

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

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

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

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

	public String register(){
		String message = "";
		for(String s : this.selectedTutorials){
			message = message + s + ",";
		}
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", message));
		return "";
	}
}

Primefaces SelectManyMenu - Initial ViewPrimefaces SelectManyMenu - Register View

SelectManyMenu – Custom Content

It’s possible for you to write in your own custom content for every single item. By providing whatever you want of Primefaces/jsf components that enclosed within SelectManyMenu open/end Tags, you can provide your own custom content. Following below sample shows you the same used example with a different images.

selectManyMenu.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:selectManyMenu value="#{selectManyMenu.selectedTutorials}" var="tutorial">
		<f:selectItems value="#{selectManyMenu.tutorials}"/>
		<p:column>
			<p:graphicImage value="/resources/images/#{tutorial}.jpg" width="40"></p:graphicImage>
		</p:column>
		<p:column>
			<p:outputLabel value="#{tutorial}"></p:outputLabel>
		</p:column>
	</p:selectManyMenu>
	<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectManyMenu.register}" update="message"></p:commandButton>
</h:form>
</html>

Primefaces SelectManyMenu - Custom Content View

SelectManyMenu – Filtering

You can make use of filter functionality in SelectManyMenu same as the same usage by SelectCheckboxMenu.

SelectOneButton Basic Info

SelectOneButton is an input component to do a single select.

TagSelectOneButton
Component Classorg.primefaces.component.selectonebutton.SelectOneButton
Component Typeorg.primefaces.component.SelectOneButton
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectOneButtonRenderer
Renderer Classorg.primefaces.component.selectonebutton.SelectOneButtonRenderer

SelectOneButton Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
onchangenullStringCallback to execute on value change.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.
converternullConverter/St ringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id

Getting Started With SelectOneButton

selectOneButton.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:selectOneButton value="#{selectOneButton.selectedTutorial}">
		<f:selectItems value="#{selectOneButton.tutorials}"></f:selectItems>
	</p:selectOneButton>
	<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectOneButton.register}" update="message"></p:commandButton>
</h:form>
</html>

SelectOneButton.java


package com.journaldev.prime.faces.beans;

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

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectOneButton {
	private List<String> tutorials = new ArrayList<String>();

	private String selectedTutorial = "";

	@PostConstruct
	public void init(){
		this.tutorials = new ArrayList<String>();
		this.tutorials.add("Primefaces");
		this.tutorials.add("Hibernate");
		this.tutorials.add("Spring");
	}

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

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

	public String getSelectedTutorial() {
		return selectedTutorial;
	}

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

	public String register(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", this.selectedTutorial));
		return "";
	}
}

Primefaces SelectOneButton - Initial ViewPrimefaces SelectOneButton - Register View

SelectOneListbox Basic Info

SelectOneListbox is an extended version of the standard selectOneListbox component.

TagSelectOneListbox
Component Classorg.primefaces.component.selectonelistbox.SelectOneListbox
Component Typeorg.primefaces.component.SelectOneListbox
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectOneListboxRenderer
Renderer Classorg.primefaces.component.selectonelistbox.SelectOneListBoxRenderer

SelectOneListbox Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
converternullConverter/ StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
onchangenullStringCallback to execute on value change.
onclicknullStringCallback for click event.
ondblclicknullStringCallback for dblclick event.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.
tabindexnullStringPosition of the input element in the tabbing order.
valuenullStringName of iterator to be used in custom content display.
varnullStringName of iterator to be used in custom content display.
filterfalseBooleanDisplays an input filter for the list.
filterMatchModenullStringMatch mode for filtering, valid values are startsWith (default), contains, endsWith and custom.
filterFunctionnullStringClient side function to use in custom filterMatchMode.
caseSensitivefalseBooleanDefines if filtering would be case sensitive.
scrollHeightnullIntegerDefines the height of the scrollable area.

Getting Started With SelectOneListbox

selectOneListbox.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:selectOneListbox value="#{selectOneListBox.selectedTutorial}">
		<f:selectItems value="#{selectOneListBox.tutorials}"></f:selectItems>
	</p:selectOneListbox>
	<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectOneListBox.register}" update="message"></p:commandButton>
</h:form>
</html>

SelectOneListbox.java


package com.journaldev.prime.faces.beans;

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

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectOneListbox {
	private List<String> tutorials = new ArrayList<String>();

	private String selectedTutorial = "";

	@PostConstruct
	public void init(){
		this.tutorials = new ArrayList<String>();
		this.tutorials.add("Primefaces");
		this.tutorials.add("Hibernate");
		this.tutorials.add("Spring");
	}

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

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

	public String getSelectedTutorial() {
		return selectedTutorial;
	}

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

	public String register(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", this.selectedTutorial));
		return "";
	}
}

Primefaces SelectOneListbox - Initial ViewPrimefaces SelectOneListbox - Register View

SelectOneMenu Basic Info

SelectOneMenu is an extended version of the standard SelectOneMenu.

TagSelectOneMenu
Component Classorg.primefaces.component.selectonemenu.SelectOneMenu
Component Typeorg.primefaces.component.SelectOneMenu
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectOneMenuRenderer
Renderer Classorg.primefaces.component.selectonemenu.SelectOneMenuRenderer

SelectOneMenu Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component.
converternullConverter/ StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediate0BooleanWhen set true, process validations logic is executed at apply request values phase for this component.
required0BooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
effectblindStringName of the toggle animation.
effectSpeed400IntegerDuration of toggle animation in milliseconds.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
onchangenullStringClient side callback to execute on value change.
onkeyupnullStringClient side callback to execute on keyup.
onkeydownnullStringClient side callback to execute on keydown.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.
varnullStringName of the item iterator.
heightautoIntegerHeight of the overlay.
tabindexnullStringTabindex of the input.
editablefalseBooleanWhen true, input becomes editable.
filterfalseBooleanRenders an input field as a filter.
filterMatchModestarts WithStringMatch mode for filtering, valid values are startsWith, contains, endsWith and custom.
filterFunctionnullStringClient side function to use in custom filtering.
caseSensitivefalseBooleanDefines if filtering would be case sensitive.
maxlengthnullIntegerNumber of maximum characters allowed in editable selectOneMenu.
appendTonullStringAppends the overlay to the element defined by search expression. Defaults to document body.

Getting Started With SelectOneMenu

selectOneMenu.xhtml


<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:400px">
	<p:growl id="message" showDetail="true" showSummary="true"></p:growl>
	<p:selectOneMenu value="#{selectOneMenu.selectedTutorial}">
		<f:selectItems value="#{selectOneMenu.tutorials}"></f:selectItems>
	</p:selectOneMenu>
	<p:separator></p:separator>
	<p:commandButton value="Register" action="#{selectOneMenu.register}" update="message"></p:commandButton>
</h:form>
</html>

SelectOneMenu.java


package com.journaldev.prime.faces.beans;

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

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class SelectOneMenu {
	private List<String> tutorials = new ArrayList<String>();

	private String selectedTutorial = "";

	@PostConstruct
	public void init(){
		this.tutorials = new ArrayList<String>();
		this.tutorials.add("Primefaces");
		this.tutorials.add("Hibernate");
		this.tutorials.add("Spring");
	}

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

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

	public String getSelectedTutorial() {
		return selectedTutorial;
	}

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

	public String register(){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", this.selectedTutorial));
		return "";
	}
}

Primefaces SelectOneMenu - Register ViewPrimefaces SelectOneMenu - Initial View

SelectOneRadio Basic Info

TagSelectOneRadio
Component Classorg.primefaces.component.selectoneradio.SelectOneRadio
Component Typeorg.primefaces.component.SelectOneRadio
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.SelectOneRadioRenderer
Renderer Classorg.primefaces.component.selectoneradio.SelectOneRadioRenderer

SelectOneRadio Attributes

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingnullObjectAn el expression that maps to a server side UIComponent instance in a backing bean
valuenullObjectValue of the component referring to a List.
converternullConverter/ StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediate0BooleanWhen set true, process validations logic is executed at apply request values phase for this component.
required0BooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validationg the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valuechangeevent
requiredMessagenullStringMessage to be displayed when required field validation fails.
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fields.
widgetVarnullStringName of the client side widget.
disabledfalseBooleanDisables the component.
labelnullStringUser presentable name.
layoutline DirectionStringLayout of the radiobuttons, valid values are lineDirection, pageDirection, custom and grid.
columns0IntegerNumber of columns in grid layout.
onchangenullStringCallback to execute on value change.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the container.
tabindexnullStringSpecifies the tab order of element in tab navigation.
plainfalseBooleanPlain mode displays radiobuttons using native browser rendering instead of themes.

Getting Started With SelectOneRadio

SelectOneRadio usage is same as the using of SelectOneMenu with one difference is that a set of radio controls are rendered rather using of menu control.

Summary

All of Selective components are collected and explored in a one location. A detailed explanations, figures and examples are provided for all of them. Contribute us by commenting below and find downloaded source code.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages