Binding the Form Elements With the Bean Properties

This example illustrates how to bind the value of the component to the property of the bean or to refer method of the bean from component tag

Binding the Form Elements With the Bean Properties

Binding the Form Elements With the Bean Properties

        

This example illustrates how to bind the value of the component to the property of the bean or to refer method of the bean from component tag, Expression Language (EL) "#{ }" syntax is used for this purpose. For example, #{BeanName.propertyName} can be used to bind the value of the component to the property "propertyName" of the bean "BeanName". #{BeanName.methodName} can be used to refer method "methodName()" of the bean "BeanName", when button is clicked. When page is rendered, the values for the components are accessed using getter methods of the related properties and when the form is submitted by clicking on button the appropriate setter methods are called to set the values to the beans properties and the method methodName() is called on button click.

Source code of login.jsp is as follows:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
 <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Login Page</title>
  </head>
  <body>
  <f:view>
  <h:form id="LoginApplication">
  <h:panelGrid id="lpg" columns="2">
  
  <h:outputText value="User ID"/>
  <h:inputText id="loginid" value="#{LoginForm.loginid}"/>
  <h:outputText value="Password"/>
  <h:inputText id="password" value="#{LoginForm.password}"/>
  <h:outputText value=""/>
  <h:commandButton value="Login" action="#{LoginForm.CheckValidUser}"/>  
  
  </h:panelGrid>
  </h:form>
  </f:view>
 </body>
</html>


In this source code  we have associated values of the UIcomponents to the  backing bean's properties. The bean's properties loginid and  password are bound to the input components. When the user fills values in these components and submit the form, these values are stored in the properties of the bean. So when they are again bound with the component, stored values are used. For example, in "success.jsp" page we have again used these properties values so it considers the values filled in previous page. Command button component's action is associated with CheckValidUser() method of the Bean class. This method  returns a String value either "success" or "fail". This value is set to the action attribute of the commandButton tag. This button works according to the returned value and the navigation rules specified in the "faces-config.xml" file.

success.jsp

<%-- 
  Document : success
  Created on : Sep 11, 2008, 11:49:49 AM
  Author : sandeep kumar suman
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>JSP Page</title>
  </head>
  <body>
  <h2>Congratulations!</h2>
  </body>
</html>


fail.jsp

 

<%-- 
  Document : fail
  Created on : Sep 11, 2008, 1:45:14 PM
  Author : sandeep kumar suman
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>JSP Page</title>
  </head>
  <body>
  <h2>Please try again!</h2>
  </body>
</html>


Download Source Code