Hey guys in this post, we will discuss radio buttons in JavaServer Faces with Example.
Table of Contents
Overview
- To create radio button we use
<h:selectOneRadio>
tag <h:selectOneRadio>
takesvalue
property which will hold the value of the selected radio button- We will use
<c:selectItem>
tag to add the radio button items <c:selectItem>
takes the propertyitemValue
, which will hold the item value and takes another propertyitemLabel
, which displays the item name
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<String> roleOptions;
private String active;
public Register() {
roleOptions = Arrays.asList("User", "Admin", "Power Admin");
}
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;
}
}
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:selectItem itemValue="Active" itemLabel="Active" />
<c:selectItem itemValue="Inactive" itemLabel="Inactive" />
</h:selectOneRadio>
<br/><br/>
<h:commandButton value="Login" 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">
<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>
</h:body>
</html>
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.