Hey guys in this post, we will discuss reading the form data using Managed Bean in JSF with Example.
Table of Contents
What is managed Bean?
- Managed Bean is a regular Java Bean class registered with JSF. In other words, Managed Beans is a Java bean managed by JSF framework
- Managed bean contains the getter and setter methods, business logic, or even a backing bean
- Managed beans works as Model for UI component. Managed Bean can be accessed from JSF page.
- In JSF 1.2, a managed bean had to register it in JSF configuration file such as facesconfig.xml. From JSF 2.0 onwards, managed beans can be easily registered using annotations such as
@ManagedBean
Requirements for managed beans
To create managed beans we will follow these rules:
- It should have Public no-arg constructor
- It should have contained public setters and getters
- It should have annotated with
@ManagedBean
, in case if you want to use annotations
JSF Expression Language
The JSF expression language is used to:
- Set the properties inside the form
<h:inputText id="email" value="#{login.email}" />
- Read the properties inside the JSF page
<p>The Logged in user is: #{login.email}</p>
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 Login.java
inside the in.bushansirgur.jsf.beans
package and add the following content
package in.bushansirgur.jsf.beans;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Login {
private String email;
private String password;
public Login() {
}
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;
}
}
Create Input form
Create login-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">
<h:head>
<title>Input Form</title>
</h:head>
<h:body>
<h:form>
Email: <h:inputText id="email" value="#{email}" />
<br/><br/>
Password: <h:inputSecret id="password" value="#{password}" />
<br/><br/>
<h:commandButton value="Login" action="dashboard" />
</h:form>
</h:body>
</html>
- At the top we will reference to the JSF HTML components
<h:inputText />
is used to create textbox<h:inputSecret />
is used to create password field- Property
action
is mapped todashboard.xhtml
page
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>
<p>The Logged in user is: #{login.email}</p>
</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/login-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.