JSF Checkbox Example




Hey guys in this post, we will discuss creating checkboxes in JSF with Example.

Overview


  • To create checkboxes we use <h:selectManyCheckbox> tag
  • <h:selectManyCheckbox> takes value property which will hold the value of the selected checkboxes
  • We will use  <c:selectItem> tag to add the checkbox items
  • <c:selectItem> takes the property itemValue, which will hold the option value and takes another property itemLabel, which displays the option name
  • <ui:repeat> is used to loop through the array. It takes value property, which contains the array and takes var property, which contains the single item, when each time loop runs.

Complete example


We will create this example step by step, follow this tutorial till the end

Read More:

Create Dynamic Web Project


To create a dynamic web project, you can read the following tutorial

Create a bean


Create Register.java inside the in.bushansirgur.jsf.beans package and add the following content

package in.bushansirgur.jsf.beans;

import java.util.Arrays;
import java.util.List;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class Register {
	
	private String email;
	
	private String password;
	
	private String role;
	
	private List<String> roleOptions;
	
	private String active;
	
	private List<String> statusOptions;
	
	private String[] permissions; 
	
	public Register() {
		roleOptions = Arrays.asList("User", "Admin", "Power Admin");
		statusOptions = Arrays.asList("Active", "Inactive");
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getRole() {
		return role;
	}

	public void setRole(String role) {
		this.role = role;
	}

	public List<String> getRoleOptions() {
		return roleOptions;
	}

	public void setRoleOptions(List<String> roleOptions) {
		this.roleOptions = roleOptions;
	}

	public String getActive() {
		return active;
	}

	public void setActive(String active) {
		this.active = active;
	}

	public List<String> getStatusOptions() {
		return statusOptions;
	}

	public void setStatusOptions(List<String> statusOptions) {
		this.statusOptions = statusOptions;
	}

	public String[] getPermissions() {
		return permissions;
	}

	public void setPermissions(String[] permissions) {
		this.permissions = permissions;
	}
}

Create Input form


Create register-form.xhtml file inside the WebContent and add the following content

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
		xmlns:h="http://xmlns.jcp.org/jsf/html"
		xmlns:c="http://xmlns.jcp.org/jsf/core">

	<h:head>
		<title>Input Form</title>
	</h:head>
	
	<h:body>
		
		<h:form>
			
			Email: <h:inputText id="email" value="#{register.email}" />
			<br/><br/>
			Password: <h:inputSecret id="password" value="#{register.password}" />
			<br/><br/>
			Role: 
			<h:selectOneMenu value="#{register.role}">
				<c:selectItems value="#{register.roleOptions}"/>
			</h:selectOneMenu>
			<br/><br/>
			Status:
			<h:selectOneRadio value="#{register.active}">
				<c:selectItems value="#{register.statusOptions}" />
			</h:selectOneRadio>
			<br/><br/>
			Permissions:
			<h:selectManyCheckbox value="#{register.permissions}">
				<c:selectItem itemValue="Create" itemLabel="Create" />
				<c:selectItem itemValue="Read" itemLabel="Read" />
				<c:selectItem itemValue="Update" itemLabel="Update" />
				<c:selectItem itemValue="Delete" itemLabel="Delete" />
				<c:selectItem itemValue="All" itemLabel="All" />
			</h:selectManyCheckbox>
			<br/><br/>
			<h:commandButton value="Register" action="dashboard" />
		</h:form>
		
	</h:body>

</html>

Create a response page


Create dashboard.xhtml page inside the WebContent folder and add the following content

<!DOCTYPE html>
<html 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>Dashboard</title>
	</h:head>
	
	<h:body>
		
		<div>
			<span>The Logged in user is: #{register.email}</span>
			<span style="float: right;">Role: #{register.role}</span>
		</div>
		<div>
			<p>Your profile is: #{register.active}</p>
		</div>
		<div>
			<p>You have the following permissions:</p>
			<ul>
				<ui:repeat var="permission" value="#{register.permissions}">
					<li>#{permission}</li>
				</ui:repeat>
			</ul>
		</div>
	</h:body>

</html>

At the top we will add the schema xmlns:ui="http://xmlns.jcp.org/jsf/facelets for iterating the items.

Run the app


To run the application, right click on the project, select Run As -> choose Run on Server

Open the browser, navigate to the URL http://localhost:8080/JSF-hello-world/faces/register-form.xhtml
05

06
That’s it for this post. If you like this post, then please share this with your friends and collogues. Also share this post on your social media profiles as well.



About the author

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

View all posts

Leave a Reply

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