Hey guys in this post, we will discuss reading the checkbox options from Managed Bean with Example.
Table of Contents
Overview
- To create a checkbox we use
<h:selectManyCheckbox>tag <h:selectManyCheckbox>takesvalueproperty which will hold the value of the selected checkbox option- We will use
<c:selectItems>tag to add the checkbox option from managed bean <c:selectItems>takes the propertyvalue, which will contains the checkbox options in List, Set etc.,<ui:repeat>is used to loop through the array. It takesvalueproperty, which contains the array and takesvarproperty, 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:
- Check the Complete JavaServer Faces (JSF) Tutorial
- Check the Complete Spring Data JPA Tutorial
- Check the Complete Spring Security Tutorial
- Check the Javascript Projects for Beginners
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 roleOptions;
private String active;
private List statusOptions;
private String[] permissions;
private List permissionOptions;
public Register() {
this.roleOptions = Arrays.asList("User", "Admin", "Power Admin");
this.statusOptions = Arrays.asList("Active", "Inactive");
this.permissionOptions = Arrays.asList("Create", "Read", "Update", "Delete", "All");
}
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 getRoleOptions() {
return roleOptions;
}
public void setRoleOptions(List roleOptions) {
this.roleOptions = roleOptions;
}
public String getActive() {
return active;
}
public void setActive(String active) {
this.active = active;
}
public List getStatusOptions() {
return statusOptions;
}
public void setStatusOptions(List statusOptions) {
this.statusOptions = statusOptions;
}
public String[] getPermissions() {
return permissions;
}
public void setPermissions(String[] permissions) {
this.permissions = permissions;
}
public List getPermissionOptions() {
return permissionOptions;
}
public void setPermissionOptions(List permissionOptions) {
this.permissionOptions = permissionOptions;
}
}
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:selectItems value="#{register.permissionOptions}" />
</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
—
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.
