Primefaces Radio Button and checkbox are select elements. Below are the primefaces components for different kinds of radio button and checkbox implementations.
- SelectBooleanButton
- SelectBooleanCheckbox
- SelectCheckboxMenu
- SelectManyButton
- SelectManyCheckbox
- SelectManyMenu
- SelectOneButton
- SelectOneListbox
- SelectOneMenu
- 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.
SelectBooleanButton Attributes
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 "";
}
}
SelectBooleanCheckbox Basic Info
SelectBooleanCheckbox is an extended version of the standard checkbox with theme integration.
SelectBooleanCheckbox Attributes
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 "";
}
}
SelectBooleanCheckbox Client Side API
Widget: PrimeFaces.widget.SelectBooleanCheckbox
- 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.
SelectCheckboxMenu Attributes
| false |
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 "";
}
}
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>
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.
SelectManyButton Basic Info
SelectManyButton is a multi select component using button UI.
SelectManyButton Attributes
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 "";
}
}
SelectManyCheckbox Basic Info
SelectManyCheckbox is an extended version of the standard SelectManyCheckbox with theme integration.
SelectManyChcekbox Attributes
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 "";
}
}
SelectManyMenu Basic Info
SelectManyMenu is an extended version of the standard SelectManyMenu.
SelectManyMenu Attributes
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 "";
}
}
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>
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.
SelectOneButton Attributes
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 "";
}
}
SelectOneListbox Basic Info
SelectOneListbox is an extended version of the standard selectOneListbox component.
SelectOneListbox Attributes
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 "";
}
}
SelectOneMenu Basic Info
SelectOneMenu is an extended version of the standard SelectOneMenu.
SelectOneMenu Attributes
onchangenullStringClient side callback to execute on value change.
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 "";
}
}
SelectOneRadio Basic Info
SelectOneRadio Attributes
| onchange |
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.