Read Form Data using Managed Bean in JSF with Example




Hey guys in this post, we will discuss reading the form data using Managed Bean in JSF with Example.

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:

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 to dashboard.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
15

16

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.



Bushan Sirgur

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

Leave a Reply